/*
 * Esmeeting Evento · movimiento.css
 * Un solo sistema de movimiento para todo el tema. Receta y porqué: wordpress-ai-diseno/references/movimiento-y-transiciones.md
 *
 *   Escala      160 ms (color, foco, pulsación) · 240 ms (cabecera, menús, tarjetas) · 360 ms (aparición al hacer scroll)
 *   Curvas      entra  = ease-out suave        (todo lo que aparece o se acerca)
 *               sale   = ease-in               (todo lo que desaparece)
 *               mueve  = ease-in-out estándar  (cambio de estado: hover, cabecera)
 *               Ninguna sale de [0,1] en su eje Y: sin rebote ni sobrepaso.
 *   Propiedades Solo transform y opacity. Color, fondo y borde (pintura, sin layout) solo en hover y foco.
 *               Nunca height, width, top, margin, padding, grid-template ni «all».
 *   Distancia   12 px al aparecer. Escalón entre hermanos 48 ms, máximo 4 escalones (192 ms).
 *   Estados     espera (oculto, debajo de la pantalla) > visto (transición de entrada) > listo (sin reglas: el elemento vuelve a su CSS normal).
 *               Lo que ya se ha visto no se vuelve a ocultar al subir: no hay nada que se quede a medias.
 *   Sin JS      Nada se oculta desde CSS: el atributo data-ev solo lo pone evento.js.
 */

:root {
	--ev-t1: 160ms;
	--ev-t2: 240ms;
	--ev-t3: 360ms;
	--ev-entra: cubic-bezier(0.2, 0.6, 0.3, 1);
	--ev-sale: cubic-bezier(0.4, 0, 1, 1);
	--ev-mueve: cubic-bezier(0.4, 0, 0.2, 1);
	--ev-dist: 12px;
	--ev-escalon: 48ms;
}

/* El tema padre anima enlaces y botones a 100 ms: se alinea con la escala y se fijan las propiedades
   (con la propiedad inicial «all», poner solo una duración animaría también layout). */
body.esm-evento :is(a, button, input[type="submit"], input[type="button"]):not([class*="cmplz"]) {
	transition-property: color, background-color, border-color, filter;
	transition-duration: var(--ev-t1);
	transition-timing-function: var(--ev-mueve);
}

/* ───────── Aparición al hacer scroll (evento.js pone data-ev) ───────── */
[data-ev="espera"] { opacity: 0; transform: translateY(var(--ev-dist)); }
[data-ev="espera"], [data-ev="visto"] {
	transition: opacity var(--ev-t3) var(--ev-entra) calc(var(--ev-i, 0) * var(--ev-escalon)),
		transform var(--ev-t3) var(--ev-entra) calc(var(--ev-i, 0) * var(--ev-escalon));
}
[data-ev="visto"] { opacity: 1; transform: none; }
/* «listo» no lleva reglas a propósito: el elemento recupera su CSS normal (hover incluido) sin saltos. */

/* ───────── Cabecera fija: sombra al bajar, se aparta al bajar deprisa y vuelve al subir ───────── */
.ev-header { transition: transform var(--ev-t2) var(--ev-mueve); }
.ev-header::after {
	content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
	background: linear-gradient(rgba(16, 24, 40, 0.14), rgba(16, 24, 40, 0));
	opacity: 0; transition: opacity var(--ev-t2) var(--ev-mueve);
}
.ev-header.ev-sombra::after { opacity: 1; }
.ev-header.ev-oculta:not(:focus-within) { transform: translateY(-101%); transition-timing-function: var(--ev-sale); }
html { scroll-padding-top: 6rem; }

/* ───────── Menú móvil: aparece y se va con fundido, sin saltar ───────── */
@media (max-width: 1020px) {
	.ev-js .ev-nav {
		display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
		transition: opacity var(--ev-t2) var(--ev-sale), transform var(--ev-t2) var(--ev-sale), visibility 0s linear var(--ev-t2);
	}
	.ev-js .ev-header.is-open .ev-nav {
		visibility: visible; opacity: 1; transform: none; pointer-events: auto;
		transition: opacity var(--ev-t2) var(--ev-entra), transform var(--ev-t2) var(--ev-entra), visibility 0s;
	}
}

/* ───────── Submenú de escritorio: entra y sale con la misma duración ───────── */
.ev-menu .sub-menu { transition: opacity var(--ev-t1) var(--ev-sale), transform var(--ev-t1) var(--ev-sale), visibility 0s linear var(--ev-t1); }
.ev-menu li:hover > .sub-menu, .ev-menu li:focus-within > .sub-menu {
	transition: opacity var(--ev-t1) var(--ev-entra), transform var(--ev-t1) var(--ev-entra), visibility 0s;
}

/* ───────── Baldosas de logos: sube 2 px, borde de marca y sombra suave (la sombra es opacidad de un pseudoelemento) ───────── */
.ev-logos .wp-block-image { position: relative; transition: transform var(--ev-t2) var(--ev-mueve), border-color var(--ev-t2) var(--ev-mueve); }
.ev-logos .wp-block-image::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	box-shadow: 0 14px 28px -18px rgba(16, 24, 40, 0.4); opacity: 0; transition: opacity var(--ev-t2) var(--ev-mueve);
}
.ev-logos .wp-block-image img { transition: transform var(--ev-t3) var(--ev-mueve); }
@media (hover: hover) {
	.ev-logos .wp-block-image:hover { transform: translateY(-2px); border-color: var(--ev-primary, #0a52c7); }
	.ev-logos .wp-block-image:hover::after { opacity: 1; }
	.ev-logos .wp-block-image:hover img { transform: scale(1.03); }
}
/* Mientras aparece, la baldosa usa la transición de entrada y no la de hover. */
.ev-logos .wp-block-image[data-ev="espera"], .ev-logos .wp-block-image[data-ev="visto"] {
	transition: opacity var(--ev-t3) var(--ev-entra) calc(var(--ev-i, 0) * var(--ev-escalon)), transform var(--ev-t3) var(--ev-entra) calc(var(--ev-i, 0) * var(--ev-escalon));
}

/* Flecha del botón principal de la portada */
.ev-banner-inicio .ev-hero .wp-block-button__link::after { transition: transform var(--ev-t2) var(--ev-mueve); }

/* ───────── Pie: sin margen propio. Cada sección lleva su aire; un margen aquí deja una franja vacía bajo la banda de color. ───────── */
html body.esm-evento .site-footer { margin-top: 0; }

/* ───────── Anclas con desplazamiento suave (solo si el visitante no pidió reducir movimiento) ───────── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ───────── Reducir movimiento: nada se mueve y nada queda oculto ───────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-ev] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ev-header, .ev-header.ev-oculta { transform: none !important; transition: none; }
	.ev-header::after { transition: none; }
	.ev-js .ev-nav, .ev-js .ev-header.is-open .ev-nav { transform: none; transition: none; }
	.ev-logos .wp-block-image, .ev-logos .wp-block-image:hover, .ev-logos .wp-block-image img, .ev-logos .wp-block-image:hover img { transform: none !important; }
}
@media print { [data-ev] { opacity: 1 !important; transform: none !important; } .ev-header { position: static; transform: none !important; } }