/* ============================================================================
   VETIVER · Casa de Bienestar
   Sistema de diseño. Un único :root con todos los colores para que la
   atmósfera del nicho (spa de lujo: tierra, madera, agua, brasa) se pueda
   recalibrar desde un solo lugar sin tocar una sola regla de layout.
   ========================================================================= */

:root{
  /* Escala del color base — marrón espresso cálido, de más oscuro a más claro.
     El hue se mantiene constante para que las superposiciones no viren a gris. */
  --base-950:#100c08;
  --base-900:#191209;
  --base-800:#241a12;
  --base-700:#33261a;

  /* Acento (bronce/ocre).
     --accent-400 es el paso BRILLANTE: solo sobre fondo oscuro.
     --accent-700 es el paso OSCURO: el único válido para texto sobre crema
     (contraste 5.5:1 sobre --cream; el 400 se queda en ~2:1 y sería ilegible). */
  --accent-500:#b98b57;
  --accent-400:#d9b483;
  --accent-100:#f2e5d3;
  --accent-700:#7d5a30;

  /* Neutros */
  --cream:#f7f2ea;
  --white:#fff;
  --ink:#241d16;
  --ink-soft:#6a5c4d;
  --border:#e2d8c8;

  --shadow:0 20px 40px -20px rgba(0,0,0,.25);
  --shadow-lift:0 34px 60px -28px rgba(16,12,8,.45);
  --radius:14px;
  --maxw:1200px;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono","SFMono-Regular",Consolas,monospace;

  /* Curvas: las de serie (ease) aplanan el gesto. Estas dos son las únicas
     que se usan en todo el archivo. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
}

/* ------------------------------- Reset --------------------------------- */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.65;
  overflow-x:hidden;             /* las franjas a sangre no deben crear scroll lateral */
  -webkit-font-smoothing:antialiased;
}
/* height:auto es obligatorio: los atributos width/height del HTML (que están
   ahí para reservar el hueco y evitar saltos de layout) se traducen en una
   altura fija que gana a cualquier aspect-ratio si no se neutraliza aquí. */
img{max-width:100%;height:auto;display:block;}
/* Saca del flujo el sprite de iconos SVG (ver el comentario junto a la
   etiqueta en index.html: `hidden` no basta en un <svg> raíz). */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;}
a{color:inherit;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;line-height:1.02;letter-spacing:-.01em;}
p{margin:0;}
ul,dl,dd{margin:0;padding:0;list-style:none;}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;}
@media (max-width:640px){ .wrap{width:min(100% - 1.75rem,var(--maxw));} }

.skip-link{
  position:fixed;top:.5rem;left:.5rem;z-index:200;
  padding:.6rem 1rem;background:var(--base-950);color:var(--accent-100);
  border-radius:8px;transform:translateY(-160%);
}
.skip-link:focus-visible{transform:none;}

:focus-visible{outline:2px solid var(--accent-400);outline-offset:3px;}

/* ------------------------- Tipografía compartida ------------------------ */

.kicker{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-700);          /* paso oscuro: va sobre fondo claro */
  margin:0 0 1.1rem;
}
.kicker--light{color:var(--accent-400);}  /* paso brillante: solo sobre oscuro */

.h2{
  font-size:clamp(2.3rem,5.2vw,4.1rem);
  letter-spacing:-.02em;
}
.h2 em,.hero__title em{font-style:italic;color:var(--accent-700);}
.h2--light{color:var(--accent-100);}
.h2--light em{color:var(--accent-400);}

.lede{
  font-size:clamp(1.02rem,1.4vw,1.15rem);
  color:var(--ink-soft);
  max-width:34ch;
}

.sec-head{margin-bottom:clamp(2.5rem,6vw,4.5rem);}
.sec-head--light .h2{color:var(--accent-100);}

/* -------------------------------- Botones ------------------------------- */

.btn{
  --btn-bg:var(--accent-700);
  --btn-fg:var(--cream);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.9rem;
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;
  /* Nada de transition:all — solo lo que la GPU compone barato. */
  transition:transform .24s var(--ease-out),opacity .24s var(--ease-out),
             background-color .24s var(--ease-out),border-color .24s var(--ease-out);
}
.btn--solid{--btn-bg:var(--accent-700);}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--accent-100);border-color:rgba(242,229,211,.42);}
.btn--sm{padding:.7rem 1.3rem;font-size:.65rem;}
.btn--lg{padding:1.25rem 2.6rem;font-size:.78rem;}

@media (hover:hover) and (pointer:fine){
  .btn--solid:hover{background:var(--accent-500);transform:translateY(-2px);}
  .btn--ghost:hover{background:rgba(242,229,211,.12);border-color:var(--accent-400);transform:translateY(-2px);}
}
.btn:active{transform:translateY(0);}

/* ================================ HEADER ================================= */

/* El header lleva el mismo fondo café sólido y difuminado desde el primer
   fotograma, sin depender de qué tan clara esté la foto del hero en ese
   punto exacto: el hero rota entre tres fotos, y un header transparente que
   confía en el degradado de la foto para el contraste deja de leerse bien
   en cuanto esa foto tiene una zona clara justo donde cae el nav — se nota
   como una costura, no como diseño. Un fondo constante evita el problema
   de raíz en vez de perseguir el contraste foto por foto. */
.site-header{
  position:fixed;inset:0 0 auto;z-index:120;
  background:rgba(16,12,8,.74);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  transition:box-shadow .4s var(--ease-out);
}
/* Al hacer scroll se suma una línea de separación muy sutil — el header ya
   estaba sólido, pero contra las secciones claras que vienen después del
   hero conviene marcar dónde termina. */
.site-header.is-stuck{box-shadow:0 1px 0 rgba(242,229,211,.1);}
.site-header__inner{
  width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;
  padding:1.1rem 0;
}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--accent-100);margin-right:auto;}
.brand__mark{width:26px;height:26px;color:var(--accent-400);flex:0 0 auto;}
.brand__mark svg{width:100%;height:100%;}
.brand__text{display:flex;flex-direction:column;line-height:1.05;}
.brand__text strong{font-family:var(--mono);font-size:.86rem;letter-spacing:.34em;font-weight:700;}
.brand__text em{font-family:var(--serif);font-style:italic;font-size:.82rem;opacity:.7;letter-spacing:.02em;}

.nav{display:flex;gap:2rem;}
.nav a{
  position:relative;text-decoration:none;color:var(--accent-100);
  font-size:.9rem;letter-spacing:.02em;opacity:.85;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--accent-400);
  transform:scaleX(0);transform-origin:left;   /* scaleX, nunca width */
  transition:transform .32s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{opacity:1;}
  .nav a:hover::after{transform:scaleX(1);}
}

.hamburger{display:none;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:6px;}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--accent-100);transition:transform .3s var(--ease-inout),opacity .2s linear;}
.hamburger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg);}

/* display:flex ganaría al [hidden] del navegador, así que hay que declararlo. */
.mobile-nav[hidden]{display:none;}
.mobile-nav{
  display:flex;flex-direction:column;gap:.2rem;
  padding:.5rem 1.25rem 1.5rem;
  background:rgba(16,12,8,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.mobile-nav a{
  padding:.85rem .25rem;text-decoration:none;color:var(--accent-100);
  border-bottom:1px solid rgba(242,229,211,.1);
  font-size:1.05rem;
}
.mobile-nav__cta{
  margin-top:1rem;border:0!important;text-align:center;
  background:var(--accent-700);border-radius:999px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}

@media (max-width:900px){
  .nav,.header__cta{display:none;}
  .hamburger{display:flex;}
}

/* ================================= HERO ================================== */

.hero{
  position:relative;
  /* Con el header ahora siempre sólido, el contenido necesita suficiente aire
     por encima para no meterse debajo — en portátiles con poca altura de
     viewport (~700-750px es común) 640px se quedaba corto y el kicker
     terminaba parcialmente tapado. */
  min-height:780px;height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  background:var(--base-950);
  color:var(--accent-100);
}
/* Capas explícitas: foto (0) → scrim (1) → texto (2). Sin declararlas, un
   z-index suelto en la foto activa la pintaría por encima del titular. */
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  /* Cross-fade, no slide: solo opacidad entra en la transición. */
  transition:opacity 1.6s var(--ease-inout);
  will-change:opacity,transform;
}
.hero__img.is-active{opacity:1;}
/* El Ken Burns arranca de cero en cada foto entrante (la clase se acaba de
   añadir, así que la animación es nueva). La foto saliente conserva .is-leaving
   durante el fundido para que su transform NO pegue un salto al desaparecer:
   ambas reglas declaran la misma animación, de modo que el cambio de clase en
   el mismo tick no la reinicia. */
.hero__img.is-active,
.hero__img.is-leaving{animation:kenburns 7.5s linear forwards;}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to{transform:scale(1.13) translate3d(-1.2%,-1.4%,0);}
}

/* Scrim de doble degradado. Calibrado contra la foto MÁS CLARA del set
   (las piedras calientes con flores blancas), no contra la más oscura:
   un .55 que basta sobre la foto de la vela deja el titular lavado sobre esa. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(16,12,8,.88) 0%,rgba(16,12,8,.66) 38%,rgba(16,12,8,.15) 72%,rgba(16,12,8,.35) 100%),
    linear-gradient(to top,rgba(16,12,8,.92) 0%,rgba(16,12,8,.25) 34%,rgba(16,12,8,0) 60%);
}

.hero__content{
  position:relative;z-index:2;
  width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;
  padding-bottom:clamp(2.5rem,7vh,5rem);
}
.hero__title{
  font-size:clamp(2.9rem,8.4vw,7rem);
  color:var(--accent-100);
  letter-spacing:-.025em;
  margin-bottom:1.6rem;
}
.hero__title em{color:var(--accent-400);}
.hero__sub{
  max-width:36ch;
  color:rgba(242,229,211,.82);
  font-size:clamp(1rem,1.4vw,1.2rem);
  margin-bottom:2.3rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;}

.hero__foot{
  position:relative;z-index:2;
  width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;
  padding:1.1rem 0 1.6rem;
  display:flex;align-items:center;gap:1.5rem;
  border-top:1px solid rgba(242,229,211,.16);
}
.hero__hours{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,229,211,.7);white-space:nowrap;
}
.hero__hours span{color:#7fc98b;font-size:.6rem;vertical-align:middle;}
.hero__progress{flex:1;height:1.5px;background:rgba(242,229,211,.18);overflow:hidden;}
.hero__bar{
  display:block;height:100%;background:var(--accent-400);
  transform:scaleX(0);transform-origin:left;   /* progreso con scaleX, jamás con width */
}
.hero__bar.is-running{animation:barfill 7.5s linear forwards;}
@keyframes barfill{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Entrada del hero: se dispara con .is-ready que pone el JS al cargar. */
.hero__content > *{opacity:0;transform:translateY(26px);}
.hero.is-ready .hero__content > *{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.hero.is-ready .hero__content > *:nth-child(1){transition-delay:.15s;}
.hero.is-ready .hero__content > *:nth-child(2){transition-delay:.28s;}
.hero.is-ready .hero__content > *:nth-child(3){transition-delay:.41s;}
.hero.is-ready .hero__content > *:nth-child(4){transition-delay:.54s;}

/* ============================ REVELADO AL SCROLL =========================
   El CSS solo esconde los bloques cuando el JS ha marcado <body class="reveal-ready">.
   Si el script falla o no llega a ejecutarse, la clase nunca aparece y todo el
   contenido se ve completo en vez de quedar invisible para siempre.
   ------------------------------------------------------------------------
   ⚠ TRAMPA: esta regla genérica tiene más especificidad que cualquier :hover
   puesto sobre el mismo elemento, así que anularía en silencio los transform
   de interacción. Por eso ningún elemento con [data-reveal] lleva transform
   propio en hover: el movimiento vive siempre en un hijo (.ritual__inner).
   ========================================================================= */

.reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(30px);
}
.reveal-ready [data-reveal].is-visible{
  opacity:1;
  transform:none;
  transition:opacity .85s var(--ease-out) var(--d,0ms),
             transform .85s var(--ease-out) var(--d,0ms);
}
/* Escalonado. Va por atributo y no por style="" en el HTML para poder mantener
   una CSP sin 'unsafe-inline' en style-src. */
[data-d="1"]{--d:70ms;}
[data-d="2"]{--d:140ms;}
[data-d="3"]{--d:210ms;}

/* =============================== MANIFIESTO ============================== */

.manifest{padding:clamp(5rem,12vh,9rem) 0;background:var(--cream);}
.manifest__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.manifest__figure{margin:0;position:relative;}
.manifest__figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.manifest__figure figcaption{
  margin-top:1rem;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.manifest__text .h2{margin-bottom:1.6rem;}
.facts{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2.6rem;}
.facts li{display:flex;flex-direction:column;}
.facts b{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--accent-700);}
.facts span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:.5rem;max-width:14ch;
}

@media (max-width:820px){
  .manifest__grid{grid-template-columns:1fr;}
  .manifest__figure{order:2;}
}

/* ================================ RITUALES =============================== */

.rituals{padding:clamp(5rem,12vh,9rem) 0;background:var(--white);}
.ritual-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.2rem,2.5vw,2rem);
}
.ritual{position:relative;}

/* Todo el movimiento de interacción vive en este hijo, que NO lleva
   [data-reveal] — así la regla genérica del revelado no lo pisa. */
.ritual__inner{
  height:100%;
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),
             border-color .4s var(--ease-out);
}
.ritual__media{overflow:hidden;background:var(--base-800);}
.ritual__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  transform:scale(1.001);
  transition:transform .8s var(--ease-out);
}
.ritual__body{padding:1.5rem 1.5rem 1.7rem;position:relative;}
.ritual__no{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  color:var(--accent-700);margin-bottom:.7rem;
}
.ritual__name{font-size:1.72rem;margin-bottom:.6rem;}
.ritual__desc{color:var(--ink-soft);font-size:.94rem;min-height:3.2em;}
.ritual__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--border);
}
.ritual__meta span{
  font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}
.ritual__meta b{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);}

/* El movimiento por hover solo donde hay un puntero fino de verdad. */
@media (hover:hover) and (pointer:fine){
  .ritual:hover .ritual__inner,
  .ritual:focus-within .ritual__inner{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lift);
    border-color:var(--accent-500);
  }
  .ritual:hover .ritual__media img,
  .ritual:focus-within .ritual__media img{transform:scale(1.07);}
}
/* En táctil el "hover falso" se queda pegado en algunos navegadores, así que
   el estado lo gobierna el JS con .is-active. */
.ritual.is-active .ritual__inner{border-color:var(--accent-500);box-shadow:var(--shadow-lift);}
.ritual.is-active .ritual__media img{transform:scale(1.05);}

@media (max-width:900px){ .ritual-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){
  .ritual-grid{grid-template-columns:1fr;}
  .ritual__desc{min-height:0;}
}

/* ================================ ESPACIOS ===============================
   Carrusel construido sobre el scroll nativo del navegador: el gesto táctil,
   la rueda y el teclado funcionan solos, y sin JS las cuatro fotos siguen
   siendo alcanzables deslizando. El JS solo añade flechas, miniaturas,
   contador y avance automático.
   ========================================================================= */

.spaces{padding:clamp(5rem,12vh,9rem) 0 clamp(4rem,9vh,6rem);background:var(--base-950);}

.stage{
  position:relative;
  height:clamp(500px,74vh,780px);
  overflow:hidden;
  background:var(--base-900);
}
.track{
  display:flex;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  outline-offset:-3px;
}
.track::-webkit-scrollbar{display:none;}

.slide{
  position:relative;
  flex:0 0 100%;height:100%;
  scroll-snap-align:start;
  overflow:hidden;
}
.slide__img{width:100%;height:100%;object-fit:cover;}

/* Doble degradado: el lateral hace legible el titular, el inferior protege
   los controles. Calibrado contra la foto más clara del set (la terraza al
   sol); sobre la sauna oscura sobra, pero sobrar no rompe nada. */
.slide__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(95deg,rgba(16,12,8,.9) 0%,rgba(16,12,8,.7) 34%,rgba(16,12,8,.12) 66%,rgba(16,12,8,0) 100%),
    linear-gradient(to top,rgba(16,12,8,.75) 0%,rgba(16,12,8,0) 42%);
}
.slide__content{
  position:absolute;left:0;right:0;bottom:clamp(5.5rem,14vh,7.5rem);
  width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;
  color:var(--accent-100);
  /* pointer-events:none en el envoltorio para poder seguir deslizando la foto
     con el dedo aunque el dedo caiga encima del texto. */
  pointer-events:none;
}
.slide__content > *{pointer-events:auto;}
.slide__title{font-size:clamp(2.2rem,5.6vw,4.2rem);color:var(--accent-100);margin-bottom:.8rem;}
.slide__desc{max-width:32ch;color:rgba(242,229,211,.84);}

/* ---- Controles ---- */
.stage__ui{position:absolute;inset:0;pointer-events:none;}
.stage__ui > *{pointer-events:auto;}

.arrow{
  position:absolute;top:50%;margin-top:-24px;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--accent-100);
  background:rgba(16,12,8,.4);
  border:1px solid rgba(242,229,211,.28);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .3s var(--ease-out),background-color .3s var(--ease-out),opacity .3s var(--ease-out);
}
.arrow svg{width:20px;height:20px;}
.arrow--prev{left:clamp(.75rem,2vw,1.75rem);}
.arrow--next{right:clamp(.75rem,2vw,1.75rem);}
.arrow[disabled]{opacity:.28;cursor:default;}
@media (hover:hover) and (pointer:fine){
  .arrow:not([disabled]):hover{background:rgba(185,139,87,.85);transform:scale(1.08);}
}
@media (max-width:640px){ .arrow{display:none;} }  /* en móvil manda el dedo */

.stage__bottom{
  position:absolute;left:0;right:0;bottom:clamp(1.25rem,3vh,2rem);
  width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.counter{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:rgba(242,229,211,.65);}
.counter b{color:var(--accent-400);font-weight:700;font-size:1rem;margin-right:.35rem;}

.thumbs{display:flex;gap:.6rem;}
.thumb{
  width:58px;height:58px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(242,229,211,.28);
  opacity:.5;
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),border-color .3s var(--ease-out);
}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb.is-current{opacity:1;border-color:var(--accent-400);transform:translateY(-3px);}
@media (hover:hover) and (pointer:fine){
  .thumb:hover{opacity:.9;}
}
@media (max-width:560px){ .thumb{width:44px;height:44px;} }

/* ================================ CONFIANZA ============================== */

.trust{padding:clamp(5rem,12vh,9rem) 0;background:var(--cream);}
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.stat{background:var(--cream);padding:clamp(1.6rem,3vw,2.4rem);}
.stat b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;color:var(--ink);
}
.stat b i{font-style:normal;font-size:.5em;color:var(--accent-700);}
.stat span{
  display:block;margin-top:.7rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}

@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:480px){ .stats{grid-template-columns:1fr;} }

/* ================================ RESEÑAS =================================
   Sección de comentarios propia, separada de las cifras de arriba a propósito:
   fondo oscuro con un resplandor de acento, retratos reales y estrellas
   finas en dorado — no el típico bloque blanco con estrellitas amarillas de
   plantilla. El carrusel reutiliza el patrón de Espacios (scroll nativo,
   el JS solo empuja scrollLeft, gira solo y se detiene con la interacción)
   pero con tarjetas de ancho fijo en vez de slides a pantalla completa,
   porque aquí conviven varias a la vez.
   ========================================================================= */

.reviews{
  position:relative;overflow:hidden;
  padding:clamp(5rem,12vh,8rem) 0 clamp(4.5rem,10vh,7rem);
  background:var(--base-900);
}
/* Resplandor decorativo: ancla la sección como "un momento" propio sin
   depender de una fotografía, como sí hacen Hero y Reserva. */
.reviews::before{
  content:"";position:absolute;top:-22%;right:-8%;
  width:60vw;height:60vw;max-width:820px;max-height:820px;
  background:radial-gradient(circle,rgba(185,139,87,.14),transparent 68%);
  pointer-events:none;
}

.reviews__head{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.75rem;margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.reviews__head .sec-head{margin-bottom:0;}

.reviews__score{
  display:flex;align-items:center;gap:.9rem;
  padding:1.05rem 1.5rem;
  border:1px solid rgba(217,180,131,.3);
  border-radius:999px;
  background:rgba(217,180,131,.06);
}
.reviews__stars{display:flex;gap:.2rem;color:var(--accent-400);}
.reviews__score-text{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:rgba(242,229,211,.78);white-space:nowrap;
}
.reviews__score-text b{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--accent-100);}

/* Estrella única definida como <symbol> y reutilizada con <use>: 35 iconos
   en la sección pesan lo mismo que uno solo, y sigue funcionando sin JS. */
.i-star{width:14px;height:14px;fill:currentColor;flex:0 0 auto;display:block;}

.reviews__stage{position:relative;}
.reviews__track{
  display:flex;gap:clamp(1rem,2vw,1.5rem);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.reviews__track::-webkit-scrollbar{display:none;}

.review-card{flex:0 0 clamp(280px,86vw,380px);scroll-snap-align:start;}

/* Todo el movimiento vive en .review-card__inner, que NO lleva [data-reveal]
   — misma trampa de especificidad que .ritual__inner (ver más arriba). */
.review-card__inner{
  position:relative;height:100%;
  padding:2.3rem 2rem 2rem;
  background:var(--base-950);
  border:1px solid rgba(217,180,131,.18);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .review-card:hover .review-card__inner,
  .review-card:focus-within .review-card__inner{
    transform:translateY(-6px);
    border-color:rgba(217,180,131,.5);
    box-shadow:0 30px 50px -30px rgba(0,0,0,.7);
  }
}

.review-card__mark{
  position:absolute;top:-.5rem;right:1.3rem;
  font-family:var(--serif);font-size:6rem;line-height:1;
  color:rgba(217,180,131,.12);
  pointer-events:none;
}

.review-card__stars{display:flex;gap:.2rem;margin-bottom:1.15rem;color:var(--accent-400);}

.review-card__quote{
  position:relative;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.18rem,1.6vw,1.35rem);line-height:1.42;
  color:var(--accent-100);
  min-height:6.4em;                 /* alinea la altura entre tarjetas con citas de distinto largo */
}

.review-card__author{
  display:flex;align-items:center;gap:.9rem;
  margin-top:1.7rem;padding-top:1.3rem;
  border-top:1px solid rgba(217,180,131,.16);
}
.review-card__avatar{
  width:50px;height:50px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(217,180,131,.35);
  /* Une bajo la misma temperatura de color seis fotos de archivo distintas. */
  filter:grayscale(12%) sepia(10%) contrast(1.03);
}
.review-card__id{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.review-card__id b{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--accent-100);}
.review-card__id span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(242,229,211,.68);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- Controles: reutilizan .arrow, el mismo botón que en Espacios ---- */
.reviews__nav{position:absolute;inset:0;pointer-events:none;}
.reviews__nav > *{pointer-events:auto;}
.reviews__nav .arrow{background:rgba(16,12,8,.7);}

.reviews__dots{display:flex;justify-content:center;gap:.5rem;margin-top:clamp(1.75rem,4vw,2.5rem);}
.review-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(217,180,131,.28);
  transition:transform .3s var(--ease-out),background-color .3s var(--ease-out);
}
.review-dot.is-current{background:var(--accent-400);transform:scale(1.5);}
@media (hover:hover) and (pointer:fine){
  .review-dot:hover{background:rgba(217,180,131,.55);}
}

@media (max-width:640px){ .reviews__nav{display:none;} } /* en móvil manda el dedo, igual que en Espacios */

/* ================================= RESERVA =============================== */

.booking{position:relative;overflow:hidden;background:var(--base-950);}
.booking__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.booking__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(16,12,8,.92) 0%,rgba(16,12,8,.72) 45%,rgba(16,12,8,.4) 100%),
    linear-gradient(to top,rgba(16,12,8,.7),rgba(16,12,8,.2));
}
.booking__inner{
  position:relative;
  padding:clamp(5rem,15vh,10rem) 0;
  color:var(--accent-100);
}
.booking__title{margin-bottom:1.4rem;}
.booking__sub{max-width:38ch;color:rgba(242,229,211,.8);margin-bottom:2.4rem;}
.booking__phone{
  margin-top:1.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;
  color:rgba(242,229,211,.6);
}

/* ================================= FOOTER ================================ */

.site-footer{background:var(--base-950);color:rgba(242,229,211,.75);padding:clamp(3.5rem,8vh,5.5rem) 0 2.5rem;}
.footer__grid{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(2rem,4vw,3rem);
}
.footer__brand strong{
  display:block;font-family:var(--mono);font-size:.9rem;letter-spacing:.34em;color:var(--accent-100);
}
.footer__brand em{
  display:block;font-family:var(--serif);font-style:italic;font-size:.95rem;
  color:var(--accent-400);margin-bottom:1rem;
}
.footer__brand p{max-width:28ch;font-size:.92rem;}
.footer__col dt{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-400);margin-bottom:.9rem;
}
.footer__col dd{font-size:.92rem;line-height:1.8;}
.footer__col a{text-decoration:none;border-bottom:1px solid rgba(242,229,211,.25);}
@media (hover:hover) and (pointer:fine){
  .footer__col a:hover{color:var(--accent-400);border-color:var(--accent-400);}
}
.footer__legal{
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.6rem;
  border-top:1px solid rgba(242,229,211,.12);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:rgba(242,229,211,.45);
}
@media (max-width:820px){ .footer__grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer__grid{grid-template-columns:1fr;} }

/* ============================== WHATSAPP FAB ============================= */

.wa-fab{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:130;
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.3rem;border-radius:999px;
  background:#1f8f4d;color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.6);
  opacity:0;transform:translateY(20px) scale(.94);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),background-color .3s var(--ease-out);
  pointer-events:none;
}
.wa-fab.is-in{opacity:1;transform:none;pointer-events:auto;}
.wa-fab svg{width:20px;height:20px;flex:0 0 auto;}
@media (hover:hover) and (pointer:fine){
  .wa-fab.is-in:hover{background:#25a85c;transform:translateY(-3px);}
}
@media (max-width:520px){ .wa-fab span{display:none;} .wa-fab{padding:.95rem;} }

/* ========================= PREFERS-REDUCED-MOTION ========================
   Menos y más suave, no cero: se van los desplazamientos, los zooms y el
   avance automático (lo apaga el JS); se quedan los fundidos de opacidad,
   que son los que sostienen la narrativa del hero.
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}

  .hero__img.is-active,
  .hero__img.is-leaving{animation:none;transform:none;}
  .hero__bar.is-running{animation:none;transform:scaleX(1);}

  .hero__content > *{transform:none;}
  .hero.is-ready .hero__content > *{transition:opacity .6s linear;}

  .reveal-ready [data-reveal]{transform:none;}
  .reveal-ready [data-reveal].is-visible{transition:opacity .5s linear var(--d,0ms);}

  .ritual__inner,.ritual__media img,.thumb,.arrow,.btn,.wa-fab,
  .review-card__inner,.review-dot{transition:opacity .25s linear,background-color .25s linear,border-color .25s linear!important;}
  .ritual:hover .ritual__inner,.ritual:focus-within .ritual__inner,
  .ritual.is-active .ritual__inner{transform:none;}
  .ritual:hover .ritual__media img,.ritual:focus-within .ritual__media img,
  .ritual.is-active .ritual__media img{transform:none;}
  .thumb.is-current{transform:none;}
  .review-card:hover .review-card__inner,.review-card:focus-within .review-card__inner{transform:none;}
  .review-dot.is-current{transform:none;}
  .wa-fab{transform:none;}
  .wa-fab.is-in:hover{transform:none;}

  .track{scroll-behavior:auto;}
}