/* ============================================================
   BASE — reset, tipografía, primitivas e interfaz global
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;           /* lo maneja Lenis */
}

body{
  margin:0;
  background:var(--fondo-oscuro);
  color:var(--texto);
  font-family:var(--tipo-texto);
  font-size:var(--t-base);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.cargando{ overflow:hidden; height:100dvh; }

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
::selection{ background:var(--verde-oscuro); color:var(--hueso); }

:focus-visible{
  outline:2px solid var(--foco);
  outline-offset:3px;
  border-radius:var(--radio-1);
}

/* ---------- Titulares ---------- */
/* Cada línea de un titular se revela desde dentro de una máscara que
   recorta lo que se sale. Con el interlineado apretado de los titulares,
   esa máscara cortaba las letras que bajan de la línea (g, j, p, q). El
   relleno inferior les da espacio y el margen negativo lo compensa, así
   que el titular ocupa lo mismo que antes. La máscara la crea SplitText. */
.linea-mask-split-mask{ padding-bottom:.2em; margin-bottom:-.2em; }

h1,h2,h3,h4{
  font-family:var(--tipo-display);
  font-weight:var(--peso-display);
  letter-spacing:var(--tracking-display);
  line-height:.98;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.02; }
h4{ font-size:var(--t-h4); line-height:1.15; }

/* La letra del logo. Entra en palabras sueltas, nunca en párrafos:
   es un acento de marca, no una tipografía de lectura. */
h1 em,h2 em,h3 em,.voz{
  font-family:var(--tipo-marca);
  font-weight:var(--peso-marca);
  font-style:normal;
  letter-spacing:-.01em;
  color:var(--acento-claro);
}
.oscuro h1 em,.oscuro h2 em,.oscuro h3 em,
.profundo h1 em,.profundo h2 em,.profundo h3 em,
.bosque h1 em,.bosque h2 em,.bosque h3 em{ color:var(--acento); }

p{ margin:0 0 1.1em; max-width:var(--ancho-texto); }
p:last-child{ margin-bottom:0; }


/* ---------- Primitivas de composición ---------- */
.env{                       /* envoltura estándar */
  width:100%;
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding-inline:var(--margen-x);
}
.seccion{ padding-block:var(--seccion-y); position:relative; }

/* La barra fija no debe tapar el título al llegar por un enlace interno */
section[id],header[id]{ scroll-margin-top:96px; }

.claro{ background:var(--fondo); color:var(--texto); }
.oscuro{ background:var(--fondo-oscuro); color:var(--texto-inv); }
.profundo{ background:var(--fondo-profundo); color:var(--texto-inv); }
.bosque{ background:var(--verde-oscuro); color:var(--texto-inv); }

.oscuro h1,.oscuro h2,.oscuro h3,.profundo h1,.profundo h2,.profundo h3,
.bosque h2,.bosque h3{ color:var(--texto-inv); }


/* ---------- Etiquetas y numerales de capítulo ---------- */
.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:var(--e-3);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:var(--tracking-etiqueta);
  text-transform:uppercase;
  color:var(--texto-3);
}
.oscuro .etiqueta,.profundo .etiqueta,.bosque .etiqueta{ color:var(--texto-inv-3); }
.etiqueta::before{
  content:"";
  width:var(--e-6); height:1px;
  background:currentColor; opacity:.55;
  flex:none;
}
.etiqueta.sin-linea::before{ display:none; }

.capitulo{
  font-family:var(--tipo-marca);
  font-size:var(--t-numeral);
  font-weight:var(--peso-marca);
  line-height:.8;
  letter-spacing:-.03em;
  color:color-mix(in srgb, var(--acento-relleno) 22%, transparent);
  pointer-events:none;
  user-select:none;
}
.oscuro .capitulo,.profundo .capitulo,.bosque .capitulo{
  color:color-mix(in srgb, var(--acento-relleno) 38%, transparent);
}

.guia{                      /* párrafo destacado bajo un h2 */
  font-family:var(--tipo-display);
  font-size:var(--t-guia);
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--texto-2);
  max-width:46ch;
}
.oscuro .guia,.profundo .guia,.bosque .guia{ color:var(--texto-inv-2); }

.apunte{ color:var(--texto-2); }
.oscuro .apunte,.profundo .apunte,.bosque .apunte{ color:var(--texto-inv-2); }

/* Marcador de dato pendiente de confirmar con el cliente.
   Sobre claro va el naranja oscurecido; el amarillo ahí no se lee. */
.pendiente{
  color:var(--acento-claro);
  font-style:italic;
  border-bottom:1px dashed color-mix(in srgb, var(--acento-claro) 45%, transparent);
}
.oscuro .pendiente,.profundo .pendiente,.bosque .pendiente{
  color:var(--acento);
  border-bottom-color:color-mix(in srgb, var(--acento) 45%, transparent);
}


/* ---------- Botones ---------- */
.btn{
  --btn-fondo:transparent;
  --btn-texto:currentColor;
  --btn-borde:currentColor;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--e-3);
  /* El costado cede antes que el texto: el botón se estrecha, no se parte */
  padding:14px clamp(18px,2.2vw,26px);
  border-radius:var(--radio-pill);
  border:1px solid var(--btn-borde);
  background:var(--btn-fondo);
  color:var(--btn-texto);
  font-size:var(--t-menor);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  max-width:100%;
  min-height:44px;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--vel-2) var(--curva), border-color var(--vel-2) var(--curva);
}
/* Relleno que sube desde abajo al pasar el puntero.
   border-radius heredado: si el botón deja de recortar por overflow
   —como en móvil— estos rectángulos asomarían por las esquinas. */
.btn::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--btn-hover-fondo, var(--acento));
  transform:translateY(101%);
  transition:transform var(--vel-3) var(--curva);
}
.btn:hover::after,.btn:focus-visible::after{ transform:translateY(0); }
.btn:hover{ color:var(--btn-hover-texto,var(--verde-noche)); border-color:var(--btn-hover-fondo,var(--acento)); }
.btn .flecha{ transition:transform var(--vel-2) var(--curva); }
.btn:hover .flecha{ transform:translate(3px,-3px); }

/* El naranja de marca como relleno, con texto verde profundo:
   5.12:1, la única pareja del naranja que cumple AA. */
.btn-solido{
  --btn-fondo:var(--acento-relleno); --btn-texto:var(--sobre-acento);
  --btn-borde:var(--acento-relleno);
  --btn-hover-fondo:var(--amarillo); --btn-hover-texto:var(--verde-profundo);
  font-weight:600;
}
/* Botón de contorno sobre fotografía.
   No puede confiar en el contraste de la foto: según el recorte —y en
   móvil el recorte cambia— queda sobre agua clara y desaparece. Por eso
   lleva su propio respaldo oscuro con desenfoque, en un pseudo-elemento
   por DEBAJO del relleno de hover (z-index -2 contra -1), para que al
   pasar el puntero el color lo cubra por completo. */
.btn-linea-inv{
  --btn-texto:var(--hueso); --btn-borde:rgba(249,246,239,.6);
  --btn-hover-fondo:var(--hueso); --btn-hover-texto:var(--verde-profundo);
}
.btn-linea-inv::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  border-radius:inherit;
  background:rgba(10,26,22,.42);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}
.btn-linea{
  --btn-texto:var(--verde-profundo); --btn-borde:var(--linea);
  --btn-hover-fondo:var(--verde-oscuro); --btn-hover-texto:var(--hueso);
}
.btn-amarillo{
  --btn-fondo:var(--amarillo); --btn-texto:var(--verde-profundo); --btn-borde:var(--amarillo);
  --btn-hover-fondo:var(--acento-relleno); --btn-hover-texto:var(--verde-profundo);
  font-weight:600;
}

/* Enlace de texto con subrayado que se redibuja */
.enlace{
  position:relative;
  display:inline-flex; align-items:center; gap:var(--e-2);
  font-size:var(--t-menor);
  letter-spacing:.13em;
  text-transform:uppercase;
  padding-bottom:7px;
  cursor:pointer;
}
.enlace::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.4;
  transform-origin:right; transition:transform var(--vel-3) var(--curva), opacity var(--vel-2);
}
.enlace:hover::after{ transform:scaleX(0); }
.enlace::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--vel-3) var(--curva) .06s;
}
.enlace:hover::before{ transform:scaleX(1); }


/* ---------- Marcos de imagen (revelado por máscara) ---------- */
.marco{
  position:relative;
  overflow:hidden;
  background:var(--verde-oscuro);
}
.marco > img{
  width:100%; height:100%;
  object-fit:cover;
  will-change:transform;
}
/* Estas fotos derivan ±4 % con el scroll (movimiento.js). Del mismo alto que
   su marco, al moverse destapaban una franja del fondo arriba o abajo. Con
   un 10 % de alto extra, centrado, siempre cubren el marco. */
.plan-foto > img, .comida-foto > img, .posada-mayor > img, .exp-foto > img{
  height:110%; position:relative; top:-5%;
}
.marco::after{                 /* velo cálido, iguala fotos dispares */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(4,16,14,.28));
  pointer-events:none;
}
.marco.sin-velo::after{ display:none; }


/* ============================================================
   INTERFAZ GLOBAL
   ============================================================ */

/* ---------- Cortina de carga ---------- */
.cortina{
  position:fixed; inset:0; z-index:var(--z-cortina);
  background:var(--verde-noche);
  display:grid; place-items:center;
  overflow:hidden;
}
/* --- El sello de carga ---
   Un solo gesto: el logo se descubre de abajo hacia arriba mientras
   la imagen sube un poco más despacio que su propia máscara. Nada más.
   La contención es lo que se lee como caro. */
.sello{ position:relative; }
.sello-marco{
  width:clamp(170px,22vw,260px);
  overflow:hidden;
}
.sello-marco img{ width:100%; height:auto; }
.cortina-cola{
  position:absolute;
  right:var(--margen-x); bottom:clamp(22px,5vh,54px);
  width:clamp(104px,14vw,180px);
  color:var(--hueso-tenue);
}
.cortina-cola svg{ display:block; width:100%; height:auto; overflow:visible; }
.cortina-barra{
  position:absolute; left:0; bottom:0;
  height:2px; width:0%;
  background:var(--acento);
}

/* ---------- Barra de progreso de lectura ---------- */
.progreso{
  position:fixed; top:0; left:0; z-index:var(--z-nav);
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--verde-claro) 0%,var(--amarillo) 55%,var(--acento-relleno) 100%);
  pointer-events:none;
}

/* ---------- Grano de película ---------- */
.grano{
  position:fixed; inset:-150%;
  z-index:var(--z-flotante);
  pointer-events:none;
  opacity:.032;
  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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 700ms steps(3) infinite;
}
@keyframes grano{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}

/* ---------- Cursor personalizado (solo puntero fino) ---------- */
.cursor,.cursor-anillo{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  pointer-events:none;
  border-radius:50%;
  mix-blend-mode:difference;
  will-change:transform;
}
.cursor{ width:6px; height:6px; background:var(--hueso); margin:-3px 0 0 -3px; }
.cursor-anillo{
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border:1px solid rgba(246,243,235,.55);
  display:grid; place-items:center;
  transition:width var(--vel-2) var(--curva), height var(--vel-2) var(--curva),
             border-color var(--vel-2), background var(--vel-2);
}
.cursor-anillo span{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--verde-noche); opacity:0; white-space:nowrap;
  transition:opacity var(--vel-1);
}
body.cursor-activo .cursor-anillo{
  width:76px; height:76px; margin:-38px 0 0 -38px;
  background:var(--hueso); border-color:transparent;
}
body.cursor-activo .cursor-anillo span{ opacity:1; }
body.cursor-activo .cursor{ opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-anillo{ display:none; } }

/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed; right:clamp(16px,2.5vw,30px); bottom:clamp(16px,2.5vw,30px);
  z-index:var(--z-flotante);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--hueso); color:var(--verde-profundo);
  box-shadow:var(--sombra-2);
  transition:transform var(--vel-3) var(--curva), background var(--vel-2);
}
.wa:hover{ transform:translateY(-4px) scale(1.06); background:var(--acento); }
.wa svg{ width:24px; height:24px; fill:currentColor; }
.wa::after{                    /* pulso lento */
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--hueso); opacity:0;
  animation:pulso 3.4s var(--curva) infinite;
}
@keyframes pulso{
  0%{transform:scale(1);opacity:.6} 70%{transform:scale(1.55);opacity:0} 100%{opacity:0}
}

/* ---------- Utilidad: saltar al contenido ---------- */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:var(--z-cursor);
  background:var(--hueso); color:var(--verde-profundo);
  padding:12px 20px; border-radius:0 0 var(--radio-2) 0;
}
.saltar:focus{ left:0; }

.visualmente-oculto{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ============================================================
   MOVIMIENTO REDUCIDO — el sitio sigue siendo legible y completo
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .grano,.cursor,.cursor-anillo{ display:none; }
  .revelar,.revelar-hijo > *{ opacity:1!important; transform:none!important; }
}

/* Estado inicial de los bloques que revela GSAP.
   Se aplica solo si JS está vivo, para no ocultar contenido si falla. */
html.js-listo .revelar{ opacity:0; }
html.js-listo .revelar-hijo > *{ opacity:0; }