/* =========================================================================
   LAS CORTADERAS — Espacio de Eventos
   Sistema de diseño · "Galería viva": minimalismo editorial + liquid glass
   ========================================================================= */

/* ---------- Fonts ----------
   Display: Spectral — serif de texto cálido y refinado (Production Type); elegante
   en grande sin el dramatismo "portada de revista". Cuerpo: Hanken Grotesk —
   grotesca humanista, amable y muy legible. Pareja por eje de contraste
   (serif + sans), fuera de los defaults saturados. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Paleta de marca */
  --crema:#F2F1DF;
  --marfil:#F8F7EE;        /* base más luminosa y moderna */
  --verde:#31401C;         /* verde profundo */
  --verde-90:#3A4B22;
  --verde-soft:#46552F;
  --dorado:#BF9F78;        /* dorado insignia */
  --dorado-claro:#D2BA98;
  --dorado-oscuro:#A9885F;
  --salvia:#65735C;        /* verde salvia */
  --salvia-claro:#8A9680;
  --neutro:#F2F2F2;
  --beige:#D9C3A9;
  --beige-claro:#E7D8C4;
  --tinta:#1C2410;         /* casi negro verdoso */
  --noche:#243012;
  --noche-profunda:#161E0B;

  /* Cortaderitas (infantil) */
  --cortaderitas:#9DB80F;
  --cortaderitas-dark:#86A00C;
  --kids-lima:#C7D941;
  --kids-verde:#4EA654;
  --kids-rosa:#F22998;
  --kids-celeste:#91D7F2;

  /* Liquid glass */
  --glass:rgba(248,247,238,.6);
  --glass-strong:rgba(248,247,238,.82);
  --glass-dark:rgba(22,30,11,.38);
  --glass-border:rgba(255,255,255,.55);
  --glass-border-dark:rgba(255,255,255,.16);
  --blur:saturate(1.5) blur(18px);

  /* Tratamiento fotográfico — capa "warm wash" unificadora.
     En vez de oscurecer todo (lo que apagaba el sol, el río y la calidez que el
     predio vende), aplicamos un grado parejo y cálido: brillo neutro, contraste
     suave, saturación apenas viva y un velo sepia leve que hermana fotos de
     orígenes distintos. La legibilidad del texto sobre fotos la siguen dando los
     degradados/scrims, no este filtro. Revertir al dark-moody anterior:
     saturate(.93) contrast(1.1) brightness(.9). */
  --img-mood:saturate(1.03) contrast(1.05) brightness(1) sepia(.05);

  /* Tipos */
  --display:'Spectral', Georgia, serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;
  --acento:'Spectral', Georgia, serif;

  /* Ritmo */
  --section-pad:clamp(72px, 9vw, 150px);
  --gutter:clamp(20px, 4.5vw, 56px);
  --maxw:1320px;
  --frame:clamp(10px, 1.4vw, 18px);  /* marco interior de fotos full-bleed */

  /* Forma y sombra */
  --radius:16px;
  --radius-lg:26px;
  --radius-xl:36px;
  --shadow-soft:0 20px 55px -28px rgba(28,36,16,.35);
  --shadow-card:0 30px 70px -34px rgba(28,36,16,.45);
  --shadow-glass:0 18px 50px -20px rgba(28,36,16,.28), inset 0 1px 0 rgba(255,255,255,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* Lenis */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
body{
  font-family:var(--body);
  color:var(--verde);
  background:var(--marfil);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* grano fílmico sutil */
body::after{
  content:"";position:fixed;inset:0;z-index:998;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block;}
/* <picture> envuelve fotos webp+jpg sin alterar el layout (la img se comporta
   como hijo directo de su contenedor) */
picture{display:contents;}
::selection{background:var(--dorado);color:#fff;}
:focus-visible{outline:2px solid var(--dorado);outline-offset:3px;}
/* skip link: oculto hasta foco por teclado */
.skip-link{position:fixed;top:10px;left:50%;transform:translate(-50%,-150%);z-index:130;
  background:var(--verde);color:var(--marfil);font-family:var(--body);font-size:13px;font-weight:600;
  letter-spacing:.04em;padding:12px 22px;border-radius:100px;
  box-shadow:0 14px 34px -14px rgba(20,28,10,.6);transition:transform .35s var(--ease);}
.skip-link:focus-visible{transform:translate(-50%,0);outline-offset:4px;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}

/* ---------- Escala tipográfica ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.015em;}
/* text-wrap:balance reparte el texto en líneas parejas y evita orfebrería fea
   (una sola palabra colgando, como el "que" suelto) a cualquier resolución:
   el navegador reequilibra los cortes según el ancho, así que no hay que atar
   quiebres a mano por breakpoint. */
h1,h2,h3,h4,.h1,.h2,.h3,.display{text-wrap:balance;}
.display{
  font-family:var(--display);font-weight:300;
  font-size:clamp(46px, 8vw, 110px);
  line-height:.98;letter-spacing:-.02em;
}
.h1{font-size:clamp(38px, 5.5vw, 72px);font-weight:400;}
.h2{font-size:clamp(32px, 4.2vw, 58px);font-weight:400;letter-spacing:-.02em;}
.h3{font-size:clamp(23px, 2.4vw, 32px);font-weight:500;}
.lead{font-size:clamp(16.5px,1.4vw,19.5px);line-height:1.75;font-weight:400;}
/* Los párrafos descriptivos (bajo o al costado de un título, sin ítems) van
   justificados: los bordes quedan como dos líneas paralelas, más prolijo. La
   última línea alinea a la izquierda (nunca estira una línea corta) y se apaga
   la partición para no cortar palabras. Los .lead centrados conservan su centro. */
.lead{text-align:justify;text-align-last:left;hyphens:none;-webkit-hyphens:none;}
.center .lead,.center.lead,.lead.center{text-align:center;text-align-last:center;}
p{text-wrap:pretty;}

.acento{font-family:var(--acento);font-style:italic;font-weight:400;}
em{font-family:var(--acento);font-style:italic;font-weight:inherit;}

/* "eyebrow" como voz de marca: etiqueta en cursiva serif con una línea dorada,
   en vez del kicker en versalitas-tracking que delata plantilla de IA. */
.eyebrow{
  font-family:var(--acento);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.4vw,18px);letter-spacing:0;text-transform:none;color:var(--dorado-oscuro);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{
  content:"";width:32px;height:1px;flex:none;
  background:linear-gradient(90deg,var(--dorado),rgba(191,159,120,.12));
}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{
  content:"";width:32px;height:1px;flex:none;
  background:linear-gradient(90deg,rgba(191,159,120,.12),var(--dorado));
}
.reveal .eyebrow::before,.eyebrow.reveal::before,
.reveal .eyebrow.center::after,.eyebrow.center.reveal::after{
  opacity:0;transform:scaleX(0);transform-origin:left;
  transition:opacity .6s var(--ease) .15s,transform .85s var(--ease-out) .15s;}
.reveal.in .eyebrow::before,.eyebrow.reveal.in::before,
.reveal.in .eyebrow.center::after,.eyebrow.center.reveal.in::after{opacity:1;transform:scaleX(1);}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-narrow{max-width:880px;margin-inline:auto;padding-inline:var(--gutter);}
section{position:relative;}
.section{padding-block:var(--section-pad);}
.section-sm{padding-block:clamp(52px,6vw,96px);}

.bg-crema{background:var(--marfil);}
.bg-neutro{background:var(--crema);}
.bg-verde{background:var(--verde);color:var(--crema);}
.bg-salvia{background:var(--salvia);color:var(--crema);}
.bg-beige{background:var(--crema);}
.bg-atardecer{background:linear-gradient(180deg,var(--marfil) 0%,var(--crema) 100%);}
.bg-anochecer{background:linear-gradient(180deg,var(--verde) 0%,var(--noche) 100%);color:var(--crema);}
.bg-noche{background:var(--noche);color:var(--crema);}
.bg-noche-profunda{background:var(--noche-profunda);color:var(--crema);}
.bg-verde h2,.bg-verde h3,.bg-salvia h2,.bg-salvia h3,
.bg-anochecer h2,.bg-anochecer h3,.bg-noche h2,.bg-noche h3,
.bg-noche-profunda h2,.bg-noche-profunda h3{color:var(--marfil);}
.bg-verde .eyebrow,.bg-salvia .eyebrow,.bg-anochecer .eyebrow,
.bg-noche .eyebrow,.bg-noche-profunda .eyebrow{color:var(--dorado-claro);}
.bg-verde .eyebrow::before,.bg-verde .eyebrow.center::after,
.bg-salvia .eyebrow::before,.bg-salvia .eyebrow.center::after,
.bg-anochecer .eyebrow::before,.bg-anochecer .eyebrow.center::after,
.bg-noche .eyebrow::before,.bg-noche .eyebrow.center::after,
.bg-noche-profunda .eyebrow::before,.bg-noche-profunda .eyebrow.center::after{background:var(--dorado-claro);}
.bg-verde .text-salvia,.bg-noche .text-salvia,.bg-noche-profunda .text-salvia,
.bg-anochecer .text-salvia{color:rgba(242,241,223,.78);}
/* link dorado legible sobre fondos oscuros */
.bg-verde .link-gold,.bg-noche .link-gold,.bg-noche-profunda .link-gold,
.bg-salvia .link-gold,.bg-anochecer .link-gold{color:var(--dorado-claro);}

.center{text-align:center;}
.measure{max-width:62ch;}
.measure-sm{max-width:48ch;}

/* ---------- Liquid glass ---------- */
.glass{
  background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-glass);
}
.glass-dark{
  background:var(--glass-dark);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border-dark);
  box-shadow:0 18px 50px -20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  color:var(--marfil);
}
.chip{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  padding:9px 18px;border-radius:100px;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  font-family:var(--body);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:16px 30px;border-radius:100px;
  transition:all .45s var(--ease);
  position:relative;overflow:hidden;cursor:pointer;white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .45s var(--ease);}
.btn-gold{background:var(--dorado);color:#fff;box-shadow:0 14px 34px -14px rgba(191,159,120,.95);}
.btn-gold::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .9s var(--ease);
}
.btn-gold:hover::before{transform:translateX(130%);}
.btn-gold:hover{background:var(--dorado-oscuro);transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(169,136,95,.9);}
.btn-gold:hover svg{transform:translateX(4px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn-outline{border:1px solid currentColor;color:var(--verde);background:transparent;}
.btn-outline:hover{background:var(--verde);color:var(--marfil);border-color:var(--verde);}
.bg-verde .btn-outline,.bg-noche .btn-outline,.bg-noche-profunda .btn-outline,
.bg-anochecer .btn-outline,.cta-band .btn-outline{color:#fff;}
.bg-verde .btn-outline:hover,.bg-noche .btn-outline:hover,.bg-noche-profunda .btn-outline:hover,
.cta-band .btn-outline:hover{background:#fff;color:var(--verde);border-color:#fff;}
/* botón vidrio (sobre fotos) */
.btn-glass{
  background:rgba(248,247,238,.18);color:#fff;
  border:1px solid rgba(255,255,255,.4);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
}
.btn-glass:hover{background:rgba(248,247,238,.92);color:var(--verde);border-color:transparent;transform:translateY(-2px);}
.btn-lg{padding:19px 38px;font-size:13.5px;}

/* link dorado con subrayado animado */
.link-gold{
  font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dorado-oscuro);
  display:inline-flex;align-items:center;gap:.55em;position:relative;padding-bottom:4px;
}
.link-gold::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--dorado);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.link-gold:hover::after{transform:scaleX(1);}
.link-gold svg{width:15px;height:15px;transition:transform .4s var(--ease);}
.link-gold:hover svg{transform:translateX(4px);}

/* ---------- Botón Las Cortaderitas (juguetón) ---------- */
.btn-cortaderitas{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--verde);border:1px solid rgba(49,64,28,.3);
  border-radius:100px;padding:10px 20px;overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease-spring);
  isolation:isolate;
}
.btn-cortaderitas::before{ /* relleno lima que sube como gelatina */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--kids-lima) 0%,var(--kids-verde) 100%);
  transform:translateY(102%);border-radius:inherit;
  transition:transform .45s var(--ease-spring);
}
.btn-cortaderitas:hover{color:#fff;border-color:transparent;transform:rotate(-2deg) scale(1.06);
  animation:kidsWobble .6s var(--ease-spring) .1s;}
.btn-cortaderitas:hover::before{transform:translateY(0);}
.btn-cortaderitas .spark{font-size:13px;line-height:1;transition:transform .5s var(--ease-spring);}
.btn-cortaderitas:hover .spark{transform:rotate(180deg) scale(1.35);}
@keyframes kidsWobble{
  0%{transform:rotate(-2deg) scale(1.06);}
  30%{transform:rotate(2.5deg) scale(1.07);}
  60%{transform:rotate(-1.5deg) scale(1.05);}
  100%{transform:rotate(-2deg) scale(1.06);}
}
/* variante sobre fondos oscuros */
.bg-verde .btn-cortaderitas,.bg-noche .btn-cortaderitas,.site-footer .btn-cortaderitas{
  color:var(--marfil);border-color:rgba(248,247,238,.35);}
.bg-verde .btn-cortaderitas:hover,.site-footer .btn-cortaderitas:hover{color:#fff;}

/* ---------- Header: barra de vidrio flotante ---------- */
.site-header{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;
  /* Pastilla contenida y centrada con ancho ESTABLE: se topa en 1180px y no
     sigue creciendo hacia los bordes en monitores grandes, ni se estira casi a
     borde completo en laptops (1280/1366). El contenido (marca + nav + botones)
     entra cómodo en <1000px, así que a cualquier resolución de escritorio se ve
     igual. El gutter de 48px sólo actúa por debajo de ~1228px. */
  width:min(1180px, calc(100% - 48px));
  transition:transform .6s var(--ease),top .4s var(--ease);
  /* Mantener la capa compositada de forma estable durante la animación de
     ocultar/mostrar: si no, Chrome descarta el backdrop-filter del .bar
     mientras el header se desliza y el vidrio se ve como un panel plano
     translúcido por un instante. */
  will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.site-header.hide{transform:translateX(-50%) translateY(calc(-100% - 20px));}
/* Liquid glass translúcido (mismo material que la ficha del hero) en TODA
   sección y estado: deja ver el fondo a través. El tono del contenido se
   adapta con .over-dark (lo alterna site.js según el fondo). */
.site-header .bar{
  /* columnas laterales iguales (1fr) → el nav (auto) queda centrado de verdad
     en la barra, sin importar el ancho de la marca o del grupo derecho. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  padding:10px 14px 10px 20px;border-radius:100px;
  background:rgba(248,247,238,.14);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 50px -22px rgba(20,28,10,.4), inset 0 1px 0 rgba(255,255,255,.22);
  transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
/* al despegarse del tope, apenas más cuerpo y elevación */
.site-header.scrolled .bar{box-shadow:0 22px 58px -24px rgba(20,28,10,.5), inset 0 1px 0 rgba(255,255,255,.24);}

.brand{display:flex;align-items:center;gap:11px;flex:none;justify-self:start;}
.brand img{height:42px;width:auto;transition:height .4s var(--ease),filter .45s var(--ease);}
.brand__text{display:flex;flex-direction:column;line-height:1;}
.brand__name{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.01em;color:var(--verde);}
.brand__sub{font-size:8.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--dorado-oscuro);margin-top:4px;}

.nav{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,24px);white-space:nowrap;}
.nav a{
  font-family:var(--body);font-size:12.5px;font-weight:500;letter-spacing:.05em;
  color:var(--verde);position:relative;padding:6px 2px;transition:color .35s;
}
.nav a::after{content:"";position:absolute;left:50%;bottom:-1px;width:4px;height:4px;border-radius:50%;
  background:var(--dorado);transform:translateX(-50%) scale(0);transition:transform .35s var(--ease-spring);}
.nav a:hover{color:var(--dorado-oscuro);}
.nav a:hover::after,.nav a.active::after{transform:translateX(-50%) scale(1);}
.nav a.active{color:var(--dorado-oscuro);}

.site-header .header-right{display:flex;align-items:center;gap:10px;justify-self:end;}
.btn-header{
  font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;white-space:nowrap;background:var(--dorado);
  border-radius:100px;padding:11px 22px;position:relative;overflow:hidden;
  transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 10px 26px -12px rgba(191,159,120,.9);
}
.btn-header:hover{background:var(--dorado-oscuro);transform:translateY(-1px);}

.menu-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex:none;border-radius:50%;}
.menu-toggle span{position:relative;width:22px;height:1.6px;background:var(--verde);display:block;transition:.4s var(--ease);}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:22px;height:1.6px;background:inherit;transition:.4s var(--ease);}
.menu-toggle span::before{top:-7px;}
.menu-toggle span::after{top:7px;}
body.menu-open .menu-toggle span{background:transparent;}
body.menu-open .menu-toggle span::before{top:0;transform:rotate(45deg);background:var(--marfil);}
body.menu-open .menu-toggle span::after{top:0;transform:rotate(-45deg);background:var(--marfil);}

/* ---- Header sobre fondo oscuro (hero, portadas, secciones verde/noche,
   franjas CTA, footer): contenido claro + logo en blanco para que se lean
   sobre el vidrio. site.js alterna .over-dark según la sección que cruza. ---- */
.site-header .brand__name,.site-header .brand__sub,
.site-header .nav a,.site-header .btn-cortaderitas{transition:color .45s var(--ease),border-color .45s var(--ease);}
.site-header.over-dark .brand img{filter:brightness(0) invert(1);}
.site-header.over-dark .brand__name{color:var(--marfil);text-shadow:0 2px 18px rgba(20,28,10,.55);}
.site-header.over-dark .brand__sub{color:var(--dorado-claro);text-shadow:0 1px 12px rgba(20,28,10,.5);}
.site-header.over-dark .nav a{color:rgba(248,247,238,.9);text-shadow:0 1px 14px rgba(20,28,10,.5);}
.site-header.over-dark .nav a:hover{color:#fff;}
.site-header.over-dark .nav a.active{color:var(--dorado-claro);}
.site-header.over-dark .btn-cortaderitas{color:var(--marfil);border-color:rgba(248,247,238,.42);}
.site-header.over-dark .menu-toggle span,
.site-header.over-dark .menu-toggle span::before,
.site-header.over-dark .menu-toggle span::after{background:var(--marfil);}

/* drawer móvil */
.mobile-nav{
  position:fixed;inset:0;z-index:90;background:rgba(28,36,16,.88);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.3vh,10px);
  /* safe center = centrado cuando entra, pero se alinea al inicio si el contenido
     es más alto que la pantalla (no recorta el primer ítem). Con overflow-y:auto
     además scrollea en pantallas muy bajas: se adapta a cualquier resolución. */
  justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
  padding:clamp(78px,13vh,96px) 24px clamp(32px,6vh,48px);
}
body.menu-open .mobile-nav{opacity:1;visibility:visible;}
.mobile-nav a{
  font-family:var(--display);color:var(--marfil);font-weight:400;
  /* el tamaño sigue el menor entre ancho y alto de la ventana: en pantallas
     chicas/bajas encoge para que entren todos los ítems sin recortarse. */
  font-size:clamp(24px,min(7.4vw,5vh),44px);line-height:1.06;text-align:center;
  opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.mobile-nav a:hover{color:var(--dorado-claro);}
body.menu-open .mobile-nav a{opacity:1;transform:none;}
body.menu-open .mobile-nav a:nth-child(1){transition-delay:.1s;}
body.menu-open .mobile-nav a:nth-child(2){transition-delay:.15s;}
body.menu-open .mobile-nav a:nth-child(3){transition-delay:.2s;}
body.menu-open .mobile-nav a:nth-child(4){transition-delay:.25s;}
body.menu-open .mobile-nav a:nth-child(5){transition-delay:.3s;}
body.menu-open .mobile-nav a:nth-child(6){transition-delay:.35s;}
body.menu-open .mobile-nav a:nth-child(7){transition-delay:.4s;}
body.menu-open .mobile-nav a:nth-child(8){transition-delay:.45s;}
body.menu-open .mobile-nav a:nth-child(9){transition-delay:.5s;}
.mobile-nav .acento{color:var(--dorado-claro);font-size:17px;margin-top:22px;}
.mobile-nav a.mn-cortaderitas{color:var(--kids-lima);}

/* ---------- Fotos ---------- */
.ph{
  position:relative;overflow:hidden;background:var(--verde);
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;border-radius:var(--radius);
  /* SEAM AL SCROLLEAR — cura. La foto interior lleva filter:var(--img-mood),
     lo que la sube a su propio plano GPU. Si además promovemos el marco (con
     translateZ/mask) quedan DOS planos apilados cuya posición de layout cae en
     medio píxel físico (Windows a 125/150%), y al scrollear la GPU re-muestrea
     el borde → línea horizontal borrosa. Dejamos UN solo plano (el de la foto)
     recortado por este marco con overflow+radius normal, y la foto desborda el
     marco 1px (ver .ph__photo) para que su borde resampleado caiga fuera del
     recorte. NO volver a poner translateZ/mask aquí: reintroduce el seam. */
}
.ph::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(191,159,120,.35), transparent 55%),
    linear-gradient(150deg, #3A4B22, #28331a 70%);
}
.ph::after{
  content:"";position:absolute;inset:0;z-index:1;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.ph__mark{position:absolute;z-index:2;width:42%;max-width:170px;opacity:.16;filter:brightness(0) invert(1);}
.ph.ph-photo .ph__photo{
  /* Desborda el marco ~2px por lado: el filtro sube la foto a su propio plano
     GPU y al scrollear su borde se re-muestrea; al sangrarlo fuera del recorte
     (overflow:hidden del .ph) el seam queda escondido. 2px cubre escalas de
     Windows 125/150% (1px CSS = 1.25/1.5px físicos). */
  position:absolute;top:-2px;left:-2px;z-index:0;
  width:calc(100% + 4px);height:calc(100% + 4px);
  /* anula el img{max-width:100%} global: si no, recorta el sangrado de la
     derecha y la foto queda 2px corta de ese lado, dejando ver el fondo oscuro
     del .ph como una línea negra fina. */
  max-width:none;
  object-fit:cover;object-position:center 58%;
  filter:var(--img-mood);
}
.ph.ph-photo::before{
  z-index:1;
  background:
    linear-gradient(170deg, rgba(16,21,9,.42) 0%, rgba(16,21,9,.04) 42%, rgba(16,21,9,.12) 62%, rgba(10,14,6,.62) 100%),
    radial-gradient(130% 112% at 50% 34%, transparent 50%, rgba(8,11,5,.5) 100%);
  mix-blend-mode:normal;
}
.ph-zoom{cursor:pointer;}
.ph-zoom .ph__photo{transition:transform 1.2s var(--ease),filter .6s var(--ease);}
.ph-zoom:hover .ph__photo{transform:scale(1.07);}
/* Fotos que abren el visor a pantalla completa al tocarlas (catering, etc.). */
.is-zoomable{cursor:zoom-in;}
.is-zoomable .ph__photo{transition:transform 1.2s var(--ease);}
.is-zoomable:hover .ph__photo{transform:scale(1.05);}

.ratio-1-1{aspect-ratio:1/1;}
.ratio-4-3{aspect-ratio:4/3;}
.ratio-3-2{aspect-ratio:3/2;}
.ratio-16-9{aspect-ratio:16/9;}
.ratio-3-4{aspect-ratio:3/4;}
.ratio-4-5{aspect-ratio:4/5;}
.ratio-2-3{aspect-ratio:2/3;}

/* etiqueta de vidrio sobre foto */
.ph-label{
  position:absolute;z-index:3;left:14px;bottom:14px;right:auto;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:100px;
  background:rgba(248,247,238,.22);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:background .4s var(--ease),transform .5s var(--ease);
}
.ph:hover .ph-label{background:rgba(248,247,238,.4);transform:translateY(-3px);}

/* ---------- Componentes editoriales ---------- */
.feature{display:flex;gap:18px;align-items:flex-start;}
.feature__ico{
  flex:none;width:40px;height:40px;border-radius:14px;
  background:rgba(191,159,120,.14);color:var(--dorado-oscuro);
  display:flex;align-items:center;justify-content:center;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.feature:hover .feature__ico{background:rgba(191,159,120,.28);transform:translateY(-2px);}
.feature__ico svg{width:20px;height:20px;}
.feature h3{font-size:20px;font-weight:500;margin-bottom:6px;}
.feature p{font-size:15px;color:var(--salvia);}
.bg-verde .feature p,.bg-noche .feature p,.bg-noche-profunda .feature p{color:rgba(242,241,223,.78);}
.bg-verde .feature__ico,.bg-noche .feature__ico{background:rgba(210,186,152,.14);color:var(--dorado-claro);}
.bg-verde .feature h3,.bg-noche .feature h3{color:var(--marfil);}

/* stat con contador */
.stat{position:relative;padding-top:18px;}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--dorado) 0%,rgba(191,159,120,.12) 100%);
  transform:scaleX(0);transform-origin:left;transition:transform 1.25s var(--ease) .1s;}
.stat.in::before{transform:scaleX(1);}
.stat__num{font-family:var(--display);font-size:clamp(46px,6vw,78px);line-height:1.05;color:var(--dorado);font-weight:380;overflow:hidden;}
.stat__num>span{display:inline-block;transform:translateY(108%);transition:transform 1.05s var(--ease) .35s;}
.stat.in .stat__num>span{transform:none;}
.stat__lbl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--salvia);margin-top:10px;font-weight:600;
  opacity:0;transition:opacity .9s var(--ease) .6s;}
.stat.in .stat__lbl{opacity:1;}
.stat.d1::before{transition-delay:.3s;}
.stat.d1 .stat__num>span{transition-delay:.55s;}
.stat.d1 .stat__lbl{transition-delay:.8s;}
.bg-verde .stat__lbl,.bg-noche .stat__lbl{color:rgba(242,241,223,.7);}

.rule{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--dorado),transparent);opacity:.5;}

/* valores (Nosotros / Eventos) — relleno dorado que sube + destello */
.val{position:relative;padding:28px 26px;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.55);
  backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px);
  border:1px solid rgba(191,159,120,.2);
  transition:transform .55s var(--ease-spring),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.val::before{ /* relleno dorado que sube */
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(155deg,var(--dorado) 0%,var(--dorado-oscuro) 100%);
  transform:translateY(101%);transition:transform .55s var(--ease-spring);}
.val::after{ /* destello diagonal */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  transform:translateX(-130%);transition:transform .85s var(--ease);}
.val:hover{border-color:transparent;transform:translateY(-6px) scale(1.025);box-shadow:var(--shadow-card);}
.val:hover::before{transform:translateY(0);}
.val:hover::after{transform:translateX(130%);}
.val h3{font-family:var(--display);font-size:24px;font-weight:500;color:var(--verde);
  display:flex;align-items:baseline;transition:color .45s var(--ease);}
.val h3 .vn{font-family:var(--acento);font-style:italic;font-weight:400;font-size:14px;color:var(--dorado-oscuro);margin-right:12px;
  transition:color .45s var(--ease);}
.val p{margin-top:10px;color:var(--salvia);font-size:14.5px;line-height:1.7;transition:color .45s var(--ease);}
.val:hover h3,.val:hover h3 .vn{color:#fff;}
.val:hover p{color:rgba(255,255,255,.92);}
.bg-verde .val{background:rgba(248,247,238,.06);border-color:rgba(248,247,238,.14);}
.bg-verde .val h3{color:var(--marfil);}
.bg-verde .val p{color:rgba(242,241,223,.75);}

/* índice de página (Eventos) */
.ev-index{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.ev-index__item{display:flex;align-items:center;gap:16px;padding:22px 4px;
  border-bottom:1px solid rgba(191,159,120,.4);position:relative;overflow:hidden;}
.ev-index__item::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--dorado);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);}
.ev-index__item:hover::after{transform:scaleX(1);}
.ev-index__item .n{font-family:var(--acento);font-style:italic;font-size:15px;color:var(--dorado-oscuro);}
.ev-index__item .t{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:500;color:var(--verde);
  transition:transform .5s var(--ease),color .4s;}
.ev-index__item:hover .t{transform:translateX(6px);color:var(--dorado-oscuro);}
.ev-index__item svg{width:18px;height:18px;margin-left:auto;color:var(--dorado-oscuro);
  transform:translateY(-4px);opacity:0;transition:transform .5s var(--ease),opacity .5s;}
.ev-index__item:hover svg{transform:none;opacity:1;}
@media (max-width:760px){.ev-index{grid-template-columns:1fr;}}

/* puntos editoriales */
.ev-points li{position:relative;padding:13px 0 13px 30px;font-size:15.5px;line-height:1.6;
  color:var(--salvia);border-bottom:1px solid rgba(191,159,120,.25);}
.ev-points li:first-child{border-top:1px solid rgba(191,159,120,.25);}
.ev-points li::before{content:"";position:absolute;left:4px;top:1.45em;width:14px;height:1px;background:var(--dorado);}
.bg-verde .ev-points li{color:rgba(242,241,223,.78);border-color:rgba(242,241,223,.16);}

/* ============================================================
   Eventos — índice editorial navegable (.ev-nav)
   Lista tipo revista: título serif grande, bajada y miniatura real
   de cada sección. Salta al ancla correspondiente más abajo.
   ============================================================ */
.ev-nav{display:flex;flex-direction:column;}
.ev-nav__row{position:relative;display:grid;
  grid-template-columns:1fr auto auto;align-items:center;
  gap:clamp(18px,3vw,44px);
  padding:clamp(20px,2.5vw,32px) 4px;
  border-top:1px solid rgba(191,159,120,.34);
  color:var(--verde);}
.ev-nav__row:last-child{border-bottom:1px solid rgba(191,159,120,.34);}
.ev-nav__row::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;z-index:1;
  background:linear-gradient(90deg,var(--dorado),var(--dorado-claro));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);}
.ev-nav__row:hover::after,.ev-nav__row:focus-visible::after{transform:scaleX(1);}
.ev-nav__body{min-width:0;}
.ev-nav__t{display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(28px,4vw,52px);line-height:1.02;letter-spacing:-.015em;color:var(--verde);
  transition:transform .55s var(--ease),color .4s var(--ease);}
.ev-nav__sub{display:block;margin-top:8px;font-size:clamp(13px,1.1vw,15.5px);
  line-height:1.5;color:var(--salvia);}
.ev-nav__thumb{width:clamp(86px,11vw,148px);aspect-ratio:4/3;flex:none;
  border-radius:var(--radius);overflow:hidden;isolation:isolate;box-shadow:var(--shadow-soft);}
.ev-nav__thumb picture{display:block;width:100%;height:100%;}
.ev-nav__thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease);}
.ev-nav__arr{width:clamp(44px,4vw,54px);height:clamp(44px,4vw,54px);flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--dorado-oscuro);
  border:1px solid rgba(191,159,120,.5);
  transition:background .45s var(--ease),color .45s,border-color .45s,transform .5s var(--ease);}
.ev-nav__arr svg{width:38%;height:38%;}
.ev-nav__row:hover .ev-nav__t{transform:translateX(10px);color:var(--dorado-oscuro);}
.ev-nav__row:hover .ev-nav__thumb img{transform:scale(1.07);}
.ev-nav__row:hover .ev-nav__arr{background:var(--dorado);color:#fff;border-color:var(--dorado);transform:translateX(4px);}
@media (max-width:640px){
  .ev-nav__row{grid-template-columns:1fr auto;gap:14px 18px;padding-block:18px;}
  .ev-nav__arr{display:none;}
  .ev-nav__thumb{width:74px;aspect-ratio:1/1;}
}

/* ============================================================
   Eventos — escena a sangre completa (.ev-stage)
   La foto (carrusel) ocupa toda la sección; el panel de vidrio
   flota encima, alternando lado, sobre un scrim que garantiza
   contraste. Foto grande = máximo protagonismo visual.
   ============================================================ */
.ev-stage{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(620px,90vh,900px);
  display:flex;align-items:center;
  padding-block:clamp(56px,8vw,110px);
  color:var(--marfil);}
.ev-stage__media{position:absolute;inset:0;z-index:0;}
.ev-stage__media .ev-carousel,
.ev-stage__media .ev-car__track{height:100%;}
.ev-stage__media .ev-carousel{border-radius:0;box-shadow:none;}
.ev-stage__media .ev-slide,
.ev-stage__media .ev-slide:first-child{position:absolute;inset:0;}
.ev-stage__media .ev-slide .ph{position:absolute;inset:0;height:100%;border-radius:0;}
/* Reencuadre: el panel cubre un lado, así que sesgamos el foco de cada foto
   hacia el lado libre. El leve zoom garantiza margen de paneo a cualquier
   ancho (en pantallas anchas/bajas el recorte horizontal desaparece solo).
   Ajuste fino por foto con .foc-l / .foc-c / .foc-r en el .ph__photo. */
.ev-stage__media .ph__photo{transform:scale(1.12);object-position:50% 50%;}
.ev-stage:not(.ev-stage--flip) .ev-stage__media .ph__photo{object-position:72% 48%;}
.ev-stage--flip .ev-stage__media .ph__photo{object-position:28% 48%;}
.ev-stage__media .ph__photo.foc-l{object-position:14% 48%;}
.ev-stage__media .ph__photo.foc-c{object-position:50% 48%;}
.ev-stage__media .ph__photo.foc-r{object-position:88% 48%;}
.ev-stage__media .ph__photo.foc-top{object-position-y:24%;}
.ev-stage__media .ph__photo.foc-low{object-position-y:70%;}

/* scrim direccional: oscurece el lado del panel, deja la foto limpia del otro */
.ev-stage__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg, rgba(10,14,6,.84) 0%, rgba(10,14,6,.55) 30%, rgba(10,14,6,.16) 58%, rgba(10,14,6,0) 80%),
    linear-gradient(0deg, rgba(10,14,6,.35), rgba(10,14,6,0) 32%);}
.ev-stage--flip .ev-stage__scrim{
  background:
    linear-gradient(265deg, rgba(10,14,6,.84) 0%, rgba(10,14,6,.55) 30%, rgba(10,14,6,.16) 58%, rgba(10,14,6,0) 80%),
    linear-gradient(0deg, rgba(10,14,6,.35), rgba(10,14,6,0) 32%);}

/* panel flotante de vidrio */
/* el contenedor deja pasar el clic a la foto (para abrir el visor); el panel y
   sus enlaces siguen siendo interactivos. */
.ev-stage__inner{position:relative;z-index:2;width:100%;pointer-events:none;}
.ev-stage__panel{pointer-events:auto;}
.ev-stage__panel{max-width:min(560px,100%);
  padding:clamp(28px,3.4vw,46px);border-radius:var(--radius-lg);
  background:rgba(18,24,10,.5);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border-dark);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  color:var(--marfil);}
.ev-stage--flip .ev-stage__panel{margin-left:auto;}
.ev-stage__panel h2,.ev-stage__panel .h2{color:#fff;}
.ev-stage__panel .lead{color:rgba(248,247,238,.9);}
.ev-stage__panel .acento.dorado{color:var(--dorado-claro);}
.ev-stage__panel .eyebrow{color:var(--dorado-claro);}
.ev-stage__panel .eyebrow::before,.ev-stage__panel .eyebrow::after{background:var(--dorado-claro);}
.ev-stage__panel .ev-points li{color:rgba(242,241,223,.82);border-color:rgba(242,241,223,.18);}
.ev-stage__panel .ev-points li:first-child{border-top-color:rgba(242,241,223,.18);}
.ev-stage__panel .link-gold{color:var(--dorado-claro);}
.ev-stage__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;}

@media (max-width:860px){
  /* En móvil la escena se apila en columna: la foto de fondo, luego los controles
     y por último la tarjeta, todo asentado abajo. Así los controles quedan
     CENTRADOS y justo ENCIMA de la tarjeta (con aire), no en una esquina. */
  .ev-stage{min-height:clamp(560px,92vh,760px);
    flex-direction:column;justify-content:flex-end;align-items:center;
    padding-block:clamp(40px,12vw,64px);}
  .ev-stage__panel,.ev-stage--flip .ev-stage__panel{max-width:100%;margin:0;}
  .ev-stage__scrim,.ev-stage--flip .ev-stage__scrim{
    background:linear-gradient(0deg, rgba(10,14,6,.9) 0%, rgba(10,14,6,.52) 40%, rgba(10,14,6,.1) 70%, transparent 100%);}
  /* En móvil el panel cubre el PIE (no un lado): centramos en horizontal y
     subimos el foco para dejar el sujeto sobre el panel. Anula el sesgo lateral. */
  .ev-stage:not(.ev-stage--flip) .ev-stage__media .ph__photo,
  .ev-stage--flip .ev-stage__media .ph__photo{object-position:50% 38%;}
  /* Controles: pasan de flotar en una esquina a apilarse EN FLUJO, centrados y
     sobre la tarjeta. position:relative + z-index los mantiene por encima del
     scrim; el margin inferior abre el aire con la tarjeta (no pegados). */
  .ev-stage .ev-car__controls,
  .ev-stage.ev-stage--flip .ev-car__controls{
    position:relative;z-index:3;inset:auto;
    align-self:center;margin:0 auto clamp(14px,3.6vw,20px);}
  /* La etiqueta "Bodas/Sociales/Corporativos" es redundante en móvil: el panel
     ya titula la categoría. Se oculta (sigue en el DOM para el visor). Así arriba
     quedan solo los puntos + "Ampliar", sin amontonarse. */
  .ev-car__badge{display:none;}
  /* Panel más compacto: entra completo sin trepar hasta los controles. Se
     conserva TODA la info, solo se ajusta densidad tipográfica y espaciados. */
  .ev-stage__panel{padding:clamp(20px,5.2vw,28px);}
  .ev-stage__panel .h2{font-size:clamp(27px,7.6vw,36px);line-height:1.1;}
  .ev-stage__panel .lead{font-size:14.5px;line-height:1.55;margin-top:14px;}
  .ev-stage__panel .ev-points{margin-top:18px;}
  .ev-stage__panel .ev-points li{padding:9px 0 9px 24px;font-size:13.8px;line-height:1.45;}
  .ev-stage__panel .ev-stage__actions{margin-top:18px;gap:12px 18px;}
}
/* En celulares chicos achicamos un poco el alto de la escena para que el panel
   no domine toda la pantalla y se vea la foto arriba. Además rebalanceamos el
   padding vertical: MÁS arriba (abre aire entre las píldoras y la tarjeta, que
   antes quedaban pegadas) y MENOS abajo (la tarjeta baja y ocupa ese espacio),
   para que cada cosa tenga su respiro. */
@media (max-width:560px){
  .ev-stage{min-height:clamp(500px,84vh,660px);
    padding-block:clamp(52px,15vw,60px) clamp(48px,14vw,56px);}
}

.ev-carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-card);}
.ev-car__track{position:relative;}
.ev-carousel .ph{border-radius:0;}
.ev-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1000ms var(--ease),visibility 0s linear 1000ms;}
.ev-slide:first-child{position:relative;}
.ev-slide.is-active{opacity:1;visibility:visible;z-index:1;
  transition:opacity 1000ms var(--ease),visibility 0s;}

.ev-car__badge{position:absolute;z-index:3;left:16px;top:16px;
  padding:9px 17px;border-radius:100px;color:#fff;
  background:rgba(248,247,238,.18);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.4);box-shadow:0 8px 24px -12px rgba(0,0,0,.5);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
/* Controles del carrusel (puntos + botón Ampliar) en el lado LIBRE: por defecto
   el panel va a la izquierda → controles abajo a la derecha; en --flip se mudan
   a la izquierda para no quedar bajo el panel. */
/* Controles UNIFICADOS: los puntos y "Ampliar" viven dentro de UNA sola píldora
   de vidrio, separados por una hairline. Antes eran dos píldoras sueltas; una
   sola queda más limpia. En escritorio flota sobre el lado libre de la foto
   (por eso el offset lateral esquiva el FAB de WhatsApp); en móvil se apila
   centrada sobre la tarjeta (ver bloque responsive). */
.ev-car__controls{position:absolute;z-index:3;right:clamp(90px,8vw,104px);bottom:20px;
  display:inline-flex;align-items:center;gap:12px;
  padding:9px 16px;border-radius:100px;
  background:rgba(22,30,11,.4);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.55);}
.ev-stage--flip .ev-car__controls{right:auto;left:20px;}
.ev-car__dots{display:flex;align-items:center;gap:10px;}
.ev-car__dots button{position:relative;width:10px;height:10px;padding:0;border-radius:50%;border:0;
  background:rgba(255,255,255,.46);cursor:pointer;
  transition:background .45s var(--ease),transform .45s var(--ease);}
/* área táctil ampliada sin agrandar el punto visual */
.ev-car__dots button::after{content:"";position:absolute;inset:-9px;}
.ev-car__dots button:hover{background:rgba(255,255,255,.9);transform:scale(1.18);}
.ev-car__dots button.is-active{background:var(--dorado-claro);transform:scale(1.5);}
.ev-car__expand{display:inline-flex;align-items:center;gap:8px;
  padding:2px 2px 2px 12px;border:0;border-left:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s var(--ease),opacity .3s var(--ease);}
.ev-car__expand svg{width:16px;height:16px;flex:none;}
.ev-car__expand:hover{color:var(--dorado-claro);}
.ev-carousel{cursor:zoom-in;}

/* ============================================================
   Lightbox / visor de fotos a pantalla completa
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:995;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,56px);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility 0s linear .4s;}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease);}
.lightbox__backdrop{position:absolute;inset:0;cursor:zoom-out;
  background:rgba(8,11,5,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.lightbox__frame{position:relative;z-index:1;margin:0;max-width:min(1400px,100%);max-height:100%;
  display:flex;align-items:center;justify-content:center;}
.lightbox__img{display:block;width:auto;height:auto;max-width:100%;max-height:86vh;
  border-radius:var(--radius);box-shadow:0 40px 120px -30px rgba(0,0,0,.85);
  opacity:0;transform:scale(.98);transition:opacity .45s var(--ease),transform .55s var(--ease);}
.lightbox.is-open .lightbox__img{opacity:1;transform:none;}
.lightbox__btn{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  width:clamp(46px,5vw,58px);height:clamp(46px,5vw,58px);border-radius:50%;color:#fff;cursor:pointer;
  background:rgba(248,247,238,.12);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);}
.lightbox__btn svg{width:42%;height:42%;}
.lightbox__btn:hover{background:var(--dorado);border-color:var(--dorado);}
.lightbox__close{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);}
.lightbox__close:hover{transform:rotate(90deg);}
.lightbox__prev{left:clamp(10px,2.5vw,28px);top:50%;transform:translateY(-50%);}
.lightbox__next{right:clamp(10px,2.5vw,28px);top:50%;transform:translateY(-50%);}
.lightbox__prev:hover{transform:translateY(-50%) scale(1.08);}
.lightbox__next:hover{transform:translateY(-50%) scale(1.08);}
.lightbox__bar{position:absolute;z-index:2;left:50%;bottom:clamp(16px,3vw,30px);transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:10px 20px;border-radius:100px;color:#fff;
  background:rgba(248,247,238,.12);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  font-size:12px;font-weight:600;letter-spacing:.04em;}
.lightbox__badge{text-transform:uppercase;letter-spacing:.16em;color:var(--dorado-claro);}
.lightbox__count{font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion:reduce){
  .lightbox__img,.lightbox.is-open .lightbox__img{transition:opacity .3s var(--ease);transform:none;}
  .lightbox__close:hover{transform:none;}
}

/* botón puente a la galería (debajo del carrusel) */
.ev-gal-link{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 14px 13px 24px;border-radius:100px;color:var(--verde);
  background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(191,159,120,.45);
  font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s,transform .45s var(--ease);}
.ev-gal-link .arr{width:36px;height:36px;flex:none;border-radius:50%;color:#fff;background:var(--dorado);
  display:flex;align-items:center;justify-content:center;transition:transform .45s var(--ease),background .45s;}
.ev-gal-link .arr svg{width:15px;height:15px;}
.ev-gal-link:hover{background:var(--verde);color:var(--marfil);border-color:var(--verde);transform:translateY(-2px);}
.ev-gal-link:hover .arr{transform:translateX(3px);}
.ev-gal-link--light{color:var(--marfil);background:rgba(248,247,238,.1);border-color:rgba(248,247,238,.32);}
.ev-gal-link--light .arr{background:var(--dorado);}
.ev-gal-link--light:hover{background:var(--marfil);color:var(--verde);border-color:var(--marfil);}

/* gal-link dentro del panel a sangre completa: sin margen superior propio
   (lo gobierna .ev-stage__actions) */
.ev-stage__actions .ev-gal-link{margin-top:0;}

/* filas de instalaciones */
.feat-list{margin-top:clamp(40px,5vw,64px);}
.feat-row{position:relative;display:grid;grid-template-columns:1fr 1.5fr;gap:14px 32px;
  align-items:start;padding:clamp(22px,2.6vw,30px) 4px;}
.feat-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(101,115,92,.25);transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease) .25s;}
.feat-row.in::after{transform:scaleX(1);}
.feat-row:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(101,115,92,.25);transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease) .1s;}
.feat-row:first-child.in::before{transform:scaleX(1);}
.feat-row .n{font-family:var(--acento);font-style:italic;font-size:17px;color:var(--dorado-oscuro);padding-top:7px;}
.feat-row h3{font-size:clamp(22px,2.2vw,29px);color:var(--verde);font-weight:400;
  transition:color .45s var(--ease),transform .55s var(--ease);}
.feat-row p{color:var(--salvia);font-size:15px;line-height:1.7;max-width:58ch;}
.feat-row:hover h3{color:var(--dorado-oscuro);transform:translateX(6px);}
.bg-verde .feat-row::after,.bg-verde .feat-row:first-child::before,
.bg-noche .feat-row::after,.bg-noche .feat-row:first-child::before{background:rgba(242,241,223,.16);}
.bg-verde .feat-row h3,.bg-noche .feat-row h3{color:var(--marfil);}
.bg-verde .feat-row p,.bg-noche .feat-row p{color:rgba(242,241,223,.72);}
.bg-verde .feat-row .n,.bg-noche .feat-row .n{color:var(--dorado-claro);}
.bg-verde .feat-row:hover h3{color:var(--dorado-claro);}
@media (max-width:760px){
  .feat-row{grid-template-columns:1fr;}
  .feat-row p{grid-column:1;}
}

/* event-card (tarjetas con foto) */
.event-card{position:relative;overflow:hidden;border-radius:var(--radius-lg);min-height:460px;
  /* clip-path además de overflow:hidden: al aplicar el tilt 3D (transform con
     perspective), Chrome deja de recortar las esquinas con border-radius y la
     tarjeta se ve cuadrada en hover. clip-path sí recorta durante transforms 3D. */
  clip-path:inset(0 round var(--radius-lg));
  display:flex;align-items:flex-end;color:var(--marfil);}
/* Entrada sofisticada y escalonada al entrar la sección en pantalla: la tarjeta
   se descubre con una cortina (clip-path) mientras sube y se enfoca, y la foto
   se asienta desde un leve zoom. Cascada de izquierda a derecha (.d1/.d2).
   Reutiliza la clase .reveal (JS agrega .in); aquí sumamos clip-path y el
   asentamiento de la foto sin tocar el resto del sitio. */
#eventos .event-card.reveal{
  opacity:0;transform:translateY(28px) scale(.99);filter:none;
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
#eventos .event-card.reveal.in{opacity:1;transform:none;}
#eventos .event-card.reveal .ph__photo{transition:transform 1.2s var(--ease);}
#eventos .event-card.reveal:not(.in) .ph__photo{transform:scale(1.08);}
#eventos .event-card.reveal:not(.in) .event-card__glass{opacity:0;transform:translateY(18px);}
#eventos .event-card.reveal .event-card__glass{transition:opacity .7s var(--ease) .2s,transform .7s var(--ease) .2s,background .45s var(--ease);}
/* cascada izquierda→derecha para que se note la secuencia */
#eventos .event-card.reveal.d1{transition-delay:.1s;}
#eventos .event-card.reveal.d1 .event-card__glass{transition-delay:.3s;}
#eventos .event-card.reveal.d2{transition-delay:.2s;}
#eventos .event-card.reveal.d2 .event-card__glass{transition-delay:.4s;}
/* Destello dorado: barrido de luz periódico y escalonado (se pausa en hover,
   donde toma el control la inclinación 3D). z bajo el contenido (body z-index:3),
   así nunca tapa el texto. */
.event-card::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(212,195,169,.30) 50%,transparent 64%);
  background-size:230% 100%;background-position:145% 0;
  transition:background-position 1.1s var(--ease);
}
.event-card:hover::after{background-position:-45% 0;}
.event-card .ph{position:absolute;inset:0;border-radius:0;}
.event-card .ph .ph__photo{transition:transform 1.2s var(--ease);}
.event-card:hover .ph .ph__photo{transform:scale(1.06);}
.event-card__veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(28,36,16,0) 35%,rgba(28,36,16,.82) 100%);}
.event-card__body{position:relative;z-index:3;padding:18px;width:100%;}
.event-card__glass{
  border-radius:var(--radius-lg);padding:22px 24px;
  background:rgba(248,247,238,.14);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.25);
  transform:translateY(0);transition:background .45s var(--ease),transform .55s var(--ease);
}
.event-card:hover .event-card__glass{background:rgba(248,247,238,.24);transform:translateY(-6px);}
.event-card h3{color:#fff;font-size:28px;font-weight:400;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.event-card h3 .arr{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  display:inline-flex;align-items:center;justify-content:center;transition:background .4s var(--ease),transform .5s var(--ease);}
.event-card h3 .arr svg{width:15px;height:15px;}
.event-card:hover h3 .arr{background:var(--dorado);border-color:var(--dorado);transform:rotate(-45deg);}
.event-card .tag{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dorado-claro);font-weight:700;display:block;margin-bottom:8px;}
.event-card p{font-size:13.5px;color:rgba(248,247,238,.85);margin-top:8px;line-height:1.6;}
.event-card ul{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px;}
.event-card li{font-size:11.5px;border:1px solid rgba(242,241,223,.35);border-radius:100px;padding:4px 11px;color:rgba(242,241,223,.92);}

/* why-item */
.why-item{display:flex;gap:20px;padding:26px 0;position:relative;}
.why-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(191,159,120,.3);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .2s;}
.reveal.in .why-item::after{transform:scaleX(1);}
.reveal.in .why-item:nth-child(2)::after{transition-delay:.35s;}
.reveal.in .why-item:nth-child(3)::after{transition-delay:.5s;}
.reveal.in .why-item:nth-child(4)::after{transition-delay:.65s;}
.why-item .n{font-family:var(--acento);font-style:italic;font-size:26px;color:var(--dorado);flex:none;width:54px;line-height:1.2;transition:transform .5s var(--ease);}
.why-item:hover .n{transform:translateX(5px);}
.why-item h3{font-size:20px;font-weight:500;margin-bottom:5px;}
.why-item p{color:var(--salvia);font-size:15px;max-width:60ch;}
.bg-verde .why-item p,.bg-noche .why-item p{color:rgba(242,241,223,.75);}

/* citas rotativas */
.quotes{position:relative;text-align:center;max-width:880px;margin-inline:auto;}
.quotes .qmark{font-family:var(--display);font-size:clamp(80px,9vw,120px);line-height:.55;
  color:var(--dorado);display:block;margin-bottom:30px;opacity:.6;}
.quote-slides{display:grid;}
.quote-slides blockquote{grid-area:1/1;opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);pointer-events:none;}
.quote-slides blockquote.active{opacity:1;transform:none;pointer-events:auto;}
.quote-slides .qtext{font-family:var(--acento);font-style:italic;font-weight:400;
  font-size:clamp(24px,3.2vw,40px);line-height:1.4;color:var(--verde);text-wrap:pretty;}
.bg-verde .quote-slides .qtext,.bg-noche .quote-slides .qtext,.bg-noche-profunda .quote-slides .qtext{color:#fff;}
.quote-slides footer{margin-top:32px;font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dorado-oscuro);}
.bg-noche .quote-slides footer,.bg-noche-profunda .quote-slides footer{color:var(--dorado-claro);}
.quote-slides footer small{display:block;margin-top:7px;color:var(--salvia);font-size:11px;letter-spacing:.18em;font-weight:500;}
.quote-nav{margin-top:44px;display:flex;align-items:center;justify-content:center;gap:24px;}
.quote-nav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(191,159,120,.5);
  color:var(--dorado-oscuro);display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);}
.quote-nav button:hover{background:var(--dorado);border-color:var(--dorado);color:#fff;}
.quote-nav button svg{width:17px;height:17px;}
.quote-nav .q-idx{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.3em;
  color:var(--salvia);min-width:78px;text-align:center;}

/* testimonios en grilla (portfolio) */
.testi{background:transparent;border-radius:0;padding:28px 0 0;box-shadow:none;
  display:flex;flex-direction:column;height:100%;position:relative;}
.testi::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--dorado),rgba(191,159,120,.15));}
.testi .quote{font-family:var(--acento);font-style:italic;font-size:clamp(19px,1.7vw,23px);line-height:1.55;color:var(--verde);}
.testi .stars{display:none;}
.testi .who{margin-top:auto;padding-top:24px;display:block;}
.testi .who .av{display:none;}
.testi .who b{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dorado-oscuro);display:block;}
.testi .who small{font-size:12px;color:var(--salvia);letter-spacing:.08em;display:block;margin-top:4px;}

/* marquee de clientes */
.marquee{overflow:hidden;position:relative;padding-block:clamp(8px,1vw,14px);}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}
.marquee__track{display:flex;gap:clamp(36px,4vw,64px);align-items:baseline;width:max-content;
  animation:marqueeX 38s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
.marquee__track span{font-family:var(--display);font-weight:380;white-space:nowrap;
  font-size:clamp(26px,3vw,42px);color:rgba(242,241,223,.62);transition:color .4s;}
.marquee__track span:hover{color:var(--dorado-claro);}
.marquee__track i{font-style:normal;color:var(--dorado);font-size:clamp(13px,1.4vw,17px);align-self:center;}
@keyframes marqueeX{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Footer ---------- */
.site-footer{background:var(--noche-profunda);color:var(--crema);padding-block:clamp(64px,7vw,100px) 28px;
  position:relative;overflow:hidden;}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 80% 0%, rgba(191,159,120,.1), transparent 70%);}
.site-footer a{color:rgba(242,241,223,.72);transition:color .3s;}
.site-footer a:hover{color:var(--dorado-claro);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;position:relative;z-index:1;}
.site-footer h4{font-family:var(--body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dorado);margin-bottom:20px;font-weight:700;}
.site-footer .footbrand{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.site-footer .footlogo{height:64px;width:auto;}
.site-footer .footbrand .brand__text{align-items:center;text-align:center;}
.site-footer .footbrand .brand__name{color:var(--marfil);font-size:22px;}
.site-footer .footbrand .brand__sub{color:var(--dorado-claro);}
.site-footer .foot-col p{font-size:14.5px;color:rgba(242,241,223,.66);line-height:1.7;max-width:34ch;}
.site-footer ul{display:flex;flex-direction:column;gap:12px;}
.site-footer li{font-size:14px;}
.footer-bottom{margin-top:60px;padding-top:24px;border-top:1px solid rgba(242,241,223,.12);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:rgba(242,241,223,.62);letter-spacing:.04em;position:relative;z-index:1;}
/* marca de agua tipográfica gigante */
.foot-word{
  display:block;text-align:center;user-select:none;pointer-events:none;
  font-family:var(--display);font-weight:380;white-space:nowrap;
  font-size:clamp(40px,7.6vw,112px);line-height:1;letter-spacing:0;
  color:transparent;-webkit-text-stroke:1px rgba(210,186,152,.22);
  margin-top:clamp(36px,5vw,64px);
}

/* ---------- WhatsApp flotante (abajo a la derecha) ----------
   Botón de conversión, SIEMPRE visible. Verde de la PALETA (no el verde de
   WhatsApp) para ir a tono; ícono blanco que lo hace reconocible al instante.
   Un poco más chico que antes. */
.fab-dock{position:fixed;right:20px;bottom:20px;z-index:80;}
.fab-wa{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--verde);color:#fff;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 34px -14px rgba(20,28,10,.6), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  /* capa GPU estable + origen al centro: el scale del hover crece/encoge desde el
     centro exacto y no "salta" al volver (en Windows con escala 125/150% un
     transform que entra y sale re-rasterizaba en otra grilla y se notaba). */
  transform-origin:center;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.fab-wa svg{width:29px;height:29px;}
.fab-wa:hover{background:var(--verde-90);transform:scale(1.06);
  box-shadow:0 20px 44px -14px rgba(20,28,10,.7), inset 0 1px 0 rgba(255,255,255,.18);}
.fab-wa:focus-visible{outline:2px solid var(--marfil);outline-offset:3px;}

/* ---------- Redes en el header — botón "+" con dropdown ----------
   Integrado en la barra de vidrio del header (a la derecha, junto a Contacto).
   El "+" comparte el lenguaje de los controles del header y adapta su color con
   .over-dark (lo alterna site.js según el fondo). Al abrir, despliega hacia
   ABAJO un panel de vidrio con Instagram + Facebook. En modo hamburguesa
   (<=1180px) se oculta: las redes quedan en el footer. */
.hdr-social{position:relative;display:flex;align-items:center;flex:none;}
.hdr-social__btn{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;cursor:pointer;
  color:var(--verde);background:transparent;border:1px solid rgba(49,64,28,.3);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.hdr-social__btn svg{width:18px;height:18px;transition:transform .45s var(--ease);}
.hdr-social__btn:hover{background:rgba(49,64,28,.07);}
.hdr-social__btn:focus-visible{outline:2px solid var(--dorado);outline-offset:2px;}
.hdr-social.is-open .hdr-social__btn svg{transform:rotate(135deg);}
.hdr-social__menu{
  /* centrada con el botón "+": left:50% del wrapper (que mide lo que el botón) +
     translateX(-50%). La píldora cae justo debajo y centrada. */
  position:absolute;top:calc(100% + 12px);left:50%;z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;
  border-radius:24px;
  background:var(--glass-strong);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-glass);
  opacity:0;visibility:hidden;
  transform:translateX(-50%) translateY(-8px) scale(.96);transform-origin:top center;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s linear .35s;
}
.hdr-social.is-open .hdr-social__menu{
  opacity:1;visibility:visible;transform:translateX(-50%);
  transition:opacity .3s var(--ease),transform .35s var(--ease);
}
.hdr-social__menu a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  transition:transform .3s var(--ease),background .3s var(--ease);
  /* mismo arreglo que .fab-wa: el scale del hover queda centrado y suave, sin el
     reacomodo al salir del hover (capa GPU estable + origen al centro). */
  transform-origin:center;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.hdr-social__menu a svg{width:23px;height:23px;}
.hdr-social__menu a:hover{transform:scale(1.1);background:rgba(255,255,255,.55);}
/* sobre fondo oscuro (hero/portadas) el "+" va en claro, como el resto del header */
.site-header.over-dark .hdr-social__btn{color:var(--marfil);border-color:rgba(248,247,238,.42);}
.site-header.over-dark .hdr-social__btn:hover{background:rgba(248,247,238,.12);}
/* En celular/tablet (modo hamburguesa) el "+" de redes SÍ se muestra, a la
   izquierda del botón hamburguesa (queda antes en el DOM). Así las redes quedan
   accesibles también en móvil sin ir al footer. */
@media (max-width:1180px){.hdr-social{display:flex;}}

/* ---------- Scroll reveal (siempre activo) ---------- */
.reveal{opacity:0;transform:translateY(30px);filter:blur(6px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);}
.reveal.in{opacity:1;transform:none;filter:blur(0);}
.reveal.d1{transition-delay:.12s;}
.reveal.d2{transition-delay:.24s;}
.reveal.d3{transition-delay:.36s;}
.reveal.d4{transition-delay:.48s;}
.reveal.bare{opacity:1;transform:none;filter:none;transition:none;}
.reveal-img{clip-path:inset(0 0 100% 0 round var(--radius));transition:clip-path 1.2s var(--ease);}
.reveal-img.in{clip-path:inset(0 0 0 0 round var(--radius));}
.reveal-img .ph__photo{transition:transform 1.6s var(--ease);}
.reveal-img:not(.in) .ph__photo{transform:scale(1.1);}

/* ---------- Transición entre páginas · "Destello dorado" ----------
   Minimal, corta y premium. Cubierta marfil = tapa sólida durante la navegación
   (sin microcortes); encima, una línea dorada luminosa con un destello que la
   recorre. Sin texto ni logo. */
/* Guarda anti-flash: cubre desde el PRIMER paint (el CSS es render-blocking, así
   que existe antes de que corra site.js) → nunca se ve la página nueva antes de
   la transición. La oculta el JS apenas el telón real está en su lugar. */
html::before{content:"";position:fixed;inset:0;z-index:998;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(191,159,120,.13), transparent 72%),
    linear-gradient(180deg, var(--marfil) 0%, var(--crema) 100%);}
html.js-ready::before{display:none;}

.nav-veil{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:1;
  display:grid;place-items:center;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(191,159,120,.13), transparent 72%),
    linear-gradient(180deg, var(--marfil) 0%, var(--crema) 100%);}
body.loaded .nav-veil{opacity:0;}                                       /* reposo (oculto) */
body.leaving .nav-veil{opacity:1;transition:opacity .32s var(--ease);}  /* salida: cubre */

.nav-veil__line{position:relative;width:min(58vw,440px);height:1.5px;transform:scaleX(1);transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--dorado) 22%,var(--dorado-claro) 50%,var(--dorado) 78%,transparent);
  box-shadow:0 0 16px rgba(191,159,120,.65), 0 0 42px rgba(191,159,120,.32);}
.nav-veil__line::after{content:"";position:absolute;top:50%;left:8%;width:64px;height:64px;
  transform:translate(-50%,-50%);border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,248,232,.95),rgba(191,159,120,0) 70%);}

/* ENTRADA: la cubierta tapa un instante, un destello recorre la línea y se abre.
   Lo dispara site.js (body.nav-in) DESPUÉS de pintar el estado cubierto, así el
   revelado se ve (no arranca pre-paint). Sin forwards → vuelve al reposo. */
body.nav-in .nav-veil{animation:veilOut .5s var(--ease-out);}
body.nav-in .nav-veil__line{animation:lineOut .5s var(--ease);}
body.nav-in .nav-veil__line::after{animation:glint .52s var(--ease-out);}
@keyframes veilOut{0%,32%{opacity:1;}100%{opacity:0;}}
@keyframes lineOut{0%,30%{opacity:1;}100%{opacity:0;}}
@keyframes glint{0%{opacity:0;left:8%;}30%{opacity:1;}70%{opacity:1;}100%{opacity:0;left:92%;}}

/* SALIDA: la línea se dibuja desde el centro mientras la cubierta funde */
body.leaving .nav-veil__line{animation:lineDraw .34s var(--ease-out);}
body.leaving .nav-veil__line::after{animation:glint .42s .04s var(--ease-out);}
@keyframes lineDraw{0%{transform:scaleX(0);opacity:.6;}100%{transform:scaleX(1);opacity:1;}}

/* Entrada: el hero asienta con un micro-zoom (no toca elementos fixed ni el
   parallax JS de .hero-inner). Salida: la foto continúa el zoom mientras funde. */
.hero-photo{will-change:transform;}
body:not(.loaded) .hero-photo{transform:scale(1.055);}
.hero-photo{transition:transform 1.5s var(--ease-out), opacity .6s var(--ease);}
body.leaving .hero-photo{transform:scale(1.075);opacity:.55;}

/* ---------- Barra de progreso ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:linear-gradient(90deg,var(--dorado-oscuro),var(--dorado-claro));
  transform:scaleX(0);transform-origin:left;pointer-events:none;}

/* ---------- Split de títulos por palabra ---------- */
.ws .wsw{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em;}
.ws .wsw>i{display:inline-block;font-style:inherit;transform:translateY(116%);
  transition:transform .95s var(--ease);transition-delay:calc(var(--w,0)*55ms);}
.ws.in .wsw>i{transform:none;}

/* ---------- Tilt 3D ---------- */
.tilt{transition:transform .55s var(--ease),box-shadow .55s var(--ease);will-change:transform;}

/* ---------- Page hero (páginas interiores): foto enmarcada ---------- */
.page-hero{
  position:relative;min-height:clamp(420px,58vh,580px);
  display:flex;align-items:flex-end;overflow:hidden;
  margin:0 var(--frame) var(--frame);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  isolation:isolate;
}
.page-hero .ph{position:absolute;inset:0;border-radius:0;}
.page-hero__veil{position:absolute;inset:0;z-index:4;
  background:linear-gradient(180deg, rgba(20,28,10,.30) 0%, rgba(20,28,10,.05) 45%, rgba(20,28,10,.60) 100%);}
.page-hero__inner{position:relative;z-index:5;padding-bottom:clamp(40px,6vw,68px);padding-top:160px;color:var(--crema);width:100%;}
.page-hero h1{color:#fff;font-size:clamp(42px,6.5vw,86px);letter-spacing:-.02em;}
.page-hero .lead{color:rgba(248,247,238,.9);max-width:54ch;margin-top:16px;}
.breadcrumb{
  display:inline-flex;gap:10px;align-items:center;margin-bottom:22px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--marfil);
  background:rgba(248,247,238,.16);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.3);
  border-radius:100px;padding:9px 18px;
}
.breadcrumb a{color:rgba(248,247,238,.8);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb span{color:var(--dorado-claro);}

/* ---------- FAQ ---------- */
.faq-list{max-width:840px;margin-inline:auto;}
.faq-item{border:1px solid rgba(191,159,120,.3);border-radius:var(--radius-lg);
  margin-bottom:14px;background:rgba(255,255,255,.45);overflow:hidden;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);}
.faq-item.open{background:rgba(255,255,255,.85);box-shadow:var(--shadow-soft);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  text-align:left;padding:22px 26px;font-family:var(--display);font-size:clamp(19px,2.1vw,25px);
  font-weight:500;color:var(--verde);transition:color .3s;}
.faq-q:hover{color:var(--dorado-oscuro);}
.faq-ico{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--dorado);
  position:relative;transition:.4s var(--ease);}
.faq-ico::before,.faq-ico::after{content:"";position:absolute;top:50%;left:50%;background:var(--dorado-oscuro);transition:.4s var(--ease);}
.faq-ico::before{width:13px;height:1.5px;transform:translate(-50%,-50%);}
.faq-ico::after{width:1.5px;height:13px;transform:translate(-50%,-50%);}
.faq-item.open .faq-ico{background:var(--dorado);border-color:var(--dorado);transform:rotate(180deg);}
.faq-item.open .faq-ico::before,.faq-item.open .faq-ico::after{background:#fff;}
.faq-item.open .faq-ico::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
.faq-item.open .faq-a{max-height:360px;}
.faq-a p{padding:0 26px 24px;color:var(--salvia);font-size:15.5px;line-height:1.7;max-width:70ch;}

/* ---------- Formularios ---------- */
.field{margin-bottom:18px;}
/* Labels del formulario — es EL form que convierte, así que priorizamos
   legibilidad: un punto más grandes, menos tracking y un verde más oscuro que
   asegura contraste AA sobre el vidrio claro (la salvia quedaba al filo). */
.field label,.check label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--verde-soft);margin-bottom:8px;}
.field .req{color:var(--dorado-oscuro);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:15px;color:var(--verde);
  background:rgba(255,255,255,.75);border:1px solid rgba(101,115,92,.25);border-radius:14px;
  padding:14px 18px;transition:border-color .3s,box-shadow .3s,background .3s;
}
.field textarea{resize:vertical;min-height:120px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--dorado);background:#fff;box-shadow:0 0 0 4px rgba(191,159,120,.16);}
.field input::placeholder,.field textarea::placeholder{color:#5c6651;}
.field.error input,.field.error select,.field.error textarea{border-color:#c0593f;box-shadow:0 0 0 3px rgba(192,89,63,.14);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
/* campos dinámicos ocultos por tipo de evento (anula el display:grid de .field-row) */
[data-when][hidden]{display:none !important;}

/* honeypot (Web3Forms) */
.hp-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;}

.check{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;cursor:pointer;}
.check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--dorado-oscuro);}
.check label{font-size:13px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--verde-soft);margin:0;line-height:1.55;cursor:pointer;}
.check.error label{color:#c0593f;}
.check a{color:var(--dorado-oscuro);text-decoration:underline;text-underline-offset:2px;}

.form-msg{margin-top:8px;font-size:14px;padding:0;}
.form-msg.ok{color:var(--cortaderitas-dark);font-weight:600;background:rgba(78,166,84,.12);padding:14px 16px;border-radius:14px;}
.form-msg.err{color:#c0593f;font-weight:500;}

/* tarjeta de formulario (vidrio) */
.form-card{
  background:rgba(248,247,238,.82);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  padding:clamp(28px,3.4vw,46px);
}

.map-embed{width:100%;height:100%;min-height:300px;border:0;border-radius:var(--radius-lg);filter:saturate(.85);}
.map-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.25);
  box-shadow:var(--shadow-soft);}
/* CTA "Cómo llegar": pastilla de vidrio anclada en la esquina del mapa */
.map-cta{
  position:absolute;right:14px;top:14px;z-index:5;
  display:inline-flex;align-items:center;gap:.55em;
  padding:11px 18px;border-radius:100px;
  background:rgba(248,247,238,.86);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 12px 30px -10px rgba(20,28,10,.55);
  color:var(--verde);font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);
}
.map-cta svg{width:15px;height:15px;flex:none;transition:transform .4s var(--ease);}
.map-cta:hover{background:var(--dorado);color:#fff;border-color:transparent;transform:translateY(-2px);
  box-shadow:0 18px 38px -12px rgba(191,159,120,.85);}
.map-cta:hover svg{transform:translateY(-2px);}
@media (max-width:420px){.map-cta{left:14px;right:14px;justify-content:center;}}
.contact-info-item{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(191,159,120,.3);}
.contact-info-item:last-child{border-bottom:none;}
.contact-info-item .ico{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--dorado);
  color:var(--dorado-oscuro);display:flex;align-items:center;justify-content:center;}
.contact-info-item .ico svg{width:19px;height:19px;}
.contact-info-item h4{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--salvia);font-weight:600;margin-bottom:4px;}
/* la columna de texto ocupa el ancho disponible (antes se encogía al contenido y
   dejaba un hueco a la derecha en celular, y el teléfono largo se cortaba feo). */
.contact-info-item>div{flex:1 1 auto;min-width:0;}
.contact-info-item p,.contact-info-item a{font-size:15.5px;color:var(--verde);line-height:1.5;}
.contact-info-item a:hover{color:var(--dorado-oscuro);}
/* variante sobre fondo oscuro */
.on-dark .contact-info-item{border-color:rgba(242,241,223,.16);}
.on-dark .contact-info-item .ico{border-color:rgba(210,186,152,.5);color:var(--dorado-claro);}
.on-dark .contact-info-item h4{color:rgba(242,241,223,.6);}
.on-dark .contact-info-item p,.on-dark .contact-info-item a{color:var(--marfil);}
.on-dark .contact-info-item a:hover{color:var(--dorado-claro);}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;text-align:center;color:var(--crema);
  margin:var(--frame);border-radius:var(--radius-xl);isolation:isolate;}
.cta-band .ph{position:absolute;inset:0;border-radius:0;z-index:0;}
.cta-band__veil{position:absolute;inset:0;z-index:1;background:rgba(22,30,11,.55);}
.cta-band.has-photo .cta-band__veil{
  background:linear-gradient(180deg,rgba(22,30,11,.7) 0%,rgba(22,30,11,.38) 38%,rgba(22,30,11,.72) 100%);}
.cta-band .inner{position:relative;z-index:2;}

/* ---------- Helpers ---------- */
.grid{display:grid;gap:clamp(20px,2.4vw,30px);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.flow > * + *{margin-top:1.1em;}

/* Galería de catering (fogones) — fotos estáticas tal cual estaban (a ancho
   completo, una debajo de otra), sólo que ahora con aire entre ellas para que
   no queden pegadas. Sin reveal, sin zoom ni tilt: se pidió dejarlas así. */
.gal-strip{display:grid;gap:clamp(16px,2.2vw,28px);}
.mt-s{margin-top:18px;}.mt-m{margin-top:30px;}.mt-l{margin-top:48px;}
.dorado{color:var(--dorado-oscuro);}
.text-salvia{color:var(--salvia);}
.bg-verde .text-salvia{color:rgba(242,241,223,.78);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:center;}
.split.rev .split-media{order:2;}
.split-media{position:relative;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.center .hero-cta{justify-content:center;}

/* =========================================================================
   Transición de marca: Cortaderas ↔ Cortaderitas
   El panel sube para tapar al salir y continúa subiendo para destapar al
   entrar — da continuidad entre ambas páginas. Tema según el DESTINO.
   ========================================================================= */
/* Fondo de marca (idéntico en salida y entrada → handoff perfecto). El glow
   central sostiene el logo y da profundidad sin animación que pueda "cortar". */
/* CORT: halo dorado circular y centrado. */
.bt-cover.t-cort,html[data-xt="cort"]::before{
  background:
    radial-gradient(circle 320px at 50% 50%, rgba(214,191,150,.40), rgba(214,191,150,0) 100%),
    linear-gradient(160deg,var(--verde-90) 0%,var(--noche-profunda) 100%);}
/* KIDS: halo blanco circular y centrado (mismo tamaño que el de Cortaderas). */
.bt-cover.t-kids,html[data-xt="kids"]::before{
  background:
    radial-gradient(circle 320px at 50% 50%, rgba(255,255,255,.42), rgba(255,255,255,0) 100%),
    linear-gradient(160deg,#F22998 0%,#C7D941 100%);}

/* Cubierta al SALIR (la crea site.js): funde sobre la página actual mientras
   el logo del destino se asienta y queda sostenido. Tamaño por logo: el de
   Cortaderas está recortado al ras y el de Cortaderitas trae margen, así que
   se calibran distinto para que se vean del MISMO tamaño visual. */
.bt-cover{position:fixed;inset:0;z-index:10000;pointer-events:none;display:grid;place-items:center;opacity:0;}
.bt-cover .bt-logo{opacity:0;transform:scale(.92);filter:drop-shadow(0 16px 34px rgba(0,0,0,.32));}
.bt-cover.t-cort .bt-logo{width:min(30vw,150px);}
.bt-cover.t-kids .bt-logo{width:min(44vw,214px);}
.bt-cover.go{animation:btIn .5s var(--ease) forwards;}
.bt-cover.go .bt-logo{animation:btLogoIn .58s var(--ease) forwards;}
@keyframes btIn{to{opacity:1;}}
@keyframes btLogoIn{0%{opacity:0;transform:scale(.92);}60%{opacity:1;}100%{opacity:1;transform:scale(1);}}

/* Revelado al ENTRAR (pseudo-elementos, sin flash). El estado inicial coincide
   exacto con el final de la cubierta → el logo "se sostiene" y luego funde. */
html[data-xt="cort"]::before,html[data-xt="cort"]::after,
html[data-xt="kids"]::before,html[data-xt="kids"]::after{content:"";position:fixed;inset:0;z-index:10000;pointer-events:none;}
html[data-xt="cort"]::after{z-index:10001;background:no-repeat center/min(30vw,150px) url(symbol-gold-trim.png);
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.32));}
html.xt-reveal[data-xt]::before{animation:btOut .68s .12s var(--ease) forwards;}
html.xt-reveal[data-xt]::after{animation:btLogoOut .6s .12s var(--ease-out) forwards;}
@keyframes btOut{to{opacity:0;}}
@keyframes btLogoOut{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.08);}}
/* durante el revelado branded (cross-marca), ocultar el telón interno */
body.xt-arrival .nav-veil{opacity:0 !important;transition:none !important;}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav{display:none;}
  .menu-toggle{display:flex;}
  .site-header .bar{grid-template-columns:auto 1fr auto;}
}
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .g-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .g-3{grid-template-columns:1fr;}
  .g-2{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .split.rev .split-media{order:0;}
}
@media (max-width:760px){
  .btn-cortaderitas{display:none;} /* pasa al menú móvil */
  .brand__sub{display:none;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  .g-4{grid-template-columns:1fr;}
  .btn-header{display:none;}
  .btn{width:100%;}
  .hero-cta .btn{width:auto;}
  /* Header compacto en celular: acá conviven marca + "+" + hamburguesa (Contacto
     ya se ocultó arriba). Achicamos el logo y el título, y ajustamos gaps y
     padding, para que entren los tres con su aire y no queden apretados. */
  .site-header .bar{gap:10px;padding:8px 10px 8px 14px;}
  .brand{gap:8px;}
  .brand img{height:34px;}
  .brand__name{font-size:15.5px;}
  .site-header .header-right{gap:6px;}
  .hdr-social__btn{width:36px;height:36px;}
  .hdr-social__btn svg{width:16px;height:16px;}
  .menu-toggle{width:38px;height:38px;}
  /* Footer compacto en celular: menos aire vertical, logo y textos más chicos,
     y se quita la marca de agua "momentos inolvidables" (en una sola columna se
     cortaba contra el borde y se veía mal). */
  .site-footer{padding-block:clamp(40px,11vw,56px) 22px;}
  .footer-grid{gap:26px;}
  .site-footer .footbrand{gap:11px;margin-bottom:14px;}
  .site-footer .footlogo{height:46px;}
  .site-footer .footbrand .brand__name{font-size:19px;}
  .site-footer .foot-col p{font-size:14px;line-height:1.6;}
  .site-footer h4{margin-bottom:14px;}
  .site-footer ul{gap:9px;}
  .site-footer .foot-col .btn-cortaderitas{margin-top:16px!important;}
  .foot-word{display:none;}
  .footer-bottom{margin-top:28px;padding-top:20px;gap:8px;}
}
/* Hero de páginas interiores en celular: header oculto → menos padding superior,
   y un alto más contenido para que la escena (en "meet", ver site.js) ocupe
   más proporción y el título quede justo debajo. */
@media (max-width:640px){
  .page-hero{min-height:clamp(380px,86vw,460px);}
  .page-hero__inner{padding-top:clamp(96px,24vw,140px);}
}

/* =========================================================================
   Accesibilidad: "reducir movimiento" del sistema, versión amable.
   No dejamos el sitio muerto (el equipo del cliente usa reduced-motion y no
   quería perder la vida del sitio): conservamos los crossfades suaves de
   opacidad y cortamos lo que de verdad molesta — desplazamientos, parallax,
   zoom continuo, loops y el scroll suave. Las escenas SVG quedan estáticas.
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  /* reveals: solo crossfade de opacidad (sin slide, blur ni clip) */
  .reveal{transform:none !important;filter:none !important;}
  .reveal-img{clip-path:none !important;}
  #eventos .event-card.reveal:not(.in){clip-path:none !important;}
  #eventos .event-card.reveal:not(.in) .ph__photo,
  #eventos .event-card.reveal:not(.in) .event-card__glass{transform:none !important;}
  .reveal-img .ph__photo,.hero-stage .hero-photo,
  .hero-title .hl>span,.hero-title .hl>em,.ws .wsw>i,.stat__num>span,
  .hero-anim,.hero-meta,.hero-kicker{transform:none !important;}
  /* CTAs del hero: sin el slide de entrada; aparecen con su vidrio ya puesto */
  .hero-side .hero-cta>.btn{opacity:1 !important;animation:none !important;}
  .hero-kicker i,.stat::before,.feat-row::after,.feat-row:first-child::before,
  .svc-row::after,.svc-row:first-child::before,.why-item::after{transform:scaleX(1) !important;}
  /* sin loops ambientales ni zoom continuo */
  .marquee__track,.loaded .hero-stage .hero-photo,.cover *,
  .event-card::after{animation:none !important;}
  /* portadas de sección: trazos y elementos clave quedan visibles y estáticos */
  .cover .ink,.cover .i-river,.cover .i-bank,.cover .ct-route,
  .cover .ct-route-ghost,.cover .pf-net .ln{stroke-dashoffset:0 !important;opacity:1 !important;}
  .cover .bub,.cover .pin-grp,.cover .pf-net .nd,.cover .pf-net .lbl,
  .cover .bulb,.cover .nos-ink .ink{opacity:1 !important;transform:none !important;}
}

/* =========================================================================
   Rendimiento en móviles — aligera la GPU sin cambiar el look
   En pantallas chicas las capas más caras al scrollear son el blur del vidrio
   y, sobre todo, el grano por foto (mix-blend-mode) y el grano global fijo. En
   un celular apenas se perciben, así que bajamos el radio del blur en TODO el
   vidrio y apagamos los dos granos. Resultado: scroll más fluido en gama media.
   ========================================================================= */
@media (max-width:768px){
  :root{--blur:saturate(1.4) blur(10px);}
  .ph::after{display:none;}   /* grano por foto (mix-blend-mode: el más caro) */
  body::after{display:none;}  /* grano fílmico global fijo a viewport */
}

/* =========================================================================
   FIX del "seam" horizontal al scrollear.
   Causa (diagnosticada con el cliente): artefacto de rasterizado por GPU de
   Chromium al scrollear páginas largas y pesadas (con aceleración de HW, que es
   lo normal). El rasterizador no llega a repintar los "tiles" durante el scroll
   rápido y aparece una banda/línea borrosa. No es un efecto puntual (sobrevive a
   apagar Lenis, backdrop-filter, filtros, video y transforms), y desaparece con
   la aceleración de HW apagada → es rasterizado/compositing.
   Solución sin tocar el look: content-visibility:auto en las secciones. El
   navegador se saltea por completo el render de lo que está fuera de pantalla,
   así al scrollear sólo rasteriza lo visible y no se atrasa. contain-intrinsic-
   size con la palabra clave `auto` recuerda el alto real tras el primer render,
   evitando saltos de scrollbar. */
section{content-visibility:auto;contain-intrinsic-size:auto 800px;}
/* durante un scroll a #ancla se renderiza todo (ver site.js) para que el destino
   sea estable y el scroll caiga exacto. */
.cv-off section{content-visibility:visible;}

/* =========================================================================
   Acento (texto dorado) de los títulos: NO se parte a mitad. Queda como un
   bloque y, si no entra en la línea del texto oscuro, baja ENTERO a la línea
   siguiente (mejor orden visual: el dorado siempre junto). Aplica en todo el
   sitio, PC y móvil. El corte natural sigue estando en el espacio ANTES del
   acento (fuera del span), así que no hay overflow salvo acentos muy largos.
   ========================================================================= */
h1 .acento, h2 .acento, h3 .acento,
.h1 .acento, .h2 .acento, .h3 .acento,
.display .acento, .manifesto-line .acento{
  white-space:nowrap;
}

/* Salto de línea sólo en escritorio (se oculta en celular para dejar que el
   texto envuelva natural). Ej.: separar las dos frases del subtítulo de Galería. */
@media (max-width:640px){ br.br-pc{display:none;} }