/* ============================================================
   CASA DEL JAGUAR · home experience · v2 (base: sistema Na Balam)
   3 colores · Source Serif (display) + Source Sans (body)
   fondos de foto/textura · módulos 5×5
   ============================================================ */

@font-face{
  font-family:'Source Serif';
  src:url('../fonts/SourceSerifVariable-Roman.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Source Serif';
  src:url('../fonts/SourceSerifVariable-Italic.woff2') format('woff2');
  font-weight:200 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Source Sans';
  src:url('../fonts/SourceSans3-Variable.woff2') format('woff2');
  font-weight:200 900; font-style:normal; font-display:swap;
}

:root{
  /* ---- PALETA CASA DEL JAGUAR (30-jul-2026) ----
     Una sola familia cálida: del off-white al naranja quemado, con dos pasos
     intermedios. Sin beige amarillo. El café solo como tinta.               */
  --bone:#faf9f7;    /* 01 · base: off-white casi neutro (sin calidez) */
  --linen:#ede8e0;   /* 02 · primer escalón: greige neutro, sin rosa */
  --tan:#e3d8c9;     /* 03 · segundo escalón: greige claro (deja brillar al naranja) */
  --adobe:#c4b4a2;   /* 04 · adobe: el escalón que faltaba entre tan y el naranja.
                        Greige, NO terracota: se baja por luminosidad (77→70),
                        no por saturación. El primer intento (#d8bca5) tenía
                        S 40 % contra el 17-27 % de la familia y por eso saltaba
                        a la vista. El naranja queda libre para botones. */
  --clay:#b05a27;    /* 05 · naranja quemado: botones y remates    */
  --cacao:#4a2618;   /* tinta: SOLO texto y detalles finos         */
  --sand:#ede8e0;    /* alias heredado → linen */
  --amber:#c2b7a8;  /* alias heredado → tan */
  --ember:#b05a27;  /* alias heredado → clay */
  --serif:'Source Serif', Georgia, serif;
  --sans:'Source Sans', system-ui, sans-serif;
  --pad: clamp(20px, 4.5vw, 72px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
p{ text-wrap:pretty; }
h1,h2,h3{ text-wrap:balance; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
/* clip (no hidden): evita que los transforms de entrada (x:50 de .spa-row)
   ensanchen el layout viewport en móvil, sin crear scroll container
   (hidden rompería los position:sticky) */
html{ scroll-behavior:auto; overflow-x:clip; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--bone);
  color:var(--cacao);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{ background:var(--clay); color:var(--bone); }
img, video{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1; }

/* etiqueta pequeña, sans, espaciada — el contrapunto de los displays gigantes */
.meta{
  font-family:var(--sans); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; font-weight:500;
}

/* ---------- botones ---------- */
.btn{
  position:relative; display:inline-block; overflow:hidden;
  font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:15px 30px; cursor:pointer;
  /* sin borde por defecto (se deja transparente para no mover la caja);
     sólo aparece sobre fondo claro y ahí va en clay */
  border:1px solid transparent;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--clay);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .38s cubic-bezier(.76,0,.24,1);
  z-index:0;
}
.btn:hover::before{ transform:scaleY(1); }
.btn span{ position:relative; z-index:1; }
.btn-solid{ background:var(--clay); color:var(--bone); }
.btn-solid::before{ background:var(--bone); }
.btn-solid:hover{ color:var(--cacao); }
.btn-outline{ background:none; color:var(--cacao); }
.btn-outline:hover{ color:var(--bone); }
/* antes era transparente y sobre foto clara se perdía (se veía "blanco"):
   ahora es un botón sólido sand con texto cacao, siempre legible */
.btn-sand{ background:var(--sand); color:var(--cacao); border-color:var(--sand); text-shadow:none; }
.btn-sand::before{ background:var(--cacao); }
.btn-sand:hover{ color:var(--sand); }

.link-arrow{
  display:inline-block; font-family:var(--serif); font-style:italic; font-size:15px;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom / 0% 1px;
  transition:background-size .4s cubic-bezier(.76,0,.24,1);
}
.link-arrow:hover{ background-size:100% 1px; }

.chip{
  display:inline-block; background:var(--bone); color:var(--cacao);
  font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:12px 20px; border:none;
  transition:background .3s, color .3s;
}
.chip:hover{ background:var(--clay); color:var(--bone); }

/* ---------- burbujas de contacto (whatsapp · instagram) ---------- */
.bubbles{
  position:fixed; right:clamp(16px,2vw,28px); bottom:clamp(16px,2.4vh,28px);
  display:flex; flex-direction:column; gap:10px; z-index:95;
}
.bubble{
  width:48px; height:48px; border-radius:50%;
  background:var(--clay); /* naranja de la casa */
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(38,18,10,.28);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.bubble svg{ width:22px; height:22px; fill:var(--bone); }
.bubble:hover{ transform:translateY(-3px); background:var(--cacao); }
@media (max-width:700px){ .bubble{ width:44px; height:44px; } }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--bone);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
}
.loader-column{ display:flex; flex-direction:column; gap:6px; }
.loader-column .mod-cell{ width:24px; height:24px; }
.loader-word{ font-family:var(--serif); font-size:26px; }
.loader-word b{ font-weight:700; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  color:var(--bone);
  transform:translateY(-110%);
}
.nav.is-in{ transform:none; transition:transform .5s cubic-bezier(.22,1,.36,1); }
/* El header SIEMPRE es transparente: lo único que cambia es el color.
   Sobre foto o video → el más claro (bone). Sobre fondo claro → naranja. */
.nav.is-solid{ background:none; color:var(--clay); border-bottom:none; }
.nav-logo{ font-family:var(--serif); font-size:22px; }
.nav-logo b{ font-weight:700; }
.nav-links{ display:flex; gap:clamp(14px,2.2vw,34px); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.nav-links a{
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom / 0% 1px;
  transition:background-size .35s cubic-bezier(.76,0,.24,1);
  padding-bottom:3px;
}
.nav-links a:hover{ background-size:100% 1px; }
/* scrollspy: el cuadrito (como el de wellness) marca la sección activa */
.nav-links a{ position:relative; }
.nav-links a::before{
  content:""; position:absolute; right:-14px; top:50%;
  width:7px; height:7px; background:currentColor;
  transform:translateY(-50%) scale(0); transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-links a.is-here::before{ transform:translateY(-50%) scale(1); }
/* navegación secundaria / utilidad */
.nav-util{ font-size:10.5px; opacity:.85; }
.nav-util:hover{ opacity:1; }
.nav-util.is-here{ opacity:1; border-bottom:1px solid currentColor; padding-bottom:2px; }
@media (max-width:1180px){ .nav-util{ display:none; } }
.nav-right{ display:flex; align-items:center; gap:20px; }
.nav .btn{ padding:11px 20px; font-size:12px; }
.nav .nav-book{ border:none; }
/* sobre foto: botón en el más claro, texto café */
.nav:not(.is-solid) .nav-book{ background:var(--bone); color:var(--cacao); }
.nav:not(.is-solid) .nav-book::before{ background:var(--clay); }
.nav:not(.is-solid) .nav-book:hover{ color:var(--bone); }
/* sobre fondo claro: botón naranja sólido */
.nav.is-solid .nav-book{ background:var(--clay); color:var(--bone); }
.nav.is-solid .nav-book::before{ background:var(--cacao); }
.nav.is-solid .nav-book:hover{ color:var(--bone); }
.lang-toggle{
  font-family:var(--sans); font-size:12px; letter-spacing:.1em; background:none; border:none; cursor:pointer;
  color:inherit; display:inline-flex; align-items:center; gap:8px; text-transform:uppercase;
}
.lang-toggle .l-sep{ width:6px; height:6px; background:currentColor; display:inline-block; }
.lang-toggle .l-es, .lang-toggle .l-en{ opacity:.45; }
body[data-lang="es"] .lang-toggle .l-es{ opacity:1; font-weight:700; }
body[data-lang="en"] .lang-toggle .l-en{ opacity:1; font-weight:700; }
.nav-burger{ display:none; }
.nav-burger span{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
/* extras del menú móvil: ocultos en desktop (viven dentro de .nav-links) */
.nav-m, .nav-m-lang{ display:none; }

/* ---------- canvas de transición ---------- */
.wipe-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9;
}

/* ---------- S1 · umbral ---------- */
.umbral{ position:relative; }
.umbral-pin{ position:relative; height:100vh; overflow:hidden; background:var(--bone); }
.umbral-media{ position:absolute; inset:0; } /* Casa del Jaguar: SIN voltear (Na Balam sí volteaba en Y) */
.umbral-media img{ transform-origin:50% 58%; }
/* el hero ahora es video (el mismo de "una casa construida a mano") */
.umbral-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:50% 58%; }
/* ---- logo animado del hero (full bleed, encima del video) ----
   El lienzo del SVG es mucho más ancho que el logo (el jaguar entra corriendo
   desde fuera de cuadro), así que el contenedor se hace MÁS ANCHO que la
   pantalla a propósito: lo que sobra se recorta contra .umbral-pin y la
   carrera empieza fuera del encuadre. El logo acaba midiendo ≈21% del ancho
   del contenedor — de ahí el factor 4.7. */
.umbral-logo{ position:absolute; inset:0; z-index:3; pointer-events:none; }
/* centrado a mano (no con grid: un hijo más ancho que el contenedor se alinea
   al inicio en vez de centrarse). top 43% lo levanta del bloque de abajo. */
/* El viewBox se ensanchó a 9538 (el logo ocupa ~12% de él) para que el
   contenedor pueda medir 100vw y el jaguar entre desde FUERA de la pantalla
   con el logo chico. Ancho del contenedor = escala: logo ≈ 12.2% de él. */
.cdj-motion{
  position:absolute; left:50%; top:43%; transform:translate(-50%,-50%);
  width:100vw; color:var(--bone);
}
.cdj-motion svg{ width:100%; height:auto; display:block; }
@media (max-width:760px){
  .cdj-motion{ top:40%; width:240vw; }
}
.umbral-content{
  position:absolute; inset:0; z-index:4;
  color:var(--bone); text-align:center;
}
/* eyebrow integrado al bloque inferior (más chico que el menú, para que no
   compita con él): vive abajo, entre la etiqueta y el indicador de scroll */
.umbral-eyebrow{
  position:absolute; top:auto; bottom:10vh; left:0; right:0;
  text-align:center; margin:0;
  font-size:9.5px; letter-spacing:.3em; opacity:.8;
}
@media (max-width:900px){ .umbral-eyebrow{ bottom:12vh; font-size:9px; } }
.umbral-word{
  /* el protagonista del hero es el logo animado: el wordmark se escribe al
     final JUSTO DEBAJO de él (antes vivía al pie del hero).
     Geometría: el centro del logo está en top 43% del pin y su media altura
     mide 5.77vw (el glifo ocupa 1100/2900 del viewBox y el contenedor mide
     100vw) → 43% + 5.8vw es su base; los 2.4vw restantes son el aire. */
  position:absolute; left:0; right:0; margin:0;
  top:calc(43% + 8.2vw);
  font-size:clamp(19px, 2.1vw, 30px);
  letter-spacing:.055em; font-weight:300; line-height:1;
}
/* en móvil el contenedor del logo mide 240vw y su centro está en top 40%,
   así que la media altura sube a 13.84vw */
@media (max-width:760px){
  .umbral-word{ top:calc(40% + 19vw); }
}
.umbral-word b{ font-weight:700; }
.umbral-tag{ margin-top:2.6vh; font-size:14px; }
.umbral-tag span{
  background:var(--cacao); color:var(--bone); padding:10px 20px; display:inline-block;
  font-family:var(--serif); font-style:italic; font-size:16px; letter-spacing:.02em;
}
/* indicador de scroll arriba (donde estaba "isla mujeres"), misma animación */
.umbral-scroll{
  position:absolute; top:clamp(78px,10vh,120px); bottom:auto; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  color:var(--bone);
}
.umbral-scroll .meta{ font-size:11px; opacity:.95; }
/* canvas 60×300 (5 módulos): se muestra a proporción 1:5 para que los módulos
   queden CUADRADOS (antes 12×92 los apachurraba verticalmente) */
.scroll-column{ width:14px; height:70px; animation:nbColPulse 2.4s ease-in-out infinite; }
@keyframes nbColPulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

/* ---------- S2 · tesis ---------- */
.tesis{ position:relative; background:var(--cacao); }
.tesis-pin{ position:relative; height:100vh; overflow:hidden; }
.tesis-bg{ position:absolute; inset:0; }
/* carrusel de texturas atenuadas sobre tinta (legibilidad sin velos) */
.tesis-car{ position:absolute; inset:0; }
/* crossfade entre texturas: ahora la opacidad la maneja el scroll (main.js) de
   forma continua, sin transición CSS fija que se veía cortada con el scrub */
.tesis-car img{ position:absolute; inset:0; opacity:0; will-change:opacity; }
.tesis-car img.is-show{ opacity:.30; } /* respaldo para reduced-motion */
/* patrón (glifo) centrado; algo más compacto para dejar aire a la frase debajo */
.historia-glyph{ display:flex; flex-direction:column; align-items:center; gap:14px;
  will-change:transform; }
.historia-glyph canvas{ width:clamp(150px,19vw,240px); height:auto; }
/* "desde" arriba y "1988" abajo del patrón */
.glyph-word{ color:var(--bone); opacity:.85; }
/* la frase va CENTRADA y DEBAJO del patrón (antes flanqueaba el glifo a los lados) */
.frases{ position:absolute; inset:0; }
.frase{
  position:absolute; top:74%; left:var(--pad); right:var(--pad);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; pointer-events:none;
  font-family:var(--serif); font-size:clamp(19px,2.1vw,30px); font-weight:350; line-height:1.4;
}
.frase .fr{ width:auto; max-width:min(720px,88vw); text-align:center; }
.frase strong{ font-weight:640; }
@media (max-width:900px){
  .frase{ top:auto; bottom:8vh; }
}
.tesis-inner{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad); color:var(--bone);
}
.tesis-pair{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(20px,4vw,60px);
}
.tesis-word{ font-size:clamp(56px,9vw,150px); font-weight:250; letter-spacing:-.01em; }
.tesis-word-row.right{ text-align:right; }
.tesis-def{ margin-top:16px; }
.tesis-glyph canvas{ width:clamp(120px,15vw,220px); height:auto; }
.tesis-line{
  max-width:820px; margin:7vh auto 0; text-align:center;
  font-family:var(--serif);
  font-size:clamp(19px,2.3vw,30px); line-height:1.45; font-weight:350;
}
.tesis-selva{ position:absolute; inset:0; z-index:4; visibility:hidden; }
.tesis-video{ position:absolute; inset:0; }
.tesis-claim{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:var(--bone); text-align:center;
}
/* el claim del cierre de la historia usa el MISMO tag que bespoke wellness:
   caja sólida cacao, chica, que se autogestiona con initVtags */
.claim-vtag{ max-width:min(560px, calc(100% - var(--pad) * 2)); margin-top:clamp(90px,15vh,170px); }

/* ---------- cinturones ---------- */
.belt{ width:100%; overflow:hidden; line-height:0; position:relative; z-index:3; font-size:0; }
.belt .belt-row{ background-repeat:repeat-x; }
/* borde de entrada a OCEANVS: módulos de papel que se disuelven sobre el
   propio video de dining (sin fondo sólido, como el cinturón de "respira") */
.oceanvs-seam{ position:absolute; top:0; left:0; z-index:3; }

/* ---------- secuencias inmersivas ---------- */
.imm{ position:relative; background:var(--bone); }
.imm-pin{ position:relative; height:100vh; overflow:hidden; }
.imm-slide{ position:absolute; inset:0; display:none; }
.imm-slide:first-child{ display:block; }
.imm-media{ position:absolute; inset:0; }
.imm-top{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; justify-content:space-between; align-items:center;
  padding:84px var(--pad) 0;
  color:var(--bone);
}
.imm-slide.is-ink .imm-top{ color:var(--cacao); }
.imm-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:0 var(--pad) clamp(28px,5vh,60px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,60px);
  color:var(--bone);
}
.imm-slide.is-ink .imm-foot{ color:var(--cacao); }
/* habitaciones: el pie va en papel (piso oscuro), la cabecera en tinta (techo claro) */
.rooms .imm-slide .imm-foot{ color:var(--bone); }
.imm-word{
  font-size:clamp(64px,12.5vw,200px); font-weight:300; letter-spacing:-.01em; line-height:.86;
  white-space:nowrap;
}
.imm-word.is-long{ font-size:clamp(48px,8.5vw,140px); white-space:normal; line-height:.92; }
.imm-side{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; max-width:340px; padding-bottom:10px; }
.imm-line{ font-size:15.5px; line-height:1.5; }
.imm-slide.is-ink .chip{ background:var(--clay); color:var(--bone); }
.imm-slide.is-ink .chip:hover{ background:var(--bone); color:var(--cacao); }
.imm-strip{
  position:absolute; top:50%; right:0; z-index:3;
  display:flex; gap:18px; transform:translateY(-72%);
}
.imm-strip img{
  width:clamp(140px,16vw,240px); height:clamp(100px,11.5vw,170px);
  border:5px solid var(--bone); flex:none;
}
.imm-center{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--bone); text-align:center; padding:0 var(--pad);
}
.imm-center.low{ justify-content:flex-end; padding-bottom:9vh; }
.imm-title{
  font-size:clamp(58px,11vw,190px); font-weight:270; line-height:.9; letter-spacing:-.008em;
}
.imm-sub{ margin-top:3vh; font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.7vw,23px); }
.imm-hint{ margin-top:7vh; font-size:11px; opacity:.85; }
.imm-line.center{ text-align:center; max-width:420px; margin:26px auto 0; }
/* OCEANVS: dining chico + tag arriba-izq, eyebrow + logotipo, CTA doble */
.imm-toplead{ display:flex; align-items:center; gap:14px; }
.imm-tag{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; border:1px solid currentColor; padding:5px 11px; white-space:nowrap; }
.imm-lead{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.imm-eyebrow{ opacity:.92; }
.imm-side{ max-width:400px; }
.imm-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
/* OCEANVS · lockup tipográfico: frase en Source Serif que "entra" en el wordmark.
   El wordmark ya no es un logotipo gigante suelto, sino el cierre de la frase. */
.oce-lockup{ display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.4vh,18px); }
.oce-lead{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(22px,3.2vw,46px); line-height:1; letter-spacing:-.015em;
  color:var(--bone); opacity:.94;
}
.oce-mark{ width:clamp(210px,25vw,380px); height:auto; display:block;
  filter:drop-shadow(0 2px 20px rgba(0,0,0,.4)); }
/* párrafo: más corto, aireado, alineado al centro */
.oceanvs-center .oceanvs-info{ max-width:clamp(340px,52ch,600px); margin:clamp(20px,3.4vh,38px) auto 0;
  font-size:clamp(14px,1.15vw,17px); line-height:1.68; opacity:.92; font-weight:350; }
/* CTA: primario relleno + secundario de texto (jerarquía clara) */
.oceanvs-center .oce-cta{ justify-content:center; align-items:center;
  margin-top:clamp(26px,3.6vh,42px); gap:clamp(20px,2.6vw,36px); }
.oce-btn{ border-color:var(--bone); background:var(--bone); color:var(--cacao); padding:16px 40px; }
.oce-btn::before{ background:var(--cacao); }
.oce-btn:hover{ color:var(--bone); }
.oce-menu{ position:relative; font-family:var(--serif); font-style:italic;
  font-size:clamp(15px,1.4vw,18px); color:var(--bone); padding-bottom:3px;
  border:none; border-bottom:1px solid rgba(255,236,190,.55); background:none; cursor:pointer;
  transition:border-color .3s ease; }
.oce-menu:hover{ border-bottom-color:var(--bone); }
.oce-menu::after{ content:" →"; font-style:normal; }
/* segundo enlace de la misma familia: lleva a la página de gastronomía */
.oce-full{ display:inline-block; text-decoration:none; }
.mesa-cta{ display:flex; justify-content:center; padding:clamp(22px,3.4vh,44px) var(--pad) 0; }

/* respiración */
.breath-row{ display:flex; align-items:center; gap:clamp(18px,4vw,70px); }
.breath-row canvas{ width:clamp(150px,20vw,270px); height:auto; }

/* ---------- wellness (bandas de scroll libre) ---------- */
.wellness{ background:var(--bone); color:var(--cacao); }
.w-hero, .w-ritual, .w-zazil{ position:relative; height:100vh; height:100dvh; overflow:hidden; }
/* w-hold: banda sticky + 55vh de recorrido para el fade del título.
   Sustituye a los pins de ScrollTrigger, cuyos spacers dentro de .wellness
   descuadraban (990px) todos los triggers de más abajo. */
.w-hold{ position:relative; height:155vh; }
.w-hold > .w-hero, .w-hold > .w-zazil{ position:sticky; top:0; }
.no-anim .w-hold{ height:auto; }
.no-anim .w-hold > .w-hero, .no-anim .w-hold > .w-zazil{ position:relative; }
.w-media{ position:absolute; inset:0; }
.w-top{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; justify-content:space-between; align-items:center;
  padding:84px var(--pad) 0;
}
.w-center{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--pad);
}
.w-center.low{ justify-content:flex-end; padding-bottom:9vh; }
.w-title{ font-size:clamp(58px,11vw,190px); font-weight:270; line-height:1.06; letter-spacing:-.008em; }
.w-sub{ margin-top:3vh; font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.7vw,23px); }
.w-line{ font-size:15.5px; line-height:1.5; max-width:420px; margin:26px auto 0; text-align:center; }
.w-foot{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:0 var(--pad) clamp(28px,5vh,60px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,60px);
}
.w-word{ font-size:clamp(64px,12.5vw,200px); font-weight:300; letter-spacing:-.01em; line-height:.86; white-space:nowrap; }
.w-side{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; max-width:340px; padding-bottom:10px; }
.w-sideline{ font-size:15.5px; line-height:1.5; }

/* ---------- menú del spa ---------- */
.spamenu{ background:var(--bone); color:var(--cacao); padding:calc(var(--pad) * 1.1) var(--pad) calc(var(--pad) * 1.3); }
.spamenu-head{ margin-bottom:calc(var(--pad) * .5); }
.spamenu-title{
  font-size:clamp(28px,4.4vw,68px); font-weight:300; letter-spacing:-.008em; line-height:.98; margin-top:12px;
}
.spamenu-list{ list-style:none; border-top:1px solid var(--clay); }
.spa-row{
  display:grid; grid-template-columns:auto 1fr 1.5fr auto;
  gap:clamp(14px,2.6vw,44px); align-items:baseline;
  padding:clamp(16px,2.4vw,28px) 0; border-bottom:1px solid var(--clay);
}
.spa-row h3{ font-size:clamp(22px,2.6vw,40px); font-weight:350; letter-spacing:-.005em; }
.spa-row p{ font-size:clamp(13.5px,1.1vw,15.5px); line-height:1.5; }
.spa-row .link-arrow{ font-size:13.5px; justify-self:end; }
@media (max-width:900px){
  /* móvil: número + título en la primera línea; descripción y link
     alineados debajo del título (antes el link caía suelto a la izquierda) */
  .spa-row{ grid-template-columns:auto 1fr; row-gap:8px; }
  .spa-row p{ grid-column:2; margin:0; }
  .spa-row .link-arrow{ grid-column:2; justify-self:start; }
}

/* variante clara del menú (restaurantes) */
.spamenu.on-paper{ background:var(--bone); color:var(--cacao); }
.spamenu.on-paper .spamenu-list{ border-top-color:var(--cacao); }
.spamenu.on-paper .spa-row{ border-bottom-color:var(--cacao); }

/* menú del ritual SOBRE el video del spa (una sola pantalla) */
.spamenu-onvideo{
  position:relative; overflow:hidden; padding:0; background:var(--bone);
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
}
.spamenu-media{ position:absolute; inset:0; z-index:0; }
.spamenu-media video{ width:100%; height:100%; object-fit:cover; }
/* sin velo: el video se ve como es y el texto vive en una caja sólida */
.spamenu-inner{
  position:relative; z-index:2; width:100%;
  padding:calc(var(--pad) * 1.1) var(--pad) calc(var(--pad) * 1.3);
}
/* head del ritual con CTA a la carta (solo el del ritual: .spamenu-headrow,
   NO tocar .spamenu-head genérico — lo usa también #mesa) */
.spamenu-headrow{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(16px,3vw,40px); flex-wrap:wrap; }
/* CTA beige SÓLIDO para que resalte sobre el video del spa (no outline) */
.spamenu-cta{ flex:none; margin-bottom:6px; background:var(--bone); color:var(--cacao); border-color:var(--bone); }
.spamenu-cta::before{ background:var(--clay); }
.spamenu-cta:hover{ color:var(--bone); }

/* ---------- CARTA DEL SPA · overlay a pantalla completa ----------
   fixed → independiente del flujo: NO altera la geometría sticky/cover del
   dcover ni los starts de ScrollTrigger. Scroll propio (data-lenis-prevent). */
.carta{
  position:fixed; inset:0; z-index:120; background:var(--bone); color:var(--cacao);
  visibility:hidden; opacity:0;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.carta.is-open{ visibility:visible; opacity:1; transition:opacity .4s ease; }
.carta-scroll{
  position:absolute; inset:0; overflow-y:auto;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:clamp(14px,2.4vw,34px);
}
.carta-sheet{
  background:var(--bone); color:var(--cacao);
  max-width:1180px; margin:0 auto;
  padding:clamp(30px,5vh,64px) clamp(22px,4.5vw,72px) clamp(38px,6vh,72px);
  transform:translateY(26px);
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.carta.is-open .carta-sheet{ transform:none; }
.carta-close{
  position:fixed; top:clamp(14px,2.4vw,34px); right:clamp(14px,2.4vw,34px); z-index:2;
  width:52px; height:52px; border:none; cursor:pointer;
  background:var(--bone); color:var(--cacao);
  font-family:var(--serif); font-weight:300; font-size:30px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1), background .3s, color .3s;
}
.carta-close:hover{ transform:rotate(90deg); background:var(--clay); }
.carta-head{ margin-bottom:clamp(26px,4vh,46px); }
.carta-mods{ display:flex; gap:7px; margin-bottom:22px; }
.carta-mods span{ width:15px; height:15px; }
.carta-title{ font-size:clamp(38px,6vw,88px); font-weight:300; letter-spacing:-.008em; line-height:.98; margin:10px 0 14px; }
.carta-note{ font-family:var(--serif); font-style:italic; font-size:clamp(14.5px,1.3vw,17px); }
/* tabla de masajes: nombre + 4 duraciones */
.carta-grid{
  display:grid; grid-template-columns:minmax(0,1fr) repeat(4,minmax(56px,108px));
  gap:0 clamp(8px,1.8vw,30px); align-items:baseline;
  padding:clamp(10px,1.4vh,14px) 0; border-bottom:1px solid var(--clay);
}
.carta-grid-head{ border-bottom:2px solid var(--cacao); padding-top:0; }
.carta-grid-head h3{ font-size:clamp(24px,2.8vw,42px); font-weight:350; }
.carta-grid-head .meta{ font-size:10.5px; text-align:right; }
.carta-name{ font-family:var(--serif); font-size:clamp(16.5px,1.7vw,24px); font-weight:380; }
.carta-p{ font-size:clamp(12.5px,1.15vw,15.5px); text-align:right; font-variant-numeric:tabular-nums; }
.carta-dim{ opacity:.32; }
/* bloques chicos: faciales · kid spa · express */
.carta-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3.4vw,54px); margin-top:clamp(28px,4.5vh,52px); }
.carta-mini-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-bottom:2px solid var(--cacao); padding-bottom:10px; }
.carta-mini-head h3{ font-size:clamp(20px,2vw,29px); font-weight:350; }
.carta-mini-head .meta{ font-size:10.5px; }
.carta-mini-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:clamp(9px,1.2vh,12px) 0; border-bottom:1px solid var(--clay); }
.carta-mini-row .carta-name{ font-size:clamp(15.5px,1.4vw,20px); }
.carta-aroma{ margin-top:clamp(24px,3.6vh,40px); }
.carta-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(18px,3vw,44px); flex-wrap:wrap;
  margin-top:clamp(28px,4.5vh,54px); border-top:2px solid var(--cacao); padding-top:clamp(18px,2.6vh,28px);
}
.carta-cta{ display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap; }
body.carta-open{ overflow:hidden; }
@media (max-width:760px){
  .carta-grid{ grid-template-columns:minmax(0,1fr) repeat(4,minmax(42px,52px)); }
  .carta-cols{ grid-template-columns:1fr; }
  .carta-foot{ flex-direction:column; align-items:flex-start; }
  .carta-close{ width:44px; height:44px; }
}

/* ---------- CARTA OCEANVS · overlay navy (mismo patrón que la carta del ritual,
   recoloreado a azul marino + tipografía blanca) ---------- */
.ocm{
  --navy:#0e2740; --ocmwhite:#f6f7f4; --ocmdim:#9fb4c8; --ocmline:#34506b;
  position:fixed; inset:0; z-index:121; background:var(--navy);
  visibility:hidden; opacity:0; transition:opacity .4s ease, visibility 0s linear .4s;
}
.ocm.is-open{ visibility:visible; opacity:1; transition:opacity .4s ease; }
.ocm-scroll{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:clamp(14px,2.4vw,34px); }
.ocm-sheet{ max-width:1240px; margin:0 auto; color:var(--ocmwhite);
  padding:clamp(30px,5vh,60px) clamp(20px,4vw,60px) clamp(38px,6vh,70px);
  transform:translateY(26px); transition:transform .55s cubic-bezier(.22,1,.36,1); }
.ocm.is-open .ocm-sheet{ transform:none; }
.ocm-close{ position:fixed; top:clamp(14px,2.4vw,34px); right:clamp(14px,2.4vw,34px); z-index:2;
  width:52px; height:52px; border:none; cursor:pointer; background:var(--ocmwhite); color:var(--navy);
  font-family:var(--serif); font-weight:300; font-size:30px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1), background .3s, color .3s; }
.ocm-close:hover{ transform:rotate(90deg); background:var(--ocmdim); }
/* header */
.ocm-head{ text-align:center; border-bottom:2px solid var(--ocmline);
  padding-bottom:clamp(22px,3.4vh,34px); margin-bottom:clamp(26px,4vh,44px); }
.ocm-mods{ display:flex; gap:7px; justify-content:center; margin-bottom:20px; }
.ocm-mods span{ width:15px; height:15px; }
.ocm-logo{ width:min(340px,68vw); height:auto; margin:0 auto 16px; display:block; }
.ocm-eyebrow{ color:var(--ocmdim); }
/* columnas: se reparten por JS (izq→der, sobrante al fondo de la última).
   Tipografía sobre rejilla base de 8px (line-heights y márgenes múltiplos de 8). */
.ocm-cols{ display:flex; align-items:flex-start; gap:clamp(26px,3vw,48px); }
.ocm-col{ flex:1 1 0; min-width:0; }
.ocm-sec{ margin-bottom:32px; }
.ocm-sectitle{ font-family:var(--serif); font-weight:350; font-size:26px; line-height:32px;
  letter-spacing:-.01em; border-bottom:1.5px solid var(--ocmline); padding-bottom:6px; margin-bottom:16px; }
.ocm-secnote{ font-family:var(--serif); font-style:italic; font-size:13px; line-height:16px;
  color:var(--ocmdim); margin-bottom:16px; }
.ocm-sub{ margin:0 0 8px; }
.ocm-subtitle{ font-family:var(--sans); font-size:12px; line-height:16px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:700; color:var(--ocmdim); margin-bottom:8px; }
.ocm-item{ margin-bottom:16px; }
.ocm-line{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ocm-name{ font-family:var(--serif); font-size:18px; line-height:24px; font-weight:420; }
.ocm-price{ font-size:16px; line-height:24px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ocm-desc{ font-size:13px; line-height:16px; color:var(--ocmdim); margin-top:0; }
.ocm-tag{ display:inline-block; font-size:9.5px; line-height:16px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--navy); background:var(--ocmwhite); padding:0 7px; }
/* footer */
.ocm-foot{ border-top:2px solid var(--ocmline); margin-top:clamp(24px,3.6vh,40px);
  padding-top:clamp(18px,2.6vh,26px); display:flex; justify-content:space-between;
  align-items:flex-end; gap:clamp(18px,3vw,40px); flex-wrap:wrap; }
.ocm-note{ font-family:var(--serif); font-style:italic; font-size:13.5px; color:var(--ocmdim); max-width:60%; }
.ocm-cta{ display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); flex-wrap:wrap; }
.ocm-dl{ border-color:var(--ocmwhite); background:var(--ocmwhite); color:var(--navy); padding:15px 30px; }
.ocm-dl::before{ background:var(--navy); }
.ocm-dl:hover{ color:var(--ocmwhite); }
.ocm-book{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--ocmwhite);
  border-bottom:1px solid rgba(246,247,244,.5); padding-bottom:3px; transition:border-color .3s; }
.ocm-book::after{ content:" →"; font-style:normal; }
.ocm-book:hover{ border-bottom-color:var(--ocmwhite); }
body.ocm-open{ overflow:hidden; }
@media (max-width:640px){
  .ocm-note{ max-width:100%; }
  .ocm-foot{ flex-direction:column; align-items:flex-start; }
  .ocm-close{ width:44px; height:44px; }
}

/* carrusel del ritual */
.w-car img{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.w-car img.is-show{ opacity:1; }

/* carrusel de comida en el slide dining */
.imm-car img{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.imm-car img.is-show{ opacity:1; }
/* overlay negro 15% para que el título se lea */
.imm-car::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.15); pointer-events:none; }
/* ---------- COVER: menú del ritual → dining (patrón "respira") ----------
   El menú del ritual (.dcover-under) queda sticky/estático; el video de OCEANVS
   (.dcover-over > .dcover-panel) es contenido en flujo normal que le pasa por
   ENCIMA dentro de la MISMA sección. Sin pin y sin margin-top:-100vh entre
   secciones = sin salto "de página" a media transición. La única -100vh es la de
   #entertainment (beige) subiendo sobre el cierre, igual que antes. */
.dcover{ position:relative; background:var(--bone); z-index:8; }
/* capa cubierta: el menú queda quieto mientras dining sube encima */
.dcover-under{ position:sticky; top:0; height:100vh; overflow:hidden; z-index:1; }
.dcover-under .spamenu-onvideo{ height:100%; min-height:0; }
/* velo verde que ahonda conforme dining sube (fade a verde oscuro) */
.dcover-veil{ position:absolute; inset:0; z-index:6; background:var(--bone); opacity:0; pointer-events:none; }
/* capa que cubre: recorrido de cover + hold de OCEANVS + el fundido, y al
   final los 100vh que tarda #entertainment en subir. 240vh (antes 340): con
   340 sobraban ~100vh de beige cerrado antes de que entraran los clubes. */
.dcover-over{ position:relative; z-index:2; height:240vh; }
.dcover-panel{ position:sticky; top:0; height:100vh; overflow:hidden; background:var(--bone); }
.dcover-panel .imm-media{ position:absolute; inset:0; }
.dcover-panel .imm-media video{ width:100%; height:100%; object-fit:cover; }
/* la info de OCEANVS aparece cuando el menú ya quedó cubierto (JS scrub) */
.dcover-over .imm-top,
.dcover-info{ opacity:0; }
.dcover-wipe{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:9; }
/* SALIDA: la textura cierra a beige y #entertainment (margin-top:-100vh, z9) sube
   y lo cubre sin costura. */
#mesa{ position:relative; z-index:9; }
.playa{ z-index:9; }
.no-anim .enter{ margin-top:0; }
/* degradación sin animación: todo apilado en flujo normal, info visible */
.no-anim .dcover-under{ position:relative; height:auto; }
.no-anim .dcover-over{ height:auto; }
.no-anim .dcover-panel{ position:relative; height:100vh; }
.no-anim .dcover-over .imm-top,
.no-anim .dcover-info{ opacity:1; }
.no-anim .dcover-veil{ display:none; }

/* ---------- qué hacer ---------- */
.todo{
  background:var(--bone); color:var(--cacao);
  padding:0 var(--pad) calc(var(--pad) * 1.2);
  margin-top:-72vh; /* ocupa el paper sobrante de la plasta de playa */
  position:relative; z-index:10;
}
.todo-head{ margin-bottom:calc(var(--pad) * .5); }
.todo-title{ font-size:clamp(28px,4.4vw,68px); font-weight:300; letter-spacing:-.008em; line-height:.98; margin-top:12px; }
.todo-grid{ display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(20px,3.4vw,64px); align-items:start; }
.todo-media{ position:sticky; top:12vh; aspect-ratio:4/4.6; overflow:hidden; }
.todo-media img, .todo-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.todo-media img{ opacity:0; transition:opacity 1.1s ease; }
.todo-media img.is-show{ opacity:1; }
/* acordeón de qué hacer: mismas tarjetas del spa, sobre fondo claro */
.todo .acc-card{ background:var(--bone); }
.todo-list{ list-style:none; border-top:1px solid var(--cacao); }
.todo .spa-row{ grid-template-columns:auto 1fr 1.4fr; border-bottom-color:var(--cacao); }
.todo-cta{ text-align:center; margin-top:calc(var(--pad) * .7); }
@media (max-width:900px){
  .todo-grid{ grid-template-columns:1fr; }
  .todo-media{ position:relative; top:0; aspect-ratio:16/10; }
}

/* paquetes de eventos */
.events-packs{ list-style:none; margin:calc(var(--pad) * .3) var(--pad) 0; border-top:1px solid var(--bone); position:relative; z-index:2; }
.events-packs .spa-row{ border-bottom-color:var(--bone); }
.events .events-copy{ padding-bottom:0; }

/* miembro de balam ek — logo pequeño y completo, a la derecha del footer-base */
.f-member-inline{ display:flex; align-items:center; gap:10px; }
.f-member-inline .meta{ color:var(--clay); font-size:10px; }
.f-logo{ height:15px; width:auto; display:block; }


/* ---------- pilares: acordeón de tarjetas ---------- */
.pilares{ padding:calc(var(--pad) * 1.2) var(--pad) calc(var(--pad) * 1.3); background:var(--bone); }
.pilares-head{ margin-bottom:calc(var(--pad) * .3); }
.pilares-title{
  font-size:clamp(25px,3.3vw,50px); font-weight:300; letter-spacing:-.006em; line-height:1; margin-top:8px;
}
/* el índice de imágenes crece hacia arriba: el head cede alto, el acc lo toma */
.acc{ display:flex; gap:0; height:clamp(400px,69vh,682px); }
.acc-card{
  position:relative; flex:1; overflow:hidden; cursor:pointer;
  border:none; padding:0; background:var(--bone); text-align:left;
  transition:flex .65s cubic-bezier(.65,0,.25,1);
  min-width:0;
}
.acc-card.is-open{ flex:6; }
.acc-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.acc-card:hover img{ transform:scale(1.04); }
.acc-tab{
  position:absolute; left:0; right:auto; bottom:0; z-index:2;
  transform:none;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  width:max-content; max-width:100%;
  padding:14px 10px 16px;
  background:#fff; color:var(--cacao);
  transition:opacity .3s;
}
.acc-cell{ width:10px; height:10px; background:var(--clay); display:block; }
.acc-num{ font-family:var(--serif); font-style:italic; font-size:15px; }
.acc-min{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; }
.acc-card.is-open .acc-tab{ opacity:0; pointer-events:none; }
.acc-info{
  position:absolute; left:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:6px;
  background:var(--bone); color:var(--cacao);
  padding:18px 26px 20px; max-width:min(420px,88%);
  opacity:0; transform:translateY(14px);
  transition:opacity .4s .25s, transform .5s .25s cubic-bezier(.22,1,.36,1);
}
.acc-card.is-open .acc-info{ opacity:1; transform:none; }
.acc-info strong{ font-family:var(--serif); font-weight:450; font-size:clamp(22px,2.2vw,34px); line-height:1; }
.acc-info em{ font-style:normal; font-size:14px; }
.pilares-proof{
  margin-top:calc(var(--pad) * .6);
  font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.8vw,24px);
  color:var(--cacao); text-align:center;
}

/* ---------- instagram ---------- */
.insta{ background:var(--bone); padding:calc(var(--pad) * 1.2) var(--pad) calc(var(--pad) * 1.5); }
/* handle alineado a la izquierda del feed y más pequeño */
.insta-head{
  display:flex; flex-direction:column; gap:12px;
  max-width:min(1040px,90vw); margin:0 auto calc(var(--pad) * .45);
}
.insta-handle{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(22px,3.2vw,48px); letter-spacing:-.01em; line-height:.95;
  align-self:flex-start;
  background:linear-gradient(var(--cacao),var(--cacao)) no-repeat left bottom / 0% 3px;
  transition:background-size .5s cubic-bezier(.76,0,.24,1);
  padding-bottom:8px;
}
.insta-handle b{ font-weight:700; }
.insta-handle:hover{ background-size:100% 3px; }
.insta-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px);
  max-width:min(1040px,90vw); margin:0 auto;
}
.insta-grid a{ position:relative; aspect-ratio:1/1; overflow:hidden; display:block; }
.insta-grid img{ transition:transform .7s cubic-bezier(.22,1,.36,1); }
.insta-grid a:hover img{ transform:scale(1.06); }
/* hover: la imagen se llena de módulos */
.insta-cell{
  position:absolute; inset:0;
  opacity:0; transition:opacity .35s ease;
  background-repeat:repeat; background-size:9px 9px;
}
.insta-grid a:hover .insta-cell{ opacity:.85; }

/* ---------- habitaciones: stack de páginas colapsables ---------- */
.rstack{ background:var(--bone); }
/* encabezado de habitaciones: verde oscuro, palabra grande + bajada */
.rstack-head{ background:var(--bone); color:var(--cacao); padding:calc(var(--pad) * 1) var(--pad) calc(var(--pad) * .5); }
.rstack-title{
  font-size:clamp(52px,10vw,150px); font-weight:300; letter-spacing:-.012em; line-height:.9;
  margin-top:6px;
}
.rstack-sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(16px,1.9vw,26px); line-height:1.22; margin-top:clamp(12px,2vh,22px);
  max-width:34ch; opacity:.92;
}
@media (max-width:900px){
  .rstack-title{ font-size:clamp(44px,13vw,92px); line-height:.94; }
}
.rtab{ position:relative; }
.rstack{ position:relative; z-index:5; }
/* borde de módulos: fondo transparente, sobrepuesto al tab anterior */
.rtab-mborder{
  position:absolute; left:0; right:0; top:calc(-100vw / 72); z-index:3;
  height:calc(100vw / 72);
  background-repeat:repeat-x;
  background-size:calc(100vw / 72) calc(100vw / 72);
  pointer-events:none;
}
@media (max-width:700px){
  .rtab-mborder{ top:calc(-100vw / 36); height:calc(100vw / 36); background-size:calc(100vw / 36) calc(100vw / 36); }
}
/* todas las barras reservan 1 módulo abajo (ahí aterriza el borde transparente del siguiente tab) — mismas medidas en los 3 tabs */
.rtab .rtab-bar{ padding-bottom:calc(clamp(8px,1vw,13px) + 100vw / 72); }
.rstack-head{ padding-bottom:calc(var(--pad) * .35 + 100vw / 72); }
@media (max-width:700px){
  .rtab .rtab-bar{ padding-bottom:calc(clamp(8px,1vw,13px) + 100vw / 36); }
  .rstack-head{ padding-bottom:calc(var(--pad) * .35 + 100vw / 36); }
}
/* el primer tab de suites va un punto más claro que linen (pedido 30-jul) */
.rtab.t-sand{ background:#f4f1ec; color:var(--cacao); }
.rtab.t-amber{ background:var(--tan); color:var(--cacao); }
.rtab.t-clay{ background:var(--adobe); color:var(--cacao); }
.rtab.t-ember{ background:var(--tan); color:var(--cacao); }
.rtab.t-cacao{ background:var(--adobe); color:var(--cacao); }
.rtab-bar{
  width:100%; display:flex; align-items:baseline; gap:clamp(12px,1.6vw,24px);
  background:none; border:none; color:inherit; cursor:pointer; text-align:left;
  padding:clamp(8px,1vw,13px) var(--pad);
}
.rtab-num{
  font-family:var(--serif); font-style:italic; font-size:clamp(11px,.9vw,13px);
  flex:none;
}
.rtab-name{
  font-size:clamp(19px,2.3vw,34px); font-weight:350; letter-spacing:-.005em; line-height:1;
  transition:font-style .2s;
}
.rtab-meta{ margin-left:auto; align-self:center; }
.rtab.is-open .rtab-name{ font-style:italic; }
.rtab-meta{ display:flex; align-items:center; gap:14px; flex:none; }
.rtab-cell{
  position:relative; width:14px; height:14px; display:inline-block; background:none;
  transition:transform .45s cubic-bezier(.65,0,.25,1);
}
/* + cerrado → × abierto: el mismo giro de siempre, pero ahora sobre una cruz */
.rtab-cell::before, .rtab-cell::after{
  content:""; position:absolute; background:currentColor; border-radius:1px;
}
.rtab-cell::before{ left:0; right:0; top:6.5px; height:1.5px; }
.rtab-cell::after { top:0; bottom:0; left:6.5px; width:1.5px;
  transition:opacity .3s, transform .45s cubic-bezier(.65,0,.25,1); }
.rtab.is-open .rtab-cell{ transform:rotate(45deg); }
.rtab-body{
  max-height:0; overflow:hidden;
  transition:max-height .6s cubic-bezier(.65,0,.25,1);
}
.rtab.is-peek .rtab-body{ max-height:92px; }   /* hover: se asoma tantito */
/* en el asomo del hover solo se insinúa la FOTO: botón e iconos aparecen
   hasta que el tab se abre de verdad (si no, se veía el botón mordido) */
.rtab-text{ opacity:0; transition:opacity .35s ease; }
.rtab.is-open .rtab-text{ opacity:1; transition-delay:.18s; }
.rtab.is-open .rtab-body{ max-height:2600px; } /* click: se abre (fallback sin JS; el JS pone la altura real) */
.rtab-inner{
  min-height:0;
  display:flex; align-items:stretch;
  gap:clamp(26px,3vw,60px);
  padding:clamp(14px,1.6vw,22px) var(--pad) calc(clamp(20px,2vw,30px) + 100vw / 72); /* aire para el borde sobrepuesto del siguiente tab */
}
.rtab.is-peek .rtab-name{ transform:translateX(16px); font-style:italic; }
/* leyenda "haz click" a la derecha de cada barra */
.rtab-click{
  margin-left:auto; white-space:nowrap; position:relative;
  font-size:10.5px; letter-spacing:.2em; color:var(--clay); opacity:.85;
  transition:opacity .3s, color .3s;
}
/* subrayado que crece de izquierda a derecha al acercarse: la palabra se
   comporta como un control, no como una nota al pie */
.rtab-click::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.65,0,.25,1);
}
.rtab.is-peek .rtab-click{ opacity:1; }
.rtab.is-peek .rtab-click::after{ transform:scaleX(1); }
/* al acercarse, el renglón COMPLETO se enciende: el fondo sube un escalón,
   el número toma el color de acento y la cruz crece. Antes solo se recorría
   el nombre y era muy poca señal para una barra de este tamaño. */
.rtab.t-sand.is-peek{ background:#eae4d9; }
.rtab.t-amber.is-peek{ background:#d8cbb6; }
.rtab.t-clay.is-peek, .rtab.t-cacao.is-peek{ background:#b9a898; }
.rtab.is-peek .rtab-num{ color:var(--clay); }
.rtab.is-peek .rtab-cell{ transform:scale(1.25); }
.rtab{ transition:background .45s cubic-bezier(.65,0,.25,1); }
.rtab-click + .rtab-meta{ margin-left:0; }
.rtab.is-open .rtab-click{ opacity:0; }
.rtab-name{ transition:transform .45s cubic-bezier(.65,0,.25,1), font-style .2s; }
.rtab-carousel{        /* columna DERECHA (3/4): imagen horizontal, más alta, sin recortar de más */
  order:2;
  position:relative; overflow:hidden;
  flex:0 0 74%;
  align-self:flex-start;
  aspect-ratio:3 / 2;
  max-height:min(64vh,680px);
  margin:0;
}
.rtab-carousel img{
  position:absolute; inset:0; opacity:0;
  transform:scale(1.05);
  transition:opacity .9s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
}
/* la imagen entra hasta que el tab se abre con click (en peek no se asoma) */
.rtab.is-open .rtab-carousel img.is-show{ opacity:1; transition-delay:.18s, .18s; }
.rtab.is-open .rtab-carousel img{ transform:scale(1); }
.rtab-text{           /* columna IZQUIERDA (1/4): toda la info, apilada en una columna */
  order:1; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(20px,2.2vw,30px);
  padding:clamp(6px,1vw,14px) 0 0;
}
.rtab-text p{ font-size:clamp(13.5px,1.1vw,15.5px); line-height:1.5; max-width:46ch; }
.rtab .link-arrow{ font-size:13.5px; flex:none; }
/* izquierda: descripción + botón reservar */
.rtab-copy{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px,1.6vw,22px); }
.rtab-book{ flex:none; align-self:flex-start; white-space:nowrap; }
/* derecha: amenidades con iconos de línea, tipografía chica, ocupan toda la columna */
.rtab-amens{ width:100%; }
.rtab-amens-h{ opacity:.62; margin-bottom:clamp(10px,1.2vw,16px); }
.rtab-amens-list{ list-style:none; display:grid; grid-template-columns:1fr; gap:clamp(11px,1.2vw,15px) 0; }
.rtab-amens-list li{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; line-height:1.2; }
.rtab-amens-ic{ width:19px; height:19px; flex:none; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
@media (max-width:900px){
  .rtab-inner{ flex-direction:column; gap:20px; padding-top:0; }
  .rtab-carousel{ order:0; flex:0 0 auto; width:100%; aspect-ratio:3 / 2; max-height:60vh; }
  .rtab-text{ order:1; flex:1 1 auto; gap:22px; padding-top:6px; }
  .rtab-copy, .rtab-amens{ width:100%; }
  .rtab-amens-list{ grid-template-columns:1fr 1fr; }
  .rtab-book{ align-self:flex-start; }
}

/* ---------- banda respira ---------- */
.banda{ position:relative; background:var(--bone); }
/* la foto NO se traga y va TAL CUAL: nada de plasta ni de velo encima — la
   piedra se queda quieta y la frase entra sobre ella (v1.4, jul-30). */
.banda-media{ position:sticky; top:0; height:100vh; overflow:hidden; }
/* estela de módulos que emana del mouse — sobre la imagen (bajo la plasta z3) */
.banda-trail{ position:absolute; inset:0; z-index:1; pointer-events:none; }
/* como en playa: primero la imagen COMPLETA y quieta (respiro de 14vh),
   luego la palabra, el patrón y la plasta le pasan por encima */
.banda-front{ position:relative; z-index:3; margin-top:14vh; }
.banda-word{
  color:var(--bone);
  font-size:clamp(84px,17vw,280px);
  font-weight:320; font-style:italic; line-height:.8; letter-spacing:-.01em;
  padding-left:var(--pad);
  padding-bottom:.26em; /* aire proporcional: descendentes libres del cinturón */
}
/* la plasta mide un viewport completo: traga la imagen quieta (como en playa).
   Ahora es una PANTALLA DE FRASE: todo centrado, la frase como protagonista —
   "llegar es soltar" arriba, la frase grande al centro, el texto abajo. */
.banda-plate{
  background:transparent; color:var(--bone);
  min-height:100vh;
  padding:calc(var(--pad) * 1.1) var(--pad) calc(var(--pad) * 1.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:clamp(18px,3.2vh,46px);
}
/* frase grande: protagonista, lo primero que se ve al entrar */
.banda-big{
  position:relative; margin:0; max-width:none;
  font-family:var(--serif); font-style:italic; font-weight:650;
  font-size:clamp(40px,6.4vw,104px); line-height:1.02; letter-spacing:-.016em;
  white-space:pre-line; text-align:center;
}
/* la caja que lleva la máscara de módulos: se ciñe al texto para que el
   revelado corra sobre la frase y no sobre todo el ancho de la plasta */
.bb-t{ display:inline-block; text-align:center; }
/* módulos flotantes sutiles que pulsan y cambian de lugar, SIEMPRE detrás de la
   frase (z-index:-1 dentro de .banda-big) */
.banda-mod{
  position:absolute; z-index:-1; opacity:0; pointer-events:none;
  background-size:contain; background-repeat:no-repeat;
}
.wellness{ position:relative; z-index:6; }
.banda-small{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.8vw,40px); line-height:1.12; font-weight:400; max-width:none; letter-spacing:.01em; opacity:.85; }
/* en negritas: va sobre la foto de piedra a sangre y con peso normal se perdía */
.banda-text{ font-size:clamp(15px,1.35vw,18.5px); line-height:1.7; max-width:56ch; margin:0 auto;
  font-weight:700; }

/* ---------- playa ---------- */
.playa{ position:relative; background:var(--bone); }
/* la foto se queda quieta; el cinturón y la plasta scrollean encima (como respira.) */
.playa-media{ position:sticky; top:0; height:100vh; overflow:hidden; }
.playa-media img{ height:100%; }
/* primero la imagen COMPLETA (respiro de 14vh de scroll); luego el frente sube desde abajo y la traga */
.playa .belt{ margin-top:14vh; position:relative; z-index:3; }
/* la plasta mide un viewport completo (necesario para tragar la imagen),
   pero la línea va ARRIBA y la siguiente sección sube a ocupar el resto */
.playa-plate{
  position:relative; z-index:3; background:var(--bone);
  min-height:100vh;
  display:flex; align-items:flex-start;
  padding:calc(var(--pad) * .7) var(--pad);
}
.playa-line{
  color:var(--cacao); font-family:var(--sans);
  font-size:clamp(12px,1.1vw,15px); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; line-height:1.9;
  max-width:1000px;
}

/* ---------- entretenimiento · beach clubs (una pantalla, sin video) ---------- */
/* #entertainment va DESPUÉS de OCEANVS y CUBRE el pin de dining (z8):
   margin-top:-100vh + z9 (antes ese rol lo tenía #mesa). Fondo BEIGE, que
   coincide con el cierre del wipe → el cover queda sin costura. */
.enter{ position:relative; z-index:9; margin-top:-100vh; background:var(--bone); color:var(--cacao);
  padding:clamp(30px,4.5vh,64px) var(--pad) clamp(34px,5vh,68px); }
/* encabezado en una fila: título a la izq, bajada a la der (ahorra alto para que
   quepan clubes + info en una pantalla) */
.enter-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(20px,4vw,80px); flex-wrap:wrap; }
.enter-title{ font-size:clamp(30px,4.4vw,64px); font-weight:300; line-height:.98;
  letter-spacing:-.01em; margin-top:8px; }
.enter-sub{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(16px,1.7vw,22px); line-height:1.2; max-width:30ch; padding-bottom:6px; }
/* las dos fotos se TOCAN (sin gap) y los textos de abajo sí respiran: la
   tarjeta se disuelve (display:contents) y cada pieza se coloca a mano en su
   fila, así el gap horizontal sólo existe en la fila de texto. */
.enter-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:clamp(20px,3vh,38px); }
.enter-card{ display:contents; }
.enter-card:nth-child(1) .enter-media{ grid-column:1; grid-row:1; }
.enter-card:nth-child(2) .enter-media{ grid-column:2; grid-row:1; }
.enter-card:nth-child(1) .enter-body { grid-column:1; grid-row:2; padding-right:clamp(22px,3.4vw,64px); }
.enter-card:nth-child(2) .enter-body { grid-column:2; grid-row:2; padding-left:clamp(22px,3.4vw,64px); }
.enter-media{ position:relative; overflow:hidden; height:clamp(280px,42vh,440px); background:#d9d9bb; }
/* carrusel fade — enter-car es su propio contexto de apilado (z1) para que el
   z-index creciente de las fotos nunca rebase el belt (z2) */
.enter-car{ position:absolute; inset:0; z-index:1; }
.enter-car img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s ease; }
.enter-car img.is-show{ opacity:1; }
/* borde de módulos gradiente en la parte de abajo: cierra la foto hacia el sólido */
.enter-belt{ position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none; }
/* info a la izquierda, botón (CTA) a la derecha, alineados abajo */
.enter-body{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(18px,2.4vw,44px); padding-top:clamp(20px,2.8vh,34px); }
.enter-copy{ flex:1 1 auto; min-width:0; }
.enter-btn{ flex:none; align-self:flex-end; }
.enter-tag{ color:var(--clay); }
.enter-name{ font-size:clamp(27px,3.2vw,50px); font-weight:400; line-height:1;
  letter-spacing:-.01em; margin:6px 0 9px; }
.enter-line{ font-family:var(--sans); font-size:clamp(13.5px,1.05vw,16px); line-height:1.5;
  max-width:48ch; }
@media (max-width:820px){ .enter-grid{ grid-template-columns:1fr; gap:0; }
  .enter-media{ height:clamp(220px,40vh,340px); }
  .enter-card:nth-child(1) .enter-media{ grid-column:1; grid-row:1; }
  .enter-card:nth-child(1) .enter-body { grid-column:1; grid-row:2; padding-right:0; }
  .enter-card:nth-child(2) .enter-media{ grid-column:1; grid-row:3; margin-top:clamp(26px,4vh,44px); }
  .enter-card:nth-child(2) .enter-body { grid-column:1; grid-row:4; padding-left:0; }
  .enter-body{ flex-direction:column; align-items:flex-start; gap:16px; } }

/* ---------- experiencias ---------- */
.events{ position:relative; color:var(--cacao); overflow:hidden; background:var(--bone); }
.events-bg{ position:absolute; inset:0; }
/* eyebrow arriba · el título partido a los lados del stack de polaroids */
.events-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(18px,3vw,56px);
  padding:calc(var(--pad) * .5) var(--pad) 0;
}
.events-head{ position:relative; z-index:2; padding:calc(var(--pad) * 1.2) var(--pad) 0; }
.events-title{
  font-size:clamp(34px,5vw,84px); font-weight:300; line-height:.98; letter-spacing:-.008em;
  text-align:center;
}
.events-t-l{ justify-self:center; }
.events-t-r{ justify-self:center; }
@media (max-width:900px){
  .events-title{ font-size:clamp(30px,8vw,56px); }
}
.events-car{
  position:relative; z-index:2; overflow:hidden;
  height:clamp(300px,52vh,560px);
  margin:0;
}
@media (max-width:900px){
  .events-grid{ grid-template-columns:1fr; align-items:center; gap:clamp(30px,5vh,56px); }
  /* las polaroids giradas se salen de su caja: aire para que no pisen "en 2026" */
  .events-grid .wstack{ padding:clamp(14px,2.4vh,26px) 0; }
  .events-car{ height:clamp(260px,44vh,420px); }
}
.events-car img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease;
}
.events-car img.is-show{ opacity:1; }
.wed-border{ position:absolute; z-index:4; pointer-events:none; }
.events-copy{
  position:relative; z-index:2;
  padding:calc(var(--pad) * .8) var(--pad) calc(var(--pad) * 1.1);
  max-width:720px; margin:0 auto; text-align:center;
}
.events-text{ font-size:clamp(15px,1.35vw,18px); line-height:1.65; margin-bottom:18px; }
.events-note{
  display:inline-block; border:1px solid currentColor; padding:9px 15px; margin-bottom:26px;
}
.events .btn{ display:inline-block; }

/* ---------- cita ---------- */
.quote{ position:relative; padding:calc(var(--pad) * 2) var(--pad); overflow:hidden; background:var(--bone); }
.quote-bg{ position:absolute; inset:0; }
/* negro al 20%: sólo para que la frase se despegue de la chaquira */
.quote-bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.20); }
/* sin velo y sin marco: la cita se trata IGUAL que "el mundo de afuera puede
   esperar" — la foto tal cual y la frase encima (v1.4, jul-30). El velo que
   había era verde (#1c3f1c de Na Balam), herencia que aquí no pintaba nada. */
.quote-frame{
  position:relative; z-index:2; max-width:1100px; margin:0 auto;
  padding:clamp(40px,7vw,90px) clamp(20px,4vw,60px);
  text-align:center; color:var(--bone);
}
.q-mods{ position:absolute; inset:0; pointer-events:none; }
.q-mods i{ position:absolute; display:block; background-size:100% 100%; background-repeat:no-repeat; }
/* mismos valores que .banda-big */
.quote-text{
  position:relative; margin:0; max-width:none;
  font-family:var(--serif); font-style:italic; font-weight:650;
  font-size:clamp(40px,6.4vw,104px); line-height:1.02; letter-spacing:-.016em;
  text-align:center;
}
.quote-text .w{ display:inline-block; }
.quote-by{ margin-top:30px; }

/* ---------- footer ---------- */
.footer{ background:var(--linen); color:var(--cacao); overflow:hidden; }
.footer-cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,60px);
  padding:calc(var(--pad) * 1.2) var(--pad) calc(var(--pad) * .8);
}
.f-col{ display:flex; flex-direction:column; gap:9px; font-size:15px; }
.f-head{ color:var(--clay); margin-bottom:8px; }
.f-col a{
  align-self:flex-start;
  background:linear-gradient(currentColor,currentColor) no-repeat left bottom / 0% 1px;
  transition:background-size .35s; padding-bottom:2px;
}
.f-col a:hover{ background-size:100% 1px; }
.footer-base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px var(--pad) 26px; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border-top:1px solid var(--clay);
}
.footer-word{
  font-family:var(--serif);
  /* "casa del jaguar" es mucho más largo que "nabalam": nowrap + escala
     ajustada para que SIEMPRE quepa en una sola línea. */
  font-size:clamp(30px,10.6vw,178px); font-weight:300; line-height:.94;
  text-align:center; letter-spacing:.002em; white-space:nowrap;
  padding-bottom:clamp(16px,3vh,40px);
}
.footer-word b{ font-weight:700; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-burger{
    display:flex; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; padding:6px; color:inherit;
    position:relative; z-index:96; /* por encima del overlay (z90): sirve de botón X */
  }
  .nav-burger span{ width:26px; height:2px; background:currentColor; display:block; }
  /* al abrir el menú (overlay verde), el burger se pinta en papel para contrastar */
  .nav-open .nav-burger{ color:var(--bone); }
  /* burger → X cuando el menú está abierto */
  .nav-open .nav-burger span:first-child{ transform:translateY(4px) rotate(45deg); }
  .nav-open .nav-burger span:last-child{ transform:translateY(-4px) rotate(-45deg); }
  /* barra más aireada: el idioma se va al menú, se queda logo · reservar · burger */
  .nav-right{ gap:14px; }
  .nav-right .lang-toggle{ display:none; }
  .nav .nav-book{ padding:10px 17px; font-size:11px; }
  /* extras dentro del overlay del menú (.nav-open .nav-links) */
  .nav-open .nav-m{
    display:flex; gap:28px; margin-top:6px;
    font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.72;
  }
  .nav-open .nav-m-lang{ display:inline-flex; margin-top:2px; font-size:15px; opacity:.9; }
  .nav-open .nav-m-util::before{ display:none; }
  .tesis-pair{ grid-template-columns:1fr; gap:26px; }
  .tesis-word-row.right{ text-align:left; }
  .tesis-glyph{ display:none; }
  .imm-word{ font-size:clamp(48px,15vw,110px); white-space:normal; }
  .imm-foot{ flex-direction:column; align-items:flex-start; gap:18px; }
  .imm-strip{ top:38%; }
  .imm-strip img{ width:130px; height:92px; border-width:3px; }
  .w-word{ font-size:clamp(48px,15vw,110px); white-space:normal; }
  .w-foot{ flex-direction:column; align-items:flex-start; gap:18px; }
  /* acordeón vertical en móvil */
  .acc{ flex-direction:column; height:auto; }
  .acc-card{ height:64px; flex:none; transition:height .55s cubic-bezier(.65,0,.25,1); }
  .acc-card.is-open{ height:56vh; flex:none; }
  .acc-tab{ flex-direction:row; justify-content:flex-start; padding:10px 16px; height:auto; align-items:center; gap:14px;
    left:0; bottom:0; transform:none; }
  .acc-min{ writing-mode:horizontal-tb; transform:none; }
  .insta-grid{ grid-template-columns:repeat(2,1fr); }
  .banda-plate{ grid-template-columns:1fr; }
  .events-collage{ grid-template-columns:1fr; }
  .ev-a{ grid-row:auto; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* links a las páginas SEO (hubs bienestar / qué hacer) */
.todo-cta{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.pilares-more{ margin-top:16px; text-align:center; color:var(--cacao); }

/* hover: pista de "entrar →" en las tarjetas-enlace del acordeón (pilares + qué hacer) */
.acc-card::after{
  position:absolute; bottom:18px; right:18px; z-index:4;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  background:var(--bone); color:var(--cacao); padding:8px 13px;
  opacity:0; transform:translateY(12px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
  pointer-events:none; white-space:nowrap;
}
body[data-lang="es"] .acc-card::after{ content:"entrar →"; }
body[data-lang="en"] .acc-card::after{ content:"enter →"; }
.acc-card:hover::after{ opacity:1; transform:none; }

/* ---- Casa del Jaguar: el video SIEMPRE se ve como es ----
   Antes bajábamos la opacidad del video sobre cacao para poder leer el texto,
   pero el cacao teñía la imagen de ocre. Ahora: video a 100 % y la
   legibilidad la resuelve un TAG sólido (.vtag) que además se auto-oculta. */
.w-media{ background:var(--bone); }
.dcover-panel .imm-media{ background:var(--bone); }
.umbral-media{ background:var(--bone); }

/* ---- TAG de título sobre video ----
   caja sólida centrada, tipografía chica; aparece al entrar a la sección,
   se va a los 4 s y vuelve cuando la sección regresa a pantalla. */
.vtag{
  display:inline-flex; flex-direction:column; align-items:center; gap:7px;
  background:var(--cacao); color:var(--bone);
  padding:clamp(13px,1.7vh,19px) clamp(18px,2.2vw,32px);
  opacity:0; transform:translateY(8px);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.vtag.is-on{ opacity:1; transform:none; }
.vtag .vtag-k{ font-family:var(--sans); font-size:8.5px; letter-spacing:.26em;
  text-transform:uppercase; opacity:.7; }
.vtag .vtag-t{ font-family:var(--serif); font-weight:300; letter-spacing:-.004em;
  font-size:clamp(19px,2.05vw,31px); line-height:1.08; text-align:center; }
.vtag .vtag-t b{ font-weight:700; }
.vtag .vtag-s{ font-family:var(--serif); font-style:italic;
  font-size:clamp(11px,.88vw,13px); opacity:.88; text-align:center; }
.no-anim .vtag{ opacity:1; transform:none; }
/* bespoke wellness va SIN caja: sólo la tipografía, del mismo tamaño.
   Como pierde la plasta, la legibilidad la sostiene una sombra muy suave. */
.wellness .vtag{ background:none; padding:0; text-shadow:0 1px 26px rgba(20,9,4,.55), 0 1px 3px rgba(20,9,4,.35); }
.wellness .vtag .vtag-k{ opacity:.85; }
@media (max-width:560px){
  .vtag{ padding:12px 16px; }
  .vtag .vtag-t{ font-size:clamp(17px,5vw,23px); }
}


/* ---------- OUR AMENITIES · mosaico filtrable con cross-fade escalonado ---------- */
.amen{ background:var(--bone); color:var(--cacao);
  padding:calc(var(--pad) * 1.1) var(--pad) calc(var(--pad) * 1.4); }
.amen-head{ max-width:1440px; margin:0 auto calc(var(--pad) * .55); }
.amen-headline{ display:flex; align-items:baseline; gap:clamp(14px,2.4vw,36px); flex-wrap:wrap; }
.amen-title{ font-family:var(--serif); font-weight:300;
  font-size:clamp(40px,7.4vw,116px); line-height:.94; letter-spacing:-.012em; }
.amen-title b{ font-weight:700; }
.amen-sub{ margin-top:12px; max-width:58ch; font-size:clamp(14px,1.1vw,16.5px); line-height:1.7; }
.amen-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(20px,2.6vh,34px); }
.amen-f{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--cacao); background:none; color:var(--cacao);
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .35s ease;
}
.amen-f::before{ content:""; position:absolute; inset:0; background:var(--clay);
  transform:scaleY(0); transform-origin:bottom; transition:transform .38s cubic-bezier(.65,0,.25,1); z-index:-1; }
.amen-f:hover::before, .amen-f.is-on::before{ transform:scaleY(1); }
.amen-f:hover, .amen-f.is-on{ color:var(--bone); }

.amen-mosaic{
  max-width:1440px; margin:0 auto;
  display:grid;
  /* retícula CERRADA y con tamaños definidos: 12 celdas en 5 bandas de 6
     columnas. Las bandas alternan alto (2 filas / 3 filas) y ancho (3+3 / 2+2+2),
     así el ritmo queda irregular SIN celdas chiquitas ni huecos. Solo existen
     dos formatos: panorámica (3 col × 2 filas) y vertical-ish (2 col × 3 filas). */
  --amen-row:clamp(88px,8.6vw,132px);
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(15,var(--amen-row));
  gap:0;                     /* las fotos se tocan: mosaico continuo */
  grid-template-areas:       /* panorámicas a 3 filas (antes 2): más altas */
    "a a a b b b"
    "a a a b b b"
    "a a a b b b"
    "c c d d e e"
    "c c d d e e"
    "c c d d e e"
    "f f f g g g"
    "f f f g g g"
    "f f f g g g"
    "h h i i j j"
    "h h i i j j"
    "h h i i j j"
    "k k k l l l"
    "k k k l l l"
    "k k k l l l";
}
.amen-tile{ position:relative; overflow:hidden; background:var(--bone); }
/* la foto SIEMPRE llena la celda: nunca queda banda vacía ni foto encogida */
.amen-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1.15s cubic-bezier(.4,0,.2,1);
}
.amen-tile img.is-show{ opacity:1; }
.amen-tile:nth-child(1){ grid-area:a; }
.amen-tile:nth-child(2){ grid-area:b; }
.amen-tile:nth-child(3){ grid-area:c; }
.amen-tile:nth-child(4){ grid-area:d; }
.amen-tile:nth-child(5){ grid-area:e; }
.amen-tile:nth-child(6){ grid-area:f; }
.amen-tile:nth-child(7){ grid-area:g; }
.amen-tile:nth-child(8){ grid-area:h; }
.amen-tile:nth-child(9){ grid-area:i; }
.amen-tile:nth-child(10){ grid-area:j; }
.amen-tile:nth-child(11){ grid-area:k; }
.amen-tile:nth-child(12){ grid-area:l; }
.amen-cell{ position:absolute; inset:0; z-index:2;
  opacity:0; transition:opacity .35s ease;
  background-repeat:repeat; background-size:11px 11px; pointer-events:none; }
/* overlay de módulos al hover retirado a pedido del cliente (4-ago) */
.amen-mosaic.is-swap .amen-tile img.is-show{ opacity:0; }

@media (max-width:900px){
  /* en pantallas angostas la irregularidad estorba: rejilla de pares,
     todas las celdas del mismo formato (2 col × 3 filas) */
  .amen-mosaic{
    --amen-row:clamp(62px,11.5vw,108px);
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(18,var(--amen-row));
    grid-template-areas:
      "a a b b" "a a b b" "a a b b"
      "c c d d" "c c d d" "c c d d"
      "e e f f" "e e f f" "e e f f"
      "g g h h" "g g h h" "g g h h"
      "i i j j" "i i j j" "i i j j"
      "k k l l" "k k l l" "k k l l";
  }
}
@media (max-width:560px){
  .amen-f{ padding:9px 13px; font-size:10px; letter-spacing:.16em; }
  .amen-mosaic{ --amen-row:clamp(52px,15vw,92px); }
}
.no-anim .amen-tile img{ transition:none; }


/* ---------- BODAS Y EVENTOS · dos bloques + paquetes desplegables ---------- */
/* mismo patrón que los clubes de playa: las dos fotos pegadas, el texto de
   abajo separado, y entran una y luego la otra. */
.wed-two{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  padding:0 var(--pad) calc(var(--pad) * .9);
}
.wed-block{ display:contents; }
.wed-block:nth-child(1) .wed-tag   { grid-column:1; grid-row:1; padding-right:clamp(22px,3.4vw,64px); }
.wed-block:nth-child(2) .wed-tag   { grid-column:2; grid-row:1; padding-left:clamp(22px,3.4vw,64px); }
.wed-block:nth-child(1) .wed-bmedia{ grid-column:1; grid-row:2; }
.wed-block:nth-child(2) .wed-bmedia{ grid-column:2; grid-row:2; }
.wed-block:nth-child(1) .wed-bbody { grid-column:1; grid-row:3; padding-right:clamp(22px,3.4vw,64px); }
.wed-block:nth-child(2) .wed-bbody { grid-column:2; grid-row:3; padding-left:clamp(22px,3.4vw,64px); }
.wed-tag, .wed-bbody{ text-align:center; }
.wed-tag{ opacity:.72; margin-bottom:clamp(12px,1.8vh,20px); }
.wed-bmedia{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden;
  background:var(--bone); }
/* carrusel fade dentro de la foto: aquí viven las fotos que antes eran una tira */
.wed-bmedia img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.wed-bmedia img.is-show{ opacity:1; }
.wed-bbody{ padding-top:clamp(22px,3vh,36px); display:flex; flex-direction:column;
  align-items:center; gap:12px; }
.wed-name{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(28px,3.6vw,54px); line-height:1; }
.wed-line{ font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.72; max-width:48ch; margin:0 auto; }
.wed-bbody .btn{ margin-top:6px; }

.wpks{ position:relative; z-index:2; padding-bottom:0; }
.wpks-head{ padding:clamp(18px,2.4vh,30px) var(--pad) calc(clamp(14px,2vh,26px) + 100vw / 72);
  border-top:1px solid var(--tan); }
.wpks-title{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(26px,4vw,60px); line-height:1; margin-top:10px; }
.wpks-foot{ margin-top:14px; font-size:13px; opacity:.72; }
/* paquetes con el MISMO lenguaje que los tabs de cuartos: bandas de color en
   el degradado sand → amber → clay, cenefa de módulos y nombre serif grande */
.wpk{ position:relative; }
.wpk.t-sand{ background:var(--linen); color:var(--cacao); }
.wpk.t-amber{ background:var(--tan); color:var(--cacao); }
.wpk.t-clay{ background:var(--adobe); color:var(--cacao); }
.wpk-mborder{
  position:absolute; left:0; right:0; top:calc(-100vw / 72); z-index:3;
  height:calc(100vw / 72);
  background-repeat:repeat-x;
  background-size:calc(100vw / 72) calc(100vw / 72);
  pointer-events:none;
}
@media (max-width:700px){
  .wpk-mborder{ top:calc(-100vw / 36); height:calc(100vw / 36); background-size:calc(100vw / 36) calc(100vw / 36); }
}
.wpk-bar{
  width:100%; display:flex; align-items:baseline; gap:clamp(12px,1.6vw,24px);
  background:none; border:none; color:inherit; cursor:pointer; text-align:left;
  padding:clamp(8px,1vw,13px) var(--pad) calc(clamp(8px,1vw,13px) + 100vw / 72);
  font-family:inherit;
}
@media (max-width:700px){
  .wpk-bar{ padding-bottom:calc(clamp(8px,1vw,13px) + 100vw / 36); }
}
.wpk-bar .rtab-num{ flex:none; }
.wpk-name{ font-size:clamp(19px,2.3vw,34px); font-weight:350; letter-spacing:-.005em;
  line-height:1; flex:none; transition:font-style .2s; }
.wpk.is-open .wpk-name{ font-style:italic; }
.wpk-sub{ font-size:12.5px; letter-spacing:.06em; opacity:.66; flex:1; }
.wpk-body{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.65,0,.25,1); }
.wpk.is-open .wpk-body{ grid-template-rows:1fr; }
.wpk-inner{ overflow:hidden;
  display:grid; grid-template-columns:1.1fr 1fr .9fr; gap:clamp(18px,3vw,52px);
  padding:0 var(--pad); }
.wpk.is-open .wpk-inner{ padding-bottom:clamp(22px,3vh,38px); }
.wpk-h{ opacity:.66; margin-bottom:10px; }
.wpk-list{ list-style:none; display:flex; flex-direction:column; gap:7px; }
.wpk-list li{ font-size:14px; line-height:1.5; padding-left:16px; position:relative; }
.wpk-list li::before{ content:""; position:absolute; left:0; top:.52em;
  width:6px; height:6px; background:currentColor; opacity:.5; }
.wpk-add li::before{ opacity:.32; }
.wpk-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.wpk-price{ font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.4; }
/* el botón se adapta a la banda: sobre sand/amber sería invisible en sand */
.wpk-cta .btn{ border-color:currentColor; color:inherit; background:none; }
.wpk-cta .btn::before{ background:currentColor; }
.wpk.t-sand .wpk-cta .btn:hover, .wpk.t-amber .wpk-cta .btn:hover,
.wpk.t-clay .wpk-cta .btn:hover{ color:var(--bone); }  /* las tres bandas ya son claras */
.wpks-foot{ margin:clamp(18px,2.4vh,30px) var(--pad) 0; font-size:12.5px; letter-spacing:.04em; opacity:.72; }

@media (max-width:900px){
  .wed-two{ grid-template-columns:1fr; }
  .wed-block:nth-child(1) .wed-tag   { grid-column:1; grid-row:1; padding-right:0; }
  .wed-block:nth-child(1) .wed-bmedia{ grid-column:1; grid-row:2; }
  .wed-block:nth-child(1) .wed-bbody { grid-column:1; grid-row:3; padding-right:0; }
  .wed-block:nth-child(2) .wed-tag   { grid-column:1; grid-row:4; padding-left:0; margin-top:clamp(26px,4vh,44px); }
  .wed-block:nth-child(2) .wed-bmedia{ grid-column:1; grid-row:5; }
  .wed-block:nth-child(2) .wed-bbody { grid-column:1; grid-row:6; padding-left:0; }
  .wpk-inner{ grid-template-columns:1fr; gap:20px; }
  .wpk-bar{ flex-wrap:wrap; }
  .wpk-sub{ flex:1 0 100%; margin-top:4px; }
}


/* ---- cajas sólidas sobre video (sustituyen los velos de color) ---- */
.spamenu-onvideo .spamenu-inner{
  background:none; color:var(--bone);
  width:min(1180px, calc(100% - var(--pad) * 2));
  margin:0 auto; padding:clamp(26px,4vh,54px) clamp(24px,3.4vw,56px);
}
/* el video se ve como es; solo un negro al 20 % asienta el texto */
.spamenu-onvideo .spamenu-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,.20); pointer-events:none;
}
/* OCEANVS: aquí SÍ va overlay, pero NEGRO al 10 % (nunca café: teñía el
   video). Sin caja sólida — el video se ve completo y el negro neutro solo
   asienta el texto. */
.dcover-panel .imm-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,.10); pointer-events:none;
}
.oce-panel{
  background:none; color:var(--bone);
  width:min(760px, calc(100% - var(--pad) * 2));
  margin:0 auto; padding:clamp(18px,2.6vh,32px) clamp(18px,2.4vw,34px);
  display:flex; flex-direction:column; align-items:center;
}
/* lockup más chico: no debe tapar el video */
.oce-panel .oce-lead{ font-size:clamp(17px,2.1vw,30px); }
.oce-panel .oce-mark{ width:clamp(170px,19vw,270px); filter:none; }
.oce-panel .oceanvs-info{ margin-top:clamp(14px,2.2vh,24px); font-size:clamp(13.5px,1.05vw,15.5px); }
.oce-panel .oce-cta{ margin-top:clamp(18px,2.6vh,30px); }


/* ---------- SERVICIOS DEL SPA · acordeón de 9 tarjetas ---------- */
/* alto ORIGINAL: se había achicado a 46vh mientras las 8 puertas de bienestar
   vivían fuera del riel como una fila de enlaces (31-jul → 3-ago) */
.sv-acc{ height:clamp(400px,69vh,682px); }
/* la tarjeta abierta ya no lleva plasta: el texto va en off-white sobre la
   foto, con un degradado neutro abajo para que se lea siempre */
/* la caja de texto se estira a lo ancho de la tarjeta: el copy corre en menos
   renglones y tapa menos foto (antes topaba en 440px y crecía hacia abajo) */
.sv-info{ background:none; color:var(--bone);
  max-width:none; width:100%; padding:18px 26px 22px; gap:6px;
  text-shadow:0 1px 14px rgba(20,9,4,.5); }
.sv-card .sv-desc{ max-width:none; }
/* sin el botón "entrar" en el acordeón del spa */
.sv-card::after{ content:none !important; display:none; }
.sv-info strong{ font-size:clamp(19px,1.7vw,27px); line-height:1.02; }
.sv-info em.sv-kick{ font-size:9px; letter-spacing:.2em; }
.sv-info strong, .sv-info em{ color:var(--bone); }
.sv-info .sv-kick{ opacity:.78; }
.sv-card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(20,9,4,.58) 0%, rgba(20,9,4,.38) 44%, rgba(20,9,4,.13) 76%, rgba(20,9,4,0) 100%);
  opacity:0; transition:opacity .45s ease;
}
.sv-card.is-open::before{ opacity:1; }
.sv-btn{ background:var(--bone); color:var(--cacao); border-color:var(--bone); }
.sv-btn::before{ background:var(--clay); }
.sv-btn:hover{ color:var(--bone); border-color:var(--clay); }
.sv-kick{ font-family:var(--sans) !important; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; opacity:.62; }
.sv-desc{ font-size:11.8px; line-height:1.5; max-width:42ch; }
.sv-btn{ align-self:flex-start; margin-top:8px; padding:10px 18px; font-size:9.5px; }
.sv-card{ cursor:pointer; }
/* tags colapsados más pequeños (solo el acordeón del spa) */
.sv-card .acc-tab{ gap:8px; padding:9px 7px 11px; bottom:0; left:0; }
.sv-card .acc-cell{ width:7px; height:7px; }
.sv-card .acc-num{ font-size:12px; }
.sv-card .acc-min{ font-size:9.5px; letter-spacing:.06em; }
.pilares-more{ margin-top:calc(var(--pad) * .7); color:var(--cacao); text-align:center; }
.pilares-more-grid{
  display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(6px,.7vw,12px); margin-top:14px;
}
.pilares-more-grid a{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  border:none; padding:12px 8px 10px; color:var(--cacao);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
  text-align:center; line-height:1.25;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.pilares-more-grid a:hover{ background:var(--clay); color:var(--bone); }
/* icono de 4 módulos (niveles 1–4, nunca el 0), distinto en cada botón */
.pm-ico{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr);
  width:26px; height:26px; flex:none; }
.pm-ico i{ display:block; background-repeat:no-repeat; background-size:100% 100%; }
.pilares-more-grid a:hover .pm-ico i{ filter:brightness(0) invert(1); }
@media (max-width:1080px){ .pilares-more-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .pilares-more-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .sv-acc{ height:auto; flex-direction:column; }
  .sv-card{ height:clamp(64px,9vh,80px); flex:none; transition:height .6s cubic-bezier(.65,0,.25,1); }
  .sv-card.is-open{ height:clamp(420px,64vh,560px); }
  .sv-info{ max-width:100%; padding:16px 18px 20px; }
  .sv-desc{ font-size:12.5px; }
  .acc-min{ writing-mode:horizontal-tb; transform:none; }
  .sv-card .acc-tab{ flex-direction:row; justify-content:flex-start; gap:12px; padding:10px 18px;
    top:auto; bottom:0; left:0; transform:none; align-items:center; }
}


/* ---------- BODAS · stack de fotos impresas ----------
   Varias fotos con margen de papel, apiladas y rotadas distinto. El borde de
   módulos vive SOLO en la de encima y va pasando a la siguiente cuando el
   stack gira: la idea es un montoncito de fotos impresas de la boda. */
.wstack{ position:relative; z-index:2; }
.wstack-inner{
  position:relative; margin:0 auto;
  width:min(760px, 42vw); aspect-ratio:4/3;
}
.wshot{
  position:absolute; inset:0; margin:0;
  background:#fff;
  padding:clamp(10px,1.1vw,16px) clamp(10px,1.1vw,16px) clamp(30px,3.4vw,48px);
  box-shadow:0 1px 2px rgba(74,38,24,.10), 0 6px 14px rgba(74,38,24,.09);
  transition:transform .85s cubic-bezier(.65,0,.25,1), opacity .5s ease;
  transform-origin:50% 60%;
}
.wshot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* posiciones fijas del stack: rotación y desfase por slot */
.wshot[data-slot="0"]{ z-index:8; transform:rotate(-1.6deg) translate(0,0) scale(1); }
.wshot[data-slot="1"]{ z-index:7; transform:rotate(3.2deg) translate(2.2%,1.4%) scale(.986); }
.wshot[data-slot="2"]{ z-index:6; transform:rotate(-4.4deg) translate(-2.6%,2.4%) scale(.972); }
.wshot[data-slot="3"]{ z-index:5; transform:rotate(1.8deg) translate(3.2%,3.4%) scale(.958); }
.wshot[data-slot="4"]{ z-index:4; transform:rotate(-2.6deg) translate(-3.4%,4.2%) scale(.944); }
.wshot[data-slot="5"]{ z-index:3; transform:rotate(4.6deg) translate(1.6%,5%) scale(.93); }
.wshot[data-slot="6"]{ z-index:2; transform:rotate(-3.4deg) translate(-1.8%,5.8%) scale(.916); }
.wshot[data-slot="7"]{ z-index:1; transform:rotate(2.2deg) translate(2.8%,6.6%) scale(.902); }
/* la que se va: sale hacia arriba girando y regresa al fondo */
.wshot.is-out{ z-index:9; transform:rotate(-13deg) translate(-16%,-26%) scale(1.02); opacity:0; }
/* borde de módulos: solo en la de encima */
@media (max-width:900px){
  .wstack-inner{ width:min(460px,92%); }
}
.no-anim .wshot{ transition:none; }

/* ---------- BODAS · tira de más fotos ---------- */
.wstrip-wrap{ position:relative; z-index:2; padding:0 var(--pad) calc(var(--pad) * .9); }
.wstrip-h{ opacity:.66; margin-bottom:14px; }
.wstrip{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(120px,11vw,190px),1fr));
  gap:clamp(6px,.7vw,12px);
}
.wstrip-i{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--bone); }
.wstrip-i img{ width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.wstrip-i:hover img{ transform:scale(1.07); opacity:.86; }


/* Sobre fondo claro: el header lleva una plasta del MISMO color del fondo que
   baja un poco más y se difumina abajo — el contenido que sube parece
   desvanecerse al entrar en ella. Sobre foto/video no aparece (ahí el header
   sigue totalmente transparente). */
.nav::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:-1;
  height:calc(100% + 26px); pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  background:linear-gradient(to bottom,
    var(--bone) 0%, var(--bone) 74%,
    rgba(250,249,247,.86) 86%, rgba(250,249,247,.42) 94%, rgba(250,249,247,0) 100%);
}
/* la plasta solo se dibuja si TAMBIÉN la franja de abajo es fondo claro:
   si viene entrando una foto, se retira antes de mancharla */
.nav.is-solid.has-mask::before{ opacity:1; }
/* el cambio de color nunca es un corte seco */
.nav, .nav a, .nav button{ transition:color .3s ease; }
.nav .nav-book{ transition:color .3s ease, background-color .3s ease; }

/* el velo oscuro del nav sobre el hero se retiró a pedido del cliente (4-ago) */
.nav{ isolation:isolate; }

/* ================= POSTAL · la polaroid se voltea y se escribe =================
   Mantener presionada la foto de encima 2 s abre la postal: la polaroid gira
   sobre su eje, atrás hay un recado en cursiva y un botón para mandarla como
   imagen (fondo blanco, la polaroid chica, el recado y casadeljaguar.com). */
/* ---- llamada a la acción de la postal (3-ago) --------------------------
   Antes era una línea de 10 px al 55 % que decía «mantén presionada la foto»:
   nadie mantiene presionado nada si no se lo piden a gritos. Ahora es un
   botón visible, y la interacción es un click sencillo. */
.wstack-hint{ grid-column:1 / -1; text-align:center; margin-top:clamp(14px,2vh,26px); }
.wstack-cta{
  display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  background:none; border:1px solid var(--clay); color:var(--clay);
  padding:11px 20px; border-radius:0;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease;
}
.wstack-cta:hover{ background:var(--clay); color:var(--bone); }
.wstack-cta-ico{ width:11px; height:11px; background:currentColor; flex:none;
  animation:wctaPulse 2.2s ease-in-out infinite; }
@keyframes wctaPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.55); opacity:.55; } }
/* el mismo pulso sobre la foto de encima: un aro que late para decir «tócame» */
.wshot[data-slot="0"]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(176,90,39,0);
  transition:box-shadow .35s ease;
}
.wstack-inner:hover .wshot[data-slot="0"]::after{ box-shadow:inset 0 0 0 3px var(--clay); }
.wshot[data-slot="0"]{ cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

.pol{ position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:clamp(14px,4vw,30px); overflow-y:auto; }
.pol[hidden]{ display:none; }
/* velo más cerrado (3-ago): al 72 % la página seguía leyéndose detrás de la
   postal y el conjunto se veía sucio, sobre todo en móvil */
.pol-veil{ position:absolute; inset:0; background:rgba(28,14,8,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s ease; }
.pol.is-on .pol-veil{ opacity:1; }
.pol-stage{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px,2.6vh,30px); opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
.pol.is-on .pol-stage{ opacity:1; transform:none; }
/* la tarjeta que gira · REVERSO = DORSO DE POSTAL (3-ago)
   Horizontal 3:2. Bloque del remitente arriba al centro, filete vertical al
   medio, estampa arriba a la derecha con los módulos 1-4 en cuadro, renglones
   del destinatario a la derecha y el recado en la mitad izquierda. */
.pol-card{
  position:relative; width:min(760px,92vw); aspect-ratio:3/2;
  transform-style:preserve-3d; transform:rotateY(0deg) rotate(-1.6deg);
  transition:transform 1s cubic-bezier(.65,0,.25,1);
}
.pol-card.is-flipped{ transform:rotateY(180deg) rotate(1.6deg); }
.pol-face{
  position:absolute; inset:0; background:var(--bone); overflow:hidden;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  box-shadow:0 2px 4px rgba(20,9,4,.16), 0 18px 44px rgba(20,9,4,.34);
  padding:0;
}
.pol-front img{ width:100%; height:100%; object-fit:cover; display:block; }
.pol-rear{
  transform:rotateY(180deg); color:var(--cacao);
  padding:clamp(18px,3vw,30px);
  border:1px solid rgba(74,38,24,.22);
}
/* remitente, arriba al centro */
.pc-head{
  position:absolute; left:50%; top:clamp(16px,2.6vw,26px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  font-family:var(--sans); font-size:clamp(8px,1.05vw,10px);
  letter-spacing:.2em; text-transform:uppercase; line-height:1.5;
}
.pc-head span:first-child{ font-family:var(--serif); font-size:clamp(13px,1.7vw,17px);
  letter-spacing:.02em; text-transform:none; font-weight:300; }
.pc-head span:first-child b{ font-weight:700; }
.pc-head span:not(:first-child){ opacity:.55; }
/* la estampa: los cuatro módulos dentro del recuadro */
/* sin recuadro y con los cuatro módulos pegados: el bloque 2×2 ES la estampa */
.pc-stamp{
  position:absolute; right:clamp(16px,2.6vw,28px); top:clamp(16px,2.6vw,28px);
  width:clamp(52px,7vw,66px); aspect-ratio:1/1;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:0; padding:0; border:0;
}
.pc-stamp b{ display:block; background-repeat:no-repeat; background-size:100% 100%; }
/* el filete del medio */
.pc-split{
  position:absolute; left:50%; top:clamp(78px,11vw,104px); bottom:clamp(40px,5vw,52px);
  width:1px; background:rgba(74,38,24,.32);
}
/* el recado ocupa la mitad izquierda */
.pol-rear textarea{
  position:absolute; left:clamp(18px,3vw,30px); right:50%; top:clamp(84px,12vw,112px);
  bottom:clamp(44px,5.5vw,58px); margin-right:clamp(16px,2.4vw,26px);
  width:auto; border:0; outline:0; resize:none; background:none;
  color:var(--cacao); font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(15px,1.9vw,21px); line-height:1.55; letter-spacing:.005em;
}
.pol-rear textarea::placeholder{ color:var(--cacao); opacity:.32; }
/* renglones del destinatario, mitad derecha */
.pc-rules{
  position:absolute; left:50%; right:clamp(18px,3vw,30px); bottom:clamp(52px,7vw,74px);
  margin-left:clamp(16px,2.4vw,26px);
  display:flex; flex-direction:column; gap:clamp(13px,2vw,22px);
}
.pc-rules b{ display:block; height:1px; background:rgba(74,38,24,.28); }
@media (max-width:620px){
  .pol-card{ width:min(94vw, 460px); }
  .pol-rear textarea{ font-size:13.5px; line-height:1.45; }
  .pc-head{ gap:1px; }
  .pol-stage{ gap:14px; }
}
.pol-url{ position:absolute; left:0; right:0; bottom:clamp(14px,2.2vw,22px); text-align:center;
  font-family:var(--sans); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  opacity:.45; text-align:center; }
.pol-actions{ display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); }
.pol-x{ background:none; border:0; cursor:pointer; color:var(--bone); opacity:.7;
  font-family:var(--sans); font-size:10px; letter-spacing:.24em; text-transform:uppercase; }
.pol-x:hover{ opacity:1; }
.pol .btn.btn-solid{ background:var(--bone); color:var(--cacao); border-color:var(--bone); }
@media (max-width:560px){ .pol-card{ width:min(340px,86vw); } }

/* ================= FORMULARIOS · los CTA ya no abren el correo =================
   Cada call to action abre un cuestionario dentro del sitio; al enviarlo el
   propio sitio manda el correo (POST a /api/contacto). */
.cf{ position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:4vh 4vw; }
.cf[hidden]{ display:none; }
.cf-veil{ position:absolute; inset:0; background:rgba(28,14,8,.76); opacity:0; transition:opacity .35s ease; }
.cf.is-on .cf-veil{ opacity:1; }
.cf-panel{
  position:relative; z-index:2; width:min(620px,100%); max-height:92vh; overflow:auto;
  background:var(--bone); color:var(--cacao);
  padding:clamp(26px,4vw,44px) clamp(22px,4vw,46px) clamp(24px,3.4vw,38px);
  border-top:4px solid var(--clay);
  opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease;
}
.cf.is-on .cf-panel{ opacity:1; transform:none; }
.cf-x{ position:absolute; top:10px; right:14px; background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--cacao); opacity:.4; }
.cf-x:hover{ opacity:1; }
.cf-eyebrow{ font-size:9px; color:var(--clay); }
.cf-title{ font-family:var(--serif); font-weight:300; letter-spacing:-.012em;
  font-size:clamp(27px,3.4vw,42px); line-height:1.02; margin:8px 0 6px; }
.cf-lead{ font-size:14px; line-height:1.6; opacity:.72; margin-bottom:clamp(18px,2.6vh,28px); }
.cf-q{ border:0; padding:0; margin:0 0 clamp(16px,2.2vh,24px); display:block; }
.cf-q legend{ font-family:var(--sans); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  opacity:.55; padding:0; margin-bottom:10px; }
.cf-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.cf-op{ background:none; cursor:pointer; border:1px solid var(--tan); color:var(--cacao);
  padding:9px 15px; font-family:var(--sans); font-size:13px; letter-spacing:.01em;
  transition:background .2s ease, color .2s ease, border-color .2s ease; }
.cf-op:hover{ border-color:var(--clay); }
.cf-op.is-on{ background:var(--clay); border-color:var(--clay); color:var(--bone); }
.cf-in{ display:block; margin:0 0 14px; }
.cf-in span{ display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; opacity:.55; margin-bottom:7px; }
.cf-in input, .cf-in textarea{
  width:100%; background:none; border:0; border-bottom:1px solid var(--tan);
  padding:7px 0; color:var(--cacao); font-family:var(--sans); font-size:15px; resize:none;
}
.cf-in input:focus, .cf-in textarea:focus{ outline:0; border-bottom-color:var(--clay); }
.cf-you{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(16px,2.4vw,28px);
  padding-top:clamp(10px,1.6vh,18px); border-top:1px solid var(--tan); }
.cf-you .cf-in:first-child{ grid-column:1 / -1; }
.cf-note{ min-height:18px; font-size:12.5px; margin-top:4px; opacity:.7; }
.cf-note.is-bad{ color:var(--clay); opacity:1; }
.cf-actions{ margin-top:clamp(10px,1.6vh,18px); }
.cf-send{ width:100%; justify-content:center; }
.cf-send[disabled]{ opacity:.6; pointer-events:none; }
.cf-done{ padding:clamp(26px,5vh,54px) 0 clamp(12px,2vh,22px); text-align:center; }
.cf-done[hidden]{ display:none; }
.cf-done-t{ font-family:var(--serif); font-style:italic; font-size:clamp(24px,3vw,34px); }
.cf-done-s{ font-size:13.5px; opacity:.65; margin-top:8px; }
body.cf-open{ overflow:hidden; }
@media (max-width:560px){ .cf-you{ grid-template-columns:1fr; } }


/* ---- borde SOLO sobre fondo claro, siempre en clay ---- */
.btn-outline,
.mesa-cta .btn,
.wed-bbody .btn,
.wpk.t-sand .btn,
.amen .btn,
.cf .btn{ border-color:var(--clay); }

/* --- nav: nada se parte en dos renglones (31-jul) ------------------------
   El renglón de utilidades bajó a 3 rubros (experiencias · notas · contacto);
   cómo llegar y faq viven en el pie y en el menú móvil. */
.nav-logo, .nav-links > a, .nav-util{ white-space:nowrap; } /* nav-nowrap-fix */
.nav-links{ gap:clamp(14px,1.7vw,30px); }
.nav-right{ gap:clamp(12px,1.4vw,22px); }

/* ---- separador entre secciones (31-jul) --------------------------------
   Un renglón de módulos, mismo alto que un módulo. Fondo hueso para que la
   tira se lea como un respiro entre dos secciones y no como parte de ninguna. */
.sep{ position:relative; z-index:11; width:100%; line-height:0; font-size:0;
      background:var(--bone); overflow:hidden; }
.sep canvas{ display:block; }

/* ---- las 8 puertas de bienestar dentro del riel del spa (3-ago) ----------
   Van con el tratamiento estándar del acordeón (caja hueso abajo a la
   izquierda), no con el blanco-sobre-foto de las tarjetas del spa: así se
   distingue de un golpe qué es un servicio y qué es una página que abre. */
.pil-card{ text-decoration:none; color:inherit; }
.pil-card::after{ content:none !important; }
.pil-card .acc-tab{ gap:8px; padding:9px 7px 11px; }
.pil-card .acc-cell{ width:7px; height:7px; }
.pil-card .acc-min{ font-size:9.5px; letter-spacing:.06em; }
.pil-card .acc-info{ max-width:min(420px,92%); padding:18px 24px 20px; }
.pil-card .pil-kick{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); }
.pil-card .acc-info em:not(.pil-kick){ font-size:14px; line-height:1.55; }
.pil-card .link-arrow{ margin-top:6px; font-size:12.5px; }


/* ---- el hero entrega de inmediato (3-ago) ------------------------------
   El pin del umbral deja 100vh de su propio alto scrolleando después de que
   el fundido a beige ya cerró: eran ~900px de pantalla vacía. La tira
   separadora y las suites suben sobre ese tramo, igual que hace
   #entertainment con el cover de OCEANVS. */
.umbral + .sep{ margin-top:-100vh; position:relative; z-index:12; }
.no-anim .umbral + .sep{ margin-top:0; }

/* ---- hoja de compartir de la postal (3-ago) ----------------------------
   El botón mandaba la postal por correo o la bajaba. Ahora se ofrece el
   menú nativo del sistema (WhatsApp, Mail, AirDrop…) donde existe, y donde
   no —escritorio— se ofrecen los canales a mano. */
.pol-share{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--bone); }
.pol-share[hidden]{ display:none; }
.pol-share > .meta{ font-size:9.5px; opacity:.65; }
.pol-share-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.pol-ch{
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
  background:none; border:1px solid rgba(250,249,247,.4); color:var(--bone);
  padding:14px 18px 12px; min-width:92px;
  font-family:var(--sans); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.pol-ch[hidden]{ display:none; }
.pol-ch:hover{ background:var(--bone); color:var(--cacao); border-color:var(--bone); }
.pol-ch svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.pol-share-msg{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; opacity:0; transition:opacity .3s ease; min-height:14px; }
.pol-share-msg.is-on{ opacity:.8; }
@media (max-width:620px){ .pol-ch{ min-width:76px; padding:12px 12px 10px; } }

/* ============================================================
   FOOTER DE PÁGINA · vivía repetido inline en 14 páginas.
   Aquí una sola vez, para que todas lo tengan igual.
   ============================================================ */
.pfooter{ border-top:1px solid rgba(74,38,24,.18); margin-top:clamp(30px,6vh,80px);
  padding:clamp(34px,6vh,72px) var(--pad) clamp(24px,4vh,44px); }
.pfoot-cols{ max-width:1180px; margin:0 auto; display:grid; gap:clamp(22px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.pfoot-cols .f-col a, .pfoot-cols .f-col p{ display:block; font-size:14px; line-height:1.75; text-decoration:none; color:inherit; }
.pfoot-cols .f-col a:hover{ color:var(--clay); }
.pfoot-cols .f-head{ color:var(--clay); margin-bottom:10px; }
.pfoot-base{ max-width:1180px; margin:clamp(26px,4vh,48px) auto 0; padding-top:18px;
  border-top:1px solid rgba(74,38,24,.14); display:flex; flex-wrap:wrap; gap:8px 30px;
  justify-content:space-between; font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; }

/* variante oscura: las páginas de bienestar/ y que-hacer/ son foto a sangre
   con fondo fijo, así que el footer necesita fondo sólido y quedar por encima */
.pfooter-dark{ position:relative; z-index:3; margin-top:0; background:var(--cacao); color:var(--sand);
  border-top-color:rgba(255,236,190,.22); }
.pfooter-dark .pfoot-base{ border-top-color:rgba(255,236,190,.18); }
.pfooter-dark .f-col a:hover{ color:var(--amber); }
.pfooter-dark .f-head{ color:var(--amber); }

/* ============================================================
   HEADER SOBRE FOTO · bienestar/ y que-hacer/ abren con foto a
   sangre y el header iba en clay: sobre la imagen no se leía.
   Aquí va en bone, con una sombra mínima para despegarlo.
   ============================================================ */
.nav.is-onphoto{ color:var(--bone); text-shadow:0 1px 16px rgba(20,9,4,.55), 0 1px 3px rgba(20,9,4,.30); }
.nav.is-onphoto .nav-logo,
.nav.is-onphoto .nav-links a,
.nav.is-onphoto .nav-util,
.nav.is-onphoto .lang-toggle{ color:var(--bone); }
.nav.is-onphoto .nav-book{ background:var(--clay); color:var(--bone); text-shadow:none; }
.nav.is-onphoto .nav-book::before{ background:var(--bone); }
.nav.is-onphoto .nav-book:hover{ color:var(--cacao); }
.nav.is-onphoto .nav-burger{ color:var(--bone); }