/* ══════════════════════════════════════════════════════════════════
   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;
}
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}}

/* ══ VCR TEXT REVEAL — cada carácter sube desde su propia caja ══ */
.vcr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.23em}
/* ESPACIO ENTRE PALABRAS: .23em es el espacio natural de Cormorant a
   cualquier tamaño. Antes cada palabra llevaba margin-right:.2em y el
   separador otros .2em: .4em en total, casi el doble (26px contra 15px
   en un título de 66px), y los títulos se veían desarmados. column-gap
   solo existe ENTRE palabras del mismo renglón: nunca deja sangría al
   inicio ni hueco al final de un renglón, así que los títulos
   centrados quedan centrados de verdad. */
.vcr-sp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:pre}
/* line-height aquí, no solo en .section-title/.contacto-title: al
   partir el título en spans (ver scripts.js "VCR TEXT REVEAL"), cada
   fila envuelta en flex-wrap toma su altura de ESTE line-height, no
   del contenedor — estaba en 1.3 mientras .section-title pedía 1.18,
   así que todo título con reveal por letra se veía más espaciado de
   lo que el diseño base indicaba. 1.18 iguala ambos. */
.vcr-word{position:relative;display:inline-flex;height:1.18em;line-height:1.18;padding-bottom:.08em}
.vcr-word:last-child{margin-right:0}
.vcr-char{display:inline-block;overflow:hidden}
.vcr-char-inner{
  display:inline-block;transform:translateY(105%);
  transition:transform .72s var(--ease);will-change:transform;font-style:inherit;
}
.vcr.revealed .vcr-char-inner{transform:translateY(0)}

/* Circulado a mano de la palabra que más resalta del título — un óvalo
   trazado con pluma que se dibuja apenas esa palabra termina de subir.
   .word-circle es un <div> (SIN ratio intrínseco) posicionado con las
   4 esquinas en % contra la CAJA DE ESA PALABRA (.vcr-word es su
   contenedor de posicionamiento, con height explícita para que el %
   vertical resuelva bien). El <svg> con el trazo va ADENTRO haciendo
   solo un fill 100%/100% trivial de ese div.
   NO poner el <svg> directo como elemento absoluto: un SVG es un
   "elemento reemplazado" y su ratio intrínseco (ancho/alto del
   viewBox) contamina el algoritmo de resolución de tamaño de Chrome/
   Edge apenas width o height terminan en 'auto' — probado con las 4
   esquinas puestas (bottom salía distinto en cada palabra según su
   ancho) y también con width/height en % explícito (width:150%
   terminaba renderizando 100% real). El div, al no tener ratio, no
   tiene ese problema. */
/* HOLGURA: el óvalo mide 158% x 178% de la palabra (corrido a la
   izquierda, -33% / -25%), igual que el círculo a mano de El Buen
   Sazón. Antes eran -8% / -14%: el trazo casi tocaba las letras y se
   leía como un contorno pegado, no como algo hecho con pluma.
   Ese % es relativo al ANCHO de la palabra, pero el alto del óvalo
   (-39%/-39%) es relativo a la altura de línea, que no cambia con la
   palabra. En palabras cortas de 3 letras ("luz", "día") el ancho de
   la palabra es menor que su alto de línea, así que el óvalo salía
   más angosto que alto: un círculo apretado, no un óvalo. El
   calc(-.6em) suma un margen fijo en em (no en %) a cada lado, que
   pesa mucho en palabras cortas y poco en las largas, para que
   SIEMPRE quede ovalado y holgado, nunca chico. */
/* NO PISAR A LAS VECINAS (2026-09-24, pedido del cliente): con -33% y
   -25% el óvalo salía casi una palabra entera hacia cada lado y cruzaba
   las palabras de junto ("espacio íntimo para"). Ahora la caja se
   calcula para que la tinta sobresalga SIEMPRE ~.38em por lado, sea la
   palabra larga o corta: el trazo ocupa del 12.5% al 91% del ancho del
   viewBox, y con 16% / 11.3% del ancho de la palabra más .5em / .47em
   fijos esas proporciones se cancelan. Y la palabra circulada lleva
   .3em de margen extra a cada lado (.vcr-word--circled): el hueco con
   la vecina (.23 + .3 = .53em) es mayor que lo que sobresale la tinta.
   Sigue holgado arriba y abajo, que es donde se nota lo "a mano". */
.vcr-word--circled{margin-inline:.3em}
.word-circle{
  position:absolute;left:calc(-16% - .5em);right:calc(-11.3% - .47em);top:-39%;bottom:-39%;
  pointer-events:none;z-index:2;
}
.word-circle svg{display:block;width:100%;height:100%;max-width:none;overflow:visible}
.word-circle .wc-ink{
  fill:none;stroke:var(--gold);stroke-width:.05em;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;opacity:.9;
}
.word-circle .wc-draw{
  fill:none;stroke:#fff;stroke-width:60;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s cubic-bezier(.6,.05,.2,1);
}
.vcr.revealed .word-circle .wc-draw{stroke-dashoffset:0}
/* Sobre títulos claros (fondo crema) el dorado pálido pierde contraste:
   se oscurece al bronce de marca. */
.vcr.dark-txt .word-circle .wc-ink{stroke:var(--primary);opacity:.8}
.no-js .word-circle{display: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. */
.hero-sub{position:relative;overflow:hidden;background:var(--ink);display:flex;height:100vh;height:100dvh;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;will-change:transform;
  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 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}
#pageLoader.is-out{opacity:0;pointer-events:none}
.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. */
/* CELULAR (base): footer normal, del alto de su contenido. A pantalla
   completa (100svh) el bloque de título, botones y enlaces quedaba chico
   flotando en medio de un fondo negro enorme: "se ve demasiado vacío
   comparado a PC" (cliente, 2026-09-24). La cortina de pantalla completa
   se queda de 768px para arriba, donde el contenido sí la llena. */
.footer-curtain{position:relative;width:100%}
.footer-cinematic{
  position:relative;width:100%;
  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}
}
.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}
.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;
}
/* 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. */
.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(88px,24vw,120px) 20px clamp(56px,14vw,72px)}
@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);will-change:transform;
  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, igual en todas las pantallas: redes a la izquierda,
   el © al centro y la flecha de subir a la derecha; abajo, tras una
   línea, los enlaces legales. En celular el © se queda en "© 2026
   Merak Eventos Mty" (dos renglones) para caber entre los iconos. */
.fc-bottom{position:relative;z-index:2;padding:16px clamp(16px,5vw,52px) calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fc-copy{font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3);order:2;flex:1 1 0;min-width:0;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:3;align-items:center;justify-content:center}
.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:12px;margin-top:12px;padding-top:12px;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}
.fc-legal-korvel{font-size:12.5px;font-weight:500;color:var(--gold);text-decoration:none;transition:opacity .2s}
.fc-legal-korvel:hover{opacity:.75}
.fc-legal-korvel strong{font-weight:600}
@media(min-width:768px){
  .fc-actions-primary{gap:10px}
  .fc-actions-primary .btn{padding:0 26px;gap:10px;letter-spacing:.14em}
  .fc-bottom{padding-right:clamp(96px,12vw,140px)}
  .fc-copy-rest{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}
.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}
.no-js .vcr-char-inner{transform:none}

/* ══════════════════════════ 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 el circulado 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). */