/* Hero v2.2 del inicio (elegido por Benja: letras oscuras, Alegreya, niña al centro). Se carga SOLO en la portada (y en el styleguide, donde vive la maqueta).
   Colores: theme.json (custom.color.hero-text-dark #2C363E; naranja = accent-2). Parámetros del comportamiento: assets/js/hero-v2.js (objeto D). */

/* Alegreya 500, subconjunto latín (acentos, ñ, ü, ¿ ¡, signos), OFL 1.1 (assets/fonts/hero/LICENSE-alegreya.txt). swap, sin precarga. */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/hero/alegreya-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.hero { --hero-girl: clamp(9rem, 25vw, 20rem); --girl-w: calc(var(--hero-girl) * var(--girl-scale, 1)); --hv2-orange: var(--wp--preset--color--accent-2); --hv2-ink: #2A343C; /* pizarra del tono de los títulos (#333F48 daría 3.85:1; este llega a 4.53:1 sobre #DD8611). Probados: azul marino #12335A, negro 72 %, teal #024858; original #2C363E (4.40:1) */ --hv2-size: clamp(16px, 1.44vw, 23.4px); --hv2-font: "Alegreya", Georgia, serif; --hv2-faint: 0.18;
	position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(30rem, 47vw, 38rem); overflow: hidden; overflow: clip visible; /* Etapa 16: se recorta a los lados pero no abajo, para que el botón Pausa asome sobre la sección 2 */ background: var(--wp--preset--color--light-darker); margin: 0; }
.hero > * { margin: 0; }

/* Panel naranja: campo de letras (canvas) + parche con la frase (DOM). */
.hero__letters { grid-column: 1; grid-row: 1; position: relative; overflow: hidden; display: block; background: var(--hv2-orange); }
/* Capas del fondo: canvas estáticos (dibujados una vez) que tiemblan con animaciones CSS en el compositor (solo transform). */
.hv2__bg { position: absolute; display: block; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; will-change: transform; transform-origin: 50% 50%; animation: hv2-tr var(--tdur, 10s) ease-in-out var(--tph, 0s) infinite; }
.hero.is-ready .hv2__bg { opacity: 1; }
@keyframes hv2-tr {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(calc(var(--amp, 2.5px) * var(--ax, 1)), calc(var(--amp, 2.5px) * var(--ay, 0))) rotate(calc(var(--rot, 0.8deg) * var(--ar, 1))); }
	50% { transform: translate(calc(var(--amp, 2.5px) * var(--bx, -1)), calc(var(--amp, 2.5px) * var(--by, 1))) rotate(calc(var(--rot, 0.8deg) * var(--br, -1))); }
	75% { transform: translate(calc(var(--amp, 2.5px) * var(--cx, 0)), calc(var(--amp, 2.5px) * var(--cy, -1))) rotate(calc(var(--rot, 0.8deg) * var(--cr, 1))); }
}
.hero.no-tremble .hv2__bg { animation: none; will-change: auto; }
/* Parche de naranja liso (igual al panel, sin oscurecer): rectángulo de la frase + margen sólido, con borde difuso (box-shadow: sombra extendida la mitad del desenfoque,
   así el sólido llega al margen y el difuso se extiende --rf hacia fuera). Solo se anima opacity y transform. Aparece primero; al disolverse se desvanece A LA VEZ que las letras se van. */
.hv2__patch { position: absolute; left: 0; top: 0; width: 22rem; height: 9.5rem; border-radius: 14px; background: var(--hv2-orange); box-shadow: 0 0 var(--rf, 20px) calc(var(--rf, 20px) / 2) var(--hv2-orange); transform: translate(18%, 40%); opacity: 0; pointer-events: none; contain: layout style; --rf: 20px; }
.hv2__patch.is-on { opacity: 1; }
.hv2__patch.is-in { opacity: 1; transition: opacity var(--pm, 400ms) ease; }
.hv2__patch.is-out { opacity: 0; transition: opacity var(--pm, 400ms) ease; }
.hv2__phrase { z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; font: 500 var(--hv2-size) / 1.3 var(--hv2-font); color: var(--hv2-ink); }
.hv2__line { display: block; }
.hv2__w { display: inline-block; white-space: nowrap; }
.hv2__c { display: inline-block; }
/* UNA sola definición de animación (hv2-drift-out / hv2-drift-in, idénticas) para disolverse y para aparecer: la disolución la reproduce hacia adelante y la aparición con direction: reverse (mismos vectores y giros,
   misma duración y escalonado en orden inverso, curva reflejada). Las letras pasan de sólido a la apariencia tenue del fondo y desplazadas, y al revés. */
/* Mismos fotogramas con dos NOMBRES: si salida y entrada compartieran nombre, al pasar de .is-in a .is-out el navegador ACTUALIZA la animación ya terminada en vez de reiniciarla y las letras
   saltarían de golpe al estado final (el hueco que se veía al salir: parche naranja con el campo oculto). Nombres distintos = animación nueva desde el principio. */
@keyframes hv2-drift-out { from { opacity: 1; transform: none; } to { opacity: var(--hv2-faint); transform: translate(var(--ox), var(--oy)) rotate(var(--or)); } }
@keyframes hv2-drift-in { from { opacity: 1; transform: none; } to { opacity: var(--hv2-faint); transform: translate(var(--ox), var(--oy)) rotate(var(--or)); } }
.hv2__patch.is-out .hv2__c { animation: hv2-drift-out var(--ld, 650ms) ease-in var(--e, 0ms) both; }
.hv2__patch.is-in .hv2__c { animation: hv2-drift-in var(--ld, 650ms) ease-in var(--d, 0ms) reverse both; }
.hv2-frozen .hv2__c, .hv2-frozen .hv2__bg { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .hv2__c, .hv2__bg { animation: none !important; } .hv2__patch, .hv2__bg { transition: none; } }

/* Botón Pausa. Etapa 9 (A6): fondo sólido tinta #22272A, letra blanca 15.4:1; sobre el naranja 5.96:1.
   Etapa 16: flota a caballo del borde inferior del Hero (mitad sobre el Hero, mitad sobre la sección 2), alineado a la izquierda con el logo del encabezado
   (mismo margen: el mayor entre el relleno lateral de la página y el sobrante a cada lado del ancho «ancho» del tema; en celular horizontal, además, el área segura).
   Posición absoluta respecto al Hero: no cambia su alto ni empuja nada (CLS 0). Sombra suave para leerse sobre el naranja y sobre el fondo claro de abajo. */
.hv2__pause { position: absolute; z-index: 3; inset-block-end: 0; inset-inline-start: max(var(--wp--style--root--padding-left, 1rem), calc((100% - var(--wp--style--global--wide-size, 70rem)) / 2), env(safe-area-inset-left, 0px)); transform: translateY(50%); display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--wp--custom--touch-target); padding: 0 1rem; border: 0; border-radius: var(--wp--custom--radius--small); background: #22272A; color: #fff; font: 500 0.9375rem / 1 var(--wp--preset--font-family--body); box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 0.35), 0 0 0 0.0625rem rgb(255 255 255 / 0.25); cursor: pointer; }
.hv2__pause[hidden] { display: none; }
.hv2__pause:hover { background: #000; }
.hv2__pause:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--ink); outline-offset: var(--wp--custom--focus--offset); }
.hv2__pause-icon { width: 0.7rem; height: 0.8rem; border-inline: 0.2rem solid currentColor; box-sizing: border-box; }
.hv2__pause.is-paused .hv2__pause-icon { width: 0; height: 0; border: 0; border-block: 0.4rem solid transparent; border-inline-start: 0.7rem solid currentColor; }

/* Texto del Hero (lado claro) y niña al centro. */
.hero__body { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--60); padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) calc(var(--girl-w) / 2 + 1.5rem); background: var(--wp--preset--color--light-darker); text-align: center; }
.hero__body > * { margin: 0; }
.hero__title { color: var(--wp--preset--color--dark-darker); }
.hero__quote { margin: 0; }
.hero__girl { position: absolute; z-index: 2; left: 50%; top: 50%; width: var(--girl-w); height: auto; aspect-ratio: 632 / 887; transform: translate(calc(-50% + var(--girl-dx, 0) * 1%), calc(-50% + var(--girl-dy, 0) * 1%)); pointer-events: none; }
@media (max-width: 47.9375rem) {
	.hero { --hero-girl: 7.5rem; --hv2-strip: 12rem; grid-template-columns: 1fr; grid-template-rows: var(--hv2-strip) auto; min-height: 0; }
	.hero__letters { grid-column: 1; grid-row: 1; }
	/* Etapa 16b: en celular el botón Pausa se ancla al borde inferior de la franja naranja (centro del botón sobre el borde: mitad naranja, mitad gris). La franja mide --hv2-strip (fila 1). Mismo margen izquierdo; sigue sin ocupar espacio (CLS 0). */
	.hv2__pause { inset-block-start: var(--hv2-strip); inset-block-end: auto; transform: translateY(-50%); }
	.hero__body { grid-column: 1; grid-row: 2; padding: 5.5rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); gap: var(--wp--preset--spacing--40); }
	.hero__girl { left: auto; right: var(--wp--preset--spacing--40); top: 6.25rem; transform: none; }
}