/* ══════════════════════════════════════════════════════════════════
   MERAK EVENTOS MTY — SISTEMA DE DISEÑO COMPARTIDO
   ──────────────────────────────────────────────────────────────────
   Lo comparten index.html y resenas.html (experiencias.html y tour.html
   se retiraron el 2026-09-24): tokens,
   reset, tipografía, botones, navegación, footer, dock y reveals. Lo
   específico de cada página vive en su propio <style>, para que
   ninguna cargue reglas de secciones que no tiene.

   MOBILE FIRST — SIN EXCEPCIONES
   Todo bloque arranca escrito para pantalla chica; las media queries
   solo AGREGAN (min-width). Si algo se ve mal en móvil, se arregla en
   la regla base, nunca con un parche dentro de un max-width.
   ══════════════════════════════════════════════════════════════════ */

/* Envoltorio de contenido de cualquier página: se mantiene por encima
   del hilo del scroll (z-index 5). Ver "CONTRATO DE CAPAS" en el CSS
   de cada página. */
.page-inner{position:relative;z-index:6;isolation:isolate}

/* ══════════════════════════════════════════════════════════════════
   MERAK EVENTOS MTY — SISTEMA DE DISEÑO
   ──────────────────────────────────────────────────────────────────
   Concepto: "la luz que se queda". El salón se reconoce por dos cosas
   — el techo de luces cálidas y el piso espejo LED — así que toda la
   paleta es oro sobre negro cálido, con marfil como contrapunto
   (manteles, sillas Chiavari, vajilla). Nada de grises fríos.

   ORDEN DE LECTURA
   1. Tokens (:root)            5. Secciones, en orden de aparición
   2. Reset + base              6. Footer / dock / flotantes
   3. Tipografía y utilidades   7. Reveals
   4. Nav                       8. Nota de movimiento

   MOBILE FIRST — SIN EXCEPCIONES
   Todo bloque arranca escrito para pantalla chica; las media queries
   solo AGREGAN (min-width). Si algo se ve mal en móvil, se arregla en
   la regla base, nunca con un parche dentro de un max-width.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marca ──────────────────────────────────────────────────────
     --primary y --accent NO se pueden renombrar: los shaders Silk
     (Espacios) y Waves (Ubicación) los leen de :root en tiempo de
     carga para derivar su color. Ver esos scripts al final. */
  --primary:   #8A6A3A;   /* bronce cálido — letras MERAK del salón */
  --accent:    #C9A24B;   /* dorado satinado — letrero y detalles    */
  /* Bronce profundo SOLO para texto chico sobre crema: --primary ahí da
     4.0-4.5:1 y no pasa AA en 11px. Mismo tono, más oscuro. */
  --primary-ink:#6B4F26;

  --gold:      #C9A24B;
  --gold-soft: #E3C282;   /* hairlines y texto chico sobre oscuro    */
  --gold-pale: #F2E2BC;   /* highlights y degradados de título       */

  --ink:       #0A0805;   /* negro cálido base                       */
  --ink-2:     #12100A;
  --ink-3:     #1C1710;
  --cream:     #F7F2E8;
  --cream-2:   #EDE3D0;
  --white:     #FFFFFF;
  --wa:        #25D366;

  /* Escala de énfasis del texto — no inventar rgba sueltos por regla */
  --on-dark-1: rgba(255,255,255,.94);
  --on-dark-2: rgba(255,255,255,.70);
  --on-dark-3: rgba(255,255,255,.54);
  --on-dark-4: rgba(255,255,255,.26);
  --hair-dark: rgba(255,255,255,.10);
  --on-lt-1:   rgba(10,8,5,.92);
  --on-lt-2:   rgba(10,8,5,.70);
  --on-lt-3:   rgba(10,8,5,.62);
  --hair-lt:   rgba(10,8,5,.13);

  --font-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Ritmo ── */
  /* Más contenido (2026-09-30): el cliente vio el sitio "desordenado" y con
     cara de salón para eventos enormes. Columna y aire más chicos = un
     espacio recogido. Antes: --wrap 1220px. El aire vertical se recortó el
     mismo día y el cliente lo vio "amontonado": volvió a ser generoso
     (hasta 156px), más que el original de 148px. */
  --wrap:  1120px;
  --pad-x: clamp(20px, 5vw, 64px);
  --pad-y: clamp(88px, 11vw, 156px);
  --pad:   var(--pad-y) var(--pad-x);

  /* ── Vidrio líquido ──
     Receta única para botones y tarjetas: fondo translúcido + blur y
     saturación + box-shadow en capas (highlight arriba, sombra
     abajo). NO se usa feDisplacementMap dentro de backdrop-filter:
     Chrome no lo soporta de forma confiable e invalida la propiedad
     entera. El "vidrio" aquí es el borde y el realce, no la
     transparencia sola. */
  --glass-blur: 16px;
  --glass-sat:  155%;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* Una sola familia de curvas para todo el sitio */
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* Grano declarado UNA vez. Antes este data-URI se repetía en 6
     reglas distintas (≈2 KB de CSS duplicado). */
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ══════════════════════════ RESET ══════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:hidden SOLO en <html>, nunca también en <body>: si ambos
   lo declaran, la propagación del overflow del body hacia el root deja
   de aplicar y <body> pasa a ser su propio contenedor de scroll. Eso
   rompe position:sticky en TODA la página (el scrollport de referencia
   pasa a ser body, que nunca se mueve) — y con ello el pin del hero.
   Regresión conocida: no volver a agregarlo en body. */
html{
  overflow-x:hidden;-webkit-text-size-adjust:100%;
  scrollbar-width:thin;scrollbar-color:rgba(201,162,75,.35) transparent;
  /* overscroll-behavior-y:none (2026-10-07): corta el "rebote" en
     cadena. Sin esto, al llegar al tope o al fondo el gesto se pasaba
     al scroll de la propia ventana del navegador y la página daba un
     tirón elástico; con varias capas fixed encima eso se veía como que
     "se despega" todo. También evita el pull-to-refresh accidental a
     media lectura. */
  overscroll-behavior-y:none;
}
body{
  font-family:var(--font-sans);font-weight:300;
  background:var(--ink);color:var(--cream);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video,canvas,iframe{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit}
::selection{background:rgba(201,162,75,.3);color:var(--white)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ══════════════════════════ TIPOGRAFÍA ══════════════════════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:currentColor;opacity:.55;flex-shrink:0}
.eyebrow.lt{color:var(--primary-ink)}

.section-title{
  font-family:var(--font-serif);font-weight:400;font-style:italic;
  font-size:clamp(32px,7.6vw,58px);line-height:1.18;letter-spacing:-.012em;
  text-wrap:balance;margin-bottom:18px;
}
.section-title.light{color:var(--white)}
.section-title.dark-txt{color:var(--ink)}

.lede{font-size:14.5px;line-height:1.8;color:var(--on-dark-2);font-weight:300;max-width:52ch}
.lede.lt{color:var(--on-lt-2)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.wrap{max-width:var(--wrap);margin-inline:auto;width:100%}

@keyframes grainFlicker{0%,100%{opacity:.05}50%{opacity:.085}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

/* ══ TÍTULOS DE SECCIÓN — ENTRADA SUAVE ══
   (2026-10-07, pedido del cliente) Antes cada título se partía en palabras
   y caracteres (un flex con una caja por palabra y un span por letra) y
   UNA palabra llevaba encima un óvalo dorado trazado "a mano". El cliente
   pidió quitar el circulado y dejar los títulos como texto normal.
   Quitarlo arregla de paso lo que ese armado traía: el espaciado entre
   palabras ya no lo pone un column-gap, el renglón vuelve a cortarse donde
   el navegador quiere, text-wrap:balance de .section-title vuelve a
   funcionar (no funciona sobre cajas flex) y la palabra circulada deja de
   llevar .3em de margen extra a cada lado.
   La entrada ahora es del título completo: sube y aparece de una pieza. */
.vcr{opacity:0;transform:translateY(16px);transition:opacity .72s var(--ease-soft),transform .72s var(--ease-soft)}
.vcr.revealed{opacity:1;transform:none}
/* La semilla de texto del HTML (ver .vcr-seed en index.html) ya es el texto
   visible: el JS solo la desenvuelve. Sin JS se ve igual. */
.vcr-seed{visibility:visible}
.no-js .vcr{opacity:1;transform:none}

/* ══════════════════════════ FONDO FLUID MORPH ══════════════════════════ */
/* Fondo compartido "Fluid Morph" (ver MerakFluid en scripts.js): manchas orgánicas en SVG, insertadas por JS como
   primer hijo de la sección. z-index:0, mismo nivel que los ::after de
   grano de cada sección — el grano queda pintado encima (generado al
   final del árbol de esa sección), dando textura sobre el color.

   height:min(100%,1100px) en vez de inset:0 completo: las 7 manchas
   del viewBox (1440×800) están pensadas para un alto de sección
   "normal". #servicios puede volverse muy alto (grid de 8 tarjetas,
   más aún apilado en móvil) y con inset:0 el slice las estiraba tan
   verticalmente que dejaban de cubrir el lienzo entero — el color
   plano de fondo asomaba con un borde recto y duro a la mitad de la
   sección ("el fondo se corta", reporte real de cliente). Con altura
   tope ancladas arriba, el mask-image además difumina ese límite
   inferior hacia el color plano en vez de cortar en seco: así nunca
   hay una costura visible sin importar cuánto crezca la sección. */
.section-fluidbg{
  position:absolute;top:0;left:0;right:0;height:min(100%,1100px);z-index:0;
  pointer-events:none;overflow:hidden;
  mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);
}

/* CINTAS DE TEXTO (divisor hero / primera sección): retiradas el
   2026-09-24. El cliente vio el sitio saturado y pidió quitar la franja
   en movimiento. Se fueron el HTML de index y reseñas, este CSS y el
   módulo de scripts.js. */

/* ══════════════════════════ HERO DE SUBPÁGINAS ══════════════════════════
   El mismo hero del index en su estado final (el que se ve al volver
   al index en la misma sesión): foto a pantalla completa con Ken Burns,
   el mismo oscurecido, grano, puntos dorados, dos botones y "Sigue".
   En lugar del logo va el título de la página. La coreografía de fotos
   cruzándose se queda solo en el index. */
/* svh, NO dvh (2026-10-07): dvh cambia de valor cada vez que la barra de
   direcciones de Safari/Chrome móvil se encoge o se estira con el
   scroll. Eso reflowea el hero entero a media lectura — el "salto" que
   reportó el cliente. svh es el alto con la barra desplegada: fijo. */
.hero-sub{position:relative;overflow:hidden;background:var(--ink);display:flex;height:100vh;height:100svh;min-height:560px}
.hero-sub-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-sub-photo::before{
  content:'';position:absolute;inset:0;
  background-image:var(--hs-img);background-size:cover;background-position:var(--hs-pos,center 42%);
  transform-origin:50% 45%;will-change:transform;
  animation:hsKenBurns 30s ease-in-out infinite alternate;
}
@keyframes hsKenBurns{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.14) translate(-1.8%,-1.4%)}}
.hero-sub-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(128% 88% at 50% 60%,rgba(6,5,3,.10) 0%,rgba(6,5,3,.58) 54%,rgba(6,5,3,.94) 100%),
    linear-gradient(to bottom,rgba(6,5,3,.72) 0%,rgba(6,5,3,.06) 28%,rgba(6,5,3,.28) 58%,rgba(6,5,3,.92) 100%);
}
.hero-sub::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grain);opacity:.05}
.hero-sub-dots{position:absolute;z-index:3;pointer-events:none;animation:hsFade 1.4s var(--ease) .5s both}
.hero-sub-dots-tr{top:74px;right:-10px}
.hero-sub-dots-bl{bottom:118px;left:-14px}
.hero-sub-dots circle:nth-child(1){animation:hsFloat1 3.8s ease-in-out infinite}
.hero-sub-dots circle:nth-child(2){animation:hsFloat2 4.5s ease-in-out infinite .4s}
.hero-sub-dots circle:nth-child(3){animation:hsFloat1 5.1s ease-in-out infinite .8s}
.hero-sub-dots circle:nth-child(4){animation:hsFloat2 3.6s ease-in-out infinite .2s}
.hero-sub-dots circle:nth-child(5){animation:hsFloat1 4.8s ease-in-out infinite 1s}
.hero-sub-dots circle:nth-child(6){animation:hsFloat2 4.2s ease-in-out infinite .6s}
.hero-sub-dots circle:nth-child(7){animation:hsFloat1 5.4s ease-in-out infinite 1.4s}
.hero-sub-dots circle:nth-child(8){animation:hsFloat2 3.9s ease-in-out infinite .3s}
.hero-sub-dots circle:nth-child(9){animation:hsFloat1 4.6s ease-in-out infinite .9s}
.hero-sub-dots circle:nth-child(10){animation:hsFloat2 5s ease-in-out infinite .5s}
@keyframes hsFloat1{0%,100%{transform:translate(0,0)}33%{transform:translate(3px,-8px)}66%{transform:translate(-4px,4px)}}
@keyframes hsFloat2{0%,100%{transform:translate(0,0)}33%{transform:translate(-3px,6px)}66%{transform:translate(5px,-5px)}}
@keyframes hsFade{from{opacity:0}to{opacity:1}}
.hero-sub-inner{
  position:relative;z-index:4;margin:auto;width:100%;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:96px 22px 120px;
}
.hero-sub-inner>*{animation:hsUp .95s var(--ease) both}
.hero-sub-inner>*:nth-child(1){animation-delay:.3s}
.hero-sub-inner>*:nth-child(2){animation-delay:.45s}
.hero-sub-inner>*:nth-child(3){animation-delay:.6s}
@keyframes hsUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-sub h1{
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(40px,10.5vw,86px);line-height:1.08;letter-spacing:-.015em;
  color:var(--white);max-width:15ch;margin-bottom:18px;text-wrap:balance;
  text-shadow:0 14px 44px rgba(0,0,0,.6);
}
.hero-sub-desc{
  max-width:36ch;font-size:15px;line-height:1.7;font-weight:300;
  color:var(--on-dark-1);margin-bottom:24px;text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero-sub-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hero-sub-cue{
  position:absolute;left:50%;bottom:calc(32px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:4;
  display:none;flex-direction:column;align-items:center;gap:10px;
  color:var(--on-dark-3);font-size:11px;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;
  animation:hsFade 1s var(--ease) 1s both;
}
.hero-sub-cue-line{position:relative;width:1px;height:34px;overflow:hidden;background:rgba(255,255,255,.16)}
.hero-sub-cue-line::after{
  content:'';position:absolute;left:0;top:0;width:100%;height:50%;
  background:linear-gradient(to bottom,var(--gold),transparent);
  animation:hsCue 2.1s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes hsCue{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
/* Botones de los dos heroes (index y subpáginas): un tercio más
   grandes que el .btn normal, a la par del logo agrandado. */
.hero-ctas .btn,.hero-sub-ctas .btn{font-size:12.5px;min-height:52px;padding:0 22px}
.hero-ctas .btn svg,.hero-sub-ctas .btn svg{width:14px;height:14px}
/* Tour: la fachada trae letrero y plafones blancos que peleaban con
   el título. En blanco y negro y más oscura queda como textura. */
.hero-sub--bn .hero-sub-photo::before{filter:grayscale(1) brightness(.6) contrast(1.06)}
@media(min-width:768px){
  .hero-sub-inner{padding:110px 24px 150px}
  .hero-sub-desc{font-size:18px;max-width:44ch;margin-bottom:28px}
  .hero-sub-ctas{gap:16px}
  .hero-sub-cue{display:flex;bottom:calc(40px + env(safe-area-inset-bottom))}
  .hero-sub-dots-tr{top:96px;right:48px}
  .hero-sub-dots-bl{bottom:150px;left:36px}
  .hero-ctas .btn,.hero-sub-ctas .btn{font-size:15px;min-height:60px;padding:0 34px;gap:12px}
  .hero-ctas .btn svg,.hero-sub-ctas .btn svg{width:16px;height:16px}
}

/* ══════════════════════════ BOTONES ══════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:100px;text-decoration:none;text-align:center;
  font-family:var(--font-sans);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  min-height:46px;padding:0 26px;
  transition:transform .45s var(--ease),background .25s,border-color .25s,box-shadow .25s,color .25s;
}
.btn svg{width:13px;height:13px;flex-shrink:0}
/* El transform de botones y píldoras solo se mueve con el efecto
   magnético, y ese solo corre con mouse fino (ver scripts.js). En touch
   el will-change era una capa por botón sin nada que animar. */
@media(hover:hover) and (pointer:fine){
  .btn,.fc-pill{will-change:transform}
}
/* El botón se lee como metal por el degradado y el bisel (filo claro
   arriba, sombra adentro abajo), NO por un halo de color: la sombra
   exterior es elevación neutra y la interior es sombra neutra sobre la
   superficie dorada. Los halos cromáticos son lo que abarata una UI. */
.btn-gold{
  background:linear-gradient(175deg,rgba(226,197,133,.96),rgba(184,140,58,.96));
  color:#1A1206;font-weight:600;border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(0,0,0,.24),0 4px 14px rgba(6,5,3,.34);
}
.btn-gold:hover{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.72),inset 0 -3px 8px rgba(0,0,0,.24),0 8px 22px rgba(6,5,3,.44)}
.btn-ghost{border:1px solid rgba(255,255,255,.32);color:var(--white);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.btn-ghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.6)}
.btn-ghost-lt{border:1px solid rgba(10,8,5,.22);color:var(--ink);background:rgba(255,255,255,.55)}
.btn-ghost-lt:hover{background:var(--white);border-color:rgba(10,8,5,.45)}
/* Texto verde muy oscuro, no blanco: blanco sobre el verde de WhatsApp
   da 2:1 y no pasa AA. El verde se queda exacto (y opaco, para que el
   contraste no dependa de lo que haya detrás) y el texto da 7.3:1. El
   botón flotante sí conserva el logo blanco: es la marca, no texto. */
.btn-wa{
  background:#25D366;color:#06301A;font-weight:600;
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -3px 8px rgba(0,0,0,.24),0 4px 14px rgba(6,5,3,.34);
}
.btn-wa:hover{background:#3ADB7A}
.btn-sm{min-height:40px;padding:0 20px;font-size:11px;letter-spacing:.12em}
.btn-block{width:100%}

/* ══════════════════════════ AVISO DE DEMO ══════════════════════════
   Franja delgada fija en el borde superior, POR ENCIMA del nav flotante
   (z-index:300) — la isla de nav se recorre hacia abajo con --notice-h
   para que no se monte sobre el aviso. */
:root{--notice-h:22px}
#demo-notice{
  position:fixed;top:0;left:0;right:0;z-index:301;
  min-height:var(--notice-h);
  background:#f5c518;color:#1a1a1a;
  padding:4px 16px;text-align:center;
  font-family:var(--font-sans,sans-serif);
  font-size:10px;font-weight:700;letter-spacing:.01em;line-height:1.4;
  box-shadow:0 1px 5px rgba(0,0,0,.12);
}
#demo-notice a{color:#1a1a1a;text-decoration:underline;font-weight:800}
@media(max-width:600px){:root{--notice-h:20px}#demo-notice{font-size:9px;padding:3px 10px}}
/* AVISO DE DEMO APAGADO POR MIENTRAS (2026-09-23, a pedido del cliente).
   Para volver a mostrarlo, borra estas dos líneas: el aviso sigue en el
   HTML de las 4 páginas y --notice-h vuelve a bajar el nav solo. */
:root{--notice-h:0px}
#demo-notice{display:none}

/* ══════════════════════════ NAV ══════════════════════════
   Isla flotante: separada del borde, esquinas en píldora, vidrio
   siempre encendido (no solo al hacer scroll) para que nunca se vea
   como una barra cuadrada pegada al viewport. */
nav#main-nav{
  position:fixed;top:calc(var(--notice-h) + 12px);left:50%;translate:-50% 0;z-index:300;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:calc(100% - 24px);height:66px;padding-inline:12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(16,13,9,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 38px rgba(0,0,0,.34);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  transition:background .45s var(--ease-soft),box-shadow .45s,border-color .45s,height .45s var(--ease-soft),top .45s var(--ease-soft);
}
nav#main-nav.scrolled{
  top:calc(var(--notice-h) + 8px);height:58px;background:rgba(10,8,5,.88);
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 36px rgba(0,0,0,.42);
}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;padding-left:6px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.55))}
.nav-logo img{height:36px;width:auto;transition:height .45s var(--ease-soft)}
nav#main-nav.scrolled .nav-logo img{height:31px}

.nav-links{display:none;list-style:none;align-items:center;gap:2px}
.nav-links a{
  position:relative;display:block;padding:9px 13px;border-radius:100px;
  color:var(--on-dark-2);text-decoration:none;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;transition:color .22s;
}
.nav-links a::after{
  content:'';position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease);
}
.nav-links a:hover,.nav-links a.current{color:var(--gold-pale)}
.nav-links a:hover::after,.nav-links a.current::after{transform:scaleX(1)}
.nav-cta{display:none}

.nav-burger{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;flex-shrink:0;border-radius:12px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.nav-burger span{display:block;width:17px;height:1.5px;background:var(--white);border-radius:2px;transition:transform .38s var(--ease),opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav-burger.open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* Menú móvil a pantalla completa — no un dropdown */
.nav-mobile{
  position:fixed;inset:0;z-index:299;
  display:flex;flex-direction:column;justify-content:center;
  padding:84px clamp(22px,7vw,48px) calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(165deg,#12100A 0%,#0A0805 100%);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .42s var(--ease-soft),visibility .42s;
  overflow-y:auto;overscroll-behavior:contain;
}
.nav-mobile.open{opacity:1;pointer-events:auto;visibility:visible}
.nav-mobile-glow{
  position:absolute;left:50%;top:22%;width:120vw;height:52vh;z-index:0;pointer-events:none;
  transform:translateX(-50%);border-radius:50%;
  /* Sin filter:blur(): el degradado ya es el desenfoque. Los stops
     intermedios hacen la caída igual de suave a costo cero. */
  background:radial-gradient(circle,rgba(201,162,75,.2) 0%,rgba(201,162,75,.12) 34%,rgba(201,162,75,.04) 56%,transparent 74%);
}
.nav-mobile-list{position:relative;z-index:1;display:flex;flex-direction:column}
.nav-mobile-list a{
  display:flex;align-items:center;gap:14px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);color:var(--on-dark-1);text-decoration:none;
  font-family:var(--font-serif);font-style:italic;font-weight:400;
  font-size:clamp(26px,7.4vw,38px);line-height:1.2;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;
}
.nav-mobile.open .nav-mobile-list a{opacity:1;transform:none}
.nav-mobile.open .nav-mobile-list a:nth-child(1){transition-delay:.06s}
.nav-mobile.open .nav-mobile-list a:nth-child(2){transition-delay:.11s}
.nav-mobile.open .nav-mobile-list a:nth-child(3){transition-delay:.16s}
.nav-mobile.open .nav-mobile-list a:nth-child(4){transition-delay:.21s}
.nav-mobile.open .nav-mobile-list a:nth-child(5){transition-delay:.26s}
.nav-mobile.open .nav-mobile-list a:nth-child(6){transition-delay:.31s}
.nav-mobile.open .nav-mobile-list a:nth-child(7){transition-delay:.36s}
.nav-mobile.open .nav-mobile-list a:nth-child(8){transition-delay:.41s}
.nav-mobile.open .nav-mobile-list a:nth-child(9){transition-delay:.46s}
.nav-mobile.open .nav-mobile-list a:nth-child(10){transition-delay:.51s}
.nav-mobile-list a:hover{color:var(--gold-pale)}
/* Cada renglón se lee como botón: flecha a la derecha y la página en la
   que estás en dorado. Los numeritos 01-06 de antes (9px) se quitaron:
   no decían nada y metían ruido (2026-09-24). */
.nav-mobile-list a::after{
  content:'';flex-shrink:0;margin-left:auto;width:8px;height:8px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.45;transition:opacity .2s,transform .3s var(--ease);
}
.nav-mobile-list a:hover::after{opacity:.9;transform:translateX(3px) rotate(45deg)}
.nav-mobile-list a.current{color:var(--gold-pale)}
.nav-mobile-list a.current::after{opacity:.9}
/* Con el menú abierto el WhatsApp flotante se encimaba sobre la lista. */
body.menu-open .wa-float{opacity:0;pointer-events:none}
.nav-mobile-foot{
  position:relative;z-index:1;margin-top:26px;display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease) .44s,transform .5s var(--ease) .44s;
}
.nav-mobile.open .nav-mobile-foot{opacity:1;transform:none}
.nav-mobile-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:11px;color:var(--on-dark-3)}
.nav-mobile-meta a{color:var(--on-dark-2);text-decoration:none}

@media(min-width:980px){
  nav#main-nav{top:calc(var(--notice-h) + 20px);width:calc(100% - 64px);max-width:1280px;height:84px;padding-inline:16px 18px}
  nav#main-nav.scrolled{top:calc(var(--notice-h) + 12px);height:70px}
  .nav-logo{padding-left:12px}
  .nav-logo img{height:48px}
  nav#main-nav.scrolled .nav-logo img{height:40px}
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-burger,.nav-mobile{display:none}
}

/* ══════════════════════════ TRANSICIÓN DE PÁGINA ══════════════════════════
   Pantalla breve con el logo entre index / experiencias / tour. Vive en el
   HTML de cada página (primer hijo de <body>, para tapar el paint inicial
   sin esperar a JS) y la controla scripts.js: se retira apenas el
   documento está listo y vuelve a cubrir, brevemente, antes de salir a
   otra página interna. */
#pageLoader{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:var(--ink);opacity:1;transition:opacity .38s var(--ease-soft);
}
#pageLoader img{
  width:min(30vw,120px);height:auto;opacity:0;transform:scale(.92);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
  transition:opacity .45s var(--ease) .05s,transform .45s var(--ease) .05s;
}
#pageLoader.is-in img{opacity:1;transform:none}
/* visibility:hidden al terminar (2026-10-07): el telón es un fixed de
   pantalla completa en z-index 2000. Con solo opacity:0 seguía siendo
   una capa del compositor sobre TODO el documento durante el resto de
   la sesión. La visibilidad cambia al final de la transición. */
#pageLoader.is-out{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .38s var(--ease-soft),visibility 0s linear .38s}
/* Al SALIR hacia otra página (scripts.js la agrega junto con is-in) el
   telón se pone de golpe, sin transición: ya no tiene sentido animar el
   fade/scale del logo si se va a cortar a medio camino por la
   navegación — eso era el "glitch" del doble parpadeo. */
#pageLoader.leaving,#pageLoader.leaving img{transition:none!important}
.no-js #pageLoader{display:none}

#scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:301;
  background:linear-gradient(90deg,var(--primary),var(--gold),var(--gold-pale),var(--gold));
  transform-origin:left;transform:scaleX(0);pointer-events:none;
}

/* ══════════════════════════ FOOTER ══════════════════════════
   "Curtain reveal": .footer-curtain vive en el flujo normal con su
   propio clip-path mientras el <footer> real es position:fixed. Como
   el clip-path de un ancestro sigue recortando descendientes fixed, el
   footer solo se ve a través de esa ventana — y como la ventana entra
   al viewport con el scroll, el footer parece levantarse desde abajo.
   El parallax del texto gigante lo calcula el motor rAF compartido
   (variables --fcy / --fco), no GSAP. */
/* Misma cortina en todos los tamaños (2026-10-05): el celular tenía un
   footer de flujo normal que se veía roto (el MERAK gigante encimado con
   los enlaces legales). Ahora celular y PC comparten exactamente la
   misma composición: pantalla completa, título y botones centrados, el
   wordmark al fondo y la barra inferior. */
/* CELULAR SIN CORTINA (2026-10-07).
   La cortina necesita un <footer> position:fixed recortado por el
   clip-path de un ancestro. Safari de iPhone NO puede componer un fixed
   que vive dentro de un clip-path: lo repinta en el hilo principal en
   cada cuadro mientras el scroll corre en el compositor, así que el
   footer se queda atrás del dedo, "rebota" al soltar y arrastra con él
   el resto de la página (el síntoma que reportó el cliente: "la página
   rebota / pasan cosas raras al hacer scroll"). En celular el footer
   pasa a ser un bloque normal: se ve igual (la misma composición a
   pantalla completa) y el scroll vuelve a ser nativo.
   De 768px para arriba la cortina sigue igual que siempre. */
.footer-curtain{position:relative;width:100%;height:auto;isolation:isolate}
.footer-cinematic{
  position:relative;width:100%;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;background:var(--ink);color:var(--white);
}
@media(min-width:768px){
  .footer-curtain{height:100svh;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  .footer-cinematic{position:fixed;bottom:0;left:0;height:100svh;min-height:0}
}
/* will-change:opacity: el grano del footer cubre toda la pantalla y el
   footer es fixed, así que sin capa propia su parpadeo repintaba el
   viewport entero en cada frame, también mientras se hacía scroll. */
.footer-cinematic::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--grain);opacity:.06;animation:grainFlicker 7s ease-in-out infinite;will-change:opacity}
/* GRANO QUIETO EN CELULAR (2026-10-07): la textura cubre secciones
   enteras y el parpadeo la recompone en cada cuadro, para siempre, en
   paralelo con el scroll. A simple vista no se distingue de un grano
   fijo, y fijo no cuesta nada. */
@media(max-width:767px){
  .footer-cinematic::before{animation:none;opacity:.07;will-change:auto}
}
.fc-giant{
  position:absolute;left:50%;bottom:-3vh;z-index:0;pointer-events:none;user-select:none;
  transform:translateX(-50%) translateY(var(--fcy,6vh)) scale(var(--fcs,.9));white-space:nowrap;
  font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:26vw;line-height:.78;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);
  opacity:var(--fco,0);will-change:transform,opacity;
}
/* En teléfono el wordmark se sube al hueco que queda entre los botones y
   la barra inferior. Pegado abajo (como en PC, donde mide 290px de alto y
   se lee como marca de agua) a esta escala caía justo encima de los
   enlaces legales y parecía un error de acomodo. */
@media(max-width:767px){
  /* La barra inferior del celular ocupa tres renglones (ver la nota de
     .fc-bottom): el wordmark sube para no quedar detrás de ella. */
  .fc-giant{font-size:38vw;bottom:24vh}
}
@media(max-width:767px) and (max-height:700px){
  .fc-giant{font-size:32vw;bottom:27vh}
}
/* La marquesina inclinada con los tipos de evento (.fc-marquee) se
   retiró el 2026-09-24: era otra franja en movimiento y listaba formatos
   de fiesta grande cuando el salón es para eventos íntimos. */
/* El relleno grande de arriba era del footer viejo de celular (el que iba
   en el flujo normal). Con la cortina a pantalla completa en todos los
   tamaños, el bloque va centrado igual que en PC; solo se deja aire
   suficiente para no quedar debajo de la barra de navegación. */
.fc-center{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(56px,13vw,72px) 20px 20px}
@media(min-width:768px){.fc-center{padding:20px}}
.fc-heading{
  font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--white);
  font-size:clamp(34px,9vw,80px);line-height:1.18;letter-spacing:-.012em;
  margin-bottom:clamp(22px,4vw,40px);max-width:14ch;text-wrap:balance;
  transform:translateY(var(--fchy,26px));opacity:var(--fcho,0);
}
.fc-actions{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;transform:translateY(var(--fcay,26px));opacity:var(--fcao,0)}
.fc-actions-primary{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* En celular los dos botones van lado a lado, como en PC: basta con
   recortar el relleno (y un poco más en teléfonos de 360px). Si la
   pantalla es todavía más angosta se apilan solos (flex-wrap). */
.fc-actions-primary .btn{padding:0 16px;gap:8px;letter-spacing:.1em}
@media(max-width:399px){.fc-center{padding-inline:14px}.fc-actions-primary .btn{padding:0 14px;letter-spacing:.08em;font-size:11px}}
/* Celular: 340px obliga a dos renglones de tres en cualquier teléfono
   (a 440px de ancho salían 4 + 2, disparejo). Escritorio: 640px, los
   seis en un renglón (con 520px "Reseñas" quedaba sola abajo). */
.fc-actions-secondary{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px}
@media(min-width:768px){.fc-actions-secondary{max-width:640px}}
.fc-pill{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.62);font-family:var(--font-sans);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:background .3s,border-color .3s,color .3s,transform .45s var(--ease);
}
.fc-pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:var(--white)}
.fc-pill-sm{min-height:36px;padding:0 16px;border-radius:100px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
/* Barra inferior.
   CELULAR (regla base): TRES RENGLONES centrados — iconos + flecha de
   subir, luego el ©, luego los legales. Antes era el acomodo de PC
   (redes | © | flecha) metido en 375px: entre el relleno derecho de
   96px y el "1 1 0" del ©, al © le quedaban ~80px para un texto de 190
   que no parte (white-space:nowrap), así que se desbordaba por los dos
   lados y la flecha de subir le caía encima. Reportado el 2026-10-07
   con captura.
   PC (≥768px): vuelve el reparto de tres columnas de siempre. */
.fc-bottom{
  position:relative;z-index:2;
  padding:18px clamp(16px,5vw,52px) calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
}
.fc-copy{font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3);order:3;width:100%;text-align:center}
.fc-copy-name{white-space:nowrap}
.fc-copy-rest{display:none}
@media(max-width:359px){.fc-copy-name{white-space:normal}}
.fc-social{display:flex;align-items:center;gap:8px;order:1}
.fc-social-btn{width:38px;height:38px;padding:0;border-radius:50%;align-items:center;justify-content:center}
.fc-social-btn svg{width:16px;height:16px}
.fc-top{width:40px;height:40px;border-radius:50%;padding:0;order:2;align-items:center;justify-content:center;flex-shrink:0}
.fc-top svg{width:16px;height:16px;transition:transform .3s}
.fc-top:hover svg{transform:translateY(-2px)}
.fc-legal{order:4;width:100%;display:flex;align-items:center;justify-content:center;gap:4px 12px;margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);flex-wrap:wrap}
.fc-legal-link{font-size:11px;color:var(--on-dark-3);text-decoration:none;transition:color .2s}
.fc-legal-link:hover{color:rgba(255,255,255,.82)}
.fc-legal-sep{color:rgba(255,255,255,.22);font-size:11px}
/* "Página hecha por Korvel" (2026-10-08, pedido de Korvel mismo): 15%
   más grande que antes (12.5px → 14.4px) y con un brillo que pulsa sin
   parar, para que destaque del resto del footer en vez de leerse como
   letra chica. Es opacidad + resplandor dorado, no un parpadeo seco de
   apagado/prendido — eso se habría leído como un enlace roto. En hover
   se detiene en el punto más brillante, para que al pasar el mouse no
   compita por la atención contra el propio gesto de hover.
   Esta demo ignora prefers-reduced-motion a propósito en todo el sitio
   (ver "MOVIMIENTO" más abajo); esto sigue esa misma regla. */
.fc-legal-korvel{
  font-size:14.4px;font-weight:600;color:var(--gold);text-decoration:none;
  animation:korvelGlow 2.2s ease-in-out infinite;
}
@keyframes korvelGlow{
  0%,100%{opacity:.82;text-shadow:0 0 0 rgba(201,162,75,0)}
  50%{opacity:1;text-shadow:0 0 12px rgba(201,162,75,.85),0 0 22px rgba(201,162,75,.35)}
}
.fc-legal-korvel:hover{animation-play-state:paused;opacity:1;text-shadow:0 0 12px rgba(201,162,75,.85),0 0 22px rgba(201,162,75,.35)}
.fc-legal-korvel strong{font-weight:700}
/* "Página hecha por Korvel" en su propio renglón mientras no quepa junto
   a los otros dos enlaces, y sin el "·" colgando al final (antes se veía
   "Preguntas frecuentes · Aviso de privacidad ·" y Korvel abajo). */
.fc-legal-korvel{width:100%;justify-content:center;text-align:center;margin-top:2px}
.fc-legal-sep:last-of-type{display:none}
@media(min-width:768px){
  .fc-actions-primary{gap:10px}
  .fc-actions-primary .btn{padding:0 26px;gap:10px;letter-spacing:.14em}
  .fc-copy-rest{display:inline}
  /* Reparto de tres columnas de PC. El relleno derecho deja libre la
     esquina donde vive el botón flotante de WhatsApp. */
  .fc-bottom{justify-content:space-between;padding-right:clamp(96px,12vw,140px)}
  .fc-copy{order:2;width:auto;flex:1 1 0;min-width:0}
  .fc-top{order:3}
  .fc-legal{margin-top:12px;padding-top:12px;gap:12px}
  .fc-legal-korvel{width:auto;margin-top:0;justify-content:flex-start}
  .fc-legal-sep:last-of-type{display:inline}
}

/* ══════════ BOTÓN FLOTANTE DE WHATSAPP ══════════
   Uno solo, en todas las pantallas. Antes en celular había un dock
   inferior con tres botones (WhatsApp, Llamar, Cotizar) que tapaba el
   final de cada sección; el cliente lo pidió fuera.
   ESTÁTICO a propósito: sin pulso ni anillo. La versión anterior tenía
   la animación "wapulse" puesta dos veces, en el anillo y en el botón
   mismo, y la del botón lo escalaba y lo llevaba a opacidad 0 cada
   2.6 s: se veía parpadear. Un botón verde en la esquina ya se nota. */
.wa-float{
  position:fixed;z-index:400;display:flex;align-items:center;justify-content:center;
  right:14px;bottom:calc(14px + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:50%;background:#25D366;
  border:1px solid rgba(255,255,255,.35);text-decoration:none;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 6px 18px rgba(6,5,3,.4);
  transition:transform .2s,opacity .3s;
}
.wa-float svg{width:23px;height:23px}
@media(hover:hover){.wa-float:hover{transform:scale(1.06)}}
/* Cerca del formulario de cotización o del footer ya hay un CTA de
   WhatsApp visible: el botón flotante se retira en vez de repetirlo. */
.wa-float.near-cta{opacity:0;pointer-events:none}
@media(min-width:768px){
  .wa-float{right:22px;bottom:24px;width:52px;height:52px}
  .wa-float svg{width:25px;height:25px}
}

/* ══════════════════════════ REVEALS ══════════════════════════ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .78s var(--ease),transform .78s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
/* APARICIÓN DE GOLPE EN SCROLL RÁPIDO (2026-10-07)
   La clase la pone el JS solo cuando al elemento le toca aparecer ESTANDO
   YA dentro de la pantalla: un scroll de golpe, un salto por un enlace o
   una recarga a media página. Ahí el desvanecido de .78s (y la entrada
   letra por letra de los títulos, que dura ~1 s) se ve como una sección
   rota que no termina de cargar. En el scroll normal nunca se activa y la
   animación es exactamente la de siempre. */
.reveal.reveal-now{transition:none}
.vcr.reveal-now{transition:none}
.reveal-1{transition-delay:.07s}.reveal-2{transition-delay:.14s}
.reveal-3{transition-delay:.21s}.reveal-4{transition-delay:.28s}
.rule{height:1px;background:var(--hair-dark);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.rule.is-visible{transform:scaleX(1)}
.rule.lt{background:var(--hair-lt)}
/* Red de seguridad: estos bloques arrancan invisibles y solo un
   IntersectionObserver los enciende. Si el JS no corre, sin esta regla
   media página quedaría en blanco — un fallo mucho peor que perderse la
   animación. La clase .no-js la quita un script inline en el <head>. */
.no-js .reveal,.no-js .rule{opacity:1;transform:none}
/* El footer se revela con variables que escribe el motor de scroll; sin
   JS se quedarían en 0 y el footer saldría vacío. */
.no-js .fc-giant,.no-js .fc-heading,.no-js .fc-actions{opacity:1;transform:none}
.no-js .fc-giant{transform:translateX(-50%)}

/* ══════════════════════════ OBJETIVOS TÁCTILES ══════════════════════════
   44px mínimo, pero SOLO donde se toca con el dedo (pointer:coarse). En
   escritorio, con mouse, los botones conservan su tamaño compacto y el
   diseño no cambia. Los enlaces de texto (migas, legales) crecen hacia
   afuera con margen negativo: el área de toque es de 44px sin mover
   ni un pixel del acomodo. Cada página agrega aquí los suyos. */
@media (pointer:coarse){
  .btn-sm{min-height:44px}
  /* Footer: mismo tamaño a la vista que en PC (el cliente quiere el
     footer del celular igual); los 44px táctiles los da un ::after
     invisible que sobresale del botón sin encimarse con el vecino. */
  .fc-pill-sm,.fc-social-btn,.fc-top{position:relative}
  .fc-pill-sm::after,.fc-social-btn::after,.fc-top::after{content:'';position:absolute}
  .fc-pill-sm::after{inset:-4px 0}
  .fc-social-btn::after{inset:-3px}
  .fc-top::after{inset:-2px}
  .nav-logo{min-height:44px}
  .fc-legal-link,.fc-legal-korvel{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
  /* inline-flex se come el espacio entre "Hecho por" y <strong>: salía
     "Hecho porKorvel" en celular. */
  .fc-legal-korvel{column-gap:.3em}
}

/* ══════════════════════════ MOVIMIENTO ══════════════════════════
   Esta demo IGNORA a propósito prefers-reduced-motion: la coreografía
   del hero, el Silk, las Waves y la entrada de los títulos son
   el argumento central del producto y deben verse siempre, en todos
   los dispositivos. No agregar @media(prefers-reduced-motion:reduce)
   ni gates de matchMedia.
   Se intentó una versión quieta el 2026-09-23 (auditoría de impeccable)
   y se revirtió el mismo día: la PC del propio cliente tiene apagados
   los "Efectos de animación" de Windows, así que reporta reduce y el
   sitio se le veía sin la animación del hero. Lo que SÍ se hace por
   rendimiento es pausar los fondos animados fuera de pantalla y con la
   pestaña oculta (IntersectionObserver / document.hidden). */