/* ==========================================================================
   EL NATIVO — Laguna de los Milagros, Tingo María
   Hoja de estilos única.
   --------------------------------------------------------------------------
   Está organizada en tres capas de cascada (@layer). La regla es simple:
   una capa posterior SIEMPRE le gana a una anterior, sin importar cuán
   específico sea el selector. Por eso aquí no hacen falta ni selectores
   inflados ni !important para imponer un estilo.

     1. base   Estructura, retícula, componentes y comportamiento.
     2. piel   La identidad visual "Reserva Lacustre": color, tipografía,
               texturas y acabado editorial. Es la capa que define el look.
     3. hero   La portada. Vive aparte porque es la pieza que más se retoca.

   ¿Dónde toco qué?
     · Cambiar un color de marca ......... capa piel, bloque :root
     · Mover o redimensionar algo ........ capa base
     · Ajustar la portada ................ capa hero
   ========================================================================== */

@layer base, piel, hero;

/* ========================================================================
   CAPA BASE — estructura, retícula y componentes
   ======================================================================== */
@layer base {

:root{
  /* ---- Paleta 2 original: Laguna Ethereal ---- */
  --navy-profundo: #012840;
  --teal-agua:     #80B4BF;
  --arena-calida:  #F2D5A0;
  --durazno-suave: #F2D1B3;
  --coral-rosa:    #F2A999;

  /* ---- Tonos originales de apoyo del sistema ---- */
  --navy-hover:    #001221;
  --superficie:    #FFF8F2;
  --superficie-2:  #FFF2DF;
  --tinta-calida:  #261900;
  --texto-suave:   #42474D;

  /* ---- Alias de compatibilidad con los componentes existentes ---- */
  --azul-profundo: var(--navy-profundo);
  --azul-lago:     var(--navy-profundo);
  --azul-medio:    var(--navy-hover);
  --azul-texto:    var(--navy-profundo);
  --agua:          var(--teal-agua);
  --agua-clara:    var(--teal-agua);
  --arena-dorada:  var(--arena-calida);
  --arena-suave:   var(--durazno-suave);
  --coral:         var(--coral-rosa);
  --coral-texto:   var(--navy-profundo);

  --verde-noche:   var(--navy-profundo);
  --verde-selva:   var(--navy-profundo);
  --verde-medio:   var(--navy-hover);
  --verde:         var(--navy-profundo);
  --verde-claro:   var(--teal-agua);
  --turquesa:      var(--teal-agua);
  --turquesa-cl:   var(--teal-agua);
  --ambar:         var(--arena-calida);
  --ambar-cl:      var(--durazno-suave);
  --terracota:     var(--coral-rosa);
  --terracota-osc: var(--navy-profundo);

  /* ---- Superficies originales ---- */
  --crema:       var(--superficie);
  --arena:       var(--superficie-2);
  --arena-2:     var(--arena-calida);
  --arena-3:     var(--durazno-suave);
  --blanco:      #FFFFFF;

  /* ---- Texto y bordes ---- */
  --tinta:       var(--tinta-calida);
  --gris:        var(--texto-suave);
  --linea:       #73777E;
  --linea-2:     #C2C7CD;

  /* ---- WhatsApp (colores de marca) ---- */
  --wa:          #25D366;
  --wa-osc:      #1FBF5B;
  --wa-texto:    #06331F;
  --wa-vivo:     #25D366;

  /* ---- Tipografía (DESIGN.md) ---- */
  --f-display: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Formas (DESIGN.md: 8 / 16 / 24) ---- */
  --r-sm: .5rem;
  --r:    1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;

  /* ---- Elevación: sombras ambientales navy ---- */
  --sombra-xs: 0 1px 2px rgba(38,25,0,.05);
  --sombra:    0 8px 24px -8px rgba(38,25,0,.12), 0 2px 6px rgba(38,25,0,.05);
  --sombra-md: 0 18px 40px -14px rgba(38,25,0,.18), 0 4px 12px rgba(38,25,0,.06);
  --sombra-lg: 0 34px 70px -22px rgba(38,25,0,.28), 0 8px 20px rgba(38,25,0,.08);

  /* ---- Vidrio ---- */
  --glass-claro: rgba(255,248,242,.78);
  --glass-oscuro: rgba(1,40,64,.48);
  --glass-borde: rgba(255,255,255,.62);
  --blur: blur(20px) saturate(180%);

  /* ---- Movimiento ---- */
  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --wrap: 1200px;
  --header-h: 76px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:var(--f-texto);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.7;
  font-weight:400;
  color:var(--gris);
  background:var(--crema);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Grano sutil sobre todo el sitio — textura táctil (DESIGN.md) */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,iframe{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{
  font-family:var(--f-display); font-weight:700; line-height:1.15;
  margin:0 0 .5em; letter-spacing:-.02em; color:var(--verde-selva);
}
p{ margin:0 0 1.1em; }
strong{ color:var(--verde-selva); font-weight:700; }
.wrap{ width:min(100% - 3rem, var(--wrap)); margin-inline:auto; }
.i{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--verde-selva); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--blanco); outline-offset:3px; border-radius:6px; box-shadow:0 0 0 6px var(--azul-profundo); }
::selection{ background:var(--azul-profundo); color:#fff; }

/* ==========================================================================
   Barra de progreso de lectura
   ========================================================================== */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none;
  background:transparent;
}
.progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--turquesa),var(--ambar) 55%,var(--terracota));
  box-shadow:0 0 12px rgba(128,180,191,.7);
  transition:width .1s linear;
}

/* ==========================================================================
   Tipografía de secciones
   ========================================================================== */
.eyebrow{
  font-family:var(--f-texto); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde);
  margin:0 0 1rem; display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:32px; height:2px; flex:none; border-radius:2px;
  background:linear-gradient(90deg,var(--terracota),var(--ambar));
}
.eyebrow--light{ color:var(--turquesa-cl); }
.eyebrow--light::before{ background:linear-gradient(90deg,var(--ambar),var(--terracota)); }

.h2{ font-size:clamp(2rem,3.8vw,3.15rem); font-weight:700; letter-spacing:-.03em; }
.h2--light{ color:#fff; }
.hl{
  background:linear-gradient(100deg,var(--ambar),var(--ambar-cl));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ font-size:clamp(1.05rem,1.4vw,1.18rem); color:var(--gris); max-width:60ch; }
.lead--light{ color:#fff; }
.section{ position:relative; padding:clamp(4.5rem,8vw,7.5rem) 0; }
.section__head{ max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.note{ text-align:center; margin-top:3rem; color:var(--gris); font-size:.95rem; }
.note__sep{ padding:0 .15rem; opacity:.55; }
.note a{ color:var(--verde); font-weight:700; border-bottom:1.5px solid var(--terracota); transition:color .2s; }
.note a:hover{ color:var(--terracota-osc); }
.section--dark .note{ color:#fff; }
.section--dark .note a{ color:var(--ambar); border-color:rgba(242,213,160,.5); }

/* ==========================================================================
   Botones — con barrido de brillo al pasar el mouse
   ========================================================================== */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.6rem; border-radius:var(--r-sm); border:1.5px solid transparent;
  font-family:var(--f-texto); font-weight:700; font-size:.95rem; letter-spacing:.01em;
  cursor:pointer; text-align:center; white-space:nowrap; flex:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .3s ease, color .3s ease, border-color .3s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.32) 50%,transparent 75%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn:hover::before{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn--lg{ padding:1.1rem 2.1rem; font-size:1.02rem; }
.btn--full{ width:100%; }

.btn--wa{ background:var(--wa); color:var(--wa-texto); box-shadow:0 10px 26px -10px rgba(37,211,102,.55); }
.btn--wa:hover{ background:var(--wa-osc); box-shadow:0 16px 34px -12px rgba(37,211,102,.7); }
.btn--dark{ background:var(--verde-selva); color:#fff; box-shadow:0 10px 26px -12px rgba(38,25,0,.8); }
.btn--dark:hover{ background:var(--azul-medio); box-shadow:0 16px 34px -14px rgba(38,25,0,.9); }
.btn--amber{ background:var(--ambar); color:var(--tinta); box-shadow:0 10px 26px -12px rgba(242,213,160,.9); }
.btn--amber:hover{ background:var(--terracota); color:var(--tinta); }
.btn--ghost{
  color:#fff; border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.10); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.btn--ghost:hover{ background:rgba(255,255,255,.92); color:var(--verde-selva); border-color:transparent; }

/* Hazes de luz que recorren únicamente el CTA “Cómo llegar”.
   El ángulo lo actualiza main.js para acelerar y frenar con inercia. */
.btn--beam{
  --beam-a:40deg;
  overflow:visible;
  border-color:rgba(255,255,255,.30);
  background:rgba(1,40,64,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px -18px rgba(128,180,191,.8);
}
.btn--beam::before{ display:none; }
.btn--beam > .i,
.btn--beam > .btn__label{ position:relative; z-index:2; }
.btn__beam{
  position:absolute; inset:-2px; z-index:1;
  padding:2.5px; border-radius:calc(var(--r-sm) + 2px);
  pointer-events:none;
  background:conic-gradient(from var(--beam-a),
    transparent 0deg,
    rgba(128,180,191,.04) 18deg,
    rgba(128,180,191,.55) 46deg,
    var(--teal-agua) 56deg,
    #E7F6F8 60deg,
    transparent 63deg,
    transparent 198deg,
    rgba(242,169,153,.04) 216deg,
    rgba(242,169,153,.50) 244deg,
    var(--coral-rosa) 254deg,
    #FFF0EC 258deg,
    transparent 261deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.btn__beam--glow{
  display:none;
}
.btn--ghost.btn--beam:hover,
.btn--ghost.btn--beam:focus-visible{
  color:#fff;
  border-color:rgba(255,255,255,.16);
  background:rgba(1,40,64,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 16px 38px -16px rgba(128,180,191,.72);
}
@media (forced-colors:active){
  .btn__beam{ display:none; }
  .btn--beam{ border:2px solid CanvasText; }
}
.btn--ghost-light{ color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); }
.btnrow{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-size:.95rem;
  color:var(--verde); padding-bottom:3px; position:relative;
}
.link-arrow::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:linear-gradient(90deg,var(--turquesa),var(--terracota));
  transform-origin:right; transform:scaleX(1); transition:transform .45s var(--ease);
}
.link-arrow:hover::after{ transform-origin:left; transform:scaleX(0); }
.link-arrow .i{ transition:transform .35s var(--ease); }
.link-arrow:hover .i{ transform:translateX(5px); }
.link-arrow--sm{ margin-top:auto; align-self:flex-start; }

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar{
  position:relative; z-index:2;
  background:var(--verde-noche); color:rgba(255,255,255,.72); font-size:.8rem; letter-spacing:.01em;
}
.topbar__in{ display:flex; gap:1.8rem; justify-content:center; align-items:center; padding:.55rem 0; flex-wrap:wrap; }
.topbar__item{ display:inline-flex; align-items:center; gap:.45rem; }
.topbar__item .i{ color:var(--agua-clara); }
@media (max-width:640px){ .topbar__item--hide{ display:none; } }

/* ==========================================================================
   Header de vidrio
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,248,242,.72);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid rgba(38,25,0,.07);
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.header.is-stuck{
  background:rgba(255,248,242,.86);
  box-shadow:0 10px 40px -18px rgba(38,25,0,.35);
  border-color:rgba(38,25,0,.10);
}
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--header-h); }

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand__mark{
  width:50px; height:50px; flex:none; display:block;
}
.brand__mark img{ width:100%; height:100%; max-width:none; }
.brand__mark--lg{ width:72px; height:72px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.2; }
.brand__txt strong{ font-family:var(--f-display); font-size:1.08rem; font-weight:800; color:var(--verde-selva); letter-spacing:-.035em; }
.brand__txt em{
  display:flex; align-items:center; gap:.35rem; font-style:normal;
  font-size:.54rem; color:var(--verde-selva); font-weight:700;
  letter-spacing:.11em; line-height:1; text-transform:uppercase;
}
.brand__txt em b{ color:inherit; font:inherit; white-space:nowrap; }
.brand__txt em > span{ width:12px; height:2px; flex:none; border-radius:2px; background:var(--teal-agua); }

.nav{ display:flex; align-items:center; gap:2rem; }
.nav ul{ display:flex; gap:1.6rem; }
.nav a{ font-size:.93rem; font-weight:600; color:var(--verde-selva); position:relative; padding:.35rem 0; transition:color .25s; }
.nav ul a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--turquesa),var(--terracota));
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav ul a:hover::after, .nav ul a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav ul a.is-active{ color:var(--verde); }
.nav a.nav__cta{ padding:.65rem 1.3rem; font-size:.88rem; color:var(--wa-texto); }

.burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px; }
.burger span{ display:block; height:2.5px; background:var(--verde-selva); border-radius:2px; margin:5px 0; transition:.35s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width:960px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(84vw,340px);
    background:rgba(255,248,242,.88);
    backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%);
    border-left:1px solid rgba(255,255,255,.6);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:6.5rem 2rem 2rem; gap:1.6rem;
    transform:translateX(100%); transition:transform .5s var(--ease);
    box-shadow:-30px 0 60px -30px rgba(38,25,0,.5); overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav ul{ flex-direction:column; gap:1.2rem; width:100%; }
  .nav a{ font-size:1.12rem; }
  .nav__cta{ width:100%; padding:.95rem 1.2rem; font-size:1rem; }
}
@media (max-width:360px){
  .brand{ gap:.55rem; }
  .brand__mark{ width:44px; height:44px; }
  .brand__txt strong{ font-size:.98rem; }
  .brand__txt em{ font-size:.47rem; letter-spacing:.075em; gap:.22rem; }
  .brand__txt em > span{ width:7px; }
}

/* ==========================================================================
   Hero — foto con Ken Burns + parallax + vidrio
   ========================================================================== */
.hero{
  position:relative; min-height:clamp(600px,94svh,940px);
  display:flex; align-items:center; color:#fff; overflow:hidden;
  background:linear-gradient(160deg,var(--verde-selva) 0%,var(--azul-profundo) 50%,var(--verde) 100%);
}
.hero__media{ position:absolute; inset:-8% 0; will-change:transform; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(1,18,33,.90) 0%, rgba(1,40,64,.62) 48%, rgba(1,40,64,.20) 100%),
    linear-gradient(to top, rgba(1,18,33,.88) 0%, transparent 55%);
}
@media (max-width:700px){
  .hero__veil{
    background:
      linear-gradient(to right, rgba(1,18,33,.94) 0%, rgba(1,40,64,.86) 70%, rgba(1,18,33,.68) 100%),
      linear-gradient(to top, rgba(1,18,33,.90) 0%, transparent 62%);
  }
}
/* Halos de agua y arena del skin original. */
.hero__veil::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 78% 32%, rgba(128,180,191,.30), transparent 65%),
             radial-gradient(45% 40% at 10% 88%, rgba(242,213,160,.20), transparent 70%);
}
.hero__in{ position:relative; z-index:2; padding:clamp(6rem,12vh,9rem) 0; max-width:860px; }
.hero__eyebrow{
  display:inline-flex; align-items:center; font-size:.76rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.28); border-radius:100px;
  padding:.5rem 1.15rem; margin-bottom:1.6rem;
  background:rgba(255,255,255,.10);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.hero__brand-lockup{
  width:min(100%,840px); margin:0;
  /* Es el <h1>: dentro lleva las dos líneas del nombre, cada una con su
     propio estilo. Aquí se neutralizan los estilos de encabezado. */
  color:inherit; font-weight:inherit; letter-spacing:normal; line-height:inherit;
}
.hero__title, .hero__place{ display:block; }
.hero__title{
  margin:0; font-family:var(--f-display); font-size:clamp(2.7rem,7.2vw,5.4rem); font-weight:800; letter-spacing:-.045em;
  line-height:1.03;
  background:linear-gradient(100deg,var(--arena-calida) 0%,var(--durazno-suave) 50%,var(--arena-calida) 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 24px rgba(1,18,33,.58));
}
.hero__place{
  margin:.75rem 0 0; font-family:var(--f-texto);
  font-size:clamp(1.05rem,1.6vw,1.24rem); font-weight:700;
  line-height:1.4; letter-spacing:.10em; text-transform:uppercase;
  color:#fff;
  text-shadow:0 8px 32px rgba(1,18,33,.72);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }

/* Tarjeta de vidrio con las cifras */
.hero__facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.6rem); margin-top:3.2rem;
  padding:1.5rem 1.9rem; border-radius:var(--r-lg);
  background:rgba(255,255,255,.09);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 20px 50px -25px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25);
  width:min(100%,840px);
}
.hero__facts li{
  display:flex; flex-direction:column; min-width:0;
}
.hero__facts strong{
  font-family:var(--f-display); font-size:2.1rem; font-weight:800; line-height:1;
  color:var(--ambar); letter-spacing:-.03em;
}
.hero__facts span{ font-size:.8rem; color:rgba(255,255,255,.84); margin-top:.4rem; letter-spacing:.02em; }
@media (max-width:700px){
  .hero__title{ font-size:clamp(2.7rem,13vw,4rem); }
  .hero__place{ margin-top:.6rem; font-size:.82rem; letter-spacing:.08em; }
  .hero__facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.35rem 1rem; padding:1.4rem 1.25rem; }
}
@media (max-width:360px){
  .hero__title{ font-size:clamp(2.45rem,12.5vw,3rem); }
  .hero__place{ font-size:.72rem; letter-spacing:.06em; }
}

.hero__scroll{
  position:absolute; left:50%; bottom:58px; transform:translateX(-50%); z-index:2;
  width:26px; height:44px; border:1.5px solid rgba(255,255,255,.45); border-radius:20px;
  display:grid; place-items:start center;
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
}
.hero__scroll span{ width:4px; height:8px; background:#fff; border-radius:2px; margin-top:7px; animation:scrolly 1.9s infinite; }
@keyframes scrolly{ 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 100%{opacity:0;transform:translateY(15px)} }
@media (max-width:700px){ .hero__scroll{ display:none; } }

/* ==========================================================================
   Franja de experiencias — cinta flotante de vidrio
   ========================================================================== */
.strip{
  position:relative; z-index:3; margin-top:-38px;
  background:transparent; padding:0 0 1rem;
}
.strip__in{
  position:relative; padding:1.05rem 0; border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-borde);
  box-shadow:var(--sombra-md);
}
.strip__viewport{ min-width:0; overflow:hidden; transition:margin-right .3s var(--ease); }
.strip__track{ display:block; }
.strip__group{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.6rem; padding:0 1.4rem;
}
.strip__in.is-marquee .strip__viewport{ margin-right:3.3rem; }
.strip__in.is-marquee .strip__track{
  display:flex; width:max-content; will-change:transform;
  animation:strip-flow var(--strip-duration,28s) linear infinite;
}
.strip__in.is-marquee .strip__group{
  flex:none; flex-wrap:nowrap; justify-content:flex-start;
  gap:clamp(1.4rem,3vw,2.8rem); padding:0 clamp(1.2rem,2.5vw,2.2rem);
}
@keyframes strip-flow{ to{ transform:translate3d(var(--strip-distance,-50%),0,0); } }
.strip__item{
  display:flex; flex:none; align-items:center; gap:.55rem; white-space:nowrap;
  font-size:.88rem; font-weight:600; color:var(--tinta);
  padding:.5rem .75rem; border-radius:var(--r-sm); transition:background .3s, transform .3s var(--ease);
}
.strip__item:hover{ background:var(--arena-2); transform:translateY(-2px); }
.strip__item .i{ width:1.35em; height:1.35em; color:var(--verde); }
.strip__toggle{
  position:absolute; top:50%; right:.65rem; z-index:2; transform:translateY(-50%);
  width:42px; height:42px; padding:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff; background:var(--verde-selva);
  border:1px solid rgba(255,255,255,.32); box-shadow:0 8px 20px -10px rgba(1,40,64,.75);
  transition:background .25s, transform .3s var(--ease);
}
.strip__toggle:hover{ background:var(--azul-medio); transform:translateY(-50%) scale(1.06); }
.strip__toggle[hidden]{ display:none !important; }
.strip__toggle .i{ width:1rem; height:1rem; }
.strip__icon--play{ display:none; }
.strip__in.is-paused .strip__icon--pause{ display:none; }
.strip__in.is-paused .strip__icon--play{ display:block; }
.strip__in.is-paused .strip__track,
.strip__in:focus-within .strip__track,
.strip__viewport:hover .strip__track{ animation-play-state:paused; }
@media (max-width:760px){
  .strip{ margin-top:-20px; }
  .strip__in{ padding:.85rem 0; }
  .strip__group{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem; padding:0 .8rem; }
  .strip__in.is-marquee .strip__group{ display:flex; }
  .strip__item{ font-size:.82rem; }
}

/* ==========================================================================
   Intro
   ========================================================================== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
  .grid-2--rev > *:first-child{ order:2; }
}
.section--intro{ background:var(--crema); }
.intro__collage{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.intro__collage .ph--tall{ grid-row:span 2; }
.intro__collage .ph{ box-shadow:var(--sombra-md); }
.intro__collage .ph--tall{ transform:translateY(-14px); }

/* ==========================================================================
   Marco de fotos + placeholder
   ========================================================================== */
.ph{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--verde-selva) 0%,var(--verde) 55%,var(--turquesa) 100%);
  min-height:180px; isolation:isolate;
}
.ph img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform 1s var(--ease), filter .6s ease;
}
.ph--tall img{ aspect-ratio:3/4; }
.ph--wide img{ aspect-ratio:5/4; }
.ph:hover img{ transform:scale(1.07); }
/* brillo diagonal al pasar el mouse */
.ph::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-110%); transition:transform .9s var(--ease);
}
.ph:hover::before{ transform:translateX(110%); }

/* Estado sin foto */
.ph.is-ph img{ opacity:0; }
.ph.is-ph::after{
  content:attr(data-label);
  position:absolute; inset:0; z-index:1; display:grid; place-content:center; text-align:center;
  padding:1.4rem; color:#fff; font-size:.82rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.6;
  background:
    linear-gradient(rgba(1,40,64,.82),rgba(1,40,64,.82)),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 14px, transparent 14px 28px);
}

/* ==========================================================================
   Secciones oscuras — losa flotante
   ========================================================================== */
.section--dark{
  position:relative; color:#fff; overflow:hidden;
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(128,180,191,.22), transparent 62%),
    radial-gradient(700px 400px at 5% 105%, rgba(242,213,160,.14), transparent 65%),
    var(--azul-profundo);
  border-radius:clamp(24px,3.5vw,48px);
  margin-inline:clamp(0px,1.4vw,20px);
  box-shadow:0 40px 90px -50px rgba(38,25,0,.85);
}
.section--dark h3{ color:#fff; }
.section--dark strong{ color:var(--ambar); }

/* ==========================================================================
   Miradores — foto con panel de vidrio encima
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.4rem; }
.card{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:430px; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.85);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{ box-shadow:0 40px 70px -34px rgba(0,0,0,.95); }
.card__img{ position:absolute; inset:0; border-radius:0; min-height:0; }
.card__img img{ width:100%; height:100%; aspect-ratio:auto; }
.card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(1,40,64,.82) 0%, rgba(1,40,64,.25) 45%, transparent 72%);
}
.card__body{
  position:relative; z-index:3; margin:.9rem; padding:1.2rem 1.3rem 1.3rem;
  border-radius:var(--r); text-align:left;
  background:rgba(1,40,64,.82);
  backdrop-filter:blur(18px) saturate(170%); -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 30px -18px rgba(0,0,0,.9);
  transform:translateZ(40px);
  transition:background .4s ease, transform .5s var(--ease), border-color .4s ease;
}
.card:hover .card__body{ background:rgba(1,40,64,.88); border-color:rgba(255,255,255,.40); }
.card__body h3{ font-size:1.28rem; color:#fff; margin-bottom:.4rem; letter-spacing:-.02em; }
.card__body p{ color:#fff; font-size:.92rem; line-height:1.6; margin:0; }
@media (hover:hover){
  .card__body p{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .55s var(--ease), opacity .4s ease, margin .4s ease;
  }
  .card:hover .card__body p, .card:focus-within .card__body p{ max-height:9rem; opacity:1; }
}

/* ==========================================================================
   Servicios — tarjetas tonales con foco que sigue al mouse
   ========================================================================== */
.svc{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem; }
.svc__item{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--arena); border:1px solid var(--linea-2); border-radius:var(--r-lg);
  padding:2.1rem 1.9rem; box-shadow:var(--sombra);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s ease;
}
.svc__item::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(128,180,191,.28), transparent 62%);
}
.svc__item:hover{ transform:translateY(-8px); box-shadow:var(--sombra-lg); border-color:var(--turquesa); }
.svc__item:hover::before{ opacity:1; }
.svc__ico{
  width:58px; height:58px; border-radius:var(--r); display:grid; place-items:center; margin-bottom:1.3rem;
  background:linear-gradient(145deg,var(--verde-selva),var(--azul-medio)); color:var(--turquesa-cl);
  box-shadow:0 12px 26px -14px rgba(38,25,0,.9), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .5s var(--ease);
}
.svc__item:hover .svc__ico{ transform:translateY(-3px) rotate(-5deg); }
.svc__ico .i{ width:1.7em; height:1.7em; }
.svc__item h3{ font-size:1.24rem; margin-bottom:.5rem; }
.svc__item p{ color:var(--gris); font-size:.95rem; }

/* Zona / otros negocios */
.zona{
  position:relative; overflow:hidden; margin-top:3rem;
  background:linear-gradient(135deg,var(--arena) 0%,var(--ambar-cl) 62%,rgba(242,169,153,.34));
  border-radius:var(--r-xl); padding:clamp(2rem,4vw,3.2rem);
  display:grid; grid-template-columns:1.4fr 1fr; gap:2.5rem; align-items:center;
  box-shadow:var(--sombra-md);
}
.zona::before{
  content:""; position:absolute; width:420px; height:420px; right:-120px; top:-160px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 65%);
}
.zona__txt{ position:relative; }
.zona .eyebrow{ color:var(--tinta); }
.zona .eyebrow::before{ background:var(--tinta); }
.zona h3{ font-size:clamp(1.4rem,2.3vw,1.9rem); color:var(--tinta); }
.zona p{ color:var(--tinta); margin-bottom:0; }
.zona strong{ color:var(--tinta); }
.zona__list{ position:relative; display:grid; gap:.7rem; }
.zona__list li{
  display:flex; align-items:center; gap:.8rem;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:100px; padding:.75rem 1.25rem; font-weight:600; font-size:.93rem; color:var(--tinta);
  transition:transform .35s var(--ease), background .3s ease;
}
.zona__list li:hover{ transform:translateX(6px); background:rgba(255,255,255,.85); }
.zona__list .i{ color:var(--verde); width:1.35em; height:1.35em; }
@media (max-width:820px){ .zona{ grid-template-columns:1fr; } }

/* ==========================================================================
   Eventos
   ========================================================================== */
.section--events{ background:linear-gradient(180deg,var(--crema) 0%,var(--arena) 100%); }
.events__media .ph{ box-shadow:var(--sombra-lg); }
.ticks{ display:grid; gap:.75rem; margin:1.6rem 0 2rem; }
.ticks li{ position:relative; padding-left:2.1rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:1.2rem; height:1.2rem; border-radius:50%;
  background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='m9.6 16.2-3.8-3.8 1.4-1.4 2.4 2.4 6.8-6.8 1.4 1.4Z'/%3E%3C/svg%3E") center/78% no-repeat;
  box-shadow:0 3px 8px -3px rgba(1,40,64,.8);
}
.ticks--light li{ color:#fff; }
.ticks--light li::before{
  box-shadow:none;
  background:var(--ambar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23261900'%3E%3Cpath d='m9.6 16.2-3.8-3.8 1.4-1.4 2.4 2.4 6.8-6.8 1.4 1.4Z'/%3E%3C/svg%3E") center/78% no-repeat;
}

/* ==========================================================================
   Galería — vidrio al pasar el mouse
   ========================================================================== */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;
  width:min(100% - 3rem, 1440px); margin-inline:auto;
}
.gallery__item{
  position:relative; border:0; padding:0; cursor:pointer; overflow:hidden;
  border-radius:var(--r-lg); min-height:200px;
  background:linear-gradient(150deg,var(--verde-selva),var(--turquesa));
  box-shadow:var(--sombra);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gallery__item:hover{ transform:translateY(-5px); box-shadow:var(--sombra-lg); }
.gallery__item img{ aspect-ratio:1/1; }
.gallery__item:nth-child(1), .gallery__item:nth-child(6){ grid-column:span 2; }
.gallery__item:nth-child(1) img, .gallery__item:nth-child(6) img{ aspect-ratio:2/1; }

.gallery__cap{
  position:absolute; left:.7rem; right:.7rem; bottom:.7rem; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.65rem .9rem; border-radius:var(--r-sm);
  background:rgba(1,40,64,.84);
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.24);
  color:#fff; font-size:.82rem; font-weight:600; text-align:left; line-height:1.3;
  opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .5s var(--ease);
}
.gallery__item:hover .gallery__cap,
.gallery__item:focus-visible .gallery__cap{ opacity:1; transform:translateY(0); }
.gallery__cap .i{ width:1.15em; height:1.15em; opacity:.85; }
.gallery__item.is-ph .gallery__cap{ display:none; }
@media (hover:none){ .gallery__cap{ opacity:1; transform:none; } }
@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery__item:nth-child(1), .gallery__item:nth-child(6){ grid-column:span 2; }
}

/* ==========================================================================
   Cómo llegar
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.3rem; margin-bottom:3rem; }
.step{
  position:relative; border-radius:var(--r-lg); padding:2.4rem 1.6rem 1.7rem;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .45s var(--ease), background .35s ease, border-color .35s ease;
}
.step:hover{ transform:translateY(-6px); background:rgba(255,255,255,.12); border-color:rgba(128,180,191,.5); }
.step__n{
  position:absolute; top:-20px; left:1.6rem; width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; background:var(--ambar); border:2px solid var(--terracota);
  color:var(--tinta); font-family:var(--f-display); font-weight:800; font-size:1.15rem;
  box-shadow:0 12px 24px -12px rgba(242,213,160,.9);
}
.step h3{ font-size:1.1rem; margin:.4rem 0 .45rem; }
.step p{ font-size:.92rem; color:#fff; margin:0; }

.map{ display:grid; grid-template-columns:1.5fr 1fr; gap:1.6rem; align-items:stretch; }
.map__frame{
  border-radius:var(--r-lg); overflow:hidden; min-height:400px;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 30px 60px -35px rgba(0,0,0,.9);
}
.map__frame iframe{ width:100%; height:100%; min-height:400px; border:0; }
.map__side{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); padding:2.1rem;
}
.map__side h3{ font-size:1.3rem; margin-bottom:1.1rem; }
.map__tip{ font-size:.84rem; color:#fff; margin:1.5rem 0 0; }
@media (max-width:900px){ .map{ grid-template-columns:1fr; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.section--faq{ background:var(--crema); }
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:.7rem; }
.faq__item{
  background:var(--arena); border:1px solid var(--linea-2); border-radius:var(--r);
  padding:.1rem 1.5rem; transition:border-color .3s, background .3s, box-shadow .3s;
}
.faq__item:hover{ border-color:var(--azul-texto); }
.faq__item[open]{ background:var(--blanco); border-color:var(--azul-texto); box-shadow:var(--sombra); }
.faq__item summary{
  cursor:pointer; list-style:none; padding:1.2rem 2.2rem 1.2rem 0; font-weight:700;
  color:var(--verde-selva); position:relative; font-size:1rem;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:""; position:absolute; right:2px; top:50%; width:14px; height:14px;
  margin-top:-7px; transition:transform .35s var(--ease);
  background:var(--verde);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq__item[open] summary::after{ transform:rotate(135deg); }
.faq__a{ padding-bottom:1.2rem; color:var(--gris); font-size:.96rem; animation:desplegar .45s var(--ease); }
.faq__a p{ margin:0; }
@keyframes desplegar{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none;} }

/* ==========================================================================
   Contacto
   ========================================================================== */
.section--contact{
  background:
    radial-gradient(800px 400px at 8% 0%, rgba(128,180,191,.20), transparent 62%),
    radial-gradient(600px 400px at 95% 100%, rgba(242,213,160,.18), transparent 65%),
    var(--arena);
}
.contact__list{ display:grid; gap:1.3rem; margin-top:2.2rem; }
.contact__list li{ display:flex; gap:1rem; align-items:flex-start; }
.contact__ico{
  width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--verde-selva),var(--azul-medio)); color:var(--turquesa-cl);
  box-shadow:0 10px 22px -12px rgba(38,25,0,.9);
}
.contact__list strong{ color:var(--verde-selva); font-size:.95rem; }
.contact__list a{ color:var(--verde); border-bottom:1px solid rgba(128,180,191,.6); transition:color .25s; }
.contact__list a:hover{ color:var(--terracota-osc); }

.form{
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-borde);
  border-radius:var(--r-xl); padding:clamp(1.7rem,3vw,2.5rem);
  box-shadow:var(--sombra-lg);
}
.form__title{ font-size:1.5rem; margin-bottom:1.5rem; }
.field{ margin-bottom:1.1rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:.82rem; font-weight:700; color:var(--verde-selva); margin-bottom:.45rem; letter-spacing:.02em; }
.field input, .field select, .field textarea{
  width:100%; padding:.9rem 1rem; border:1px solid var(--azul-texto); border-radius:var(--r-sm);
  font:inherit; font-size:.96rem; color:var(--tinta); background:rgba(242,213,160,.45);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--gris); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--verde); background:#fff;
  box-shadow:0 0 0 3px var(--blanco), 0 0 0 6px var(--azul-profundo);
}
.field input.is-error, .field select.is-error{ border-color:#BA1A1A; box-shadow:0 0 0 4px rgba(186,26,26,.12); }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form__msg{ margin:1rem 0 0; font-size:.92rem; font-weight:600; min-height:1.2em; }
.form__msg.ok{ color:var(--verde); }
.form__msg.err{ color:#BA1A1A; }
.form__alt{ margin:1rem 0 0; font-size:.87rem; color:var(--gris); text-align:center; }
.form__alt a{ color:var(--verde); font-weight:700; border-bottom:1px solid rgba(128,180,191,.6); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{
  position:relative; background:var(--verde-noche); color:rgba(255,255,255,.78);
  padding:clamp(3.5rem,6vw,5rem) 0 0; overflow:hidden;
}
.footer::before{
  content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:900px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(128,180,191,.16),transparent 70%);
}
.footer__in{ position:relative; display:grid; grid-template-columns:1.3fr 2fr; gap:3rem; padding-bottom:3rem; }
.footer strong{ color:var(--ambar); }
.footer__name{ font-family:var(--f-display); font-size:1.2rem; font-weight:700; color:#fff; margin:1.1rem 0 .4rem; }
.footer__desc{ font-size:.9rem; max-width:38ch; }
.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer__nav h4{ color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1.1rem; font-family:var(--f-texto); font-weight:700; }
.footer__nav li{ margin-bottom:.65rem; font-size:.92rem; }
.footer__nav a{ transition:color .25s, padding-left .3s var(--ease); }
.footer__nav a:hover{ color:var(--ambar); padding-left:5px; }
.social{ display:flex; gap:.6rem; margin-top:1.3rem; }
.social a{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:#fff;
  transition:background .3s, transform .4s var(--ease), color .3s, border-color .3s;
}
.social a:hover{ background:var(--ambar); color:var(--tinta); transform:translateY(-4px); border-color:transparent; }
.footer__bottom{
  position:relative; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; font-size:.83rem; color:rgba(255,255,255,.72);
}
.footer__bottom p{ margin:0; }
@media (max-width:820px){
  .footer__in{ grid-template-columns:1fr; gap:2.5rem; }
  .footer__nav{ grid-template-columns:1fr 1fr; }
}

/* ==========================================================================
   WhatsApp flotante
   ========================================================================== */
.wafab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--wa-vivo); color:var(--wa-texto); font-weight:700; font-size:.93rem;
  padding:.9rem 1.4rem; border-radius:100px;
  box-shadow:0 16px 34px -14px rgba(37,211,102,.9), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .4s var(--ease), background .3s ease, box-shadow .4s ease;
  transform:translateY(120px); opacity:0;
}
.wafab.is-in{ transform:translateY(0); opacity:1; }
.wafab:hover{ transform:translateY(-4px) scale(1.03); background:#1FBF5B; }
.wafab .i{ width:1.5em; height:1.5em; }
.wafab::after{
  content:""; position:absolute; inset:0; border-radius:100px; border:2px solid var(--wa-vivo);
  animation:pulso 2.8s infinite; pointer-events:none;
}
@keyframes pulso{ 0%{opacity:.75; transform:scale(1)} 70%{opacity:0; transform:scale(1.28)} 100%{opacity:0} }
@media (max-width:560px){ .wafab span{ display:none; } .wafab{ padding:1rem; } }

/* En celular manda la barra inferior del panel social, que ya lleva
   WhatsApp. Dos botones verdes apilados abajo serían un estorbo. */
@media (max-width:700px){ .wafab{ display:none; } }

/* ==========================================================================
   Lightbox de vidrio
   ========================================================================== */
.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(1,40,64,.85);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  display:grid; place-items:center; padding:4.5rem 1rem;
  animation:aparecer .35s ease;
}
.lb[hidden]{ display:none; }
@keyframes aparecer{ from{opacity:0} to{opacity:1} }
.lb__fig{ margin:0; max-width:min(1100px,92vw); text-align:center; animation:subir .5s var(--ease); }
@keyframes subir{ from{opacity:0; transform:translateY(24px) scale(.97)} to{opacity:1; transform:none} }
.lb__fig img{ max-height:76vh; width:auto; margin-inline:auto; border-radius:var(--r-lg); box-shadow:0 40px 80px -30px rgba(0,0,0,.9); }
.lb__fig figcaption{ color:#fff; margin-top:1.2rem; font-size:.94rem; }
.lb__close, .lb__nav{
  position:absolute; cursor:pointer; color:#fff; border-radius:50%;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:grid; place-items:center; transition:background .25s, transform .35s var(--ease);
}
.lb__close:hover, .lb__nav:hover{ background:rgba(255,255,255,.24); transform:scale(1.08); }
.lb__close{ top:22px; right:22px; width:48px; height:48px; font-size:1.9rem; line-height:1; }
.lb__nav{ top:50%; margin-top:-27px; width:54px; height:54px; font-size:2.1rem; line-height:1; }
.lb__nav--prev{ left:18px; }
.lb__nav--next{ right:18px; }
@media (max-width:600px){ .lb__nav{ width:44px; height:44px; font-size:1.7rem; } }

/* ==========================================================================
   Animaciones de entrada
   ========================================================================== */
.js .reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal-l{ transform:translateX(-40px); }
.js .reveal-r{ transform:translateX(40px); }
.js .reveal-zoom{ transform:scale(.94); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .wafab{ transform:none; opacity:1; }
  html{ scroll-behavior:auto; }
  .hero__media img{ animation:none; }
  .strip__in.is-marquee .strip__track{ animation:none !important; transform:none !important; will-change:auto; }
  .strip__group--clone,.strip__toggle{ display:none !important; }
  .strip__in.is-marquee .strip__viewport{ margin-right:0; }
}

/* ==========================================================================
   Impresión
   ========================================================================== */
@media print{
  .header,.topbar,.wafab,.hero__scroll,.nav,.burger,.form,.progress,body::after{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding:1.5rem 0; }
  .section--dark{ background:#fff !important; color:#000; border-radius:0; box-shadow:none; }
}

}

/* ========================================================================
   CAPA PIEL — identidad visual "Reserva Lacustre"
   ======================================================================== */
@layer piel {

:root{
  /* Primitivos perceptuales */
  --lagoon-950:oklch(26.97% .0428 220.91);
  --lagoon-800:oklch(34.60% .0520 206.70);
  --water-600:oklch(52.11% .0747 189.09);
  --mist-100:oklch(94.52% .0094 171.79);
  --ivory-100:oklch(96.23% .0143 84.58);
  --paper:oklch(99.42% .0069 88.64);
  --brass-500:oklch(69.68% .1139 71.90);
  --brass-600:oklch(61% .105 69);
  --clay-500:oklch(62.13% .1333 37.15);
  --ink:oklch(32.57% .025 208.26);
  --muted:oklch(50% .018 196.64);
  --line:oklch(86.24% .0147 169.18);
  --wa-green:oklch(72% .19 148);

  /* Roles semánticos */
  --color-bg:var(--ivory-100);
  --color-surface:var(--paper);
  --color-surface-muted:var(--mist-100);
  --color-fg:var(--ink);
  --color-muted:var(--muted);
  --color-primary:var(--lagoon-950);
  --color-primary-hover:var(--lagoon-800);
  --color-accent:var(--brass-500);
  --color-accent-strong:var(--brass-600);
  --color-border:var(--line);
  --color-on-dark:var(--paper);
  --color-on-dark-muted:oklch(88% .012 178);
  --color-focus:var(--water-600);

  /* Compatibilidad con los componentes existentes */
  --verde-noche:var(--lagoon-950);
  --verde-selva:var(--lagoon-950);
  --verde-medio:var(--lagoon-800);
  --verde:var(--water-600);
  --verde-claro:var(--mist-100);
  --turquesa:var(--water-600);
  --turquesa-cl:var(--mist-100);
  --azul-profundo:var(--lagoon-950);
  --azul-medio:var(--lagoon-800);
  --azul-texto:var(--lagoon-950);
  --ambar:var(--brass-500);
  --ambar-cl:oklch(83% .07 78);
  --terracota:var(--clay-500);
  --terracota-osc:oklch(49% .12 37);
  --crema:var(--ivory-100);
  --arena:var(--mist-100);
  --arena-2:oklch(91% .025 83);
  --arena-3:oklch(88% .035 79);
  --blanco:var(--paper);
  --tinta:var(--ink);
  --gris:var(--muted);

  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-texto:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1320px;
  --header-h:80px;

  --r-sm:.375rem;
  --r:.75rem;
  --r-lg:1.5rem;
  --r-xl:2.25rem;

  --shadow-xs:0 1px 2px oklch(18% .03 210 / .06);
  --shadow-sm:0 10px 30px -18px oklch(18% .03 210 / .26),0 2px 8px oklch(18% .03 210 / .06);
  --shadow-md:0 28px 70px -36px oklch(18% .03 210 / .34),0 8px 20px oklch(18% .03 210 / .08);
  --shadow-lg:0 42px 100px -44px oklch(18% .03 210 / .48),0 14px 30px oklch(18% .03 210 / .10);
  --sombra-xs:var(--shadow-xs);
  --sombra:var(--shadow-sm);
  --sombra-md:var(--shadow-md);
  --sombra-lg:var(--shadow-lg);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html{
 scroll-padding-top:calc(var(--header-h) + 24px);
 background:var(--color-bg);
 overflow-x:clip;
}

body{
 color:var(--color-fg);
 background:var(--color-bg);
 font-family:var(--f-texto);
 font-size:clamp(1rem,.96rem + .18vw,1.075rem);
 line-height:1.72;
 letter-spacing:-.006em;
 overflow-x:clip;
}

body::after{
 content:none;
}

img,
iframe{ border:0; }

h1,
h2,
h3,
h4{
 font-family:var(--f-display);
 color:var(--color-primary);
 font-weight:600;
 letter-spacing:-.035em;
 line-height:1.04;
}

p{ max-width:68ch; }
strong{ color:inherit; font-weight:700; }

.wrap{
 width:min(calc(100% - 2rem),var(--wrap));
 margin-inline:auto;
}

.i{ stroke-linecap:round; }

:focus-visible{
 outline:3px solid var(--color-focus);
 outline-offset:4px;
 border-radius:var(--r-sm);
 box-shadow:0 0 0 3px var(--color-surface);
}

::selection{
 color:var(--color-on-dark);
 background:var(--color-primary-hover);
}

.skip-link{
 color:var(--color-on-dark);
 background:var(--color-primary);
 border-radius:0 0 var(--r-sm) 0;
}

/* Tipografía editorial ---------------------------------------------------- */
.section{
 padding-block:clamp(4.5rem,7vw,8rem);
}

.section__head{
 max-width:800px;
 margin-bottom:clamp(3rem,5vw,5rem);
}

.eyebrow{
 gap:.8rem;
 margin-bottom:1.25rem;
 color:var(--color-primary-hover);
 font-family:var(--f-texto);
 font-size:.72rem;
 font-weight:700;
 letter-spacing:.2em;
}

.eyebrow::before{
 width:42px;
 height:1px;
 background:var(--color-accent);
}

.eyebrow--light{ color:var(--color-accent); }
.eyebrow--light::before{ background:var(--color-accent); }

.h2{
 max-width:18ch;
 margin-bottom:.65em;
 font-size:clamp(2.65rem,5vw,5rem);
 font-weight:600;
 letter-spacing:-.045em;
}

.h2--light{ color:var(--color-on-dark); }

.lead{
 max-width:61ch;
 color:var(--color-muted);
 font-size:clamp(1.05rem,1rem + .3vw,1.25rem);
 line-height:1.7;
}

.lead--light{ color:var(--color-on-dark-muted); }

.hl{
 color:var(--color-accent);
 background:none;
  -webkit-text-fill-color:currentColor;
}

.note{
 color:var(--color-muted);
 font-size:.9rem;
}

.note a{
 color:var(--color-primary);
 border-color:var(--color-accent);
}

.section--dark .note{ color:var(--color-on-dark-muted); }
.section--dark .note a{ color:var(--color-accent); }

/* Controles --------------------------------------------------------------- */
.btn{
 min-height:50px;
 padding:.9rem 1.5rem;
 border-width:1px;
 border-radius:var(--r-sm);
 font-size:.86rem;
 font-weight:700;
 letter-spacing:.025em;
 box-shadow:none;
 transition:transform .22s var(--ease-out),background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.btn::before{ content:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn[disabled],
.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; }
.btn--lg{ min-height:56px; padding:1rem 1.75rem; font-size:.92rem; }

.btn--amber{
 color:var(--color-primary);
 background:var(--color-accent);
 border-color:var(--color-accent);
 box-shadow:0 12px 28px -18px oklch(35% .08 72 / .72);
}

.btn--amber:hover{
 color:var(--color-primary);
 background:oklch(76% .105 75);
 border-color:oklch(76% .105 75);
}

.btn--dark,
.btn--wa{
 color:var(--color-on-dark);
 background:var(--color-primary);
 border-color:var(--color-primary);
}

.btn--dark:hover,
.btn--wa:hover{
 color:var(--color-on-dark);
 background:var(--color-primary-hover);
 border-color:var(--color-primary-hover);
 box-shadow:0 16px 30px -22px oklch(18% .04 210 / .65);
}

.btn--wa .i{ color:var(--wa-green); }

.btn--ghost,
.btn--ghost-light{
 color:var(--color-on-dark);
 background:oklch(100% 0 0 / .07);
 border-color:oklch(100% 0 0 / .48);
 backdrop-filter:blur(12px);
}

.btn--ghost:hover,
.btn--ghost-light:hover{
 color:var(--color-primary);
 background:var(--color-surface);
 border-color:var(--color-surface);
}

.btnrow{ gap:.75rem; margin-top:2rem; }

.link-arrow{
 gap:.65rem;
 color:var(--color-primary);
 font-size:.85rem;
 font-weight:700;
 letter-spacing:.02em;
 border-bottom:1px solid var(--color-accent);
}

.link-arrow::after{ content:none; }
.link-arrow:hover{ color:var(--color-primary-hover); }
.link-arrow:hover .i{ transform:translateX(4px); }

/* Barra superior y navegación -------------------------------------------- */
.progress{ height:2px; z-index:140; }
.progress span{
 background:var(--color-accent);
 box-shadow:none;
}

.topbar{
 display:none;
 color:var(--color-on-dark-muted);
 background:var(--color-primary);
 font-size:.66rem;
 font-weight:700;
 letter-spacing:.12em;
 text-transform:uppercase;
}

.topbar__in{
 justify-content:space-between;
 min-height:36px;
 padding:.45rem 0;
}

.topbar__item{ gap:.55rem; }
.topbar__item .i{ color:var(--color-accent); }

.header{
 top:0;
 background:oklch(98% .008 88 / .88);
 border-bottom:1px solid oklch(26.97% .0428 220.91 / .10);
 backdrop-filter:blur(18px) saturate(135%);
 box-shadow:none;
}

.header.is-stuck{
 background:oklch(99.42% .0069 88.64 / .94);
 border-color:oklch(26.97% .0428 220.91 / .16);
 box-shadow:0 16px 42px -34px oklch(18% .04 210 / .55);
}

.header__in{ min-height:var(--header-h); }

.brand{ gap:.8rem; min-width:0; }

.brand__mark{
 width:52px;
 height:52px;
}

.brand__mark img{ width:100%; height:100%; max-width:none; }

.brand__txt strong{
 color:var(--color-primary);
 font-family:var(--f-texto);
 font-size:1.02rem;
 font-weight:700;
 letter-spacing:.015em;
}


.brand__txt em{
 color:var(--color-primary-hover);
 font-size:.5rem;
 letter-spacing:.13em;
}

.brand__txt em > span{ background:var(--color-accent); }

.nav{ gap:1.6rem; }
.nav ul{ gap:1.25rem; }

.nav a{
 color:var(--color-primary);
 font-size:.75rem;
 font-weight:700;
 letter-spacing:.055em;
}

.nav ul a::after{
 height:1px;
 bottom:-.15rem;
 background:var(--color-accent);
}

.nav ul a:hover,
.nav ul a.is-active{ color:var(--color-primary-hover); }

.nav a.nav__cta{
 min-height:46px;
 padding:.7rem 1.1rem;
 color:var(--color-on-dark);
 background:var(--color-primary);
 border-color:var(--color-primary);
}

.nav a.nav__cta:hover{
 color:var(--color-on-dark);
 background:var(--color-primary-hover);
}

.burger{
 width:48px;
 height:48px;
 padding:12px;
 border:1px solid var(--color-border);
 border-radius:50%;
}

.burger span{
 height:1.5px;
 background:var(--color-primary);
}

/* Hero -------------------------------------------------------------------- */
.hero{
 min-height:min(900px,calc(100svh - 36px));
 align-items:center;
 background:var(--color-primary);
}

.hero__media{ inset:0; }

.hero__media img{
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:62% 52%;
 animation:none;
 transform:none;
}

.hero__veil{
 background:
 linear-gradient(90deg,oklch(20% .045 215 / .96) 0%,oklch(24% .046 215 / .84) 34%,oklch(24% .04 215 / .40) 66%,oklch(20% .04 215 / .12) 100%),
 linear-gradient(0deg,oklch(16% .035 215 / .78) 0%,transparent 50%);
}

.hero__veil::before{
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(120deg,transparent 0 60%,oklch(69.68% .1139 71.9 / .08) 100%);
}

.hero__veil::after{
 opacity:.5;
 background:
 repeating-radial-gradient(ellipse at 90% 110%,transparent 0 34px,oklch(100% 0 0 / .06) 35px 36px),
 linear-gradient(180deg,transparent 76%,oklch(16% .035 215 / .3));
 animation:none;
}

.hero__in{
 z-index:2;
 max-width:none;
 padding-block:clamp(7rem,14vh,11rem) clamp(4.5rem,8vh,7rem);
}

.hero__eyebrow{
 gap:.75rem;
 margin-bottom:1.5rem;
 padding:0;
 color:var(--color-accent);
 background:none;
 border:0;
 box-shadow:none;
 backdrop-filter:none;
 font-size:.72rem;
 letter-spacing:.2em;
}

.hero__eyebrow::before{
 content:"";
 width:44px;
 height:1px;
 background:var(--color-accent);
}

.hero__brand-lockup{ width:min(100%,780px); }

.hero__title{
 max-width:8ch;
 margin:0;
 color:var(--color-on-dark);
 background:none;
  -webkit-text-fill-color:currentColor;
 filter:none;
 animation:none;
 font-family:var(--f-display);
 font-size:clamp(4.2rem,10vw,8.8rem);
 font-weight:600;
 line-height:.78;
 letter-spacing:-.055em;
 text-shadow:0 18px 42px oklch(12% .03 215 / .34);
}

.hero__place{
 margin:1.3rem 0 0;
 color:var(--color-on-dark);
 font-family:var(--f-texto);
 font-size:clamp(.82rem,.74rem + .3vw,1rem);
 font-weight:600;
 line-height:1.4;
 letter-spacing:.22em;
 text-shadow:none;
}

.hero__cta{
 gap:.75rem;
 margin-top:2.5rem;
}

.hero__facts{
 width:min(100%,900px);
 margin-top:clamp(3.5rem,8vh,6rem);
 padding:1.4rem 1.5rem;
 gap:1rem;
 background:oklch(19% .038 215 / .68);
 border:1px solid oklch(100% 0 0 / .18);
 border-top-color:oklch(69.68% .1139 71.9 / .65);
 border-radius:var(--r);
 box-shadow:0 24px 60px -38px oklch(8% .03 215 / .72);
 backdrop-filter:blur(16px) saturate(120%);
}

.hero__facts li{
 position:relative;
 padding-left:1rem;
}

.hero__facts li::before{
 content:"";
 position:absolute;
 inset:.15rem auto .15rem 0;
 width:1px;
 background:oklch(100% 0 0 / .16);
}

.hero__facts li:first-child{ padding-left:0; }
.hero__facts li:first-child::before{ content:none; }

.hero__facts strong{
 color:var(--color-accent);
 font-family:var(--f-texto);
 font-size:clamp(1.65rem,1.45rem + .7vw,2.25rem);
 font-weight:600;
 letter-spacing:-.045em;
}

.hero__facts span{
 max-width:17ch;
 color:var(--color-on-dark-muted);
 font-size:.73rem;
 line-height:1.55;
 letter-spacing:.005em;
}

.hero__scroll{
 bottom:28px;
 width:24px;
 height:42px;
 border-color:oklch(100% 0 0 / .34);
 background:transparent;
 backdrop-filter:none;
}

/* Cinta ------------------------------------------------------------------- */
.strip{
 z-index:4;
 margin-top:-32px;
 padding-bottom:0;
}

.strip__in{
 width:100%;
 max-width:none;
 margin-inline:0;
 padding:.7rem 0;
 background:var(--color-primary);
 border:1px solid oklch(69.68% .1139 71.9 / .26);
 border-inline:0;
 border-radius:0;
 box-shadow:var(--shadow-md);
 backdrop-filter:none;
}

.strip__in.is-marquee .strip__viewport{ margin-right:0; }

.strip__group{ gap:.5rem; }
.strip__in.is-marquee .strip__group{
 gap:clamp(2rem,4vw,4.5rem);
 padding-inline:clamp(1rem,2vw,2.25rem);
}

.strip__item{
 gap:.65rem;
 min-height:44px;
 padding:.55rem .7rem;
 color:var(--color-on-dark);
 font-size:.7rem;
 font-weight:700;
 letter-spacing:.07em;
 text-transform:uppercase;
 border-radius:0;
}

.strip__item:hover{
 color:var(--color-accent);
 background:transparent;
 transform:none;
}

.strip__item .i{ color:var(--color-accent); }

/* Bienvenida y medios ----------------------------------------------------- */
.grid-2{
 grid-template-columns:1fr;
 gap:3rem;
}

.section--intro{
 overflow:hidden;
 overflow:clip;
 background:
 radial-gradient(circle at 96% 12%,oklch(52.11% .0747 189.09 / .08),transparent 30%),
 var(--color-bg);
}

.section--intro .h2{ max-width:17ch; }

.section--intro .lead strong{ color:var(--color-primary); }

.intro__copy .lead,
.intro__copy > p:not(.eyebrow){
 max-width:58ch;
 margin-inline:0;
 color:var(--color-muted);
 line-height:1.78;
 text-align:justify;
 text-align-last:left;
 text-justify:inter-word;
 hyphens:auto;
}

.intro__copy .lead{ margin-bottom:1.15rem; }

.intro__copy > p:not(.eyebrow):not(.lead){
 margin-top:0;
 font-size:1rem;
}

.intro__copy .link-arrow{ margin-top:1.8rem; }

.intro__collage{
 gap:.75rem;
 align-items:stretch;
}

.intro__collage .ph{
 border-radius:var(--r-lg);
 box-shadow:none;
}

.intro__collage .ph--tall{ transform:none; }

/* Abanico fotográfico: adaptación ligera del Card Stack de referencia.
 Sin JavaScript conserva el mosaico; con JS se convierte en una pila 3D. */
.u-sr-only{
 position:absolute !important;
 width:1px !important;
 height:1px !important;
 padding:0 !important;
 margin:-1px !important;
 overflow:hidden !important;
 clip:rect(0,0,0,0) !important;
 white-space:nowrap !important;
 border:0 !important;
}

.photo-stack__card{
 position:relative;
 margin:0;
}

.photo-stack__button{
 position:relative;
 z-index:1;
 display:block;
 width:100%;
 height:auto;
 padding:0;
 overflow:hidden;
 appearance:none;
 color:inherit;
 background:transparent;
 border:0;
 border-radius:inherit;
 cursor:pointer;
}

.photo-stack__button:focus-visible{
 outline:3px solid var(--color-accent);
 outline-offset:-6px;
}

.photo-stack__card::after{
 content:"";
 position:absolute;
 inset:36% 0 0;
 z-index:2;
 pointer-events:none;
 background:linear-gradient(180deg,transparent,oklch(15% .04 220 / .84));
}

.photo-stack__caption{
 position:absolute;
 inset:auto 1.15rem 1.05rem;
 z-index:3;
 display:grid;
 gap:.28rem;
 pointer-events:none;
 color:#fff;
 text-align:left;
 text-shadow:0 2px 14px oklch(10% .03 220 / .75);
}

.photo-stack__caption span{
 color:var(--color-accent-soft);
 font-size:.66rem;
 font-weight:800;
 letter-spacing:.18em;
}

.photo-stack__caption strong{
 color:#fff;
 font-family:var(--f-display);
 font-size:clamp(1.05rem,2vw,1.35rem);
 font-weight:650;
 line-height:1.1;
}

.photo-stack__nav{ display:none; }

.js .photo-stack.is-ready{
 position:relative;
 display:block;
 min-height:clamp(360px,38vw,470px);
 overflow:visible;
 isolation:isolate;
 perspective:1100px;
 touch-action:pan-y;
}

.js .photo-stack.is-ready .photo-stack__card{
 position:absolute;
 left:50%;
 bottom:3.9rem;
 width:min(82%,520px);
 min-height:0;
 aspect-ratio:4/3;
 grid-row:auto;
 overflow:hidden;
 border:4px solid var(--color-surface);
 border-radius:clamp(20px,2.3vw,30px);
 box-shadow:
    0 28px 64px -24px oklch(12% .04 220 / .58),
 inset 0 0 0 1px oklch(100% 0 0 / .18);
 transform:
 translate3d(calc(-50% + var(--stack-x,0%)),var(--stack-y,0),var(--stack-z,0))
 rotateX(var(--stack-tilt,0deg))
 rotateZ(var(--stack-rotate,0deg))
 scale(var(--stack-scale,1));
 transform-origin:50% 120%;
 transform-style:preserve-3d;
 filter:saturate(.84) brightness(.82);
 opacity:.94;
 transition:
 transform .56s cubic-bezier(.22,.8,.2,1),
 filter .32s ease,
 opacity .32s ease,
 box-shadow .32s ease;
 will-change:transform;
}

.js .photo-stack.is-ready .photo-stack__card.is-active{
 filter:saturate(1.04) brightness(1.02);
 opacity:1;
 box-shadow:
    0 34px 80px -28px oklch(12% .04 220 / .72),
    0 0 0 1px oklch(100% 0 0 / .22),
 inset 0 0 0 1px oklch(100% 0 0 / .22);
}

.js .photo-stack.is-ready .photo-stack__card::before{
 opacity:.22;
 transform:none;
 background:linear-gradient(120deg,oklch(100% 0 0 / .16),transparent 34% 70%,oklch(100% 0 0 / .08));
}

.js .photo-stack.is-ready .photo-stack__card:not(.is-active) .photo-stack__caption{
 opacity:0;
 transform:translateY(10px);
}

.js .photo-stack.is-ready .photo-stack__caption{
 transition:opacity .26s ease .16s,transform .36s var(--ease-out) .12s;
}

.js .photo-stack.is-ready .photo-stack__button img{
 width:100%;
 height:100%;
 aspect-ratio:auto;
 object-fit:cover;
 pointer-events:none;
 user-select:none;
  -webkit-user-drag:none;
 transition:transform .5s var(--ease),filter .35s ease;
}

.js .photo-stack.is-ready .photo-stack__button{
 position:absolute;
 inset:0;
 height:100%;
}

.js .photo-stack.is-ready .photo-stack__card:nth-of-type(1) img{ object-position:center; }
.js .photo-stack.is-ready .photo-stack__card:nth-of-type(2) img{ object-position:center; }
.js .photo-stack.is-ready .photo-stack__card:nth-of-type(3) img{ object-position:center 58%; }

.js .photo-stack.is-ready .photo-stack__card:hover img{ transform:none; }
.js .photo-stack.is-ready .photo-stack__card.is-active:hover img{ transform:scale(1.018); }

.js .photo-stack.is-ready .photo-stack__nav{
 position:absolute;
 left:50%;
 bottom:.15rem;
 z-index:40;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:.1rem .25rem;
 transform:translateX(-50%);
 border:1px solid oklch(20% .04 220 / .12);
 border-radius:999px;
 background:oklch(100% 0 0 / .64);
 box-shadow:0 12px 30px -20px oklch(12% .04 220 / .55);
 backdrop-filter:blur(12px);
}

.js .photo-stack__nav button{
 position:relative;
 width:44px;
 height:44px;
 padding:0;
 appearance:none;
 background:transparent;
 border:0;
 border-radius:999px;
 cursor:pointer;
}

.js .photo-stack__nav button::before{
 content:"";
 position:absolute;
 top:50%;
 left:50%;
 width:8px;
 height:8px;
 transform:translate(-50%,-50%);
 border-radius:999px;
 background:oklch(29% .055 211 / .35);
 transition:width .24s var(--ease-out),background .24s ease;
}

.js .photo-stack__nav button[aria-pressed="true"]::before{
 width:24px;
 background:var(--color-accent);
}

.js .photo-stack__nav button:focus-visible{
 outline:2px solid var(--color-primary);
 outline-offset:-5px;
}

.ph{
 isolation:isolate;
 overflow:hidden;
 background:var(--color-primary-hover);
 border:1px solid oklch(100% 0 0 / .12);
}

.ph img{
 transition:transform .55s var(--ease),filter .4s ease;
}

.ph:hover img{ transform:scale(1.025); }

.ph::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:1;
 pointer-events:none;
 opacity:1;
 transform:none;
 background:
 repeating-radial-gradient(ellipse at 90% 100%,transparent 0 30px,oklch(100% 0 0 / .075) 31px 32px),
 linear-gradient(145deg,oklch(52.11% .0747 189.09 / .20),transparent 58%);
}

.ph:hover::before{ transform:none; }

.ph.is-ph img{ opacity:0; }

.ph.is-ph::after{
 content:"PRÓXIMAMENTE  /  " attr(data-label);
 position:absolute;
 inset:auto 1.25rem 1.25rem;
 z-index:2;
 display:block;
 padding:0;
 color:var(--color-on-dark);
 background:none;
 font-family:var(--f-texto);
 font-size:.68rem;
 font-weight:700;
 line-height:1.5;
 letter-spacing:.12em;
 text-align:left;
 text-transform:uppercase;
 text-shadow:none;
 white-space:normal;
}

/* Las tarjetas ya nombran cada atractivo en su cuerpo editorial. */
.card .ph.is-ph::after{ content:none; }

/* Experiencias ------------------------------------------------------------ */
.section--dark{
 color:var(--color-on-dark-muted);
 background:
 radial-gradient(circle at 90% 0%,oklch(52.11% .0747 189.09 / .18),transparent 32%),
 radial-gradient(circle at 0% 100%,oklch(69.68% .1139 71.9 / .09),transparent 28%),
 var(--color-primary);
}

.section--dark::before{
 opacity:.7;
 background:repeating-radial-gradient(ellipse at 95% 115%,transparent 0 46px,oklch(100% 0 0 / .04) 47px 48px);
}

.section--dark h3{ color:var(--color-on-dark); }
.section--dark strong{ color:var(--color-accent); }

.cards{
 display:grid;
 grid-template-columns:1fr;
 gap:1rem;
}

.card{
 min-height:440px;
 border:1px solid oklch(100% 0 0 / .13);
 border-radius:var(--r-lg);
 background:var(--color-primary-hover);
 box-shadow:none;
 transform:none;
}

.card:hover{
 transform:translateY(-4px);
 box-shadow:0 28px 60px -38px oklch(8% .03 215 / .8);
 border-color:oklch(69.68% .1139 71.9 / .42);
}

#atractivos .card--photo-clear .card__img img{
 filter:none;
 opacity:1;
}

#atractivos .card:first-child .card__img img{
 object-position:center 65%;
}

#atractivos .card--depredador .card__img img{
 object-position:center 52%;
}

#atractivos .card--mano-nativo .card__img img{
 object-position:center center;
}

#atractivos .card--nido .card__img img{
 object-position:center 48%;
}

#atractivos .card--jesus .card__img img{
 object-position:center center;
}

#atractivos .card--photo-clear::after,
#atractivos .card--photo-clear .card__img::before{
 content:none;
}

.card::after{
 background:linear-gradient(to top,oklch(12% .035 215 / .96) 0%,oklch(16% .035 215 / .58) 45%,transparent 76%);
}

.card__body{
 inset:auto 1rem 1rem;
 max-width:36rem;
 padding:1.15rem 1.2rem;
 color:var(--color-on-dark-muted);
 background:oklch(20% .04 215 / .64);
 border:1px solid oklch(100% 0 0 / .16);
 border-radius:var(--r);
 box-shadow:none;
 backdrop-filter:blur(12px);
}

.card:hover .card__body{
 background:oklch(18% .04 215 / .78);
 border-color:oklch(69.68% .1139 71.9 / .35);
}

.card__body h3{
 margin-bottom:.35rem;
 font-size:1.65rem;
 letter-spacing:-.025em;
}

.card__body p{
 color:var(--color-on-dark-muted);
 font-size:.87rem;
 line-height:1.65;
}

/* Servicios --------------------------------------------------------------- */
#servicios{ background:var(--color-surface); }

.svc{
 grid-template-columns:1fr;
 gap:1rem;
 border-top:0;
}

.svc__item{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 display:grid;
 grid-template-columns:52px minmax(0,1fr);
 grid-template-rows:auto minmax(0,1fr) auto;
 align-content:start;
 column-gap:1rem;
 min-height:224px;
 padding:1.75rem;
 background:#fffdf8;
 border:1px solid rgba(8,43,53,.12);
 border-radius:20px;
 box-shadow:
    0 24px 54px -38px rgba(8,43,53,.38),
    0 4px 12px rgba(8,43,53,.035),
 inset 0 1px 0 rgba(255,255,255,.94);
 transform:none;
 transition:
 border-color .28s ease,
 box-shadow .34s var(--ease-out),
 background-color .28s ease;
}

.svc__item::before{
 content:"";
 position:absolute;
 inset:0 0 auto;
 height:3px;
 background:linear-gradient(90deg,var(--color-accent),rgba(201,145,70,.28) 46%,transparent 82%);
 opacity:.76;
 pointer-events:none;
}

.svc__item:hover{
 background:#fffdf8;
 border-color:rgba(201,145,70,.42);
 box-shadow:
    0 34px 68px -38px rgba(8,43,53,.48),
    0 10px 24px -18px rgba(201,145,70,.34),
 inset 0 1px 0 rgba(255,255,255,1);
 transform:none;
}

.js .svc__item.reveal.in:hover{ transform:none; }

.svc__ico{
 grid-row:1 / -1;
 width:52px;
 height:52px;
 color:var(--color-accent-strong);
 background:
 radial-gradient(circle at 30% 20%,rgba(255,255,255,.96),transparent 44%),
 linear-gradient(145deg,rgba(255,255,255,.8),rgba(201,145,70,.12));
 border:1px solid rgba(201,145,70,.62);
 border-radius:16px;
 box-shadow:
    0 14px 26px -20px rgba(8,43,53,.5),
 inset 0 1px 0 rgba(255,255,255,.96);
 transition:box-shadow .32s ease,border-color .32s ease;
}

.svc__item:hover .svc__ico{
 border-color:rgba(201,145,70,.84);
 box-shadow:
    0 18px 30px -20px rgba(8,43,53,.56),
    0 0 0 4px rgba(201,145,70,.08),
 inset 0 1px 0 rgba(255,255,255,1);
 transform:none;
}
.svc__ico .i{ width:1.35rem; height:1.35rem; }

.svc__item p,
.svc__item .link-arrow{ grid-column:2; }

.svc__item .link-arrow{ align-self:end; }

.svc__heading{
 grid-column:2;
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 align-items:start;
 gap:1rem;
 margin:.05rem 0 .8rem;
}

.svc__item h3{
 grid-column:1;
 grid-row:1;
 margin:0;
 font-size:1.65rem;
 line-height:1.12;
 letter-spacing:-.025em;
}

.svc__price{
 grid-column:2;
 grid-row:1;
 justify-self:end;
 position:relative;
 isolation:isolate;
 display:grid;
 grid-template-rows:auto auto;
 align-items:center;
 align-content:center;
 gap:.2rem;
 box-sizing:border-box;
 width:7.15rem;
 height:3.1rem;
 padding:.58rem .85rem .62rem 1.55rem;
 overflow:hidden;
 color:var(--color-primary);
 background:
 radial-gradient(circle at 14% 6%,rgba(255,255,255,.98),transparent 38%),
 linear-gradient(145deg,rgba(255,255,255,.82),rgba(240,232,212,.58));
 border:1px solid rgba(8,43,53,.16);
 border-radius:14px;
 box-shadow:
    0 18px 34px -22px rgba(8,43,53,.42),
    0 3px 9px rgba(8,43,53,.06),
 inset 0 1px 0 rgba(255,255,255,.98),
 inset 0 0 0 1px rgba(201,145,70,.1);
 backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
 font-family:var(--f-texto);
 font-weight:800;
 line-height:1;
 text-align:left;
 white-space:nowrap;
 cursor:default;
 transition:border-color .22s ease,box-shadow .22s ease,filter .22s ease;
}

.svc__price::before{
 content:"";
 position:absolute;
 left:.68rem;
 top:50%;
 width:.42rem;
 height:.42rem;
 background:linear-gradient(145deg,oklch(79% .11 77),oklch(61% .11 68));
 box-shadow:0 0 0 3px rgba(201,145,70,.11),0 2px 5px rgba(8,43,53,.2);
 transform:translateY(-50%) rotate(45deg);
}

.svc__price::after{
 content:"";
 position:absolute;
 z-index:0;
 top:-45%;
 bottom:-45%;
 left:-46%;
 width:28%;
 pointer-events:none;
 background:linear-gradient(90deg,transparent,oklch(100% 0 0 / .3),transparent);
 transform:skewX(-18deg);
 transition:left .48s var(--ease-out);
}

.svc__price > span,
.svc__price > strong{
 position:relative;
 z-index:1;
}

.svc__price > span{
 color:oklch(53% .105 69);
 font-size:.56rem;
 letter-spacing:.18em;
 text-transform:uppercase;
}

.svc__price strong{
 color:var(--color-primary);
 font-family:var(--f-texto);
 font-size:1rem;
 font-weight:750;
 letter-spacing:.01em;
}

.svc__item p{
 margin-bottom:1.1rem;
 color:var(--color-muted);
 font-size:.91rem;
 line-height:1.7;
}

.zona{
 margin-top:clamp(4rem,7vw,7rem);
 padding:clamp(2rem,5vw,4.5rem);
 color:var(--color-on-dark-muted);
 background:var(--color-primary);
 border:1px solid oklch(69.68% .1139 71.9 / .24);
 border-radius:var(--r-lg);
 box-shadow:none;
}

.zona::before{
 opacity:1;
 background:repeating-radial-gradient(ellipse at 100% 120%,transparent 0 38px,oklch(100% 0 0 / .055) 39px 40px);
}

.zona .eyebrow{ color:var(--color-accent); }
.zona .eyebrow::before{ background:var(--color-accent); }
.zona h3{ color:var(--color-on-dark); font-size:clamp(2rem,3.5vw,3.6rem); }
.zona p,
.zona strong{ color:var(--color-on-dark-muted); }

.zona__list{ gap:0; }

.zona__list li{
 min-height:54px;
 padding:.85rem 0;
 color:var(--color-on-dark);
 background:transparent;
 border:0;
 border-bottom:1px solid oklch(100% 0 0 / .14);
 border-radius:0;
 box-shadow:none;
}

.zona__list li:hover{
 padding-left:.6rem;
 background:transparent;
 transform:none;
}

.zona__list .i{ color:var(--color-accent); }

/* Eventos ----------------------------------------------------------------- */
.section--events{
 background:
 linear-gradient(90deg,transparent,oklch(69.68% .1139 71.9 / .055)),
 var(--color-surface-muted);
}

.events__media .ph{
 min-height:480px;
 border-radius:var(--r-lg);
 box-shadow:none;
}

.events__media .ph img{ height:100%; object-fit:cover; }

.ticks{ gap:.15rem; margin:1.75rem 0 2rem; }

.ticks li{
 min-height:38px;
 padding:.45rem 0 .45rem 2rem;
 border-bottom:1px solid oklch(32.57% .025 208.26 / .11);
}

.ticks li::before{
 top:.8rem;
 width:16px;
 height:16px;
 color:var(--color-primary);
 background:transparent;
 border:1px solid var(--color-accent);
 box-shadow:none;
}

.ticks--light li{
 color:var(--color-on-dark-muted);
 border-color:oklch(100% 0 0 / .12);
}

.ticks--light li::before{
 color:var(--color-accent);
 background:transparent;
 border-color:var(--color-accent);
}

/* Galería ----------------------------------------------------------------- */
#galeria{ background:var(--color-bg); }

.gallery{
 width:min(calc(100% - 2rem),1440px);
 margin-inline:auto;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:.75rem;
}

.gallery__item,
.gallery__item:nth-child(n){
 grid-column:span 1;
 grid-row:span 1;
 min-height:220px;
 padding:0;
 border:1px solid var(--color-border);
 border-radius:var(--r);
 box-shadow:none;
 transform:none;
}

.gallery__item:nth-child(1){ grid-column:1 / -1; min-height:320px; }

.gallery__item:hover{
 transform:translateY(-3px);
 box-shadow:var(--shadow-md);
}

.gallery__item img,
.gallery__item:nth-child(n) img{
 width:100%;
 height:100%;
 aspect-ratio:auto;
 object-fit:cover;
 object-position:var(--gallery-position,center);
}

.gallery__cap{
 inset:auto .75rem .75rem;
 width:auto;
 padding:.75rem .9rem;
 color:var(--color-on-dark);
 background:oklch(18% .04 215 / .76);
 border:1px solid oklch(100% 0 0 / .16);
 border-radius:var(--r-sm);
 font-size:.75rem;
 backdrop-filter:blur(10px);
}

.gallery__item.is-ph .gallery__cap{ display:none; }

/* Cómo llegar ------------------------------------------------------------- */
#llegar{
 background:
 radial-gradient(circle at 85% 12%,oklch(52.11% .0747 189.09 / .20),transparent 34%),
 var(--color-primary);
}

.steps{
 grid-template-columns:1fr;
 gap:0;
 margin-bottom:clamp(3rem,6vw,5rem);
 border-top:1px solid oklch(100% 0 0 / .16);
}

.step{
 min-height:0;
 padding:1.5rem 0;
 background:transparent;
 border:0;
 border-bottom:1px solid oklch(100% 0 0 / .16);
 border-radius:0;
 box-shadow:none;
}

.step:hover{
 padding-left:.75rem;
 background:transparent;
 border-color:oklch(100% 0 0 / .16);
 transform:none;
}

.step__n{
 position:static;
 width:auto;
 height:auto;
 display:block;
 margin:0 0 .85rem;
 color:var(--color-accent);
 background:transparent;
 border:0;
 border-radius:0;
 box-shadow:none;
 place-items:unset;
 font-family:var(--f-display);
 font-size:2.8rem;
 font-weight:500;
}

.step h3{ font-size:1.45rem; }
.step p{ color:var(--color-on-dark-muted); }

.map{
 grid-template-columns:1fr;
 gap:0;
 overflow:hidden;
 background:var(--color-surface);
 border:1px solid oklch(100% 0 0 / .16);
 border-radius:var(--r-lg);
 box-shadow:var(--shadow-lg);
}

.map__frame{
 min-height:360px;
 border:0;
 border-radius:0;
 box-shadow:none;
}

.map__frame iframe{ min-height:360px; filter:saturate(.75) contrast(.95); }

.map__side{
 padding:clamp(1.75rem,4vw,3rem);
 color:var(--color-fg);
 background:var(--color-surface);
 border:0;
 border-radius:0;
 box-shadow:none;
 backdrop-filter:none;
}

.map__side h3{ color:var(--color-primary); font-size:2rem; }

.map__side .ticks--light li{
 color:var(--color-fg);
 border-color:var(--color-border);
}

.map__side .btn--ghost-light{
 color:var(--color-primary);
 background:transparent;
 border-color:var(--color-primary);
}

.map__side .btn--ghost-light:hover{
 color:var(--color-on-dark);
 background:var(--color-primary);
}

.map__tip{ color:var(--color-muted); }

/* FAQ --------------------------------------------------------------------- */
.section--faq{ background:var(--color-surface); }

.faq{
 max-width:none;
 gap:0;
 border-top:1px solid var(--color-border);
}

.faq__item{
 background:transparent;
 border:0;
 border-bottom:1px solid var(--color-border);
 border-radius:0;
 box-shadow:none;
}

.faq__item:hover,
.faq__item[open]{
 background:transparent;
 border-color:var(--color-border);
 box-shadow:none;
}

.faq__item summary{
 min-height:64px;
 padding:1.25rem 3rem 1.25rem 0;
 color:var(--color-primary);
 font-family:var(--f-display);
 font-size:clamp(1.25rem,1.1rem + .4vw,1.65rem);
 font-weight:600;
 letter-spacing:-.02em;
}

.faq__item summary::after{
 right:.25rem;
 color:var(--color-accent-strong);
 font-family:var(--f-texto);
 font-weight:400;
}

.faq__a{
 max-width:68ch;
 padding:0 3rem 1.5rem 0;
 color:var(--color-muted);
}

/* Contacto ---------------------------------------------------------------- */
.section--contact{
 color:var(--color-on-dark-muted);
 background:
 repeating-radial-gradient(ellipse at 0% 110%,transparent 0 54px,oklch(100% 0 0 / .035) 55px 56px),
 var(--color-primary);
}

.section--contact .eyebrow{ color:var(--color-accent); }
.section--contact .h2{ color:var(--color-on-dark); }
.section--contact .lead{ color:var(--color-on-dark-muted); }

.contact__list{ gap:0; margin-top:2.5rem; }

.contact__list li{
 gap:.9rem;
 padding:1rem 0;
 border-bottom:1px solid oklch(100% 0 0 / .12);
}

.contact__ico{
 width:46px;
 height:46px;
 color:var(--color-accent);
 background:transparent;
 border:1px solid oklch(69.68% .1139 71.9 / .5);
 border-radius:50%;
 box-shadow:none;
}

.contact__list strong{ color:var(--color-on-dark); }
.contact__list a{ color:var(--color-on-dark); border-color:var(--color-accent); }
.contact__list a:hover{ color:var(--color-accent); }

.form{
 padding:clamp(1.5rem,4vw,3rem);
 color:var(--color-fg);
 background:var(--color-surface);
 border:1px solid oklch(100% 0 0 / .28);
 border-radius:var(--r-lg);
 box-shadow:var(--shadow-lg);
 backdrop-filter:none;
}

.form__title{
 margin-bottom:2rem;
 color:var(--color-primary);
 font-size:2.2rem;
}

.field{ margin-bottom:1rem; }

.field label{
 margin-bottom:.5rem;
 color:var(--color-primary);
 font-size:.75rem;
 letter-spacing:.05em;
}

.field input,
.field select,
.field textarea{
 min-height:50px;
 padding:.85rem .95rem;
 color:var(--color-fg);
 background:var(--color-bg);
 border:1px solid var(--color-border);
 border-radius:var(--r-sm);
 font-size:1rem;
 box-shadow:none;
}

.field textarea{ min-height:120px; }

.field input::placeholder,
.field textarea::placeholder{ color:oklch(55% .018 196.64 / .78); }

.field input:focus,
.field select:focus,
.field textarea:focus{
 border-color:var(--color-primary-hover);
 box-shadow:0 0 0 3px var(--color-surface),0 0 0 5px var(--color-focus);
}

.field input.is-error,
.field select.is-error{
 border-color:var(--clay-500);
 box-shadow:0 0 0 4px oklch(62.13% .1333 37.15 / .14);
}

.form__msg.ok{ color:var(--color-primary-hover); }
.form__msg.err{ color:var(--clay-500); }
.form__alt{ color:var(--color-muted); }
.form__alt a{ color:var(--color-primary); border-color:var(--color-accent); }

/* Pie, WhatsApp y lightbox ----------------------------------------------- */
.footer{
 color:var(--color-on-dark-muted);
 background:oklch(19% .036 215);
}

.footer::before{
 background:repeating-radial-gradient(ellipse at 100% 120%,transparent 0 48px,oklch(100% 0 0 / .035) 49px 50px);
}

.footer__in{
 gap:3rem;
 padding-bottom:3.5rem;
}

.footer .brand__mark{
 width:76px;
 height:76px;
}

.footer__name{
 color:var(--color-on-dark);
 font-family:var(--f-display);
 font-size:1.55rem;
}

.footer strong{ color:var(--color-accent); }
.footer__nav h4{ color:var(--color-accent); }
.footer__nav a:hover{ color:var(--color-on-dark); padding-left:0; }

.social a{
 width:46px;
 height:46px;
 color:var(--color-on-dark);
 background:transparent;
 border-color:oklch(100% 0 0 / .18);
}

.social a:hover{
 color:var(--color-primary);
 background:var(--color-accent);
 border-color:var(--color-accent);
 transform:translateY(-2px);
}

.footer__bottom{
 color:oklch(88% .012 178 / .72);
 border-color:oklch(100% 0 0 / .10);
}

.wafab{
 right:1rem;
 bottom:1rem;
 min-height:52px;
 padding:.8rem 1rem;
 color:var(--color-primary);
 background:var(--wa-green);
 border:1px solid oklch(100% 0 0 / .35);
 border-radius:999px;
 box-shadow:0 18px 42px -22px oklch(18% .04 210 / .65);
}

.wafab:hover{
 color:var(--color-primary);
 background:oklch(78% .18 148);
 transform:translateY(-3px);
}

.wafab::after{ content:none; }

/* Panel social flotante ---------------------------------------------------
   Riel de vidrio pegado al borde derecho. No se despliega: mantiene su ancho
   y al pasar el mouse lo único que cambia es el brillo. Cada icono lleva al
   sitio que corresponde.
   ------------------------------------------------------------------------- */
.social-dock{
 position:fixed;
 top:50%;
 right:clamp(10px,1.2vw,20px);
 z-index:96;
 padding:8px;
 color:var(--color-on-dark);
 border-radius:20px;

 /* vidrio */
 background:rgba(8,43,53,.74);
 backdrop-filter:blur(16px) saturate(150%);
 -webkit-backdrop-filter:blur(16px) saturate(150%);
 border:1px solid rgba(255,255,255,.18);
 box-shadow:
    0 24px 54px -26px rgba(3,24,30,.72),
 inset 0 1px 0 rgba(255,255,255,.22),
 inset 0 -1px 0 rgba(0,0,0,.14);

 transform:translateY(-50%);
 transition:
 background-color .3s ease,
 border-color .3s ease,
 box-shadow .35s ease;
}

/* filo dorado del borde derecho */
.social-dock::before{
 content:"";
 position:absolute;
 top:16px;
 bottom:16px;
 right:0;
 width:2px;
 border-radius:2px;
 background:var(--color-accent);
 opacity:.6;
 pointer-events:none;
 transition:opacity .3s ease,box-shadow .35s ease;
}

/* al acercarse no crece: se enciende */
.social-dock:hover,
.social-dock:focus-within{
 background:rgba(8,43,53,.8);
 border-color:rgba(201,145,70,.55);
 box-shadow:
    0 28px 62px -28px rgba(3,24,30,.8),
    0 0 30px -6px rgba(201,145,70,.42),
 inset 0 1px 0 rgba(255,255,255,.3);
}

.social-dock:hover::before,
.social-dock:focus-within::before{
 opacity:1;
 box-shadow:0 0 12px 1px rgba(201,145,70,.75);
}

.social-dock__nav{
 display:grid;
 gap:4px;
}

.social-dock__link{
 position:relative;
 display:grid;
 place-items:center;
 width:46px;
 height:46px;
 border:1px solid transparent;
 border-radius:13px;
 outline:none;
 color:oklch(82% .115 78);          /* dorado claro: legible sobre el vidrio */
 transition:
 color .22s ease,
 background-color .22s ease,
 border-color .22s ease,
 box-shadow .3s ease;
}

.social-dock__link:hover,
.social-dock__link:focus-visible{
 color:var(--color-accent-strong);
 background:rgba(255,255,255,.16);
 border-color:rgba(201,145,70,.5);
 box-shadow:
    0 0 18px -3px rgba(201,145,70,.6),
 inset 0 1px 0 rgba(255,255,255,.24);
}

.social-dock__link:focus-visible{
 box-shadow:
    0 0 0 2px rgba(8,43,53,.9),
    0 0 0 4px var(--color-focus);
}

.social-dock__icon{
 display:grid;
 place-items:center;
 width:100%;
 height:100%;
 color:inherit;
}

.social-dock__icon .i{
 width:1.3rem;
 height:1.3rem;
 transition:filter .3s ease;
}

.social-dock__link:hover .social-dock__icon .i,
.social-dock__link:focus-visible .social-dock__icon .i{
 filter:drop-shadow(0 0 7px rgba(201,145,70,.85));
}

/* El nombre de cada red queda para lectores de pantalla: el riel ya no se
   despliega, así que en pantalla solo se ve el icono. */
.social-dock__label{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;
 border:0;
}

/* En celular el riel se convierte en la barra inferior de accesos ---------- */
@media (max-width:700px){
 .social-dock{
 top:auto;
 right:12px;
 bottom:max(10px,env(safe-area-inset-bottom));
 left:12px;
 padding:6px;
 transform:none;
  }

 .social-dock::before{
 top:auto;
 right:16px;
 bottom:0;
 left:16px;
 width:auto;
 height:2px;
  }

 .social-dock__nav{
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:4px;
  }

 .social-dock__link{
 grid-template-rows:auto auto;
 gap:2px;
 width:auto;
 min-width:0;
 height:auto;
 min-height:55px;
 padding:6px 2px;
  }

 .social-dock__icon{
 width:28px;
 height:26px;
  }

 .social-dock__icon .i{
 width:1.15rem;
 height:1.15rem;
  }

 /* aquí sí hay sitio para el nombre debajo del icono */
 .social-dock__label{
 position:static;
 width:auto;
 height:auto;
 max-width:100%;
 margin:0;
 overflow:hidden;
 clip:auto;
 color:rgba(255,253,248,.88);
 font-family:var(--f-texto);
 font-size:.56rem;
 font-weight:700;
 letter-spacing:.055em;
 text-align:center;
 text-overflow:ellipsis;
 text-transform:uppercase;
  }
}

@media (prefers-reduced-motion:reduce){
 .social-dock,
 .social-dock::before,
 .social-dock__link,
 .social-dock__icon .i{ transition:none; }
}

@media print{
 .social-dock{ display:none; }
}

.lb{ background:oklch(12% .03 215 / .92); }
.lb__fig img{ border-radius:var(--r); box-shadow:var(--shadow-lg); }
.lb__fig figcaption{ color:var(--color-on-dark); }

.lb__close,
.lb__nav{
 color:var(--color-on-dark);
 background:oklch(100% 0 0 / .08);
 border-color:oklch(100% 0 0 / .22);
}

.lb__close:hover,
.lb__nav:hover{ background:oklch(100% 0 0 / .16); }

/* Movimiento -------------------------------------------------------------- */
.js .reveal{
 opacity:0;
 transform:translateY(22px);
 transition:opacity .48s ease,transform .48s var(--ease-out);
}

.js .reveal.in{ opacity:1; transform:none; }
.js .reveal-l,
.js .reveal-r{ transform:translateY(22px); }
.js .reveal-zoom{ transform:scale(.98); }

/* Responsive -------------------------------------------------------------- */
@media (max-width:1023px){
 .nav{
 position:fixed;
 inset:var(--header-h) 0 0 auto;
 width:min(88vw,380px);
 height:calc(100dvh - var(--header-h));
 padding:2rem;
 display:flex;
 flex-direction:column;
 align-items:stretch;
 gap:1rem;
 overflow-y:auto;
 z-index:120;
 color:var(--color-on-dark);
 background:var(--color-primary);
 border-left:1px solid oklch(100% 0 0 / .12);
 box-shadow:-24px 30px 70px -42px oklch(8% .03 215 / .75);
 visibility:hidden;
 pointer-events:none;
 opacity:0;
 clip-path:inset(0 0 0 100%);
 transform:none;
 transition:clip-path .3s var(--ease-out),opacity .2s ease,visibility .3s;
  }

 .nav.is-open{
 visibility:visible;
 pointer-events:auto;
 opacity:1;
 clip-path:inset(0);
 transform:none;
  }

 .nav ul{ gap:.25rem; }
 .nav a{ color:var(--color-on-dark); font-size:1rem; }
 .nav li{ border-bottom:1px solid oklch(100% 0 0 / .12); }
 .nav li a{ min-height:52px; display:flex; align-items:center; }
 .nav ul a::after{ display:none; }
 .nav a.nav__cta{ width:100%; margin-top:1rem; background:var(--color-accent); color:var(--color-primary); }
 .burger{ display:block; }
}

@media (min-width:640px){
 .wrap{ width:min(calc(100% - 3rem),var(--wrap)); }

 .hero__facts{
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:0;
  }

 .hero__facts li{ padding-inline:1.25rem; }
 .hero__facts li:first-child{ padding-left:0; }
 .hero__facts li:last-child{ padding-right:0; }

 .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .svc{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; }
 .svc__item:nth-child(odd),
 .svc__item:nth-child(even){
 padding:clamp(1.55rem,2.2vw,1.9rem);
 border:1px solid rgba(8,43,53,.12);
  }

 .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
 .step:nth-child(odd){ padding-right:1.5rem; }
 .step:nth-child(even){ padding-left:1.5rem; border-left:1px solid oklch(100% 0 0 / .16); }

 .field-row{ grid-template-columns:1fr 1fr; }
}

@media (min-width:768px){
 .gallery{
 width:min(calc(100% - 3rem),1440px);
 grid-template-columns:repeat(12,minmax(0,1fr));
 grid-auto-rows:230px;
  }

 .gallery__item:nth-child(n){ min-height:0; }
 .gallery__item:nth-child(1){ grid-column:span 6; grid-row:span 2; }
 .gallery__item:nth-child(2),
 .gallery__item:nth-child(3),
 .gallery__item:nth-child(4),
 .gallery__item:nth-child(5),
 .gallery__item:nth-child(7),
 .gallery__item:nth-child(8){ grid-column:span 3; }
 .gallery__item:nth-child(6){ grid-column:span 6; }
 .gallery__item:nth-child(9),
 .gallery__item:nth-child(10),
 .gallery__item:nth-child(11),
 .gallery__item:nth-child(12),
 .gallery__item:nth-child(13),
 .gallery__item:nth-child(14){ grid-column:span 4; }
 .gallery__item:nth-child(15),
 .gallery__item:nth-child(16){ grid-column:span 6; }
}

@media (max-width:899px){
 .events__media .ph{
 min-height:0;
 aspect-ratio:3 / 2;
  }
}

@media (min-width:900px){
 .wrap{ width:min(calc(100% - 5rem),var(--wrap)); }
 .grid-2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(4rem,7vw,7rem); }
 .section--intro .grid-2{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
 .section--events .grid-2{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
 .section--contact .grid-2{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); }
 .zona{ grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); }
 .map{ grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr); }
 .map__frame,
 .map__frame iframe{ min-height:540px; }
}

@media (min-width:1024px){
 .topbar{ display:block; }
 .burger{ display:none; }
 .cards{
 grid-template-columns:repeat(12,minmax(0,1fr));
 gap:1rem;
  }

 .card:nth-child(1){ grid-column:span 8; min-height:520px; }
 .card:nth-child(2){ grid-column:span 4; min-height:520px; }
 .card:nth-child(n+3){ grid-column:span 3; min-height:390px; }

 .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); }
 .step:nth-child(n){ padding:1.5rem; border-left:1px solid oklch(100% 0 0 / .16); }
 .step:first-child{ padding-left:0; border-left:0; }

 .section--faq .wrap{
 display:grid;
 grid-template-columns:minmax(260px,4fr) minmax(0,8fr);
 gap:clamp(4rem,8vw,8rem);
 align-items:start;
  }

 .section--faq .section__head{
 position:sticky;
 top:calc(var(--header-h) + 2rem);
 margin-bottom:0;
  }
}

@media (max-width:639px){
 .topbar__in{ justify-content:center; }
 .brand__mark{ width:46px; height:46px; }
 .brand__txt strong{ font-size:.94rem; }
 .brand__txt em{ font-size:.44rem; }
 .hero{ min-height:850px; }
 .hero__media img{ object-position:66% 52%; }
 .hero__veil{
 background:
 linear-gradient(90deg,oklch(18% .04 215 / .88),oklch(22% .04 215 / .58)),
 linear-gradient(0deg,oklch(14% .035 215 / .88),transparent 60%);
  }
 .hero__in{ padding-block:6rem 4rem; }
 .hero__title{ font-size:clamp(3.9rem,20vw,5.6rem); }
 .hero__place{ letter-spacing:.14em; }
 .hero__cta{ display:grid; grid-template-columns:1fr; }
 .hero__cta .btn{ width:100%; }
 .hero__facts{
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:1.25rem 1rem;
 margin-top:3rem;
  }
 .hero__facts li{ padding-left:0; }
 .hero__facts li::before{ content:none; }
 .hero__scroll{ display:none; }
 .intro__copy .lead,
 .intro__copy > p:not(.eyebrow){
 text-align:left;
 text-wrap:pretty;
 hyphens:none;
  }
 .strip{ margin-top:-20px; }
 .strip__in.is-marquee .strip__viewport{ margin-right:0; }
 .strip__group{ display:flex; flex-wrap:nowrap; }
 .svc__heading{ grid-template-columns:1fr; gap:.7rem; }
 .svc__price{
 grid-column:1;
 grid-row:2;
 justify-self:start;
  }
 .intro__collage{ min-height:520px; }
 .intro__collage .ph--tall{ grid-row:span 2; }
 .gallery{ grid-template-columns:1fr; }
 .gallery__item:nth-child(n){ grid-column:1; min-height:280px; }
 .btnrow{ display:grid; grid-template-columns:1fr; }
 .btnrow .btn{ width:100%; }
 .field-row{ grid-template-columns:1fr; }
 .footer__nav{ grid-template-columns:1fr 1fr; }
 .footer__bottom{ align-items:flex-start; }
}

@media (max-width:380px){
 .brand__txt em{ display:none; }
 .hero__title{ font-size:3.65rem; }
 .hero__facts{ padding:1.15rem; }
 .hero__facts strong{ font-size:1.55rem; }
 .hero__facts span{ font-size:.68rem; }
 .footer__nav{ grid-template-columns:1fr; }
}

@media (hover:hover){
 .svc__price:hover{
 border-color:rgba(201,145,70,.58);
 box-shadow:
      0 20px 38px -22px rgba(8,43,53,.46),
      0 0 0 3px rgba(201,145,70,.1),
 inset 0 1px 0 rgba(255,255,255,1),
 inset 0 0 0 1px rgba(201,145,70,.12);
 filter:brightness(1.025);
  }
 .svc__price:hover::after{ left:120%; }
 .gallery__cap{ opacity:0; transform:translateY(8px); transition:opacity .22s ease,transform .22s var(--ease-out); }
 .gallery__item:hover .gallery__cap,
 .gallery__item:focus-visible .gallery__cap{ opacity:1; transform:none; }
}

/* Galería coverflow ------------------------------------------------------- */
.gallery-coverflow{
 position:relative;
 width:100%;
 margin-inline:auto;
 isolation:isolate;
}

.js .gallery-coverflow.is-ready{
 padding-block:.75rem 1.5rem;
 overflow:hidden;
 overflow:clip;
}

.js #gallery.is-coverflow-ready{
 position:relative;
 display:block;
 width:100%;
 max-width:none;
 height:clamp(390px,40vw,560px);
 margin:0;
 overflow:hidden;
 overflow:clip;
 perspective:1200px;
 transform-style:preserve-3d;
 touch-action:pan-y;
 cursor:grab;
 isolation:isolate;
}

.js #gallery.is-coverflow-ready.is-dragging{ cursor:grabbing; }

.js #gallery.is-coverflow-ready .gallery__item:nth-child(n){
 position:absolute;
 top:50%;
 left:50%;
 display:block;
 width:min(42vw,560px);
 min-height:0;
 aspect-ratio:4 / 3;
 grid-column:auto;
 grid-row:auto;
 padding:0;
 overflow:hidden;
 border:1px solid oklch(100% 0 0 / .35);
 border-radius:clamp(12px,1.6vw,22px);
 outline-offset:5px;
 box-shadow:0 26px 70px -32px oklch(12% .04 220 / .72);
 backface-visibility:hidden;
 transform-origin:center center;
 transition:
 transform .42s cubic-bezier(.22,.8,.25,1),
 opacity .3s ease,
 filter .3s ease,
 visibility .3s ease,
 box-shadow .3s ease;
 will-change:transform;
}

.js #gallery.is-coverflow-ready .gallery__item:nth-child(n) img{
 width:100%;
 height:100%;
 aspect-ratio:auto;
 object-fit:cover;
 object-position:var(--gallery-position,center);
 transform:none;
 transition:transform .35s var(--ease-out);
}

.js #gallery.is-coverflow-ready .gallery__item.is-active{
 z-index:50;
 opacity:1;
 filter:none;
 transform:translate3d(-50%,-50%,0) rotateY(0) scale(1);
 cursor:zoom-in;
 box-shadow:
    0 34px 90px -36px oklch(12% .04 220 / .82),
    0 0 0 1px oklch(69.68% .1139 71.9 / .32);
}

.js #gallery.is-coverflow-ready .gallery__item.is-prev-1{
 z-index:40;
 opacity:.9;
 filter:saturate(.9) brightness(.9);
 transform:translate3d(-112%,-50%,-130px) rotateY(34deg) scale(.9);
}

.js #gallery.is-coverflow-ready .gallery__item.is-next-1{
 z-index:40;
 opacity:.9;
 filter:saturate(.9) brightness(.9);
 transform:translate3d(12%,-50%,-130px) rotateY(-34deg) scale(.9);
}

.js #gallery.is-coverflow-ready .gallery__item.is-prev-2{
 z-index:30;
 opacity:.52;
 filter:saturate(.72) brightness(.76);
 transform:translate3d(-158%,-48%,-250px) rotateY(45deg) scale(.78);
}

.js #gallery.is-coverflow-ready .gallery__item.is-next-2{
 z-index:30;
 opacity:.52;
 filter:saturate(.72) brightness(.76);
 transform:translate3d(58%,-48%,-250px) rotateY(-45deg) scale(.78);
}

.js #gallery.is-coverflow-ready .gallery__item.is-far{
 z-index:0;
 visibility:hidden;
 pointer-events:none;
 opacity:0;
 transform:translate3d(-50%,-48%,-360px) scale(.68);
}

.js #gallery.is-coverflow-ready .gallery__item .gallery__cap{
 display:flex;
 opacity:0;
 transform:translateY(10px);
 pointer-events:none;
}

.js #gallery.is-coverflow-ready .gallery__item.is-active:not(.is-ph) .gallery__cap{
 opacity:1;
 transform:none;
}

.js #gallery.is-coverflow-ready .gallery__item.is-ph .gallery__cap{ display:none; }

@media (hover:hover){
 .js #gallery.is-coverflow-ready .gallery__item.is-active:not(.is-ph):hover img{
 transform:scale(1.025);
  }
}

.gallery-coverflow__nav{
 position:absolute;
 top:50%;
 z-index:80;
 display:grid;
 place-items:center;
 width:52px;
 height:52px;
 padding:0;
 color:var(--color-primary);
 background:oklch(96.23% .0143 84.58 / .94);
 border:1px solid oklch(69.68% .1139 71.9 / .72);
 border-radius:50%;
 box-shadow:0 18px 44px -24px oklch(12% .04 220 / .72);
 backdrop-filter:blur(10px);
 transform:translateY(-50%);
 transition:background .2s ease,color .2s ease,transform .2s var(--ease-out),box-shadow .2s ease;
}

.gallery-coverflow__nav--prev{ left:clamp(.75rem,2.5vw,2.5rem); }
.gallery-coverflow__nav--next{ right:clamp(.75rem,2.5vw,2.5rem); }

/* Desde 701 px aparece el panel social pegado al borde derecho y tapaba la
   flecha de "siguiente". Las dos se meten hacia adentro para que quede
   libre y sigan siendo simétricas. */
@media (min-width:701px){
 .gallery-coverflow__nav--prev{ left:6.75rem; }
 .gallery-coverflow__nav--next{ right:6.75rem; }
}
.gallery-coverflow__nav .i{ width:1.25rem; height:1.25rem; }
.gallery-coverflow__arrow--prev{ transform:rotate(180deg); }

.gallery-coverflow__nav:hover,
.gallery-coverflow__nav:focus-visible{
 color:var(--color-on-dark);
 background:var(--color-primary);
 box-shadow:0 20px 50px -22px oklch(12% .04 220 / .82);
 transform:translateY(-50%) scale(1.04);
}

.gallery-coverflow__toolbar{
 position:relative;
 z-index:90;
 display:grid;
 grid-template-columns:auto minmax(0,1fr) auto;
 align-items:center;
 gap:clamp(.8rem,2vw,1.5rem);
 width:min(calc(100% - 2rem),760px);
 min-height:56px;
 margin:.15rem auto 0;
 padding:.65rem 1rem;
 color:var(--color-text);
 background:oklch(99.42% .0069 88.64 / .84);
 border:1px solid var(--color-border);
 border-radius:999px;
 box-shadow:0 18px 48px -34px oklch(12% .04 220 / .55);
 backdrop-filter:blur(14px);
}

.gallery-coverflow__counter{
 display:flex;
 align-items:baseline;
 gap:.2rem;
 margin:0;
 color:var(--color-muted);
 font-size:.72rem;
 letter-spacing:.08em;
}

.gallery-coverflow__counter strong{
 color:var(--color-accent-strong);
 font-family:var(--f-titulos);
 font-size:1.45rem;
 font-weight:600;
 line-height:1;
}

.gallery-coverflow__title{
 min-width:0;
 margin:0;
 overflow:hidden;
 color:var(--color-primary);
 font-family:var(--f-titulos);
 font-size:clamp(1rem,2vw,1.25rem);
 font-weight:600;
 line-height:1.1;
 text-align:center;
 text-overflow:ellipsis;
 white-space:nowrap;
}

.gallery-coverflow__hint{
 margin:0;
 color:var(--color-muted);
 font-size:.68rem;
 font-weight:700;
 letter-spacing:.08em;
 text-transform:uppercase;
 white-space:nowrap;
}

@media (min-width:640px) and (max-width:1023px){
 .js #gallery.is-coverflow-ready{ height:clamp(390px,58vw,500px); }
 .js #gallery.is-coverflow-ready .gallery__item:nth-child(n){ width:min(68vw,520px); }
 .js #gallery.is-coverflow-ready .gallery__item.is-prev-1{
 transform:translate3d(-98%,-50%,-90px) rotateY(28deg) scale(.9);
  }
 .js #gallery.is-coverflow-ready .gallery__item.is-next-1{
 transform:translate3d(-2%,-50%,-90px) rotateY(-28deg) scale(.9);
  }
 .js #gallery.is-coverflow-ready .gallery__item.is-prev-2,
 .js #gallery.is-coverflow-ready .gallery__item.is-next-2{
 visibility:hidden;
 pointer-events:none;
 opacity:0;
  }
}

@media (max-width:639px){
 .js .gallery-coverflow.is-ready{ padding-top:0; }
 .js #gallery.is-coverflow-ready{ height:clamp(330px,103vw,390px); }
 .js #gallery.is-coverflow-ready .gallery__item:nth-child(n){
 width:min(86vw,360px);
 border-radius:14px;
  }
 .js #gallery.is-coverflow-ready .gallery__item.is-prev-1{
 opacity:.72;
 transform:translate3d(-86%,-50%,-50px) rotateY(15deg) scale(.91);
  }
 .js #gallery.is-coverflow-ready .gallery__item.is-next-1{
 opacity:.72;
 transform:translate3d(-14%,-50%,-50px) rotateY(-15deg) scale(.91);
  }
 .js #gallery.is-coverflow-ready .gallery__item.is-prev-2,
 .js #gallery.is-coverflow-ready .gallery__item.is-next-2{
 visibility:hidden;
 pointer-events:none;
 opacity:0;
  }
 .gallery-coverflow__nav{
 width:44px;
 height:44px;
  }
 .gallery-coverflow__nav--prev{ left:.35rem; }
 .gallery-coverflow__nav--next{ right:.35rem; }
 .gallery-coverflow__toolbar{
 grid-template-columns:auto minmax(0,1fr);
 gap:.8rem;
 width:calc(100% - 2rem);
 padding:.6rem .85rem;
 border-radius:var(--r);
  }
 .gallery-coverflow__title{ text-align:left; }
 .gallery-coverflow__hint{ display:none; }
}

@media (prefers-reduced-motion:reduce){
 .js #gallery.is-coverflow-ready .gallery__item:nth-child(n){
 transition:none !important;
 will-change:auto;
  }
}

@media (prefers-reduced-motion:reduce){
 html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
 animation-duration:.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:.01ms !important;
  }
 .hero__media{ transform:none !important; }
 .js .reveal{ opacity:1; transform:none; }
}

@media print{
 .header,
 .topbar,
 .wafab,
 .strip,
 .progress{ display:none !important; }
}


/* Cómo llegar: el título con la foto del letrero al costado ---------------- */
.llegar__intro{
 display:grid;
 grid-template-columns:1.4fr .6fr;   /* el texto manda; la foto entra al costado */
 gap:clamp(2rem,4vw,3.5rem);
 align-items:center;
 margin-bottom:clamp(2.5rem,5vw,4rem);
}

.llegar__intro .section__head{ margin-bottom:0; }

.llegar__foto{ margin:0; }

.llegar__foto img{
 width:100%;
 height:auto;
 aspect-ratio:16/10;
 object-fit:cover;
 border-radius:var(--r-lg);
 box-shadow:0 30px 60px -34px rgba(0,18,33,.9);
}

.llegar__foto figcaption{
 margin-top:.7rem;
 font-size:.8rem;
 line-height:1.5;
 color:rgba(255,255,255,.72);
}

.llegar__foto figcaption strong{ color:var(--color-accent); }

@media (max-width:900px){
 .llegar__intro{ grid-template-columns:1fr; gap:2rem; }
}

}

/* ========================================================================
   CAPA HERO — la portada
   ======================================================================== */
@layer hero {

:root{
  --hero-v2-scrim:6,31,41;
}

/* Escenario cinematográfico: una sola fotografía y una sola capa de lectura. */
#inicio.hero{
 min-height:clamp(620px,calc(100vh - var(--header-h) - 36px),920px);
 min-height:clamp(620px,calc(100svh - var(--header-h) - 36px),920px);
 align-items:stretch;
 isolation:isolate;
 overflow:hidden;
 background:var(--color-primary);
}

/* Neutraliza el parallax inline sin alterar el contrato JavaScript. */
#inicio .hero__media{
 inset:0;
 transform:none !important;
 will-change:auto;
}

#inicio .hero__media img{
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:62% 44%;
 filter:saturate(.90) contrast(1.03) brightness(.97);
}

#inicio .hero__veil{
 background:
 linear-gradient(90deg,
 rgba(var(--hero-v2-scrim),.84) 0%,
 rgba(var(--hero-v2-scrim),.76) 18%,
 rgba(var(--hero-v2-scrim),.52) 38%,
 rgba(var(--hero-v2-scrim),.20) 56%,
 rgba(var(--hero-v2-scrim),.04) 72%,
 transparent 100%),
 linear-gradient(0deg,
 rgba(var(--hero-v2-scrim),.66) 0%,
 rgba(var(--hero-v2-scrim),.28) 18%,
 transparent 42%);
}

#inicio .hero__veil::before,
#inicio .hero__veil::after{
 content:none !important;
 display:none !important;
 animation:none !important;
}

#inicio .hero__in{
 z-index:2;
 align-self:stretch;
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 justify-content:center;
 max-width:none;
 min-height:inherit;
 padding-block:clamp(3.75rem,7vh,5.75rem) clamp(7.75rem,14vh,9.5rem);
}

#inicio .hero__eyebrow{
 margin-bottom:1.1rem;
 font-size:.75rem;
 letter-spacing:.19em;
}

#inicio .hero__brand-lockup{
 width:min(100%,720px);
}

#inicio .hero__title{
 width:max-content;
 max-width:none;
 margin:0;
 white-space:nowrap;
 font-size:clamp(5.25rem,7.6vw,8.4rem);
 font-weight:600;
 line-height:.84;
 letter-spacing:-.058em;
 text-shadow:0 2px 24px rgba(3,18,24,.36);
}

#inicio .hero__place{
 margin-top:.95rem;
 font-size:clamp(.88rem,.82rem + .18vw,1rem);
 letter-spacing:.17em;
 text-shadow:0 4px 18px rgba(3,18,24,.34);
}

#inicio .hero__cta{
 align-items:center;
 gap:1.1rem;
 margin-top:2rem;
}

#inicio .hero__cta .btn--wa{
 min-height:62px;
 gap:.9rem;
 padding:.45rem 2rem;
 overflow:hidden;
 border-radius:.7rem;
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,.10),
    0 20px 42px -21px rgba(2,19,24,.92);
 transition:
 transform .3s var(--ease-out),
 box-shadow .3s var(--ease-out),
 filter .3s ease,
 border-color .3s ease;
}

#inicio .hero__cta .btn--wa::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 background:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.26) 43%,transparent 65%);
 transform:translateX(-135%);
 opacity:0;
 transition:transform .8s var(--ease-out);
 animation:hero-cta-sheen 4.2s var(--ease-out) infinite;
 will-change:transform,opacity;
 pointer-events:none;
}


#inicio .hero__cta .btn--wa:hover,
#inicio .hero__cta .btn--wa:focus-visible{
 box-shadow:
 inset 0 1px 0 rgba(255,255,255,.14),
    0 25px 50px -22px rgba(2,19,24,.96);
}

#inicio .hero__cta .btn--wa:hover::before,
#inicio .hero__cta .btn--wa:focus-visible::before{
 animation-duration:1.25s;
}

#inicio .hero__cta .btn--wa:focus-visible{
 outline:3px solid rgba(255,255,255,.96);
 outline-offset:4px;
}

#inicio .hero__cta .btn--wa .i{ color:var(--wa-green); }

#inicio .hero__cta-label{
 letter-spacing:.018em;
}


@keyframes hero-cta-sheen{
  0%,54%{
 transform:translateX(-135%);
 opacity:0;
  }
  58%{
 opacity:.92;
  }
  76%{
 transform:translateX(135%);
 opacity:.48;
  }
  77%,100%{
 transform:translateX(135%);
 opacity:0;
  }
}

/* El enlace utilitario conserva un área táctil amplia, pero ya no compite
 visualmente con la acción principal. */
#inicio .hero__cta .btn--ghost{
 min-height:52px;
 padding-inline:.55rem;
 color:rgba(255,255,255,.94);
 background:transparent;
 border-color:transparent;
 border-bottom-color:rgba(255,255,255,.36);
 border-radius:0;
 box-shadow:none;
 backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#inicio .hero__cta .btn--ghost .i{
 color:var(--color-accent);
}

#inicio .hero__cta .btn--ghost:hover,
#inicio .hero__cta .btn--ghost:focus-visible{
 color:var(--color-on-dark);
 background:rgba(255,255,255,.06);
 border-color:transparent;
 border-bottom-color:var(--color-accent);
 box-shadow:none;
}

/* Rail de prueba: conserva los cuatro datos, pero elimina la gran caja. */
#inicio .hero__facts{
 position:absolute;
 right:0;
 bottom:24px;
 left:0;
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 width:auto;
 min-height:104px;
 gap:0;
 margin:0;
 padding:1.1rem 0 .85rem;
 background:transparent;
 border:0;
 border-top:1px solid rgba(255,255,255,.30);
 border-bottom:1px solid rgba(255,255,255,.12);
 border-radius:0;
 box-shadow:none;
 backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#inicio .hero__facts li,
#inicio .hero__facts li:first-child{
 position:relative;
 justify-content:center;
 min-height:70px;
 padding:.1rem clamp(1.25rem,2.25vw,2rem);
}

#inicio .hero__facts li:first-child{
 padding-left:0;
}

#inicio .hero__facts li::before{
 content:"";
 position:absolute;
 inset:.35rem auto .35rem 0;
 width:1px;
 background:rgba(255,255,255,.18);
}

#inicio .hero__facts li:first-child::before{
 content:none;
}

#inicio .hero__facts strong{
 font-size:clamp(1.85rem,1.65rem + .55vw,2.35rem);
 font-weight:600;
 line-height:1;
}

#inicio .hero__facts span{
 max-width:21ch;
 margin-top:.38rem;
 color:rgba(255,255,255,.86);
 font-size:.82rem;
 line-height:1.42;
}

/* El CTA principal ya guía al mismo destino. */
#inicio .hero__scroll{
 display:none !important;
}

/* Las piezas entran como una sola composición, no como cuatro widgets. */
.js #inicio .reveal{
 transition-duration:.38s;
 transition-delay:0ms !important;
}

/* La cinta deja de solaparse y funciona como transición editorial clara. */
.strip{
 z-index:4;
 margin-top:0;
 padding:0;
 background:var(--ivory-100);
}

.strip__in{
 width:100%;
 max-width:none;
 min-height:58px;
 margin:0;
 padding:.45rem 0;
 color:var(--color-primary);
 background:var(--ivory-100);
 border:0;
 border-top:1px solid var(--color-border);
 border-bottom:1px solid var(--color-border);
 border-radius:0;
 box-shadow:0 16px 34px -30px rgba(5,31,37,.44);
 backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.strip__in.is-marquee .strip__group{
 gap:clamp(2.5rem,4vw,4.5rem);
}

.strip__item{
 min-height:44px;
 color:var(--color-primary);
 font-size:.75rem;
 letter-spacing:.085em;
}

.strip__item .i{
 color:var(--color-accent-strong);
}

.strip__item:hover{
 color:var(--color-primary-hover);
 background:oklch(69.68% .1139 71.9 / .10);
 transform:none;
}

/* Tablet ------------------------------------------------------------------ */
@media (min-width:768px) and (max-width:1023px){
 #inicio.hero{
 min-height:max(700px,calc(100vh - var(--header-h)));
 min-height:max(700px,calc(100svh - var(--header-h)));
  }

 #inicio .hero__media img{
 object-position:66% 45%;
  }

 #inicio .hero__veil{
 background:
 linear-gradient(90deg,
 rgba(var(--hero-v2-scrim),.86) 0%,
 rgba(var(--hero-v2-scrim),.72) 26%,
 rgba(var(--hero-v2-scrim),.44) 48%,
 rgba(var(--hero-v2-scrim),.12) 68%,
 transparent 84%),
 linear-gradient(0deg,
 rgba(var(--hero-v2-scrim),.70) 0%,
 rgba(var(--hero-v2-scrim),.28) 20%,
 transparent 44%);
  }

 #inicio .hero__in{
 padding-block:4.25rem 8.75rem;
  }

 #inicio .hero__brand-lockup{
 width:min(100%,660px);
  }

 #inicio .hero__title{
 font-size:clamp(4.75rem,10vw,6.5rem);
  }

 #inicio .hero__facts{
 bottom:20px;
 min-height:108px;
  }
}

/* Móvil: la fotografía domina arriba y el contenido se apoya abajo. -------- */
@media (max-width:767px){
 #inicio.hero{
 min-height:calc(100vh - var(--header-h));
 min-height:calc(100svh - var(--header-h));
 height:auto;
  }

 #inicio .hero__media img{
 object-position:69% 50%;
  }

 #inicio .hero__veil{
 background:
 linear-gradient(180deg,
 rgba(var(--hero-v2-scrim),.12) 0%,
 rgba(var(--hero-v2-scrim),.16) 28%,
 rgba(var(--hero-v2-scrim),.48) 52%,
 rgba(var(--hero-v2-scrim),.88) 76%,
 rgba(var(--hero-v2-scrim),.96) 100%),
 linear-gradient(90deg,
 rgba(var(--hero-v2-scrim),.56) 0%,
 rgba(var(--hero-v2-scrim),.36) 58%,
 rgba(var(--hero-v2-scrim),.16) 100%);
  }

 #inicio .hero__in{
 justify-content:flex-end;
 min-height:inherit;
 padding-block:clamp(4.5rem,12vh,6.5rem) 1.65rem;
  }

 #inicio .hero__eyebrow{
 margin-bottom:.9rem;
 font-size:.7rem;
 letter-spacing:.16em;
  }

 #inicio .hero__eyebrow::before{
 width:32px;
  }

 #inicio .hero__brand-lockup{
 width:100%;
  }

 #inicio .hero__title{
 width:max-content;
 max-width:100%;
 white-space:nowrap;
 font-size:clamp(3.15rem,15.8vw,4.75rem);
 line-height:.88;
  }

 #inicio .hero__place{
 margin-top:.75rem;
 font-size:.8rem;
 line-height:1.45;
 letter-spacing:.14em;
  }

 #inicio .hero__cta{
 display:flex;
 flex-direction:column;
 align-items:stretch;
 width:min(100%,22rem);
 gap:.5rem;
 margin-top:1.45rem;
  }

 #inicio .hero__cta .btn--wa{
 width:100%;
 min-height:54px;
  }

 #inicio .hero__cta .btn--ghost{
 align-self:flex-start;
 width:max-content;
 max-width:100%;
  }

 #inicio .hero__facts{
 position:static;
 grid-template-columns:repeat(2,minmax(0,1fr));
 width:100%;
 min-height:0;
 gap:0 .5rem;
 margin-top:1.65rem;
 padding:.65rem 0 0;
  }

 #inicio .hero__facts li,
 #inicio .hero__facts li:first-child{
 min-height:72px;
 padding:.65rem .8rem;
 border-top:0;
  }

 #inicio .hero__facts li::before{
 content:none;
  }

 #inicio .hero__facts li:nth-child(even)::before{
 content:"";
 position:absolute;
 inset:.6rem auto .6rem 0;
 width:1px;
 background:rgba(255,255,255,.18);
  }

 #inicio .hero__facts li:nth-child(n+3){
 border-top:1px solid rgba(255,255,255,.15);
  }

 #inicio .hero__facts strong{
 font-size:clamp(1.65rem,7vw,1.9rem);
  }

 #inicio .hero__facts span{
 max-width:none;
 font-size:.78rem;
 line-height:1.4;
  }

 .strip__in{
 min-height:54px;
 padding:.35rem 0;
  }
}

/* Landscape bajo: compacto, sin recortar acciones ni datos. --------------- */
@media (orientation:landscape) and (max-height:600px){
 #inicio.hero{
 min-height:auto;
  }

 #inicio .hero__media img{
 object-position:60% 58%;
  }

 #inicio .hero__in{
 justify-content:flex-start;
 padding-block:2.25rem 1.5rem;
  }

 #inicio .hero__eyebrow{
 margin-bottom:.65rem;
  }

 #inicio .hero__title{
 font-size:clamp(3.25rem,8.5vw,5.2rem);
  }

 #inicio .hero__place{
 margin-top:.55rem;
  }

 #inicio .hero__cta{
 margin-top:1rem;
  }

 #inicio .hero__facts{
 margin-top:1.1rem;
  }
}

@media (orientation:landscape) and (max-height:600px) and (min-width:640px){
 #inicio .hero__cta{
 display:flex;
 flex-direction:row;
 align-items:center;
 width:auto;
 max-width:100%;
 gap:1rem;
  }

 #inicio .hero__cta .btn--wa{
 width:auto;
  }

 #inicio .hero__facts{
 position:static;
 grid-template-columns:repeat(4,minmax(0,1fr));
 width:min(100%,900px);
 gap:0;
 padding:.6rem 0;
  }

 #inicio .hero__facts li,
 #inicio .hero__facts li:first-child{
 min-height:64px;
 padding:.1rem .75rem;
 border-top:0;
  }

 #inicio .hero__facts li:nth-child(n+3){
 border-top:0;
  }

 #inicio .hero__facts li::before,
 #inicio .hero__facts li:nth-child(even)::before{
 content:"";
 position:absolute;
 inset:.35rem auto .35rem 0;
 width:1px;
 background:rgba(255,255,255,.18);
  }

 #inicio .hero__facts li:first-child::before{
 content:none;
  }
}

/* Bajo 320 px o con zoom extremo permitimos que el nombre envuelva. */
@media (max-width:319px){
 #inicio .hero__title{
 width:auto;
 white-space:normal;
  }
}

@media (prefers-reduced-motion:reduce){
 #inicio .hero__media,
 #inicio .hero__media img{
 transform:none !important;
 animation:none !important;
 will-change:auto;
  }

 .js #inicio .reveal{
 transition:none !important;
 transition-delay:0ms !important;
  }

 .strip__viewport{
 overflow-x:auto;
 scrollbar-width:thin;
  }

 #inicio .hero__cta .btn--wa::before{
 animation:none !important;
  }
}


/* --- Portada: la fotografía --- */

#inicio .hero__media{
 inset:-3% -2%;
 overflow:hidden;
}

#inicio .hero__picture{
 display:block;
 width:100%;
 height:100%;
 overflow:hidden;
}

#inicio .hero__media img{
 display:block;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:51% 54%;
 transform-origin:58% 54%;
 filter:saturate(1.005) contrast(1.01) brightness(.99);
 animation:hero-real-drift 26s cubic-bezier(.45,0,.55,1) infinite alternate !important;
 will-change:transform;
}

#inicio.hero--motion-paused .hero__media img{
 animation-play-state:paused !important;
}

@keyframes hero-real-drift{
  0%{
 transform:scale(1.018) translate3d(-.35%,.05%,0);
  }
  100%{
 transform:scale(1.072) translate3d(.65%,-.4%,0);
  }
}

@keyframes hero-real-mobile-arrive{
  0%{
 transform:scale(1.045);
  }
  100%{
 transform:scale(1.012);
  }
}

@media (max-width:1100px) and (min-width:768px){
 #inicio .hero__media img{
 object-position:54% 52%;
 transform-origin:58% 52%;
 animation-duration:28s !important;
  }
}

@media (max-width:767px){
 #inicio .hero__media{
 inset:-1.5%;
  }

 #inicio .hero__media img{
 object-position:50% 50%;
 transform-origin:58% 48%;
 filter:saturate(1.005) contrast(1.01) brightness(.985);
 animation:hero-real-mobile-arrive 1.8s cubic-bezier(.22,1,.36,1) both !important;
 will-change:auto;
  }
}

@media (orientation:landscape) and (max-height:600px){
 #inicio .hero__media img{
 object-position:50% 62%;
 transform-origin:50% 62%;
  }
}

@media (prefers-reduced-motion:reduce){
 #inicio .hero__media img{
 animation:none !important;
 transform:none !important;
 will-change:auto;
  }
}

}