/*
Theme Name:   Hello Elementor Child
Theme URI:    https://esthermambrilla.com/
Description:  Tema hijo de Hello Elementor para Esther Mambrilla · Mindfulness (Mentes Viajeras).
Author:       Econectados
Author URI:   https://econectados.es/
Template:     hello-elementor
Version:      1.1.0
Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   1 · Tokens
   ========================================================================== */

:root {
	/* Paleta de marca */
	--em-coral: #F18C8A;
	--em-coral-oscuro: #D9706E;
	--em-coral-suave: #FAD9D8;

	/*
	 * El coral de marca es un color de superficie, no de texto: sobre el beige
	 * se queda en 2,2:1 y sobre él el texto crema en 2,3:1. Para texto de
	 * acento (enlaces activos, rótulos) va esta variante oscura, que da 5:1;
	 * sobre el coral, el texto siempre en grafito.
	 */
	--em-coral-texto: #A34E4C;
	--em-dorado: #F4A950;
	--em-beige: #F9F6F1;
	--em-crema: #FFFDFA;
	--em-grafito: #2E2E2E;
	--em-grafito-claro: #4A4744;
	--em-texto: #4A4744;
	--em-gris: #7A756F;
	--em-borde: #E7DFD5;
	--em-borde-oscuro: #4A4744;

	/* Escala de espaciado, base 4 */
	--em-e1: 4px;
	--em-e2: 8px;
	--em-e3: 12px;
	--em-e4: 16px;
	--em-e6: 24px;
	--em-e8: 32px;
	--em-e12: 48px;
	--em-e16: 64px;
	--em-e24: 96px;

	/* La medida de lectura cómoda para Questrial a 18 px */
	--em-medida: 68ch;

	--em-transicion: 220ms cubic-bezier(.4, 0, .2, 1);
	--em-transicion-lenta: 480ms cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   2 · Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--em-beige);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Cormorant Garamond tiene una cursiva de verdad: la usamos como acento
   dentro de los titulares, que es la firma tipográfica de la casa. */
.elementor-heading-title em,
.elementor-heading-title i {
	font-style: italic;
	font-weight: inherit;
}

/* ==========================================================================
   3 · Superficies del navegador
   Lo que no dibujamos también es diseño.
   ========================================================================== */

::selection {
	background: var(--em-coral-suave);
	color: var(--em-grafito);
}

input,
textarea,
select {
	caret-color: var(--em-coral);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.elementor-button:focus-visible,
.elementor-tab-title:focus-visible {
	outline: 2px solid var(--em-dorado);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Los enlaces dentro de texto corrido llevan su propio subrayado, no el del navegador. */
.elementor-widget-text-editor a {
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	text-decoration-color: var(--em-coral);
	transition: color var(--em-transicion), text-decoration-color var(--em-transicion);
}

.elementor-widget-text-editor a:hover {
	color: var(--em-coral-texto);
	text-decoration-color: currentColor;
}

@supports (scrollbar-color: red blue) {
	html {
		scrollbar-color: var(--em-borde) var(--em-beige);
		scrollbar-width: thin;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   4 · Cabecera
   ========================================================================== */

/*
 * El `sticky` va en el <header> que envuelve la plantilla, no en el contenedor
 * de dentro: un elemento pegajoso sólo puede desplazarse dentro de la caja de
 * su padre, y ese contenedor mide exactamente lo mismo que la cabecera, así
 * que no tenía recorrido y se iba con el scroll.
 */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Al despegarse del inicio, una sombra mínima la separa del contenido. */
.em-header {
	transition: box-shadow var(--em-transicion);
}

.elementor-location-header.is-fijada .em-header {
	box-shadow: 0 6px 24px -18px rgba(46, 46, 46, .6);
}

.em-header .elementor-nav-menu--main .elementor-item::after,
.em-header .elementor-nav-menu--main .elementor-item::before {
	height: 1px;
}

/*
 * Un contenedor de Elementor es `width: 100%` por defecto. Dentro de la fila
 * de la cabecera eso hace que el bloque de menú + CTA se coma el ancho entero
 * y deje el logo en 0 px. Ambos deben dimensionarse por su contenido.
 */
.em-header .em-header-logo,
.em-header .em-header-acciones {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

/* La marca de la hamburguesa es pequeña; el área pulsable no debe serlo. */
.em-header .elementor-menu-toggle {
	min-width: 44px;
	min-height: 44px;
}

/* ==========================================================================
   4b · Menú móvil
   ========================================================================== */

/*
 * Hamburguesa propia, dibujada: tres trazos de distinta longitud con el
 * remate redondeado, en la misma línea fina que el resto de la página.
 */
.em-burger {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-right: -10px;
	color: var(--em-grafito);
	transition: color var(--em-transicion);
}

.em-burger svg {
	width: 26px;
	height: auto;
	overflow: visible;
}

.em-burger path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	transition: transform var(--em-transicion-lenta);
	transform-origin: left center;
}

/* Al pasar por encima, el trazo corto se estira hasta igualar a los otros. */
.em-burger:hover {
	color: var(--em-coral-texto);
}

.em-burger:hover path:nth-child(2) {
	transform: scaleX(1.45);
}

/* --- Panel --- */

/*
 * El panel ocupa la pantalla real (`dvh` descuenta la barra del navegador,
 * que es lo que hacía que el logo se saliera por arriba) y, si aun así no
 * cupiera, desplaza dentro de sí mismo en lugar de recortarse.
 */
.em-menu-movil {
	min-height: 100vh;
	min-height: 100dvh;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.elementor-popup-modal .dialog-message,
.elementor-popup-modal .dialog-widget-content {
	max-height: 100dvh;
}

/*
 * El cierre va primero en el DOM para que reciba el foco al abrir el panel,
 * y se coloca a la derecha visualmente.
 */
.em-menu-cabecera .elementor-widget-html {
	order: 2;
}

.em-cerrar {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--em-grafito);
	cursor: pointer;
	transition: color var(--em-transicion), transform var(--em-transicion);
}

.em-cerrar svg {
	width: 22px;
	height: 22px;
}

.em-cerrar path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}

.em-cerrar:hover {
	color: var(--em-coral-texto);
	transform: rotate(90deg);
}

/* Las entradas del menú: serif grande, separadas por un filete. */
.em-menu-lista .elementor-nav-menu--dropdown {
	background: transparent;
}

.em-menu-lista .elementor-nav-menu--dropdown a.elementor-item {
	border-bottom: 1px solid var(--em-borde);
	padding-inline: 0;

	/* Cómodo para el dedo aunque el texto sea de una sola línea. */
	min-height: 48px;
	display: flex;
	align-items: center;
}

.em-menu-lista .elementor-nav-menu--dropdown li:last-child a.elementor-item {
	border-bottom: 0;
}

.em-menu-contacto .elementor-icon-list-item > a {
	color: inherit;
	min-height: 32px;
	display: flex;
	align-items: center;
}

.em-cerrar,
.em-menu-cabecera .em-cerrar {
	width: 42px;
	height: 42px;
}

/* El anillo de foco sigue la forma del botón, no una caja alrededor. */
.em-burger:focus-visible,
.em-cerrar:focus-visible {
	border-radius: 50%;
	outline-offset: 2px;
}

/* ==========================================================================
   5 · Hero
   ========================================================================== */

/*
 * El vídeo es el único momento de movimiento de la página: Esther caminando
 * de espaldas por la pasarela, que es la metáfora de la marca. Vertical
 * nativo (9:16), sin recortes ni reescalados que lo ensucien.
 */
/*
 * Alto explícito en lugar de `aspect-ratio`: dentro de la columna flex del
 * hero, un alto derivado de la proporción entraba en una resolución
 * circular con el contenedor y ambos colapsaban a cero, dejando el plano
 * recortado en móvil. El encuadre 9:16 lo mantiene el `object-fit` del vídeo.
 */
.em-hero-video {
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;

	/* Del color de la sección: cualquier redondeo subpíxel del recorte pasa
	   desapercibido en lugar de dibujar un marco. */
	background: var(--em-beige);
}

@media (max-width: 1024px) {
	.em-hero-video {
		height: 64vh;
	}
}

@media (max-width: 767px) {
	.em-hero-video {
		height: 58vh;
		min-height: 380px;
	}
}

/*
 * El widget que envuelve el vídeo hereda `height: 100%` de la fila, y como
 * el alto del vídeo lo marca su proporción, el envoltorio colapsaba a cero
 * y el plano quedaba recortado en móvil.
 */
.em-hero .elementor-widget-html,
.em-hero .elementor-widget-html > .elementor-widget-container {
	height: auto;
	align-self: stretch;
}

.em-hero-video video,
.em-hero-video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sin movimiento, el póster se queda quieto y no se descarga el vídeo. */
.em-hero-video video {
	opacity: 0;
	transition: opacity var(--em-transicion-lenta);
}

.em-hero-video video.is-listo {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.em-hero-video video {
		display: none;
	}
}

/*
 * La medida de lectura del texto del hero y de los bloques largos.
 * Elementor 4 dejó de envolver el contenido en .elementor-widget-container,
 * así que la regla contempla las dos formas del marcado: sin la primera,
 * había párrafos leyéndose a 1.280 px (unos 140 caracteres por línea).
 */
.em-medida > *,
.em-medida > .elementor-widget-container > * {
	max-width: var(--em-medida);
}

/* ==========================================================================
   6 · Botones
   El kit los deja rectos; aquí sólo el matiz de interacción.
   ========================================================================== */

.elementor-button {
	transition: background-color var(--em-transicion), color var(--em-transicion),
		border-color var(--em-transicion);
}

/* ==========================================================================
   7 · Bloques de contenido
   ========================================================================== */

/* Lista de "¿Te suena esto?": filete superior por ítem, sin viñetas ni cajas. */
.em-sintomas .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--em-e16);
}

.em-sintomas .elementor-icon-list-item {
	align-items: flex-start;
	padding-block: var(--em-e6);
	border-top: 1px solid var(--em-borde);
}

.em-sintomas .elementor-icon-list-icon {
	display: none;
}

.em-sintomas .elementor-icon-list-text {
	padding-inline-start: 0 !important;
}

@media (max-width: 880px) {
	.em-sintomas .elementor-icon-list-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Misma lista, a una sola columna: para «qué incluye» dentro de una columna. */
.em-lista-linea .elementor-icon-list-item {
	align-items: flex-start;
	padding-block: 16px;
	border-top: 1px solid var(--em-borde);
}

.em-lista-linea .elementor-icon-list-icon {
	display: none;
}

.em-lista-linea .elementor-icon-list-text {
	padding-inline-start: 0 !important;
}

/*
 * Páginas legales: son texto largo y denso, así que necesitan jerarquía
 * propia dentro de un único bloque de texto.
 */
.em-legal-texto h2 {
	font-size: 26px;
	margin: 2.4em 0 .7em;
}

.em-legal-texto h3 {
	font-size: 21px;
	margin: 1.8em 0 .5em;
}

.em-legal-texto > *:first-child {
	margin-top: 0;
}

.em-legal-texto ul {
	margin: 0 0 1.4em 1.1em;
	list-style: none;
}

.em-legal-texto li {
	position: relative;
	margin-bottom: .6em;
}

.em-legal-texto li::before {
	content: "";
	position: absolute;
	left: -1.1em;
	top: .82em;
	width: 5px;
	height: 1px;
	background: var(--em-coral);
}

.em-legal-texto kbd {
	font-family: inherit;
	font-size: .9em;
	background: var(--em-beige);
	border: 1px solid var(--em-borde);
	border-radius: 2px;
	padding: 1px 6px;
}

/* Vías de contacto: una bajo otra, separadas por filete. */
.em-via {
	border-top: 1px solid var(--em-borde);
}

.em-via a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--em-coral);
	padding-bottom: 2px;
	transition: color var(--em-transicion), border-color var(--em-transicion);
}

.em-via a:hover {
	color: var(--em-coral-texto);
	border-color: currentColor;
}

/*
 * Formulario: Fluent Forms trae su propio aspecto por defecto. Aquí se
 * alinea con la línea de la casa — campos sin caja, sólo filete inferior.
 */
.em-formulario .ff-el-group {
	margin-bottom: 22px;
}

.em-formulario .ff-el-input--label label {
	font-family: Questrial, sans-serif;
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--em-gris);
	font-weight: 400;
}

.em-formulario input[type="text"],
.em-formulario input[type="email"],
.em-formulario textarea {
	font-family: Questrial, sans-serif;
	font-size: 17px;
	color: var(--em-grafito);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--em-borde);
	border-radius: 0;
	padding: 12px 0;

	/* Alto mínimo cómodo para el dedo, no sólo para el cursor. */
	min-height: 46px;
	box-shadow: none;
	transition: border-color var(--em-transicion);
}

.em-formulario input[type="text"]:focus,
.em-formulario input[type="email"]:focus,
.em-formulario textarea:focus {
	border-bottom-color: var(--em-coral);
	box-shadow: none;
	outline: none;
}

.em-formulario ::placeholder {
	color: #B5AFA8;
}

.em-formulario .ff-el-form-check-label {
	font-family: Questrial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: var(--em-texto);
}

.em-formulario .ff-el-form-check-label a {
	color: var(--em-grafito);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.em-formulario .ff-btn-submit {
	font-family: Questrial, sans-serif;
	font-size: 12px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	padding: 19px 34px;
	min-height: 48px;
	border-radius: 2px;
	border: 0;
	cursor: pointer;
	transition: background-color var(--em-transicion), color var(--em-transicion);
}

.em-formulario .ff-el-is-error .ff-el-form-control {
	border-bottom-color: var(--em-coral-texto);
}

.em-formulario .text-danger,
.em-formulario .error {
	font-family: Questrial, sans-serif;
	font-size: 13px;
	color: var(--em-coral-texto);
}

.em-formulario .ff-message-success {
	font-family: Questrial, sans-serif;
	background: var(--em-coral-suave);
	border: 0;
	border-left: 1px solid var(--em-coral);
	color: var(--em-grafito);
	padding: 20px 24px;
}

/* El mapa hereda el trato del resto de imágenes: recto y sin marco. */
.em-mapa iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
	filter: grayscale(.35);
	transition: filter var(--em-transicion-lenta);
}

@media (max-width: 767px) {
	.em-mapa iframe {
		height: 300px;
	}
}

.em-mapa:hover iframe {
	filter: grayscale(0);
}

/* Valores: rejilla de filetes, sin viñetas ni cajas. */
.em-valor {
	border-top: 1px solid var(--em-borde);
}

/* Catálogo de programas: cada entrada separada por un filete, sin caja. */
.em-programa {
	border-top: 1px solid var(--em-borde);
}

.em-programa img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	width: 100%;

	/*
	 * PRUEBA · Cada entrada redondea una esquina distinta, rotando cada
	 * cuatro. Da un aire manual sin necesidad de añadir ningún adorno.
	 */
	border-radius: 90px 3px 3px 3px;
}

.em-programa:nth-of-type(4n + 2) img {
	border-radius: 3px 90px 3px 3px;
}

.em-programa:nth-of-type(4n + 3) img {
	border-radius: 3px 3px 3px 90px;
}

.em-programa:nth-of-type(4n + 4) img {
	border-radius: 3px 3px 90px 3px;
}

/* La descripción no debe estirarse a todo el ancho de la fila. */
.em-programa .elementor-widget-text-editor p {
	max-width: 62ch;
}

/*
 * Entradas de servicio y testimonios: sin fondo, sin sombra y sin radio.
 * La foto y el filete separan; no hace falta una caja alrededor.
 */
.em-entrada .elementor-widget-image img {
	transition: filter var(--em-transicion-lenta), transform var(--em-transicion-lenta);
}

.em-entrada:hover .elementor-widget-image img {
	transform: scale(1.015);
}

.em-testimonio {
	border-top: 1px solid var(--em-borde);
	padding-top: var(--em-e6);
}

/* Retrato en arco: eco de la curva de la colina del logotipo.
   La doble clase gana al `.elementor-widget-image img` de Elementor. */
.em-arco.elementor-widget-image img {
	border-radius: 50vw 50vw 2px 2px;
}

/*
 * Portada de página interior: la foto se recorta a vertical para que tenga
 * el mismo peso que la columna de texto. Con la proporción original las
 * apaisadas quedaban flotando en medio de mucho aire.
 */
@media (min-width: 768px) {
	.em-portada .elementor-widget-image img {
		aspect-ratio: 4 / 5;
		object-fit: cover;
		width: 100%;
	}
}

/* Banda oscura con la cita. */
.em-banda-cita .elementor-heading-title {
	font-style: italic;
}

/*
 * PRUEBA · Precio destacado, en la línea de la referencia que pasó el
 * cliente: la cifra grande en serif y la unidad pequeña al lado.
 */
.em-precio .elementor-heading-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.em-precio-cifra {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 46px;
	font-weight: 300;
	line-height: 1;
	color: var(--em-grafito);
}

.em-precio-unidad {
	font-family: Questrial, sans-serif;
	font-size: 13px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--em-gris);
}

/* En móvil la unidad larga («la sesión · lunes…») no cabe al lado de la cifra. */
@media (max-width: 767px) {
	.em-precio .elementor-heading-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* PRUEBA · Numeral grande en los pasos, en lugar del rótulo «Paso N». */
.em-numero .elementor-heading-title {
	line-height: .9;
}

/*
 * PRUEBA · FAQ a dos columnas. Cada columna es un acordeón independiente,
 * así abrir una pregunta no desplaza las de al lado.
 */
.em-faq-columnas .em-faq .e-n-accordion-item-title {
	padding-right: var(--em-e4);
}

/*
 * Las dos columnas se reparten el ancho disponible sea cual sea el contenedor:
 * con anchos fijos en % más el hueco entre columnas no siempre caben y se van
 * una debajo de otra. Sólo de tableta hacia arriba: por debajo se apilan.
 */
@media (min-width: 881px) {
	.em-faq-columnas > .e-con {
		flex: 1 1 0;
		min-width: 0;
	}
}

@media (max-width: 880px) {
	.em-faq-columnas {
		flex-direction: column;
	}
}

/*
 * Acordeón de FAQ: filetes finos, sin marco de caja.
 * Widget «acordeón» nuevo de Elementor, que monta cada pregunta como un
 * <details>/<summary> en vez de los <div> del antiguo.
 */
.em-faq .e-n-accordion-item {
	border: 0;
	border-bottom: 1px solid var(--em-borde);
	border-radius: 0;
	background: none;
}

.em-faq .e-n-accordion-item-title {
	padding: var(--em-e6) 0;
	border: 0;
	background: none;

	/* Fila completa pulsable, no sólo la línea de texto. */
	min-height: 56px;
	align-items: center;
}

.em-faq .e-n-accordion-item-title::-webkit-details-marker,
.em-faq .e-n-accordion-item-title::marker {
	display: none;
	content: '';
}

.em-faq .e-n-accordion-item-title-text {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--em-coral-texto);
	transition: color var(--em-transicion);
}

.em-faq .e-n-accordion-item-title-icon,
.em-faq .e-n-accordion-item-title-icon svg {
	color: var(--em-coral-texto);
	fill: currentColor;
	transition: color var(--em-transicion);
}

/* Abierta: la pregunta pasa a grafito, como en el diseño original. */
.em-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-text,
.em-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon,
.em-faq .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon svg {
	color: var(--em-grafito);
}

.em-faq .e-n-accordion-item > .e-con {
	padding: 0 0 var(--em-e6);
	max-width: var(--em-medida);

	/* El widget nuevo enmarca la respuesta; aquí va sin caja. */
	border: 0;
	border-radius: 0;
	background: none;
	--border-style: none;
	--border-radius: 0;
}

.em-faq .e-n-accordion-item .elementor-widget-text-editor {
	font-family: 'Questrial', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.8;
	color: var(--em-texto);
}

/* Estrellas: trazado propio, no asteriscos ni caracteres unicode. */
.em-estrellas {
	display: flex;
	gap: 3px;
	color: var(--em-dorado);
}

.em-estrellas svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}

/* ==========================================================================
   8 · Pie
   ========================================================================== */

.em-footer a {
	transition: color var(--em-transicion);
}

/* Los enlaces de las listas del pie heredan el color del ítem, no el del kit. */
.em-lista-pie .elementor-icon-list-item > a {
	color: inherit;
}

/*
 * Holgura suficiente para el dedo sin estirar el pie: el alto mínimo se
 * consigue con relleno, no separando las filas entre sí.
 */
@media (max-width: 1024px) {
	.em-lista-pie .elementor-icon-list-item > a {
		min-height: 36px;
		display: flex;
		align-items: center;
	}
}

.em-footer .em-credito a {
	color: #A9A29A;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
}

.em-footer .em-credito a:hover {
	color: var(--em-dorado);
}

/*
 * La franja de Kit Digital es obligatoria por la ayuda y se sirve en su
 * versión monocroma blanca, que es la que admiten las guías del programa
 * sobre fondo oscuro.
 */
.em-kit-logos img {
	opacity: .92;
}

/* ==========================================================================
   9 · Botones flotantes: WhatsApp + subir arriba
   ========================================================================== */

.em-flotantes {
	position: fixed;
	right: var(--em-e6);
	bottom: var(--em-e6);
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--em-e3);
}

.em-flotantes .em-wa,
.em-flotantes .em-arriba {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;

	/* El kit de Elementor da relleno a cualquier <button>, y eso deformaba
	   el círculo hasta 76×50. Aquí manda la medida, no el relleno. */
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--em-grafito);
	color: var(--em-crema);
	box-shadow: 0 6px 20px -8px rgba(46, 46, 46, .5);
	transition: background-color var(--em-transicion), color var(--em-transicion),
		opacity var(--em-transicion), visibility var(--em-transicion),
		transform var(--em-transicion);
}

.em-flotantes svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.em-flotantes .em-wa {
	order: 2;
}

.em-flotantes .em-wa:hover,
.em-flotantes .em-arriba:hover {
	background: var(--em-dorado);
	color: var(--em-grafito);
}

.em-flotantes .em-arriba {
	order: 1;

	/* Oculto hasta que se hace scroll; lo activa el JS del tema hijo. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
}

.em-flotantes .em-arriba.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (max-width: 767px) {
	.em-flotantes {
		right: var(--em-e4);
		bottom: var(--em-e4);
	}

	.em-flotantes .em-wa,
	.em-flotantes .em-arriba {
		width: 46px;
		height: 46px;
	}
}

/*
 * Testimonios: los dos vídeos son verticales (9:16). A ancho de columna el
 * marco pasaba de 1.000 px de alto en escritorio, más que la pantalla de un
 * portátil, y no se veía la persona entera. Se acota el ancho para que el
 * recuadro quepa de una vez.
 */
@media (min-width: 881px) {
	.em-video-vertical .elementor-wrapper {
		max-width: 340px;
	}
}

/* El aviso de cookies de Complianz no debe taparlos. */
#cmplz-cookiebanner-container {
	z-index: 300;
}

/*
 * Complianz 7.5.2 ofusca el correo de contacto de los documentos legales
 * metiendo un dominio falso en un <span>… y no incluye la regla que lo
 * oculta, así que el correo salía como «hola@ex.comesthermambrilla.com».
 */
.cmplz-fmail-domain {
	display: none;
}

/* ==========================================================================
   10 · Modificaciones v1 (15/09/2026)
   ========================================================================== */


/* Online · la pregunta de dudas y su botón, en una línea que se parte en móvil. */
.em-dudas {
	border-top: 1px solid var(--em-borde);
}

/* Sobre mí · el pensamiento propio, destacado como una cita. */
.em-pensamiento {
	margin: 1.4em 0;
	padding: 0 0 0 var(--em-e6);
	border: 0;
	border-left: 1px solid var(--em-coral);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 30px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	color: var(--em-grafito);
}

@media (max-width: 767px) {
	.em-pensamiento {
		font-size: 25px;
	}
}

/*
 * Sobre mí · foto de niña: el original corta las piernas en seco. Bordes
 * redondeados y un fundido en la parte baja para que el corte no se note.
 */
.em-suave img {
	border-radius: 24px;
	-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

/* Sobre mí · foto de formación: una sola esquina amplia, como los programas. */
.em-esquina img {
	border-radius: 3px 120px 3px 3px;
}

/* ==========================================================================
   11 · Animaciones de entrada
   Sólo se ocultan si el JS está activo (clase `em-js` en <html>), así que sin
   JS el contenido se ve siempre. Opacidad y transformación, nada más.
   ========================================================================== */

.em-js .em-revelar {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity 800ms cubic-bezier(.22, 1, .36, 1),
		transform 800ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--em-retardo, 0ms);
	will-change: opacity, transform;
}

.em-js .em-revelar.elementor-widget-image {
	transform: translate3d(0, 0, 0) scale(.97);
}

/* «¿Te suena esto?»: las frases entran alternando desde un lado y el otro. */
.em-js .em-entrada-lados .elementor-icon-list-item.em-revelar:nth-child(odd) {
	transform: translate3d(-48px, 0, 0);
}

.em-js .em-entrada-lados .elementor-icon-list-item.em-revelar:nth-child(even) {
	transform: translate3d(48px, 0, 0);
}

.em-js .em-revelar.is-visible,
.em-js .em-entrada-lados .elementor-icon-list-item.em-revelar.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.em-js .em-revelar,
	.em-js .em-entrada-lados .elementor-icon-list-item.em-revelar {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Las frases que entran desde los lados no deben asomar fuera de la lista
   (en móvil provocaban un scroll horizontal momentáneo). */
.em-entrada-lados {
	overflow-x: clip;
}

/* Pestaña «Gestionar consentimiento» de Complianz, en la línea de la casa. */
#cmplz-manage-consent .cmplz-manage-consent {
	font-family: Questrial, sans-serif;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--em-grafito);
	background: var(--em-crema);
	border: 1px solid var(--em-borde);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	box-shadow: none;
	padding: 8px 16px;
}

#cmplz-manage-consent .cmplz-manage-consent:hover {
	color: var(--em-coral-texto);
}

/* ==========================================================================
   11 · Modificaciones v2 (25/09/2026)
   ========================================================================== */

/*
 * Online · el bloque de neurociencia abre ahora la sección y va en un panel
 * crema sobre el beige: el cambio de superficie es lo que llama la atención,
 * sin recurrir a un color fuerte. La esquina ancha es la misma figura que
 * usan las fichas de programa y la foto de Sobre mí.
 */
.em-neuro-caja {
	padding: var(--em-e12) var(--em-e12) var(--em-e8);
	background: rgba(241, 140, 138, .13);
	border: 1px solid rgba(163, 78, 76, .16);
	border-radius: 4px 72px 4px 4px;
}

.em-neuro-caja .em-lema {
	margin: 0 0 var(--em-e8);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--em-grafito);
}

.em-neuro-caja .em-lema em {
	color: var(--em-grafito);
}

/* Los tres efectos, en columnas separadas por filetes: se leen de un vistazo. */
.em-neuro-efectos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 0 var(--em-e8);
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(46, 46, 46, .14);
	border-bottom: 1px solid rgba(46, 46, 46, .14);
}

.em-neuro-efectos li {
	padding: var(--em-e6) var(--em-e6) var(--em-e6) 0;
	font-family: 'Questrial', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	color: var(--em-texto);
}

.em-neuro-efectos li + li {
	padding-left: var(--em-e6);
	border-left: 1px solid rgba(46, 46, 46, .14);
}

.em-neuro-cierre {
	margin: 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 23px;
	font-style: italic;
	line-height: 1.35;
	color: var(--em-grafito);
}

@media (max-width: 1024px) {
	.em-neuro-caja {
		padding: var(--em-e8);
	}

	.em-neuro-caja .em-lema {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.em-neuro-caja {
		padding: var(--em-e8) var(--em-e6);
		border-radius: 4px 48px 4px 4px;
	}

	.em-neuro-caja .em-lema {
		margin-bottom: var(--em-e6);
		font-size: 27px;
	}

	.em-neuro-efectos {
		grid-template-columns: 1fr;
		margin-bottom: var(--em-e6);
	}

	.em-neuro-efectos li {
		padding: var(--em-e4) 0;
	}

	.em-neuro-efectos li + li {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid rgba(46, 46, 46, .14);
	}

	.em-neuro-cierre {
		font-size: 21px;
	}
}