/* ===================================================================
   HERO DE NAVIDAD 2026 · «Dar las gracias tiene sus beneficios»
   Reemplaza al hero de la órbita en el home mientras dure la campaña (hasta enero).
   Para volver al hero anterior: restaurar el <section class="hero hero--orbit"> de index.html
   desde git y quitar este archivo, js/hero-navidad.js y sus <link>/<script> del index.

   La escena queda fija (sticky) sobre un recorrido de scroll:
     1. Al abrir aparece el KV y después se escribe el lockup (margen alpha, el de la landing
        navidad-gracias) con su línea de apoyo.
     2. Con el scroll el bloque 1 se va y entra el bloque 2 (oferta + botón). Nunca están juntos:
        el 2 espera a que el 1 termine de salir, y al volver arriba pasa lo mismo al revés.
        Cada bloque tiene su botón «Hazlo ya», al mismo destino que «Empieza ya» de la nav (empieza-ya.html).
   La nav no tapa el KV: la escena empieza bajo la franja de anuncio y el KV arranca debajo de la nav
   (--xh-banda); arriba queda una franja con el color de la pared del KV, en la que el borde de la foto
   se funde.
   js/hero-navidad.js pone .xh--go (arranca la escritura), .xh--fase2 (cambio de bloque) y --p
   (progreso del recorrido, de 0 a 1). Sin JS: escena quieta con el bloque 1 (ver <noscript> del index).
   =================================================================== */

@font-face { font-family: "Batica Sans"; src: url("../assets/fonts/BaticaSans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Batica Sans"; src: url("../assets/fonts/BaticaSans-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

.xh {
  --xh-fondo: #2e0811;          /* el vino más oscuro del cuarto (piso y esquinas del KV) */
  --xh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --xh-banda: 100px;            /* alto de la franja sobre el KV: la nav (85 px) y aire */
  --p: 0;
  position: relative; background: var(--xh-fondo); color: #fff;
}
.xh__pista { height: 210svh; }
/* Fija bajo la franja de anuncio (main.js pone --announce-h; 0 si se cerró) */
.xh__fijo { position: sticky; top: var(--announce-h, 0px); height: calc(100svh - var(--announce-h, 0px)); min-height: 540px;
  overflow: hidden; isolation: isolate;
  /* La pared del KV extendida hacia arriba: el borde superior de la foto, muestreado de izquierda a derecha */
  background: linear-gradient(90deg, #3a0712 0%, #2a060c 10%, #210509 20%, #33070e 30%, #4b0a18 40%, #6d1227 50%,
    #891b36 60%, #8d213b 70%, #7d1c37 80%, #551123 90%, #320b14 100%); }

/* ---------- El KV ---------- */
.xh__kv { position: absolute; inset: var(--xh-banda) 0 0 0; z-index: -2; display: block; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px); mask-image: linear-gradient(180deg, transparent 0, #000 64px);
  animation: xh-kv 1.8s var(--xh-ease) 0.05s both; }
.xh__kv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%;
  scale: calc(1 + var(--p) * 0.05); transform-origin: 30% 60%; }
/* Velo: oscurece un poco la pared de la derecha para que el texto respire; sube con el scroll */
.xh__velo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(30, 4, 10, 0) 38%, rgba(30, 4, 10, 0.32) 62%, rgba(30, 4, 10, 0.45) 100%);
  opacity: calc(0.7 + var(--p) * 0.3); }

/* ---------- Texto ---------- */
/* El bloque va en la pared libre: a la derecha del periódico y por encima de la bota (y de los regalos).
   --xh-alto es la altura del centro del bloque, medida sobre la foto (no sobre la franja). */
.xh__copy { --xh-alto: 0.31; position: absolute; left: 57%; width: min(37vw, 680px);
  top: calc(var(--xh-banda) + (100% - var(--xh-banda)) * var(--xh-alto)); translate: 0 -50%;
  display: grid; visibility: hidden; }
.xh--go .xh__copy { visibility: visible; }
.xh__g { grid-area: 1 / 1; align-self: center; }

/* Bloque 1: visible por defecto. Al volver (quitar .xh--fase2) entra después de que el 2 se fue. */
.xh__g--1 { opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity 0.55s ease 0.45s, transform 0.9s var(--xh-ease) 0.45s, filter 0.55s ease 0.45s, visibility 0s linear 0.45s; }
.xh--fase2 .xh__g--1 { opacity: 0; visibility: hidden; transform: translateY(-34px); filter: blur(6px);
  transition: opacity 0.4s ease, transform 0.4s ease-in, filter 0.4s ease, visibility 0s linear 0.4s; }
/* Bloque 2: escondido por defecto; entra 0,45 s después de que el 1 empieza a salir */
.xh__g--2 { opacity: 0; visibility: hidden; transform: translateY(34px);
  transition: opacity 0.4s ease, transform 0.4s ease-in, visibility 0s linear 0.4s; }
.xh--fase2 .xh__g--2 { opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.55s ease 0.45s, transform 0.9s var(--xh-ease) 0.45s, visibility 0s linear 0.45s; }
.xh__g--2 .xh__boton { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.5s ease, translate 0.9s var(--xh-ease); }
.xh:not(.xh--fase2) .xh__g--2 .xh__boton { opacity: 0; translate: 0 18px; }
.xh--fase2 .xh__g--2 .xh__boton { transition-delay: 0s, 0s, 0.6s, 0.6s; }

/* El lockup en margen alpha (lo construye navidad-gracias/js/margen-alpha.js). El <h1> lleva la frase limpia y el
   SVG va al lado (aria-hidden), así buscadores y lectores no leen las letras sueltas del dibujo. Sin JS se ve el <h1>;
   con el SVG listo (.xh--ma) el <h1> queda solo para lectores y buscadores: dice lo mismo que se ve. */
.xh__h1 { margin: 0; font: 400 clamp(2.4rem, 5vw, 4.4rem)/1.04 "Batica Sans", var(--font-display); }
.xh--ma .xh__h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xh .ma { display: block; }
.xh .ma svg { display: block; width: 100%; height: auto; overflow: visible; }
.xh .ma text { font-family: "Batica Sans", var(--font-display); fill: #fff; white-space: pre; text-rendering: geometricPrecision; }
.xh .ma .ma__grande { font-weight: 700; }
.xh .ma .ma__linea { font-weight: 400; }
.xh .ma .ma__hueco text { font-weight: 400; fill: #000; stroke: #000; }

.xh__lede { margin: clamp(1.1rem, 2.2vw, 1.8rem) 0 0; max-width: 34ch; font: 400 clamp(1.08rem, 1.45vw, 1.4rem)/1.5 var(--font-body);
  color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }

.xh__oferta { margin: 0; max-width: 15ch; font: 400 clamp(2.3rem, 4.3vw, 4.4rem)/1.04 "Batica Sans", var(--font-display);
  letter-spacing: -0.01em; text-wrap: balance; }
.xh .grad-text { background-image: linear-gradient(100deg, var(--rosado) 0%, #ff6a9b 45%, var(--rosado) 100%); }
.xh__boton { margin-top: clamp(1.3rem, 2.4vw, 2rem); }
/* Botón blanco, como el del hero de la landing: el degradado tinta a magenta se perdía sobre el vino */
.xh .btn--primary { background: #fff; color: #16101f; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.6); }
.xh .btn--primary:hover { box-shadow: 0 22px 46px -14px rgba(0, 0, 0, 0.7), 0 0 0 4px rgba(253, 149, 193, 0.25); }
.xh .btn--primary::after { background: linear-gradient(120deg, transparent, rgba(253, 149, 193, 0.45), transparent); }

/* Escritura: cada letra del lockup es un <tspan class="tecla"> con su --d (margen-alpha.js, data-teclea) */
.xh--teclea.xh--go .tecla { animation: xh-tecla 1ms linear var(--d) both; }
.xh--teclea:not(.xh--go) .tecla { visibility: hidden; }
.xh--go .xh__lede { animation: xh-sube 0.7s var(--xh-ease) var(--d-lede, 0.4s) both; }
/* El botón del bloque 1 entra después de la línea de apoyo. Anima translate y no transform,
   para no pisar el efecto magnético (interactions.js mueve el botón con transform). */
.xh--go .xh__g--1 .xh__boton { animation: xh-sube-boton 0.7s var(--xh-ease) var(--d-boton, 0.55s) both; }
/* Sin escritura (ya se vio en la sesión): el lockup entra completo con un fundido */
.xh--go:not(.xh--teclea) .xh__titulo { animation: xh-sube 0.8s var(--xh-ease) 0.25s both; }

/* Aviso de que hay más: una línea que baja (solo escritorio y solo en el bloque 1) */
.xh__desliza { position: absolute; left: 50%; bottom: 26px; width: 1px; height: 46px; overflow: hidden; translate: -50% 0;
  background: rgba(255, 255, 255, 0.16); opacity: 0; transition: opacity 0.4s ease; }
.xh__desliza::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 50% 0; animation: xh-desliza 2.2s ease-in-out infinite; }
.xh--go .xh__desliza { opacity: 1; transition-delay: var(--d-desliza, 1.2s); }
.xh--fase2 .xh__desliza { opacity: 0; transition-delay: 0s; }

@keyframes xh-kv { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes xh-tecla { from { visibility: hidden; } to { visibility: visible; } }
@keyframes xh-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes xh-sube-boton { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: none; } }
@keyframes xh-desliza { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Nav sobre la escena: se queda en negativo (vidrio oscuro) mientras el hero está fijo,
   aunque main.js ya le haya puesto .nav--scrolled. hero-navidad.js pone html.xh-sobre. */
html.xh-sobre body[data-page="home"] .nav .nav__inner {
  background: rgba(14, 6, 16, 0.3);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.14) inset;
}
html.xh-sobre body[data-page="home"] .nav .nav__links > a,
html.xh-sobre body[data-page="home"] .nav .nav__trigger,
html.xh-sobre body[data-page="home"] .nav .nav__item:hover .nav__trigger { color: #fff; }
html.xh-sobre body[data-page="home"] .nav .nav__trigger svg { color: rgba(255, 255, 255, 0.72); }
html.xh-sobre body[data-page="home"] .nav .nav__logo-img { filter: brightness(0) invert(1); }
html.xh-sobre body[data-page="home"] .nav .nav__cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.34); }
html.xh-sobre body[data-page="home"] .nav .nav__cta .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); }
html.xh-sobre body[data-page="home"] .nav .nav__burger span { background: #fff; }

/* ---------- Pantallas entre 5:4 y 3:2 (portátiles chicos, tabletas acostadas) ---------- */
@media (max-aspect-ratio: 3/2) and (min-aspect-ratio: 5/4) {
  .xh__copy { left: 58%; width: 38vw; }
}

/* ---------- Celular y pantallas verticales: el texto arriba (bajo la nav) y la foto abajo ----------
   Así la franja de cookies, que aparece abajo en la primera visita, tapa piso y regalos y no el texto.
   --xh-arriba es donde empieza el texto (bajo la nav) y --xh-texto el alto que se le reserva: el lockup crece
   con el ancho y el resto (línea de apoyo y botón) es fijo. El fondo es plano y la foto se funde en él. */
@media (max-aspect-ratio: 5/4) {
  .xh { --xh-arriba: 84px; --xh-texto: calc(27vw + 142px); }
  .xh__pista { height: 200svh; }
  .xh__fijo { background: var(--xh-fondo); }
  .xh__kv { inset: auto 0 0 0; top: calc(var(--xh-arriba) + var(--xh-texto)); -webkit-mask-image: none; mask-image: none; }
  .xh__kv img { object-position: 27% 50%; transform-origin: 30% 60%; }
  .xh__kv::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -1px; height: 64px;
    background: linear-gradient(180deg, var(--xh-fondo) 0%, rgba(46, 8, 17, 0) 100%); }
  .xh__velo { display: none; }
  .xh__copy { left: 20px; right: 20px; width: auto; top: var(--xh-arriba); translate: none; }
  .xh__g { align-self: start; }
  .xh__lede { font-size: 1.02rem; margin-top: 0.95rem; }
  .xh__oferta { font-size: clamp(2.1rem, 9.4vw, 3.2rem); max-width: 13ch; }
  .xh__boton { margin-top: 1.1rem; }
  .xh__desliza { display: none; }
}
@media (max-aspect-ratio: 5/4) and (min-width: 700px) {
  .xh { --xh-arriba: 120px; --xh-texto: 360px; }
  .xh__copy { left: 8vw; right: 8vw; }
  .xh__h1, .xh__lede { max-width: 620px; }
}

/* ---------- Movimiento reducido: sin escritura, sin desplazamientos; el cambio de bloque es un fundido ---------- */
@media (prefers-reduced-motion: reduce) {
  .xh__kv { animation: none; }
  .xh__kv img { scale: none; }
  .xh__g, .xh--fase2 .xh__g, .xh__boton { transform: none !important; filter: none !important; translate: none !important; }
  .xh__desliza { display: none; }
}