/*
Theme Name: Madeo
Theme URI: https://mktpresidente-aysnx.wpcomstaging.com/
Description: Tema hijo de Hello Elementor para el sitio del restaurante Madeo. La maquetación vive en Elementor; este tema solo aporta las variables de marca y los ajustes base.
Author: Presidente
Author URI: https://presidenteicmexico.com/
Template: hello-elementor
Version: 1.2.2
Text Domain: madeo
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: elementor, restaurant
*/

/* -------------------------------------------------------------------------
   Variables de marca — extraídas de MADEO.fig
   Se declaran aquí para que el CSS a medida no dependa de valores sueltos.
   La tipografía y los colores que usa Elementor se gobiernan desde
   Site Settings › Global Colors / Global Fonts, no desde este archivo.
   ------------------------------------------------------------------------- */
:root {
	--madeo-verde: #2a483b;
	--madeo-verde-oscuro: #23382f;
	--madeo-verde-medio: #476256;
	--madeo-negro: #232220;
	--madeo-oro: #eeba45;
	--madeo-oro-oscuro: #897339;
	--madeo-crema: #faf6eb;
	--madeo-blanco: #ffffff;

	--madeo-fuente-display: "Sarina", cursive;
	--madeo-fuente-texto: "Faustina", serif;

	--madeo-ancho-contenido: 1440px;
	--madeo-gap-seccion: 120px;

	/* Fichas de movimiento. Igual que el color y la tipografía viven en las
	   globales del kit, el pulso de la página vive aquí: un solo sitio donde
	   ajustar cómo de rápido y con qué carácter se mueve TODO el sitio.

	   La curva es de salida pura —arranca rápido y frena— porque es la que se
	   lee como "algo que se posa". Nada de rebotes: el movimiento del diseño
	   (el panel de PILARES, el hover de la galería) tampoco rebota. */
	--madeo-dur-corta: 320ms;
	--madeo-dur-media: 600ms;
	--madeo-dur-larga: 900ms;
	--madeo-ease-salida: cubic-bezier(0.22, 0.61, 0.36, 1);
	--madeo-desp: 16px;
}

/* NO usar overflow-x en html/body: aunque sea `clip` y el eje Y quede visible,
   crea contexto de recorte y mata el `position: sticky` del navbar.
   El desbordamiento horizontal se evita en origen — sin trucos de 100vw. */

/* El navbar es `position: sticky` y vive en la plantilla del header, junto con
   el hero de portada. Si ese wrapper forma bloque contenedor, el navbar se
   despega al terminar la plantilla; `display: contents` lo disuelve y el sticky
   se calcula contra el documento. */
.elementor-location-header {
	display: contents;
}

/* Secciones a sangre sin desbordar: `100vw` incluye el ancho de la barra de
   scroll y provoca scroll lateral. Con el contenedor a ancho completo basta. */
.md-sangre,
.md-sangre > .e-con-inner {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* Foco visible y consistente para navegación por teclado. */
:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--madeo-oro);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   ESCALA MÓVIL de los bloques escritos a mano
   -------------------------------------------------------------------------
   La tipografía de los widgets nativos de Elementor la gobiernan las globales
   del kit, que ya declaran su tamaño de móvil (Site Settings › Global Fonts).
   Pero una parte del sitio son widgets HTML con CSS propio —títulos de la
   carta, listas de platillos, filetes, etc.— y esos no pasan por las globales.

   Se centralizan aquí, y no en cada builder, por dos motivos: es un único sitio
   donde ver la escala completa, y el tema se carga en todas las páginas.
   Los valores replican los de las globales equivalentes:
     Faustina 32 -> 22   ·   Faustina 18 -> 15   ·   Sarina 24 -> 20

   Cada selector va prefijado con `.elementor`, y no por gusto: el <style> de
   cada widget se imprime DESPUÉS que la hoja del tema en el documento, así que
   a igualdad de especificidad ganaba él y estas reglas no hacían nada. El
   prefijo las sube de (0,1,1) a (0,2,1) y con eso basta —sin `!important`—.

   NADA de esto toca escritorio: todo vive dentro del media query.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Títulos de sección de la carta (equivalen a la global `secondary`). */
	.elementor .md-tit-cen h2,
	.elementor .md-tit-lat h2,
	.elementor .md-tit-lat.md-claro h3,
	.elementor .md-ci {
		font-size: 22px;
		line-height: 1.2;
	}

	/* Los filetes dorados de los títulos centrados necesitan menos aire. */
	.elementor .md-tit-cen,
	.elementor .md-tit-lat {
		gap: 14px;
	}

	/* Nombre del platillo (equivale a `mdetiq18`). */
	.elementor .md-plato h3 {
		font-size: 15px;
		letter-spacing: 1.2px;
	}

	/* Bajadas y listas se quedan en 16: es el mínimo cómodo de lectura.
	   El margen lateral lo pone la propia bajada: su contenedor no lleva
	   padding —el filete del título que va encima tiene que llegar al borde—
	   y sin esto el texto quedaba pegado a los lados. */
	.elementor .md-intro {
		font-size: 16px;
		padding-inline: 24px;
	}

	/* Palabras en Sarina de los filetes (equivalen a `mddisp24`). */
	.elementor .md-horario-tit em,
	.elementor .md-cierre-tit .md-regla em {
		font-size: 20px;
		padding: 0 14px;
	}

	.elementor .md-cierre-tit .md-kicker {
		font-size: 15px;
		letter-spacing: 1.2px;
	}

	/* Título mixto del INTRO ("mad about MADEO") y carrusel del equipo.
	   Los dos son bloques escritos a mano, así que no pasan por las globales del
	   kit y su escala de móvil tiene que declararse aquí (ver cabecera). */
	.elementor .md-mixto em,
	.elementor .md-mixto span,
	.elementor .md-car-info h3 {
		font-size: 22px;
	}

	.elementor .md-car-puesto {
		font-size: 20px;
	}

	/* Separación entre platillos: 40 era la del lienzo de 1440. */
	.elementor .md-platos,
	.elementor .md-lineas {
		gap: 28px;
	}
}

/* -------------------------------------------------------------------------
   MOVIMIENTO
   -------------------------------------------------------------------------
   Todo el bloque cuelga de DOS condiciones, y las dos importan:

   1. `.md-motion` en <html>, que pone el script de `functions.php` antes del
      primer pintado. Los estados iniciales (opacity:0, scale:0) SOLO existen
      si ese script se ha ejecutado. Si el JS falla, no llega o lo bloquea una
      extensión, no se aplica ni un `opacity:0` y la página se ve entera. Sin
      esta condición, un error de JS dejaría la carta en blanco.

   2. `prefers-reduced-motion: no-preference`. Envolviendo aquí los estados
      OCULTOS —y no anulándolos después— quien pide menos movimiento nunca
      llega a tener nada escondido. Es más seguro que apagar la animación a
      posteriori, que es como el contenido se queda invisible para siempre.

   La clase que reparte el observador es `md-visto`. La lista de selectores que
   observa está en `functions.php`: si se añade aquí un efecto nuevo, hay que
   añadir su clase allí.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* El primitivo: aparecer subiendo. Es el ÚNICO revelado del sitio, y se
	   reutiliza en todos los bloques para que el movimiento se lea como una
	   sola voz y no como una colección de efectos.
	   `--md-retardo` lo pone el observador para escalonar lo que entra junto. */
	.md-motion .md-rev {
		opacity: 0;
		transform: translateY(var(--madeo-desp));
	}

	.md-motion .md-rev.md-visto {
		opacity: 1;
		transform: none;
		transition:
			opacity var(--madeo-dur-media) var(--madeo-ease-salida) var(--md-retardo, 0ms),
			transform var(--madeo-dur-media) var(--madeo-ease-salida) var(--md-retardo, 0ms);
	}

	/* Los filetes dorados se dibujan.

	   Es el gesto más de marca del sitio: el filete es la firma gráfica del
	   diseño, y que se trace solo es contar la marca en vez de decorarla.

	   Crece SIEMPRE alejándose del título, que es el sentido en que se subraya
	   a mano. En los títulos centrados eso son dos filetes abriéndose desde el
	   texto; en los laterales, uno que se estira hacia el borde.

	   `scaleX` sobre un hijo con `flex:1` no reflota nada: la caja sigue
	   ocupando lo mismo, solo cambia lo que se pinta. Cero riesgo de CLS. */
	.md-motion .md-tit-lat > span,
	.md-motion .md-tit-cen > span,
	.md-motion .md-horario-tit > span,
	.md-motion .md-regla > span {
		transform: scaleX(0);
		transform-origin: right center;
	}

	.md-motion .md-tit-cen > span:last-child,
	.md-motion .md-horario-tit > span:last-child,
	.md-motion .md-regla > span:last-child {
		transform-origin: left center;
	}

	.md-motion .md-tit-lat.md-visto > span,
	.md-motion .md-tit-cen.md-visto > span,
	.md-motion .md-horario-tit.md-visto > span,
	.md-motion .md-regla.md-visto > span {
		transform: none;
		transition: transform var(--madeo-dur-larga) var(--madeo-ease-salida) 120ms;
	}

	/* El texto del título aparece primero y los filetes se abren detrás. */
	.md-motion .md-tit-lat > :not(span),
	.md-motion .md-tit-cen > :not(span),
	.md-motion .md-horario-tit > :not(span),
	.md-motion .md-regla > :not(span) {
		opacity: 0;
	}

	.md-motion .md-tit-lat.md-visto > :not(span),
	.md-motion .md-tit-cen.md-visto > :not(span),
	.md-motion .md-horario-tit.md-visto > :not(span),
	.md-motion .md-regla.md-visto > :not(span) {
		opacity: 1;
		transition: opacity var(--madeo-dur-corta) var(--madeo-ease-salida);
	}

	/* El filete VERTICAL del Home (3x100 bajo "il carretto") cae desde arriba.
	   Aquí el elemento observado es el propio filete, no un envoltorio. */
	.md-motion .md-filete {
		transform: scaleY(0);
		transform-origin: center top;
	}

	.md-motion .md-filete.md-visto {
		transform: none;
		transition: transform var(--madeo-dur-larga) var(--madeo-ease-salida);
	}

	/* Las dos fotos del chef entran desde su lado.

	   Por debajo de 768 hacen el revelado normal, y no por ahorrar trabajo: al
	   apilarse ocupan el ancho completo, así que 28px hacia el lado las sacaría
	   de la pantalla y aparecería barra horizontal mientras dura la entrada.

	   Aun de 768 para arriba hay que recortar el contenedor: a 1440 justos la
	   columna izquierda arranca en x=0 y el desplazamiento la sacaría igual. El
	   `:has()` se lo aplica al padre sin tener que marcarlo desde el builder, y
	   de paso las fotos entran desde DETRÁS del borde, que se lee mejor. */
	.md-motion .md-lat-izq,
	.md-motion .md-lat-der {
		opacity: 0;
		translate: 0 var(--madeo-desp);
	}

	.md-motion .md-lat-izq.md-visto,
	.md-motion .md-lat-der.md-visto {
		opacity: 1;
		translate: none;
		transition:
			opacity var(--madeo-dur-media) var(--madeo-ease-salida),
			translate var(--madeo-dur-media) var(--madeo-ease-salida);
	}

	@media (min-width: 768px) {
		.md-motion :has(> .md-lat-izq),
		.md-motion :has(> .md-lat-der) {
			overflow-x: clip;
		}

		.md-motion .md-lat-izq { translate: -28px 0; }
		.md-motion .md-lat-der { translate: 28px 0; }
	}

	/* Los títulos en Sarina se descubren a plumilla.
	   ---------------------------------------------------------------------
	   Es la alternativa a la máquina de escribir. Sarina es una caligráfica
	   con los trazos enlazados: revelarla letra a letra parte esos enlaces y
	   durante toda la animación el título se ve roto, no escribiéndose. Una
	   máscara que barre de izquierda a derecha da la misma lectura —la palabra
	   apareciendo como si se trazara— sin romper ni una letra, sin cursor
	   parpadeante y con el texto entero en el DOM desde el primer momento, que
	   es lo que necesita un lector de pantalla.

	   El barrido se anima interpolando `--md-pluma`, y para que un valor
	   personalizado sea interpolable hay que declararlo con `@property`. Si el
	   navegador no lo soporta, la transición no interpola: el título salta a
	   visible sin barrido. Se pierde el efecto, no el contenido. */
	@supports (mask-image: linear-gradient(90deg, #000 0%, transparent 10%)) {
		.md-motion .md-pluma {
			-webkit-mask-image: linear-gradient(90deg, #000 var(--md-pluma), transparent calc(var(--md-pluma) + 18%));
			mask-image: linear-gradient(90deg, #000 var(--md-pluma), transparent calc(var(--md-pluma) + 18%));
		}

		/* Curva lineal y 1.400ms: este barrido NO debe frenar al final como el
		   resto del movimiento del sitio. Una plumilla avanza a velocidad
		   constante, y con la curva de salida el último tercio del título
		   aparecía casi de golpe. Es la única excepción a la ficha de curva. */
		.md-motion .md-pluma.md-visto {
			--md-pluma: 118%;
			transition: --md-pluma 1400ms linear;
		}
	}
}

/* -------------------------------------------------------------------------
   LOCKUP DEL HERO: Lottie con reserva estática
   -------------------------------------------------------------------------
   El logotipo animado del hero es un Lottie y contiene TODO el lockup —"MADEO /
   RISTORANTE & TERRAZA" más "probar italia / al ras del cielo"—, así que
   sustituye a las tres piezas que había, no solo al logotipo.

   El bloque estático NO se borra, y no es por si acaso: lleva el <h1> de la
   portada, el único de la página. Un Lottie es vectorial y no aporta texto, de
   modo que quitándolo el Home se quedaría sin encabezado para lectores de
   pantalla y para el indexado. Por eso se oculta a la vista pero NO con
   `display:none`, que sí lo sacaría del árbol de accesibilidad.

   Con `prefers-reduced-motion: reduce` se cambian los papeles: fuera el Lottie
   y el bloque estático vuelve a ser el visible. Queda la composición de
   siempre, que es exactamente lo que esa preferencia pide.
   ------------------------------------------------------------------------- */
.md-lockup-fijo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* La intro ya se vio hoy: la portada abre directamente en el navbar.
   La clase la pone un script de `functions.php` en <head>, antes del primer
   pintado; desde el script del propio hero llegaría tarde y se vería un
   parpadeo verde a pantalla completa. */
html.md-intro-vista .md-hero {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.md-lockup-anim {
		display: none;
	}

	.md-lockup-fijo {
		position: static;
		width: 100%;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

/* Interpolable, y por eso declarada. Fuera de los media queries: `@property`
   no puede vivir dentro de uno. */
@property --md-pluma {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

/* Realce del platillo al pasar el ratón.
   -------------------------------------------------------------------------
   NO se escala el texto: ampliar tipografía la emborrona —el rasterizado se
   estira— y abarata el conjunto. En su lugar, el nombre pasa a oro y un filete
   se traza bajo la entrada, que es el mismo gesto que ya hacen los títulos al
   entrar en pantalla. El movimiento del sitio se lee como una sola voz.

   Va tras `(hover: hover) and (pointer: fine)`: en táctil el `:hover` se queda
   pegado tras el toque y el platillo se quedaría subrayado sin motivo.

   Aquí NO hace falta `.md-motion`: un hover no puede dejar contenido oculto.
   Sí queda fuera con `prefers-reduced-motion`, donde la transición se anula y
   el cambio es instantáneo — que es lo correcto: el realce sigue existiendo. */
@media (hover: hover) and (pointer: fine) {
	.md-plato h3 {
		transition: color var(--madeo-dur-corta) var(--madeo-ease-salida);
	}

	.md-plato:hover h3 {
		color: var(--e-global-color-secondary);
	}
}

/* -------------------------------------------------------------------------
   PROFUNDIDAD AL HACER SCROLL
   -------------------------------------------------------------------------
   Movimiento LIGADO a la posición de la barra, no disparado una vez. Va con
   `animation-timeline: view()`: sin listeners de scroll, sin JS y compuesto por
   el navegador.

   No es Baseline —Firefox lo mantiene tras un flag en estable—, así que va
   entero dentro de un `@supports`. El estado por defecto, el que se escribe
   fuera, es el FINAL: donde no hay soporte la foto sencillamente no se mueve y
   la página se ve igual de bien. Se descartó hacerlo con un listener en JS:
   para dar a Firefox un efecto que nadie echa de menos, metería trabajo en el
   hilo principal en cada frame de scroll de TODOS los navegadores.

   Solo de 768 para arriba. En una pantalla de 375 el recorrido es invisible,
   pelea con la física de scroll del sistema y gasta batería; y los aros, allí,
   ya están ocultos.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
		/* Los aros van a un ritmo distinto que la página: suben mientras el
		   resto baja, que es como se lee "esto está más cerca del ojo".

		   Se anima `translate` y NO `transform`. Los aros de la carta y de Il
		   Carretto ya usan `transform: translateY(-50%)` para centrarse
		   verticalmente; `translate` es una propiedad independiente que se
		   compone con ese transform en vez de pisarlo. Con `transform` habría
		   que arrastrar el -50% dentro de cada fotograma y mantener dos
		   variantes de la misma animación, una por patrón de anclaje. */
		.md-aros {
			animation: md-deriva-aros linear both;
			animation-timeline: view();
			animation-range: cover;
		}

		/* ±48px, y no ±20 como en el primer intento.
		   El rango `cover` reparte la animación por TODO el recorrido del
		   elemento, que para un aro de 207px en una ventana de 800 son unos
		   1.000px de scroll. Con ±20 el desplazamiento era del 4% de esa
		   distancia: técnicamente correcto y humanamente invisible. La deriva
		   tiene que medirse contra el recorrido, no contra el elemento. */
		@keyframes md-deriva-aros {
			from { translate: 0 48px; }
			to { translate: 0 -48px; }
		}

		/* Parallax. La foto no se mueve: se mueve una CAPA con la misma foto,
		   sobredimensionada un 9% por arriba y por abajo para que el recorrido
		   no llegue nunca a destapar un borde.

		   `background: inherit` toma la imagen del propio contenedor. Eso
		   resuelve de un golpe los dos inconvenientes de hacerlo con una capa:
		   no hay que repetir la URL aquí —que era perder el control de las
		   imágenes desde el builder— y se respeta la carga diferida de
		   Elementor, porque cuando el fondo del padre entra, el de la capa
		   entra con él.

		   La amplitud sale de una sola ficha, `--md-par`, porque el sobredimensionado
		   y el recorrido tienen que ir atados: si la capa se mueve más de lo que
		   sobra por arriba y por abajo, asoma el borde. El 1.45 es el factor que
		   los mantiene en proporción para cualquier valor hasta el 15%.

		   ±14%, y no ±6% como en el primer intento: en una franja de 320px son
		   126px de punta a punta, tres veces más. Con ±6 el movimiento existía y
		   no se veía, que a efectos prácticos es no existir. */
		.md-parallax {
			--md-par: 14%;
			position: relative;
			overflow: clip;
		}

		.md-parallax::before {
			content: '';
			position: absolute;
			inset: calc(-1.45 * var(--md-par)) 0;
			background: inherit;
			background-size: cover;
			background-position: center center;
			animation: md-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
		}

		@keyframes md-parallax {
			from { translate: 0 calc(-1 * var(--md-par)); }
			to { translate: 0 var(--md-par); }
		}
	}
}

/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;

		/* Una animación ligada al scroll NO se detiene con `animation-duration`:
		   su avance lo marca la posición de la barra, no el tiempo. Hay que
		   desengancharla de la línea de tiempo. */
		animation-timeline: none !important;
	}
}