/* ============================================================
   IBAGARI BOUTIQUE HOTEL — Homepage prototype v2
   Design tokens + section styles
   Type: Cormorant Garamond (display) + Manrope (ui/body) — locked v1
   ============================================================ */

:root {
  /* Palette (brand-locked) */
  --white: #ffffff;
  --ink: #363838;            /* Gris Antracita — all text */
  --ink-soft: #5c5e5e;
  --perla: #a6a89e;
  --perla-tint: #f2f2f0;
  --oceano: #618082;
  --oceano-tint: #e7ecec;
  --madera: #a6612e;         /* single CTA color */
  --madera-tint: #f2e7e0;
  --agua: #63b0b5;
  --agua-tint: #e8f3f4;
  --ocre: #cfb087;
  --ocre-tint: #f8f3ed;

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", -apple-system, "Helvetica Neue", sans-serif;

  --text-xs: 0.8125rem;   /* 13px — piso de etiquetas; nada de tipografía menor */
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.95rem + 0.28vw, 1.1875rem);  /* 19px @1440 */
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --display-sm: clamp(1.6rem, 1.3rem + 1.5vw, 2.6rem);
  --display-md: clamp(2.2rem, 1.7rem + 2.6vw, 4rem);
  --display-lg: clamp(2.6rem, 2rem + 4vw, 5.5rem);

  /* Display scale by ROLE, not by section — every headline picks one of these four,
     no exceptions. Sizes shown @1440px. The hero is the one element allowed to sit
     between tiers: it is nowrap, so its size is capped by how long the line is. */
  --type-statement: clamp(2.6rem, 2rem + 3.9vw, 5.5rem);   /* ~88px — full-bleed declarations over imagery */
  --type-section:   clamp(2.1rem, 1.7rem + 2.55vw, 4.25rem);/* ~64px — section titles */
  --type-feature:   clamp(1.5rem, 1.3rem + 1.6vw, 2.9rem);  /* ~44px — names in lists, pull quotes, support lines */
  --type-texture:   clamp(1.6rem, 1.5rem + 1.15vw, 2.8rem); /* ~40px — marquee; sits UNDER content, never above */

  /* Space */
  --space-section: clamp(6rem, 5rem + 8vw, 12rem);
  --space-half: clamp(3rem, 2.5rem + 4vw, 6rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 68ch;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow: 1.2s;
  --dur-med: 0.8s;

  /* Z scale */
  --sticky-h: calc(67px + env(safe-area-inset-bottom, 0px));  /* alto real de la barra fija de móvil */
  --z-sticky-bar: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-preloader: 70;
}

/* ------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--madera); }

p { text-wrap: pretty; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------
   Shared atoms
   ------------------------------------------------------------ */
.container { width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto; }

/* Eyebrow — brand system: line flankers + tracked small caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.825rem; /* keep eyebrows readable — no micro type */
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow::before, .eyebrow::after {
  content: ""; height: 1px; width: 2.5rem; background: var(--perla);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.85); }
.eyebrow--light::before, .eyebrow--light::after { background: rgba(255, 255, 255, 0.4); }

/* Chapter label — the page's numbered spine (N°01…N°05) */
.chapter {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--madera);
}
.chapter::after { content: ""; height: 1px; width: 3rem; background: var(--madera); opacity: 0.45; }
.chapter--light { color: var(--white); opacity: 0.9; }
.chapter--light::after { background: var(--white); }

.section-head { display: grid; gap: 1.1rem; justify-items: center; text-align: center; }
/* Tamaño base del título de sección. Antes cada sección se lo asignaba por
   separado y cualquier sección nueva caía al tamaño de h2 genérico — así los
   h3 de una página interna terminaban más grandes que sus h2. */
.title { font-size: var(--type-section); }

/* CTA pill — Marrón Madera only */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  white-space: nowrap;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  background: var(--madera);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--ease-out);
}
.btn > span { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }

.btn--line { background: transparent; box-shadow: inset 0 0 0 1px var(--perla); color: var(--ink); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: var(--white); }

.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--white); color: var(--white); }
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover { color: var(--ink); }

/* Underline arrow link */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--madera);
  padding-bottom: 0.4rem;
  position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor;
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.link-arrow:hover::after { transform: scaleX(0.35); }
.link-arrow svg { transition: transform 0.5s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow--light { color: var(--white); }

/* JS word-split atoms: .w = mask, .wi = moving word (titles); .ink/.inki = ink-fill words */
.w { display: inline-block; overflow: clip; padding-bottom: 0.14em; margin-bottom: -0.14em; vertical-align: top; }
.wi { display: inline-block; will-change: transform; }
.ink { display: inline; }
.inki { display: inline; }

/* Masked manifesto lines */
.mline { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.06em; }
.mline > span { display: block; will-change: transform; }

/* ------------------------------------------------------------
   Booking pill (hero) + shared calendar
   ------------------------------------------------------------ */
/* Vidrio tipo iOS: translúcida sobre el video, borde fino luminoso y un
   reflejo interior arriba. Alargada, para que lea como una sola pieza. */
.bookbar {
  display: flex; align-items: center;
  width: min(100%, 60rem);
  margin-top: 1.4rem;
  padding: 0.4rem 0.4rem 0.4rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 24px 60px -26px rgba(0, 0, 0, 0.65);
}
.bookbar__f {
  flex: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 0.9rem;
  padding: 0.95rem 1.4rem;
  border: 0; background: none; cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}
.bookbar__f--guests { cursor: default; border-right: 0; }
.bookbar__lb {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ocre);
}
.bookbar__vl {
  font-family: var(--font-display); font-size: 1.45rem; line-height: 1; color: var(--white);
  font-variant-numeric: tabular-nums;
}
.bookbar__f:hover .bookbar__vl { color: var(--ocre); }
.bookbar__sel {
  font-family: var(--font-display); font-size: 1.45rem; line-height: 1; color: var(--white);
  border: 0; background: none; padding: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.bookbar__sel option { color: var(--ink); }
.bookbar__go {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 3rem;
  border-radius: 999px; background: var(--madera); color: var(--white);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.4s var(--ease-out);
}
.bookbar__go:hover { background: var(--ink); }

/* ---- calendar ---- */
.cal { position: fixed; inset: 0; z-index: calc(var(--z-menu) + 5); display: grid; place-items: center; }
.cal[hidden] { display: none; }
.cal::before { content: ""; position: absolute; inset: 0; background: rgba(30, 32, 32, 0.55); }
.cal__sheet {
  position: relative; z-index: 1;
  width: min(100% - 2 * var(--gutter), 27rem);
  max-height: 88vh; overflow-y: auto;
  background: var(--white); border-radius: 4px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
}
.cal__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.cal__title {
  flex: 1; text-align: center;
  font-family: var(--font-display); font-size: 1.45rem; color: var(--ink);
}

.cal__nav, .cal__close {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--perla-tint); color: var(--ink); font-size: 1rem;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.cal__nav:hover, .cal__close:hover { border-color: var(--madera); color: var(--madera); }
.cal__nav:disabled { opacity: 0.3; cursor: default; }
.cal__grids { display: grid; }
.cal__m { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__dow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--perla); text-align: center; padding-bottom: 0.5rem;
}
.cal__d {
  aspect-ratio: 1; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink);
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.cal__d:disabled { color: var(--perla); cursor: default; opacity: 0.45; }
.cal__d:not(:disabled):hover { background: var(--oceano-tint); }
.cal__d.is-edge { background: var(--madera); color: var(--white); }
.cal__d.is-mid { background: var(--madera-tint); border-radius: 0; }
.cal__d.is-empty { visibility: hidden; }
/* el panel es estrecho: el pie va apilado o el resumen se parte en cuatro líneas */
.cal__foot {
  display: grid; gap: 1rem;
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--perla-tint);
}
.cal__sum { font-size: 0.9375rem; color: var(--ink-soft); text-align: center; }
.cal__actions { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.cal__clear {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--perla);
}
.cal__done[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

@media (max-width: 900px) {
  .bookbar { display: none; }               /* móvil usa el botón Book de la barra fija */
  .cal { place-items: end center; }
  .cal__sheet { width: 100%; border-radius: 12px 12px 0 0; max-height: 92vh; }



}

/* ------------------------------------------------------------
   Preloader
   ------------------------------------------------------------ */
.preloader {
  position: fixed; inset: 0;
  background: var(--white);
  z-index: var(--z-preloader);
  display: grid; place-content: center; justify-items: center; gap: 1.6rem;
}
.preloader__logo {
  width: clamp(130px, 16vw, 190px);
  animation: isotype-breathe 2.6s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes isotype-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.04); }
}
.preloader.is-done { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .preloader__logo { animation: none; } }

/* ------------------------------------------------------------
   Header — centered logo, split nav
   ------------------------------------------------------------ */
.header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: transform 0.6s var(--ease-out), background 0.45s ease, box-shadow 0.45s ease;
}
.header__inner {
  display: grid;
  /* minmax(0,…): un track 1fr tiene piso de min-content, así que en móvil la
     cabecera se ensanchaba a 429px dentro de un viewport de 390 y el logo
     quedaba descentrado ~20px a la derecha. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--gutter);
}
.header__logo { justify-self: center; display: block; }
.header__logo img { height: 74px; width: auto; transition: filter 0.45s ease, height 0.45s ease; }

.header__right { justify-self: end; display: flex; align-items: center; gap: clamp(1.2rem, 2vw, 2rem); }

.header__lang {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--white); transition: color 0.45s ease;
  white-space: nowrap;
}
.header__lang span { opacity: 0.5; }

.header__book { padding: 1rem 2.2rem; font-size: 0.8125rem; }

/* Booking CTA: a thin line of light traces itself around the pill */

.header__burger {
  justify-self: start;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 0.2rem;
}
.header__burger-lines { display: grid; gap: 6px; }
.header__burger i {
  width: 34px; height: 2px; background: var(--white);
  transition: background 0.45s ease, transform 0.45s var(--ease-out), opacity 0.3s ease;
}
.header__burger-label {
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--white);
  transition: color 0.45s ease;
}
.header__burger:hover i:nth-child(2) { transform: scaleX(0.7); transform-origin: left; }

/* over hero: logo white */
.header .header__logo img { filter: brightness(0) invert(1); }

/* solid state */
.header.is-solid { background: var(--white); box-shadow: 0 1px 24px rgba(54, 56, 56, 0.08); }

/* Sobre el hero la cabecera es transparente y el botón quedaba del mismo madera
   que la barra de reserva justo debajo: dos píldoras del mismo color a un palmo.
   Aquí va de vidrio, y recupera el madera cuando la cabecera se vuelve sólida. */
.header:not(.is-solid) .header__book {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--white);
}
.header:not(.is-solid) .header__book::before { background: var(--white); }
.header:not(.is-solid) .header__book:hover { color: var(--ink); }
.header.is-solid .header__logo img { filter: none; height: 58px; }
.header.is-solid .header__lang,
.header.is-solid .header__burger-label { color: var(--ink); }
.header.is-solid .header__burger i { background: var(--ink); }

.header.is-hidden { transform: translateY(-102%); }

/* menu-open state */
.header.is-menu-open .header__burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header.is-menu-open .header__burger i:nth-child(2) { opacity: 0; }
.header.is-menu-open .header__burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.header.is-menu-open .header__logo img { filter: none; }
.header.is-menu-open .header__lang { color: var(--ink); }
.header.is-menu-open .header__burger-label { color: var(--ink); }
.header.is-menu-open .header__burger i { background: var(--ink); }
.header.is-menu-open { background: transparent; box-shadow: none; }
.header__nav, .header__lang { transition: opacity 0.4s ease; }

@media (max-width: 900px) {
  .header__logo img { height: 56px; }
  .header.is-solid .header__logo img { height: 48px; }
  .header__burger-label { display: none; }
}
@media (max-width: 700px) {
  .header__book, .header__lang { display: none; }
}

/* ------------------------------------------------------------
   Mega menu — columned IA + featured image
   ------------------------------------------------------------ */
.menu {
  position: fixed; inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--white);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  visibility: hidden;
}
.menu.is-open { visibility: visible; }

.menu__panel {
  display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 5vh, 3.5rem);
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) 3rem clamp(2rem, 6vw, 6rem);
}
.menu__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.menu__primary { display: grid; gap: 0.4rem; align-content: start; }
.menu__primary a {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.2;
  color: var(--ink);
  width: fit-content;
  transition: opacity 0.4s ease, color 0.4s ease, font-style 0.2s;
}
.menu__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vh, 3rem) clamp(1.5rem, 3vw, 3rem);
}
.menu__group { display: grid; gap: 0.4rem; align-content: start; }
.menu__group h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--perla);
  margin-bottom: 0.5rem;
}
.menu__group a {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
  line-height: 1.3;
  color: var(--ink);
  width: fit-content;
  transition: opacity 0.4s ease, color 0.4s ease, font-style 0.2s;
}
.menu__nav.is-hovering a:not(:hover) { opacity: 0.3; }
.menu__primary a:hover, .menu__group a:hover { color: var(--madera); font-style: italic; }

.menu__utility {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem;
  padding-top: clamp(1rem, 2.5vh, 1.8rem);
  border-top: 1px solid var(--perla-tint);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.menu__utility a { transition: color 0.3s ease; }
.menu__utility a:hover { color: var(--madera); }
/* Redes: texto en escritorio, sólo icono en móvil (el aria-label del enlace
   mantiene el nombre para lectores de pantalla). */
.menu__socials { display: inline-flex; align-items: center; gap: 1.6rem; }
.menu__social { display: inline-flex; align-items: center; }
.menu__ico { display: none; width: 20px; height: 20px; }

.menu__credential {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.menu__credential img { height: 15px; width: auto; }
@media (max-width: 900px) {
  .menu__credential { margin-left: 0; flex-basis: 100%; }
}

.menu__figure { position: relative; overflow: hidden; }
.menu__figure img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s ease;
}
.menu__figure img.is-active { opacity: 1; }
.menu__figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.35), transparent 30%);
}

/* Mobile menu — normal phones get the roomy single-column version (scrolls if needed) */
@media (max-width: 900px) {
  .menu { grid-template-columns: 1fr; overflow-y: auto; }
  .menu__figure { display: none; }
  /* El espaciado escala con la altura de pantalla: en un iPhone de 844 entra
     justo, y en uno de 932 usa los ~150px que sobraban abajo para respirar. */
  .menu__panel {
    padding: 5.3rem var(--gutter) 0.5rem;
    justify-content: flex-start;
    gap: 1.5rem;
  }
  .menu__nav { grid-template-columns: 1fr; gap: 1.4rem; }
  .menu__cols { grid-template-columns: 1fr; gap: 1.1rem; }
  .menu__group { gap: 0.2rem; }
  .menu__group h4 { margin-bottom: 0.3rem; }
  .menu__group a { line-height: 1.22; }
  .menu__primary { gap: 0.1rem; }
  .menu__primary a { font-size: 1.75rem; line-height: 1.3; }
  .menu__utility { gap: 0.9rem 1.4rem; padding-top: 0.9rem; }
  .menu__socials { gap: 1.2rem; }
  .menu__social .menu__lbl { display: none; }
  .menu__social .menu__ico { display: block; }
  .menu__credential { padding-top: 0.2rem; }
}
/* Short screens only: compact so everything fits without scrolling */
@media (max-width: 900px) and (max-height: 820px) {
  .menu__panel { padding: 5rem var(--gutter) 1.5rem; gap: 1.5rem; }
  .menu__nav { gap: 1.5rem; }
  .menu__primary { gap: 0.15rem; }
  .menu__primary a { font-size: 1.65rem; line-height: 1.35; }
  .menu__cols { grid-template-columns: 1fr 1fr; gap: 1.3rem 1.5rem; }
  .menu__group { gap: 0.25rem; }
  .menu__group h4 { margin-bottom: 0.3rem; }
  .menu__group a { font-size: 1.05rem; line-height: 1.4; }
  .menu__utility { gap: 0.9rem 1.2rem; padding-top: 0.9rem; }
}
/* Menú móvil, opción C: pestañas + botones (el JS crea .menu__tabs).
   Todo enlace mide al menos 44px de alto para el dedo; nada de scroll. */
.menu__tabs { display: none; }
@media (max-width: 900px) {
  .menu__panel { padding-top: 4.9rem; gap: 1rem; }
  .menu__nav { gap: 0.9rem; }
  .menu__primary { gap: 0; }
  .menu__primary a { display: flex; align-items: center; min-height: 44px; font-size: 1.65rem; line-height: 1.1; }
  .menu__cols { display: block; }
  .menu__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--perla-tint); }
  .menu__tab {
    min-height: 46px; background: none; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--perla); box-shadow: inset 0 -2px 0 transparent; transition: color 0.25s, box-shadow 0.25s;
  }
  .menu__tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--madera); }
  .menu__group { display: none; }
  .menu__group.is-tab { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
  .menu__group h4 { display: none; }
  .menu__group a, .menu__group.is-tab a {
    display: flex; align-items: center; width: auto; min-height: 46px; padding: 0.35rem 0.85rem;
    background: var(--perla-tint); border-radius: 10px;
    font-size: 1.2rem; line-height: 1.15;
  }
  .menu__group a.menu__desk-only { display: none; }
  .menu__utility { padding-top: 0.8rem; gap: 0.8rem 1.2rem; }
  /* EN / ES ya están en el header en móvil */
  .menu__utility > a:nth-child(-n+2) { display: none; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: clip; background: var(--white); }
.hero__media { position: absolute; inset: 0; will-change: transform; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* La banda central estaba a 0.06 y detrás del titular la luminancia daba 189/255
   — un contraste de 1.89:1 con texto blanco, por debajo del 3:1 que pide WCAG
   para texto grande. La rampa ahora sostiene ~0.40 en la franja del titular. */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(24, 26, 26, 0.66) 0%,
    rgba(24, 26, 26, 0.54) 22%,
    rgba(24, 26, 26, 0.42) 42%,
    rgba(24, 26, 26, 0.18) 68%,
    rgba(24, 26, 26, 0.32) 100%);
}
.hero__content {
  position: absolute; inset: 0;
  display: grid; place-content: end center; justify-items: center;
  text-align: center;
  padding: 0 var(--gutter) clamp(5.5rem, 14vh, 9rem);
  color: var(--white);
  gap: 1.4rem;
}
.hero__title {
  font-size: var(--type-statement);
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: min(16ch, calc(100vw - 2 * var(--gutter)));
}
/* Desktop: single-line hero statement (Damai pattern); mobile keeps the wrap */
@media (min-width: 901px) {
  .hero__title {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(2.8rem, 5.1vw, 5.5rem);
  }
}
.hero__title em { color: var(--white); }
.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: var(--white); opacity: 0.85;
  display: grid; justify-items: center; gap: 0.5rem;
  font-size: 0.8125rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.hero__scroll i {
  width: 1px; height: 44px; background: rgba(255,255,255,0.35);
  position: relative; overflow: hidden; display: block;
}
.hero__scroll i::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%; background: var(--white);
  animation: scrollhint 2.4s var(--ease-out) infinite;
}
@keyframes scrollhint { 0% { top: -50%; } 60%, 100% { top: 110%; } }

/* ------------------------------------------------------------
   Direct booking benefits — slim ticker under the hero
   ------------------------------------------------------------ */
.benefits {
  position: relative;
  overflow: clip;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(166, 97, 46, 0.14);
  background: var(--ocre-tint);
}
.benefits__track { display: flex; width: max-content; will-change: transform; }
.benefits__close {
  position: absolute; top: 50%; right: var(--gutter);
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--perla);
  transition: color 0.3s ease, background 0.3s ease;
}
.benefits__close:hover { color: var(--ink); background: var(--perla-tint); }
/* en móvil la barra corre sola y la X queda encima del texto en movimiento */
@media (max-width: 900px) { .benefits__close { display: none; } }

/* En móvil el rótulo se ancla y sólo corren los beneficios: pasan por DEBAJO
   del bloque opaco, así que no hace falta desplazar la pista (que se anima por
   porcentaje y se desalinearía con cualquier padding). Patrón Kamezi. */
.benefits__pin { display: none; }
@media (max-width: 900px) {
  .benefits__pin {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center;
    padding-inline: var(--gutter) 2rem;
    background: var(--ocre-tint);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--madera);
    white-space: nowrap;
  }
  /* difuminado para que el texto no aparezca de golpe al salir del bloque */
  .benefits__pin::after {
    content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 2.2rem;
    background: linear-gradient(to right, var(--ocre-tint), rgba(248, 243, 237, 0));
  }
  .benefits__label { display: none; }
}

/* Estático y centrado en escritorio: el contenido cabe de sobra, así que la
   marquesina no aportaba nada y sólo entorpecía la lectura. */
@media (min-width: 901px) {
  .benefits__track {
    width: 100%;
    justify-content: center;
    will-change: auto;
  }
  .benefits__group { padding-right: 0; }
}
.benefits__group {
  display: flex; align-items: baseline;
  gap: clamp(1.1rem, 2.2vw, 2rem);
  padding-right: clamp(1.1rem, 2.2vw, 2rem);
  white-space: nowrap;
}
.benefits__label {
  font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--madera);
}
/* los beneficios en la display, como la marquesina: el label es la etiqueta,
   no el mensaje, así que se queda en la de texto y en cuerpo chico */
.benefits__item {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  font-weight: 400; line-height: 1.1;
  color: var(--ink);
}
.benefits__star {
  align-self: center;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--ocre);
  transform-origin: 50% 50%;
  animation: benefit-spin 16s linear infinite;
}
/* desfasadas para que no giren al unísono */
.benefits__star:nth-child(5) { animation-duration: 21s; animation-delay: -7s; }
.benefits__star:nth-child(7) { animation-duration: 18s; animation-delay: -3s; }
@keyframes benefit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* en escritorio la fila termina en el último beneficio; la estrella de cierre
   sólo existe para separar los grupos de la marquesina móvil */
@media (min-width: 901px) {
  .benefits__star--tail { display: none; }
}
/* no-JS / reduced motion: static centered row instead of a ticker */
@media (prefers-reduced-motion: reduce) {
  .benefits__track { width: auto; justify-content: center; }
  .benefits__group { flex-wrap: wrap; justify-content: center; white-space: normal; padding-right: 0; }
  .benefits__group + .benefits__group { display: none; }
  .benefits__star { animation: none; }
}

/* ------------------------------------------------------------
   N°01 · The Bay — centred manifesto + infinite photo carousel
   ------------------------------------------------------------ */
.bay { overflow: clip; }
.bay__inner {
  --bay-gap: clamp(0.9rem, 1.6vw, 1.6rem);
  position: relative;
  display: grid; justify-items: center;
  gap: clamp(2.6rem, 5vw, 4.2rem);
  padding: var(--space-half) var(--gutter);
}
.bay__center {
  position: relative; z-index: 2;
  display: grid; gap: 1.7rem; justify-items: center; text-align: center;
  max-width: 46rem;
}
.manifesto {
  font-size: var(--type-statement);
  line-height: 1.06;
}
.manifesto em { font-style: italic; color: var(--madera); }
.bay__body {
  max-width: 48ch;
  font-size: var(--text-lead);
  line-height: 1.9;
  display: grid; gap: 1.3rem;
}
.bay__credential {
  display: inline-flex; align-items: center; gap: 1.2rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--perla-tint);
}
.bay__credential img { height: 22px; width: auto; }
.bay__credential span {
  font-size: 0.825rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* the carousel — four equal frames, looping forever */
.bay__rail {
  position: relative;
  width: 100%;
  display: flex; align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
}
.bay__viewport { flex: 1 1 auto; min-width: 0; overflow: clip; }
.bay__track {
  display: flex; gap: var(--bay-gap);
  list-style: none; margin: 0; padding: 0;
  will-change: transform;
}
.bay__slide {
  flex: 0 0 calc((100% - 3 * var(--bay-gap)) / 4);
  aspect-ratio: 3 / 4;
  overflow: clip;
  background: var(--perla-tint);
}
.bay__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bay__nav {
  flex: none;
  width: clamp(38px, 3.2vw, 46px); height: clamp(38px, 3.2vw, 46px);
  display: grid; place-items: center;
  border: 1px solid var(--perla-tint);
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.bay__nav:hover { color: var(--white); background: var(--madera); border-color: var(--madera); }
.bay__nav:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }

@media (min-width: 901px) {
  .bay__inner { padding-block: clamp(9.5rem, 16vh, 13.5rem) clamp(7rem, 12vh, 10rem); }
  .bay__center { max-width: none; width: min(100%, 96rem); gap: 1.8rem; }
  /* una sola línea: el vw acota el cuerpo para que no se corte entre 901 y 1200 */
  .bay__center .manifesto { font-size: min(var(--type-statement), 6.1vw); white-space: nowrap; }
  .bay__body { font-size: var(--text-lead); line-height: 1.8; gap: 1rem; max-width: none; width: min(100%, 57rem); }
  .bay__rail { width: min(100%, 96rem); }
}

/* mobile keeps the approved 2x2 grid with the statement in the middle —
   the rail collapses (display:contents) so the slides become grid items */
@media (max-width: 900px) {
  .bay__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    justify-items: stretch;
  }
  .bay__rail, .bay__viewport, .bay__track { display: contents; }
  .bay__nav { display: none; }
  .bay__slide { aspect-ratio: auto; }
  .bay__slide img { height: 56vw; }
  .bay__slide--x { display: none; }
  .bay__slide--a { grid-row: 1; grid-column: 1; }
  .bay__slide--b { grid-row: 1; grid-column: 2; }
  .bay__center { grid-row: 2; grid-column: 1 / -1; margin: 4.2rem 0 3rem; max-width: none; }
  .bay__slide--c { grid-row: 3; grid-column: 1; }
  .bay__slide--d { grid-row: 3; grid-column: 2; }
  .bay__credential { grid-row: 4; grid-column: 1 / -1; justify-self: center; margin-top: 2.6rem; }
}
@media (max-width: 480px) {
  .bay__credential { flex-direction: column; align-items: center; gap: 0.8rem; }
  .bay__credential span { white-space: normal; }
}

/* ------------------------------------------------------------
   The name — dictionary entry (Damai pattern)
   ------------------------------------------------------------ */
.definition { background: var(--perla-tint); padding: var(--space-section) var(--gutter); }
.definition__inner {
  max-width: 44rem; margin-inline: auto;
  display: grid; gap: 1.2rem; justify-items: center; text-align: center;
}
.definition__word {
  font-size: var(--type-statement);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.definition__phon {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.definition__phon i { font-style: italic; }
.definition__senses {
  list-style: none;
  display: grid; gap: 0.4rem;
  padding: 1.4rem 0;
  border-block: 1px solid rgba(166, 168, 158, 0.4);
  width: min(100%, 30rem);
}
.definition__senses li {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 1.2vw, 2.2rem);
  line-height: 1.4;
}
.definition__senses li span { color: var(--madera); font-size: 0.7em; padding-right: 0.6rem; font-variant-numeric: tabular-nums; }
.definition__senses li em { font-style: italic; color: var(--madera); }
.definition__note {
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.9;
}
.definition__note i { font-style: italic; font-family: var(--font-display); font-size: 1.1em; color: var(--ink); }
.definition__phon .stress { opacity: 0.55; }

/* ------------------------------------------------------------
   Reef — full-bleed video divider, expands on scroll
   ------------------------------------------------------------ */
/* Window shorter than the locked footage, so the reveal is clearly visible */
.reef { position: relative; height: clamp(30rem, 82vh, 48rem); }
.reef__stage {
  position: relative;
  height: 100%;
  overflow: clip;
  background: var(--ink);
  will-change: clip-path;
}
/* The water is locked to the viewport (JS counter-translates it), so the section
   travels over it like a window instead of the footage scrolling with the page. */
.reef__video {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 118svh; object-fit: cover; /* taller than the window it shows through */
  will-change: transform;
}
/* Móvil: sin contra-desplazamiento (temblaba con el scroll nativo); el video llena la sección */
@media (max-width: 900px) { .reef__video { height: 100%; will-change: auto; } }
.reef__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(28, 46, 48, 0.25), rgba(28, 46, 48, 0.42));
}
.reef__line {
  position: absolute; inset: 0;
  z-index: 1;
  display: grid; align-content: center; justify-items: center;
  padding: 0 var(--gutter);
  text-align: center;
  color: var(--white);
  font-size: var(--type-statement);
  line-height: 1.16;
  font-weight: 500;
  text-shadow: 0 1px 24px rgba(20, 34, 36, 0.28);
}
.reef__line em { font-style: italic; color: var(--white); }
.reef__line i { font-style: italic; }

/* ------------------------------------------------------------
   Marquee
   ------------------------------------------------------------ */
.marquee {
  /* tight band — it is texture between sections, not a section of its own */
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.4rem) 0;
  overflow: clip;
  border-block: 1px solid var(--perla-tint);
}
.marquee__track { display: flex; gap: 0; width: max-content; will-change: transform; }
.marquee__group {
  display: flex; align-items: baseline; gap: 3.5rem;
  padding-right: 3.5rem;
  font-family: var(--font-display);
  font-size: var(--type-texture);
  color: var(--ink);
  white-space: nowrap;
}
.marquee__group em { font-style: italic; color: var(--madera); }
.marquee__group .dot { color: var(--perla); font-size: 0.5em; align-self: center; }

/* ------------------------------------------------------------
   N°02 · "From Above" pinned slider
   ------------------------------------------------------------ */
/* El escenario se pinea a 80svh en móvil (para no comerse la pantalla), así que
   durante el pin quedan ~190px por debajo. Sin fondo en la sección, ese hueco
   deja ver el documento desplazándose detrás. Mismo color que el escenario. */
.fromabove { position: relative; background: var(--ink); }
.fromabove__stage { position: relative; height: 100svh; min-height: 600px; overflow: clip; background: var(--ink); }
.fromabove__slide { position: absolute; inset: 0; opacity: 0; }
.fromabove__slide:first-child { opacity: 1; }
.fromabove__slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.fromabove__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30, 32, 32, 0.6), rgba(30, 32, 32, 0.08) 55%);
}
.fromabove__caption {
  position: absolute; inset: auto 0 0 0;
  z-index: 2;
  padding: 0 var(--gutter) clamp(4.5rem, 11vh, 7.5rem);
  display: grid; justify-items: center; text-align: center; gap: 1rem;
  color: var(--white);
  pointer-events: none;
}
.fromabove__caption .cap-eyebrow {
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  opacity: 0.85;
}
.fromabove__caption h3 { font-size: var(--type-section); max-width: min(90vw, 34ch); }
.fromabove__caption p { max-width: 52ch; opacity: 0.92; font-size: var(--text-lead); }
.fromabove__ui {
  position: absolute; z-index: 3;
  inset: auto 0 1.6rem 0;
  display: flex; align-items: center; justify-content: center; gap: 1.4rem;
  color: var(--white);
}
.fromabove__counter { font-size: var(--text-xs); letter-spacing: 0.24em; font-variant-numeric: tabular-nums; }
.fromabove__progress { width: clamp(6rem, 16vw, 12rem); height: 1px; background: rgba(255,255,255,0.25); }
.fromabove__progress i { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: left; }
.fromabove__arrow { padding: 0.7rem; opacity: 0.85; transition: opacity 0.3s ease; color: var(--white); }
.fromabove__arrow:hover { opacity: 1; }

@media (max-width: 900px) {
  /* Ocupa toda la pantalla menos la barra fija: a 100svh el pie del slider
     -contador y flechas- quedaba escondido detrás de la barra. */
  .fromabove__stage { height: calc(100svh - var(--sticky-h)); min-height: 460px; }
  .fromabove__caption { padding-bottom: clamp(3.5rem, 8vh, 5rem); gap: 0.7rem; }
  .fromabove__caption h3 { max-width: 20ch; }
}

/* ------------------------------------------------------------
   Rooms — horizontal card rail showing every room type (Izza)
   ------------------------------------------------------------ */
.rooms {
  margin-block-start: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
  padding-block: clamp(2rem, 3vw, 3.5rem) clamp(2.5rem, 4vw, 4rem);
  /* ScrollTrigger pinea ESTA sección: al volverse position:fixed, sin fondo
     propio deja ver las secciones que pasan por detrás. Y debe llenar la
     pantalla: si mide menos que el viewport queda una franja muerta debajo
     mientras dura el pin. */
  background: var(--white);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}
.rooms__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 3vw, 3rem);
}
.rooms__heading { display: grid; gap: 1.1rem; justify-items: start; }
.rooms__head .title { font-size: var(--type-section); }
.rooms__all { padding-bottom: 0.6rem; }

/* Vertical scroll drives this rail horizontally (JS pins the section). Native
   overflow scrolling is the no-JS fallback; JS switches it off when it takes over. */
.rooms__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline: max(var(--gutter), (100vw - 82rem) / 2);
}
.rooms__rail.is-driven { overflow: hidden; }
.rooms__rail::-webkit-scrollbar { display: none; }
.rooms__track {
  display: flex;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  padding-inline: max(var(--gutter), (100vw - 82rem) / 2);
  width: max-content;
}

.room { flex: none; width: clamp(290px, 27vw, 420px); }
.room__link { display: block; position: relative; }
.room__media {
  position: relative; overflow: clip; background: var(--ink);
  /* as tall as possible while the pinned stage (head + rail + controls) still fits */
  height: clamp(360px, min(58svh, 100svh - 22rem), 620px);
}
.room__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter 0.6s ease;
}
/* scrim so the overlaid name stays legible on any photo */
.room__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 34, 36, 0.92) 8%, rgba(20, 34, 36, 0.55) 38%, rgba(20, 34, 36, 0.08) 68%, transparent);
  transition: opacity 0.6s ease;
}
.room__link:hover .room__media img { transform: scale(1.05); }
/* Izza's wash on hover — the card cools toward the brand's ocean tone */
.room__link:hover .room__media::after { opacity: 0.86; }
.room__link:hover .room__media img { filter: saturate(0.85) brightness(0.94); }

.room__info {
  position: absolute; inset: auto 0 0 0;
  z-index: 1;
  display: grid; gap: 0.4rem; justify-items: center; text-align: center;
  padding: 1.6rem clamp(1rem, 2vw, 1.6rem) 1.8rem;
  color: var(--white);
}
.room__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
  font-weight: 500;
  line-height: 1.18;
  text-wrap: balance;
}
.room__spec {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.9;
}
.room__price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ocre);
}
.room__cta {
  margin-top: 0.5rem;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  transition: border-color 0.4s ease;
}
.room__link:hover .room__cta { border-color: var(--white); }

.rooms__ui {
  display: flex; align-items: center; gap: 1.4rem;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.rooms__arrow {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--perla);
  color: var(--ink);
  transition: background 0.4s ease, color 0.4s ease;
}
.rooms__arrow:hover { background: var(--ink); color: var(--white); }
.rooms__arrow[disabled] { opacity: 0.3; pointer-events: none; }
.rooms__progress { flex: 1; height: 1px; background: var(--perla-tint); position: relative; }
.rooms__progress i {
  position: absolute; inset: 0 auto 0 0;
  display: block; height: 100%; background: var(--madera);
  transform-origin: left;
  transition: width 0.3s var(--ease-out);
  width: 25%;
}

@media (max-width: 900px) {
  .rooms { margin-block-start: clamp(3rem, 10vw, 4.5rem); }
  .room { width: 66vw; }                       /* one and a half cards visible */
  .room__media { height: clamp(310px, min(54svh, 100svh - 16rem), 500px); }
  .rooms__ui .rooms__arrow { display: none; }
}

/* ------------------------------------------------------------
   Luna Muna — its own chapter (Izza collage + menus + hours)
   ------------------------------------------------------------ */
.lm { background: var(--ocre-tint); padding: var(--space-section) 0; overflow: clip; }
.lm__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;   /* dos mitades iguales; la foto cubre la suya entera */
}
.lm__text { display: grid; gap: 1.4rem; justify-items: start; align-content: center; }
.lm__name { font-size: var(--type-statement); line-height: 1.02; }
.lm__lead { color: var(--ink-soft); max-width: 52ch; font-size: var(--text-lead); line-height: 1.85; }
.lm__lead strong { color: var(--ink); font-weight: 600; }

.lm__menus { display: grid; width: min(100%, 30rem); }
.lm__menus li + li { border-top: 1px solid rgba(166, 168, 158, 0.45); }
.lm__menus a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  transition: color 0.35s ease, padding-inline-start 0.45s var(--ease-out);
}
.lm__menus a svg { color: var(--madera); transition: transform 0.45s var(--ease-out); }
.lm__menus a:hover { color: var(--madera); padding-inline-start: 0.6rem; }
.lm__menus a:hover svg { transform: translateX(5px); }

.lm__hours {
  display: grid; gap: 0.9rem;
  padding: 1.4rem 1.8rem;
  border: 1px solid var(--perla);
  width: min(100%, 30rem);
}
.lm__hours-label {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--madera);
}
.lm__hours dl { display: grid; gap: 0.4rem; }
.lm__hours dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lm__hours dt { font-size: 1.0625rem; color: var(--ink-soft); }
.lm__hours dd { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.lm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; padding-top: 0.4rem; }

.lm__collage { min-height: clamp(26rem, 60vh, 40rem); display: grid; }
.lm__fig { margin: 0; overflow: clip; }
.lm__fig img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .lm { padding-top: 0; }                 /* la foto arranca pegada al borde superior */
  .lm__grid { grid-template-columns: 1fr; gap: 2rem; }
  /* sangrado a los dos lados: el negativo se calcula contra el contenedor, sin
     usar 100vw (que desborda cuando hay barra de scroll) */
  .lm__collage {
    min-height: 0; order: -1;
    margin-inline: calc(50% - 50vw);
  }
  .lm__fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .lm__menus, .lm__hours { width: 100%; }
}

/* ------------------------------------------------------------
   Experiences — alternating blocks, all visible
   ------------------------------------------------------------ */
.xp { padding: var(--space-section) 0; }
.xp__head {
  display: grid; gap: 1.1rem; justify-items: center; text-align: center;
  margin-bottom: var(--space-half);
}
.xp__head .title { font-size: var(--type-section); }

.xp__blocks { display: grid; gap: var(--space-half); }
.xp__block { display: grid; gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }

/* Two-column layout only on desktop. Both children are pinned to row 1 — placing
   only grid-column pushes the second item to a new row under sparse auto-placement,
   which is what left the flipped block's copy sitting below its photo. */
@media (min-width: 901px) {
  .xp__block { grid-template-columns: minmax(0, 60%) minmax(0, 40%); }
  .xp__block .xp__media { grid-area: 1 / 1; }
  .xp__block .xp__body {
    grid-area: 1 / 2;
    padding-inline-end: max(var(--gutter), (100vw - 82rem) / 2);
  }
  .xp__block--flip { grid-template-columns: minmax(0, 40%) minmax(0, 60%); }
  .xp__block--flip .xp__media { grid-area: 1 / 2; }
  .xp__block--flip .xp__body {
    grid-area: 1 / 1;
    padding-inline-end: 0;
    padding-inline-start: max(var(--gutter), (100vw - 82rem) / 2);
  }
}

.xp__media { overflow: clip; }
.xp__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; will-change: transform; }
.xp__body { display: grid; gap: 1.2rem; justify-items: start; }
.xp__eyebrow {
  font-size: 0.825rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--madera);
}
.xp__name { font-size: var(--type-section); line-height: 1.06; }
.xp__body p { color: var(--ink-soft); max-width: 46ch; }

@media (max-width: 900px) {
  .xp__block, .xp__block--flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .xp__block .xp__media, .xp__block--flip .xp__media { grid-column: 1; }
  .xp__block .xp__body, .xp__block--flip .xp__body {
    grid-column: 1;
    padding-inline: var(--gutter);
  }
  .xp__media img { aspect-ratio: 4 / 3; }
  .xp__body p { max-width: none; }
}

/* ------------------------------------------------------------
   Getting here — direct-flight route map
   ------------------------------------------------------------ */
.loc { background: var(--oceano-tint); padding: var(--space-section) 0; }
.loc__head { display: grid; gap: 1.2rem; justify-items: center; text-align: center; }
.loc__head .title { font-size: var(--type-section); }
.loc__lead { max-width: 60ch; color: var(--ink-soft); font-size: var(--text-lead); line-height: 1.9; }

.loc__grid {
  width: min(100% - 2 * var(--gutter), 92rem);
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(0, 3fr) minmax(0, 0.66fr);
  gap: clamp(1rem, 2vw, 2.2rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.loc__map { width: 100%; grid-column: 2; }

.loc__figure { margin: 0; }
/* No frame, no radius, no shadow: the render's own backdrop is levelled to the
   exact value of --oceano-tint, so the image has no edge left to hide. If that
   token ever changes, img/roatan-island.* must be re-levelled to match it. */
.loc__frame { position: relative; overflow: hidden; }
.loc__zoom { position: relative; transform-origin: 50% 50%; }
.loc__img { display: block; width: 100%; height: auto; }

/* the marker rides the image in percentages so it survives any width */
.loc__pin {
  position: absolute;
  left: 10.9%;
  top: 77.7%;
  width: 0; height: 0;
}
.loc__pin-dot,
.loc__pin-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.loc__pin-dot {
  width: 13px; height: 13px;
  background: var(--madera);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 2px 8px rgba(54, 56, 56, 0.3);
}
.loc__pin-ring {
  width: 13px; height: 13px;
  border: 1.5px solid var(--madera);
  animation: locPulse 2.8s ease-out infinite;
}
@keyframes locPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.85; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; }
}
.loc__pin-label {
  position: absolute;
  left: 10.9%;
  top: 77.7%;
  margin-top: 1.35rem;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--madera);
  white-space: nowrap;
  pointer-events: none;
}
.loc__isle {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .loc__pin-ring { animation: none; opacity: 0.5; }
}

.loc__foot { display: grid; justify-items: center; margin-top: clamp(2rem, 4vw, 3.5rem); }

.loc__list { display: grid; align-content: center; gap: 0; }
.loc__list--east .loc__row { text-align: right; }
.loc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.8rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(97, 128, 130, 0.3);
}
.loc__row:last-child { border-bottom: 1px solid rgba(97, 128, 130, 0.3); }
.loc__r-city {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-display); font-size: 1.45rem; color: var(--ink);
}
.loc__r-km {
  grid-column: 2; grid-row: 1; align-self: baseline; white-space: nowrap;
  font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--madera);
}
.loc__r-air { grid-column: 1 / -1; grid-row: 2; font-size: 1.0625rem; color: var(--ink-soft); }
.loc__r-freq {
  grid-column: 1 / -1; grid-row: 3;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  opacity: 0.75;
}

@media (max-width: 900px) {
  /* apiladas, las dos listas son una sola tabla: sin hueco entre ellas y sin
     el borde inferior de la última fila oeste, que duplicaba la línea */
  .loc__grid { grid-template-columns: 1fr; gap: 0; }
  .loc__map { grid-column: 1; grid-row: 1; margin-bottom: 1.2rem; }
  .loc__list--west .loc__row:last-child { border-bottom: 0; }
  .loc__list--west { grid-row: 2; }
  .loc__list--east { grid-row: 3; }
  .loc__list--east .loc__row { text-align: left; }
  .loc__r-city { font-size: 1.3rem; }
}

/* ------------------------------------------------------------
   Weddings — one frame; each moment replaces the one before, growing
   out from inside it. Ground fades light -> dark as the section enters.
   ------------------------------------------------------------ */
/* light blush ground marks where the section begins, before it turns dark */
.wed { background: var(--madera-tint); color: var(--ink); padding-top: var(--space-section); }
.wed__head { display: grid; gap: 1.2rem; justify-items: center; text-align: center; }
.wed__head .title { font-size: var(--type-statement); }
.wed__lead {
  max-width: 62ch; margin-top: 0.6rem;
  font-size: var(--text-lead); line-height: 1.9;
  color: var(--ink-soft);
}

/* JS scrubs this from white to ink on entry; it also needs its own ground because
   pinning takes it out of flow. */
.wed__stage { margin-top: var(--space-half); background: var(--wed-bg); }  /* mismo motivo: se pinea */
.wed__pair {
  display: grid;
  grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: 100svh;                 /* even air above and below the frame */
}
.wed__frame {
  position: relative;
  justify-self: center;
  aspect-ratio: 3 / 4;
  height: min(86svh, 50rem);
  max-width: 100%;
  overflow: clip;
  background: #23302f;
}
.wed__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}
.wed__frame img.is-first { opacity: 1; }

/* Every colour in this section reads from these four tokens, and the scroll
   timeline interpolates them alongside the ground. Defaults are the LIGHT
   state, so the caption is legible the moment it enters — long before the
   background has finished going dark. */
.wed {
  --wed-fg: #363838;
  --wed-fg-soft: #5c5e5e;
  --wed-accent: #a6612e;
  --wed-rule: rgba(54, 56, 56, 0.22);
  --wed-bg: #f2e7e0;
}
.wed__head .title { color: var(--wed-fg); }
.wed__head .title em { color: var(--wed-accent); }
.wed__lead { color: var(--wed-fg-soft); }
.wed__head .eyebrow { color: var(--wed-fg-soft); }

.wed__caption { display: grid; gap: 1.1rem; justify-items: start; color: var(--wed-fg); }
.wed__label {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--wed-accent);
}
.wed__line {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.85rem);
  line-height: 1.24;
  color: var(--wed-fg);
}
.wed__dots { display: flex; gap: 0.5rem; padding-top: 1.2rem; }
.wed__dots i {
  position: relative; display: block;
  width: 46px; height: 2px;
  background: var(--wed-rule);
  overflow: hidden;
}
.wed__dots i b {
  position: absolute; inset: 0 auto 0 0;
  display: block; width: 0%;
  background: var(--wed-accent);
}
/* the ghost CTA rides the same tokens instead of being hard-coded white */
.wed .btn--ghost { box-shadow: inset 0 0 0 1px var(--wed-fg); color: var(--wed-fg); }
.wed .btn--ghost::before { background: var(--wed-fg); }
.wed .btn--ghost:hover { color: var(--wed-bg); }
.wed__dots i.is-done b { width: 100%; }

/* the CTA lives inside the caption, so it stays on screen for every moment */
.wed__cta { display: grid; justify-items: start; padding-top: 1.8rem; }

@media (max-width: 900px) {
  .wed__pair { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; min-height: 0; padding-block: 2rem; }
  /* el escenario se pinea: tiene que cubrir el viewport o queda un hueco */
  .wed__stage { min-height: 100svh; display: grid; align-content: center; }
  .wed__frame { height: min(66svh, 34rem); }
  /* sized so each authored line still fits on one line — two lines, never three */
  .wed__line { font-size: clamp(1.3rem, 5.4vw, 1.7rem); line-height: 1.28; }
  .wed__dots i { width: 34px; }
}

/* ------------------------------------------------------------
   Awards + lifestyle gallery
   ------------------------------------------------------------ */
.awards { padding: var(--space-section) 0; }
.awards__intro {
  max-width: var(--measure); margin-inline: auto; margin-top: 1.6rem;
  text-align: center; color: var(--ink-soft);
  font-size: var(--text-lead); line-height: 1.85;
}
.awards__logos { margin-top: var(--space-half); overflow: clip; position: relative; }
.awards__logos::before, .awards__logos::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8rem; z-index: 1; pointer-events: none;
}
.awards__logos::before { left: 0; background: linear-gradient(to right, var(--white), transparent); }
.awards__logos::after { right: 0; background: linear-gradient(to left, var(--white), transparent); }
.awards__track { display: flex; width: max-content; align-items: center; will-change: transform; }
.awards__group {
  display: flex; align-items: center;
  gap: clamp(4rem, 9vw, 8rem);
  padding-right: clamp(4rem, 9vw, 8rem);
}
.awards__group img {
  height: clamp(110px, 12vw, 160px); width: auto;
  filter: grayscale(1); opacity: 0.9;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.awards__group img:hover { filter: none; opacity: 1; }
/* Wordmark logos need less height than badge-shaped marks. Design Hotels is
   6.8:1 — far longer than the rest — so it gets its own step, matched on WIDTH
   rather than height, otherwise it reads twice the size of everything else. */
.awards__group img.awards__logo--wide { height: clamp(52px, 5.5vw, 76px); }
.awards__group img.awards__logo--xwide { height: clamp(28px, 2.8vw, 40px); }
/* Llaves MICHELIN 2025 y 2026: en color, el reconocimiento que más pesa. */
.awards__group img.awards__logo--key { height: clamp(78px, 7.5vw, 104px); filter: none; opacity: 1; }

/* Life at Ibagari — curved filmstrip. The 3D tilt is applied per item by JS
   from each card's distance to the viewport centre. */
.film {
  margin-top: var(--space-half);
  overflow: hidden;
  perspective: 1500px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: clamp(1rem, 2vw, 2rem);
}
.film::-webkit-scrollbar { display: none; }
.film.is-driven { overflow: hidden; }
.film__track {
  display: flex;
  gap: clamp(0.6rem, 1vw, 1rem);       /* tight, so it reads as one continuous strip */
  width: max-content;
  padding-inline: clamp(1rem, 3vw, 3rem);
  transform-style: preserve-3d;
}
.film__item {
  flex: none;
  width: clamp(300px, 32vw, 520px);
  overflow: clip;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
.film__item img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  transition: filter 0.6s ease;
}
@media (max-width: 900px) {
  .film__item { width: 82vw; }
}

/* ------------------------------------------------------------
   Reviews
   ------------------------------------------------------------ */
.reviews { background: var(--oceano-tint); padding: var(--space-section) 0; }
.reviews__stage {
  position: relative;
  margin-top: clamp(3.5rem, 3rem + 3vw, 6rem);
  min-height: 18rem;
}
/* oversized quotation glyph sitting behind the quote */
.reviews__stage::before {
  content: "\201C";
  position: absolute; top: -0.42em; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(9rem, 16vw, 15rem);
  line-height: 1;
  color: var(--oceano);
  opacity: 0.13;
  pointer-events: none;
}
/* height stays auto (not inset:0) so the stage can be measured against real content */
.review {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; gap: 1.5rem; justify-items: center; align-content: start; text-align: center;
  opacity: 0; pointer-events: none;
}
.review.is-active { opacity: 1; pointer-events: auto; }
.review__stars {
  font-size: 0.9rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* balance the trailing letter-space */
  color: var(--ocre);
}
.review blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--type-feature);
  line-height: 1.32;
  max-width: min(92vw, 40ch);
  text-wrap: balance;
}
.review cite {
  font-style: normal;
  display: grid; gap: 0.45rem; justify-items: center;
  padding-top: 0.4rem;
}
.review cite::before {
  content: ""; width: 2.5rem; height: 1px; background: var(--oceano); opacity: 0.5;
  margin-bottom: 0.7rem;
}
.review cite strong {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600; font-style: italic;
  color: var(--ink);
}
.review cite span {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft);
}
.reviews__tabs { display: flex; justify-content: center; gap: 1.8rem; margin-top: 2.2rem; }
.reviews__tabs button {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0.4rem 0; position: relative;
  transition: color 0.3s ease;
}
.reviews__tabs button::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--madera); transform: scaleX(0); transition: transform 0.4s var(--ease-out);
}
.reviews__tabs button.is-active { color: var(--ink); }
.reviews__tabs button.is-active::after { transform: scaleX(1); }

.reviews__badges {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.6rem, 4vw, 3.5rem);
  font-size: var(--text-sm); color: var(--ink-soft);
}
.reviews__badges .badge { display: grid; justify-items: center; gap: 0.25rem; }
.reviews__badges .badge strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ink); }
.reviews__more { display: grid; justify-items: center; margin-top: 2.6rem; }

/* ------------------------------------------------------------
   Grand footer
   ------------------------------------------------------------ */
.footer { background: var(--ink); color: var(--white); overflow: clip; }
.footer__invite {
  padding: var(--space-section) var(--gutter) var(--space-half);
  display: grid; gap: 1.6rem; justify-items: center; text-align: center;
}
.footer__invite h2 { font-size: var(--type-statement); }
.footer__invite h2 em { color: var(--ocre); }
.footer__cols {
  width: min(100% - 2 * var(--gutter), 82rem);
  margin-inline: auto;
  padding: var(--space-half) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  font-size: var(--text-sm);
}
.footer__cols h4 {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--perla); margin-bottom: 1.1rem;
}
.footer__cols ul { display: grid; gap: 0.55rem; }
.footer__cols a { opacity: 0.85; transition: opacity 0.3s ease, color 0.3s ease; }
.footer__cols a:hover { opacity: 1; color: var(--ocre); }
.footer__blurb { max-width: 34ch; opacity: 0.75; line-height: 1.8; font-size: 0.9375rem; }
.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(100% - 2 * var(--gutter), 82rem);
  margin-inline: auto;
  padding: 1.4rem 0 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-xs); letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}
/* Crédito del estudio. El arte va como máscara y no como imagen, así que toma
   el color de marca desde CSS en vez de quedar fijo en el blanco del archivo. */
/* Crédito del estudio en el mismo vocabulario que el resto del sitio:
   versalitas con tracking, como los eyebrows y como NOW A MEMBER OF. Así deja
   de parecer un añadido. En las referencias que lo resuelven bien el crédito
   nunca pesa más que la línea legal del cliente. */
/* Copyright apagado a la izquierda; a la derecha la firma, con el isotipo al
   final haciendo de "by": la marca ya dice quién, así que la palabra sobraba.
   El contraste entre lados lo da el color, no un cambio de caja ni tracking. */
.footer__copy { letter-spacing: 0.14em; text-transform: uppercase; }
.footer__credit {
  display: inline-flex; align-items: center; gap: 0.6rem;
  /* mismas versalitas y tracking que el copyright: los dos extremos comparten
     tratamiento y la fila se lee como una sola línea legal */
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.35s ease;
}
.footer__mark {
  width: 15px; height: 16px; flex: none;
  background-color: var(--ocre);
  -webkit-mask: url("../assets/img/first-steps-mark.png") center / contain no-repeat;
  mask: url("../assets/img/first-steps-mark.png") center / contain no-repeat;
  transition: background-color 0.35s ease;
}
.footer__credit:hover { color: var(--white); }
.footer__credit:hover .footer__mark { background-color: var(--white); }
.footer__wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4rem, 16vw, 15rem);
  line-height: 0.78;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--white);
  opacity: 0.95;
  margin-top: clamp(1rem, 3vh, 2.5rem);
  transform: none;   /* completo (antes 34% quedaba cortado) */
  user-select: none;
  pointer-events: none;
}
@media (max-width: 860px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------
   Mobile sticky bar
   ------------------------------------------------------------ */
.sticky-bar {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--z-sticky-bar);
  display: none;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));  /* minmax(0,…): sin esto la primera celda no puede encogerse y desborda el viewport */
  background: var(--white);
  border-top: 1px solid var(--perla-tint);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-bar a {
  display: grid; place-items: center; gap: 0.15rem;
  padding: 0.7rem 0.2rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  overflow: hidden; white-space: nowrap;
}
.sticky-bar a.sticky-bar__book {
  background: var(--madera); color: var(--white);
  font-size: 1rem; letter-spacing: 0.22em;
}
.sticky-bar svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .sticky-bar { display: grid; } }

/* Pantallas altas (iPhone 15/16 Pro Max, Pixel grandes): sobraban ~150px al
   final del menú. Aquí se reparten entre la cabecera y las separaciones, sin
   tocar el régimen apretado de las pantallas de 844px, donde no hay margen. */
@media (max-width: 900px) and (min-height: 880px) {
  .menu__panel { padding-top: 7.5rem; gap: 2.6rem; }
  .menu__nav { gap: 2.6rem; }
  .menu__cols { gap: 1.9rem; }
  .menu__group { gap: 0.32rem; }
}

/* ------------------------------------------------------------
   Promo — eventos y ofertas. Tarjeta discreta, no modal: no bloquea
   la página ni oscurece el fondo, y se puede ignorar sin cerrarla.
   ------------------------------------------------------------ */
.promo {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-sticky-bar);
  width: min(23rem, calc(100vw - 2 * var(--gutter)));
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(30, 32, 32, 0.5);
}
.promo[hidden] { display: none; }
.promo__close {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  backdrop-filter: blur(8px);
  transition: background 0.3s ease;
}
.promo__close:hover { background: var(--white); }
.promo__media { overflow: clip; }
.promo__media img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.promo__body { display: grid; gap: 0.7rem; padding: 1.3rem 1.4rem 1.5rem; align-content: center; }

/* En escritorio va horizontal: apilada, esta copia daba una tarjeta de 951px
   en un viewport de 900 y se salía por arriba. Con la foto al lado, la altura
   la marca el texto. */
@media (min-width: 901px) {
  .promo {
    display: flex;
    width: min(37rem, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100vh - 2 * var(--gutter));
  }
  .promo__media { flex: 0 0 47%; }
  .promo__media img { aspect-ratio: auto; }
  .promo__body { flex: 1; padding: 1.5rem 1.6rem; }
}
.promo__eyebrow {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--madera);
}
.promo__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.75rem; line-height: 1.12; color: var(--ink);
}
.promo__title em { font-style: italic; color: var(--madera); }
.promo__text { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-soft); }
.promo__kicker {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.125rem; color: var(--ink);
}
.promo__when {
  padding-top: 0.7rem; border-top: 1px solid var(--perla-tint);
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.promo__cta { justify-self: start; margin-top: 0.3rem; }

@media (max-width: 900px) {
  /* sobre la barra fija, nunca debajo */
  .promo { left: var(--gutter); right: var(--gutter); width: auto; bottom: calc(64px + 0.7rem); }
  .promo__media img { aspect-ratio: 2 / 1; }
  .promo__body { padding: 1rem 1.1rem 1.2rem; gap: 0.45rem; }
  .promo__title { font-size: 1.45rem; }
  .promo__text { font-size: 0.9375rem; line-height: 1.5; }
  .promo__kicker { font-size: 1.05rem; }
  .promo__when { padding-top: 0.55rem; }
  .promo__cta { padding: 0.85rem 1.8rem; }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .hero__scroll i::after { animation: none; }
  .footer__wordmark { transform: none; }
}

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */

/* Hero de página interna. Más bajo que el del home a propósito: acá el
   contenido es la respuesta a una búsqueda, no una entrada cinematográfica. */
.phero { position: relative; height: 78svh; min-height: 480px; overflow: clip; background: var(--ink); }
.phero__media { position: absolute; inset: 0; }
.phero__media img, .phero__media video { width: 100%; height: 100%; object-fit: cover; }
.phero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(24, 26, 26, 0.68) 0%,
    rgba(24, 26, 26, 0.5) 30%,
    rgba(24, 26, 26, 0.3) 62%,
    rgba(24, 26, 26, 0.4) 100%);
}
.phero__content {
  position: relative; z-index: 2;
  height: 100%;
  display: grid; align-content: center; justify-items: center;
  gap: 1.2rem; text-align: center;
  padding: 0 var(--gutter);
  color: var(--white);
}
.phero__title {
  font-size: clamp(2.3rem, 1.8rem + 3.1vw, 4.4rem);
  font-weight: 600; line-height: 1.05;
  max-width: 20ch;
}
.phero__lead {
  max-width: 46ch;
  font-size: var(--text-lead); line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}
/* Escritorio: título y lead en una línea cada uno, como el hero del home.
   El vw acota el cuerpo para que "Destination Weddings in Roatán" no se corte
   entre 901 y 1200px. Móvil conserva el ajuste de línea. */
@media (min-width: 901px) {
  .phero__title { max-width: none; white-space: nowrap; font-size: min(clamp(2.3rem, 1.8rem + 3.1vw, 4.4rem), 4.6vw); }
  .phero__lead { max-width: none; white-space: nowrap; }
}
.phero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 0.6rem; }
.phero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: var(--text-xs); letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 900px) {
  .phero { height: calc(100svh - var(--sticky-h)); }
}

/* Intro */
.wintro { padding-block: var(--space-section); }
.wintro__inner { display: grid; justify-items: center; gap: 1.6rem; text-align: center; }
.wintro__body {
  display: grid; gap: 1.2rem;
  max-width: 62ch;
  font-size: var(--text-lead); line-height: 1.85;
}

/* Espacios */
.wspaces { padding-block: 0 var(--space-section); }
.wspaces__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.wspaces__grid {
  width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem) clamp(1.2rem, 2.4vw, 2.4rem);
}
.wspace { display: grid; gap: 0.9rem; align-content: start; }
.wspace__media { overflow: clip; }
.wspace__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out, ease); }
.wspace:hover .wspace__media img { transform: scale(1.04); }
.wspace__name { font-size: var(--type-feature); line-height: 1.1; }
.wspace p { font-size: var(--text-base); line-height: 1.75; max-width: 42ch; color: var(--ink-soft); }

/* Galería filtrable */
.wgal { padding-block: 0 var(--space-section); }
.wgal--after { padding-block: var(--space-section); border-top: 1px solid var(--perla-tint); }
.wgal__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.wgal__filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.4rem;
  width: min(100% - 2 * var(--gutter), 82rem); margin: 0 auto clamp(1.8rem, 3vw, 2.8rem);
}
.wgal__f {
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent; background: none;
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.wgal__f:hover { color: var(--ink); }
.wgal__f.is-active { color: var(--madera); border-color: rgba(166, 97, 46, 0.35); background: var(--ocre-tint); }
.wgal__f:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }
.wgal__grid {
  width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto;
  columns: 3; column-gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.wgal__item { break-inside: avoid; margin: 0 0 clamp(0.9rem, 1.6vw, 1.4rem); overflow: clip; }
.wgal__item img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease-out); }
.wgal__item:hover img { transform: scale(1.03); }
.wgal__item[hidden] { display: none; }
.wgal__grid.is-cols { columns: auto; display: flex; align-items: flex-start; gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.wgal__col { flex: 1 1 0; min-width: 0; }
.wgal__credit { margin: clamp(0.4rem, 1vw, 0.8rem) auto 0; padding-inline: var(--gutter, 1.5rem); text-align: center; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--ink-soft, #6b6259); }
.wgal__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .wgal__grid { columns: 2; } }
@media (max-width: 480px) { .wgal__grid { columns: 2; } .wgal__grid.is-cols { gap: 0.6rem; } .wgal__item { margin-bottom: 0.6rem; } }

/* Luna Muna: tres momentos del día, y bloque de reserva sin formulario */
.wspaces__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wspaces__grid--three .wspace__media img { aspect-ratio: 3 / 4; }
.wspaces__grid--three .wspace__name { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.3rem); }
.lmres__inner {
  width: min(100% - 2 * var(--gutter), 60rem); margin-inline: auto;
  display: grid; justify-items: center; gap: 1.2rem; text-align: center;
}
.lmres__inner > p { max-width: 48ch; font-size: var(--text-lead); line-height: 1.8; }
.lmres__actions { display: grid; justify-items: center; gap: 1.1rem; margin-top: 0.4rem; }
.lmres__actions--two { grid-auto-flow: column; gap: 0.9rem; }
@media (max-width: 600px) { .lmres__actions--two { grid-auto-flow: row; } }
.lmres__hours {
  max-width: none;   /* hereda el 48ch del párrafo y partía "10 AM – 3 PM" en dos líneas */
  margin-top: 1.2rem;
  font-size: var(--text-xs) !important; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* Retrato del chef: fondo blanco (el .wincl base es perla) y pie con nombre */
.wincl.wincl--chef { background: var(--white); padding-block: 0 var(--space-section); }
.wincl--chef .wincl__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.wincl__media--portrait { position: relative; width: min(100%, 30rem); }
.wincl__cap {
  display: grid; gap: 0.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--perla-tint);
  margin-top: 0.9rem;
}
.wincl__cap b { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--ink); }
.wincl__cap span { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 900px) {
  .wincl--chef .wincl__inner { grid-template-columns: minmax(0, 1fr); }
  .wincl--chef .wincl__media { order: 0; }
  .wincl__media--portrait { width: 100%; }
  .wincl__media--portrait img { aspect-ratio: 4 / 5; }
}

/* Qué incluye */
.wincl { padding-block: var(--space-section); background: var(--perla-tint); }
.wincl__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2.4rem, 5vw, 5rem); align-items: center;
}
.wincl__text { display: grid; gap: 1.2rem; }
.wincl__text p { font-size: var(--text-lead); line-height: 1.85; max-width: 52ch; }
.wincl__text [data-ink] { display: grid; gap: 1.2rem; }
.wincl__list { list-style: none; display: grid; gap: 0.85rem; margin-top: 0.8rem; }
.wincl__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: baseline;
  padding-bottom: 0.85rem; border-bottom: 1px solid rgba(166, 168, 158, 0.35);
  font-size: var(--text-base);
}
.wincl__list li::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; }
.wincl__list li b { font-family: var(--font-display); font-weight: 500; font-size: 1.15em; }
.wincl__media { overflow: clip; }
.wincl__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* Elopements */
.welope { padding-block: var(--space-section); background: var(--ink); color: var(--white); }
.welope__inner { display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.welope .title { color: var(--white); }
.welope .title em { color: var(--ocre); }
.welope__lead { max-width: 58ch; font-size: var(--text-lead); line-height: 1.8; color: rgba(255, 255, 255, 0.82); }
.link-arrow--light { color: var(--ocre); }

/* FAQ — centrado: la pregunta y la respuesta comparten el eje del título */
.wfaq { padding-block: var(--space-section); }
.wfaq__inner { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.wfaq__list { width: min(100%, 52rem); margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.wfaq__item { border-top: 1px solid var(--perla-tint); }
.wfaq__item:last-child { border-bottom: 1px solid var(--perla-tint); }
.wfaq__item summary {
  display: flex; align-items: baseline; justify-content: center; gap: 0.9rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  line-height: 1.3;
  transition: color 0.3s ease;
}
.wfaq__item summary:hover { color: var(--madera); }
.wfaq__item summary::-webkit-details-marker { display: none; }
.wfaq__item summary::after {
  content: "+"; flex: none;
  font-family: var(--font-body); font-size: 1rem; color: var(--ocre);
  transition: transform 0.3s ease;
}
.wfaq__item[open] summary::after { transform: rotate(45deg); }
.wfaq__a { padding: 0 0 1.7rem; display: grid; justify-items: center; }
.wfaq__a p { font-size: var(--text-base); line-height: 1.8; max-width: 60ch; color: var(--ink-soft); }

/* Formulario RFP — hoja blanca sobre crema, campos de línea, no de caja:
   el mismo gesto que la barra de fechas del hero. */
.wform { padding-block: var(--space-section); background: var(--ocre-tint); }
.wform__inner {
  width: min(100% - 2 * var(--gutter), 82rem); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.4rem, 5vw, 6rem); align-items: start;
}
.wform__intro { position: sticky; top: 7rem; display: grid; gap: 1.1rem; }
.wform__intro p { max-width: 40ch; font-size: var(--text-lead); line-height: 1.8; }
.wform__alt { font-size: var(--text-base) !important; color: var(--ink-soft); }
.wform__alt a { color: var(--madera); text-decoration: underline; text-underline-offset: 0.22em; }

.wform__form {
  counter-reset: rfp;
  display: grid; gap: clamp(2.2rem, 3.5vw, 3.2rem);
  padding: clamp(2rem, 3.5vw, 3.4rem);
  background: var(--white);
  border: 1px solid rgba(166, 97, 46, 0.14);
}
.wform__set { border: 0; padding: 0; margin: 0; display: grid; gap: 1.3rem; counter-increment: rfp; }
.wform__set legend {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding: 0 0 0.4rem;
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.9rem);
  color: var(--ink);
}
.wform__set legend::before {
  content: "0" counter(rfp);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.2em; color: var(--ocre);
}
.wform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.2rem; }
.fld { display: grid; gap: 0.35rem; }
.fld--wide { grid-column: 1 / -1; }
.fld > span {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.fld i { font-style: normal; color: var(--madera); }
.fld input, .fld select, .fld textarea {
  width: 100%;
  padding: 0.7rem 0;
  border: 0; border-bottom: 1px solid var(--perla);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--ink);
  transition: border-color 0.3s ease;
}
.fld select {
  appearance: none; -webkit-appearance: none;
  padding-right: 1.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a6612e' stroke-width='1.4'/%3E%3C/svg%3E") right center / 12px no-repeat;
}
.fld input[type="date"] { color-scheme: light; }
.fld textarea { resize: vertical; line-height: 1.6; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--perla); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-bottom-color: var(--madera);
  box-shadow: 0 1px 0 0 var(--madera);
}
/* :user-invalid en vez de :invalid — marcar en rojo un campo que todavía no se
   tocó es hostil y es el error más repetido en formularios largos */
.fld input:user-invalid, .fld select:user-invalid, .fld textarea:user-invalid {
  border-bottom-color: #b4462f; box-shadow: 0 1px 0 0 #b4462f;
}

/* catering como chips: una opción visible es más rápida de leer que un cuadrito */
.wform__checks { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.chk { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: var(--text-base); }
.wform__checks .chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wform__checks .chk span {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--perla);
  font-size: var(--text-sm); letter-spacing: 0.08em;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wform__checks .chk input:checked + span { background: var(--madera); border-color: var(--madera); color: var(--white); }
.wform__checks .chk input:focus-visible + span { outline: 2px solid var(--ocre); outline-offset: 2px; }
.chk--consent { align-items: flex-start; max-width: 60ch; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; }
.chk--consent input { flex: none; width: 16px; height: 16px; margin-top: 0.2em; accent-color: var(--madera); }

.wform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; }
.wform__note { font-size: var(--text-sm); color: var(--madera); }

@media (max-width: 900px) {
  .wspaces__grid, .wspaces__grid--three { grid-template-columns: minmax(0, 1fr); }
  .wform__inner { grid-template-columns: minmax(0, 1fr); }
  .wform__intro { position: static; justify-items: center; text-align: center; }
  .wform__grid { grid-template-columns: minmax(0, 1fr); }
  .wform__form { padding: 1.6rem 1.2rem; }
  .wincl__inner { grid-template-columns: minmax(0, 1fr); }
  .wincl__media { order: -1; }
  .wincl__media img { aspect-ratio: 3 / 2; }
}

/* ============================================================
   Mapa interactivo de sitios de buceo (Duna Divers)
   ============================================================ */
.divemap {
  position: relative; overflow: clip;
  width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto;
  aspect-ratio: 2000 / 1116;
  background: #dfe9ea; /* el tono de agua del borde de la ilustración */
  border-radius: 2px;
  touch-action: none; user-select: none;
}
.divemap__stage { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 0.9s var(--ease-out); will-change: transform; }
.divemap__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.divemap__pins { position: absolute; inset: 0; }
.divemap__pin {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.35rem;
  background: none; border: 0; padding: 0.6rem; cursor: pointer;
  color: var(--ink);
}
.divemap__pin i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--madera); box-shadow: 0 0 0 4px rgba(255,255,255,0.85), 0 2px 10px rgba(0,0,0,0.25);
  position: relative; transition: transform 0.3s var(--ease-out);
}
.divemap__pin i::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid var(--madera); opacity: 0;
  animation: divemap-pulse 2.8s ease-out infinite;
}
.divemap__pin:nth-child(3n) i::after { animation-delay: -1s; }
.divemap__pin:nth-child(3n+1) i::after { animation-delay: -2s; }
@keyframes divemap-pulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
.divemap__pin span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink);
  background: rgba(255,255,255,0.86); padding: 0.28rem 0.55rem; border-radius: 2px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.divemap__pin:hover span, .divemap__pin.is-active span, .divemap__pin:focus-visible span { opacity: 1; transform: none; }
.divemap__pin.is-active i { transform: scale(1.35); background: var(--ink); }
.divemap__pin--far i { background: var(--ocre); }
/* con zoom, los pines no crecen con la imagen */
.divemap.is-zoomed .divemap__pin { transform: translate(-50%, -50%) scale(calc(1 / var(--dm-scale, 1))); }

.divemap__ctrl {
  position: absolute; right: 1rem; top: 1rem; z-index: 4;
  display: grid; gap: 0.4rem;
}
.divemap__ctrl button {
  width: 40px; height: 40px; border: 1px solid var(--perla-tint); background: var(--white);
  font-family: var(--font-body); font-size: 1.1rem; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; transition: background 0.3s ease, color 0.3s ease;
}
.divemap__ctrl button:hover { background: var(--ink); color: var(--white); }

.divemap__card {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 5;
  width: min(100% - 2rem, 26rem);
  background: var(--white); box-shadow: 0 18px 60px rgba(0,0,0,0.22);
  display: grid; grid-template-columns: 1fr;
}
.divemap__card[hidden] { display: none; }
.divemap__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.divemap__body { padding: 1.2rem 1.3rem 1.3rem; display: grid; gap: 0.55rem; }
.divemap__kind { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--madera); }
.divemap__name { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); line-height: 1.1; }
.divemap__body p { font-size: var(--text-sm); line-height: 1.7; color: var(--ink-soft); }
.divemap__meta { display: flex; gap: 1.6rem; margin: 0.3rem 0; }
.divemap__meta dt { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.divemap__meta dd { font-family: var(--font-display); font-size: 1.15rem; }
.divemap__close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(24,26,26,0.55); color: var(--white); cursor: pointer;
  display: grid; place-items: center; font-size: 0.8rem;
}
.divemap__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; margin-top: 1.2rem; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.divemap__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; }

/* lista de sitios (móvil: reemplaza al mapa con puntos, que a 390px no se toca bien) */
.divemap__list { display: none; }
@media (max-width: 900px) {
  .divemap { aspect-ratio: auto; height: 62vw; }
  .divemap__pin span { display: none; }
  .divemap__card { left: 0; right: 0; bottom: 0; width: auto; max-height: 78%; overflow: auto; }
  .divemap__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1rem; width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; }
  .divemap__li { text-align: left; padding: 0.8rem 0.9rem; border: 1px solid var(--perla-tint); background: var(--white); cursor: pointer; display: grid; gap: 0.15rem; }
  .divemap__li b { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
  .divemap__li small { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
}
@media (prefers-reduced-motion: reduce) { .divemap__pin i::after { animation: none; } .divemap__stage { transition: none; } }

/* ============================================================
   Duna Divers — la experiencia
   ============================================================ */
.dhero .phero__title { font-size: clamp(2.6rem, 2rem + 3.6vw, 5.2rem); font-weight: 500; letter-spacing: -0.005em; }
.dhero { height: 100svh; }
@media (max-width: 900px) { .dhero { height: calc(100svh - var(--sticky-h)); } }

/* 02 · descenso: tres capas a distinta velocidad, el fondo se oscurece con el scroll */
.descend { position: relative; height: 240svh; background: var(--ink); }
.descend__sticky { position: sticky; top: 0; height: 100svh; overflow: clip; }
.descend__layer { position: absolute; inset: -10% 0; will-change: transform; }
.descend__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.descend__layer--mid { opacity: 0; }
.descend__layer--deep { opacity: 0; }
.descend__sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(24,26,26,0.15), rgba(24,26,26,0.55)); pointer-events: none; }
.descend__text {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: center; justify-items: center; gap: 1.2rem;
  padding: 0 var(--gutter); text-align: center; color: var(--white);
}
.descend__title { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.6rem); font-weight: 500; line-height: 1.12; max-width: 24ch; }
.descend__meter { display: grid; justify-items: center; gap: 0.5rem; margin-top: 1.4rem; }
.descend__depth { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 2vw, 3.4rem); font-variant-numeric: tabular-nums; color: var(--ocre); }
.descend__meter i { width: 1px; height: 4rem; background: linear-gradient(to bottom, var(--ocre), transparent); }

/* 03 · tu inmersión + selector */
.yourdive { padding-block: var(--space-section); }
.yourdive__inner { display: grid; justify-items: center; gap: 1.2rem; text-align: center; }
.yourdive__lead { max-width: 58ch; font-size: var(--text-lead); line-height: 1.8; }
.chooser { width: min(100%, 72rem); margin-top: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: 1.2rem; justify-items: center; }
.chooser__q { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); }
.chooser__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; width: 100%; }
.chooser__opt {
  display: grid; gap: 0.25rem; padding: 1.1rem 1.2rem; text-align: left;
  border: 1px solid var(--perla-tint); background: var(--white); cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.4s var(--ease-out);
}
.chooser__opt b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.chooser__opt small { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.chooser__opt:hover { border-color: var(--ocre); transform: translateY(-2px); }
.chooser__opt[aria-selected="true"] { border-color: var(--madera); background: var(--ocre-tint); }
.chooser__answer { width: 100%; }
.chooser__answer[hidden] { display: none; }
.chooser__card { display: none; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: center; text-align: left; }
.chooser__card.is-on { display: grid; }
.chooser__card img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.chooser__card h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); margin-bottom: 0.6rem; }
.chooser__card p { font-size: var(--text-base); line-height: 1.75; color: var(--ink-soft); margin-bottom: 0.9rem; max-width: 46ch; }

/* 04 · sitios */
.sites { padding-block: var(--space-section); background: var(--perla-tint); }
.sites__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.sites__lead { max-width: 48ch; font-size: var(--text-base); color: var(--ink-soft); }
.sitecards { width: min(100% - 2 * var(--gutter), 86rem); margin: clamp(2.6rem, 5vw, 4.2rem) auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.sitecard { position: relative; overflow: clip; aspect-ratio: 4 / 5; background: var(--ink); }
.sitecard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.sitecard:hover img { transform: scale(1.05); }
.sitecard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,26,26,0.78) 0%, rgba(24,26,26,0.1) 55%, transparent 100%); }
.sitecard__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.4rem; color: var(--white); display: grid; gap: 0.3rem; }
.sitecard__txt span { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ocre); }
.sitecard__txt h3 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem); line-height: 1.05; }
.sitecard__txt p { font-size: var(--text-sm); line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 34ch; }

/* 05 · vida marina: franja horizontal movida por scroll */
.marine { position: relative; height: 320svh; background: var(--ink); color: var(--white); }
.marine__sticky { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; align-content: center; gap: clamp(1.4rem, 3vh, 2.6rem); }
.marine__head { display: grid; justify-items: center; gap: 0.8rem; text-align: center; padding: 0 var(--gutter); }
.marine__title { font-size: var(--type-section); color: var(--white); }
.marine__title em { color: var(--ocre); }
.marine__track { display: flex; gap: clamp(1rem, 2vw, 2rem); padding-left: var(--gutter); width: max-content; will-change: transform; }
.marine__item { flex: none; width: clamp(240px, 30vw, 460px); margin: 0; display: grid; gap: 0.8rem; }
.marine__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.marine__item figcaption { display: grid; gap: 0.15rem; }
.marine__item b { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; }
.marine__item span { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* 06 · aprender */
.learn { padding-block: var(--space-section); }
.learn__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
.learn__text { display: grid; gap: 1.2rem; }
.learn__text > p { font-size: var(--text-lead); line-height: 1.85; max-width: 50ch; }
.learn__steps { list-style: none; counter-reset: paso; display: grid; margin-top: 0.6rem; }
.learn__steps li { counter-increment: paso; display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0.8rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--perla-tint); }
.learn__steps li:last-child { border-bottom: 1px solid var(--perla-tint); }
.learn__steps li::before { content: counter(paso, decimal-leading-zero); font-size: var(--text-xs); letter-spacing: 0.16em; color: var(--ocre); }
.learn__steps b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); }
.learn__steps span { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); text-align: right; }
.learn__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* 07 · más allá */
.beyond { padding-block: 0 var(--space-section); }
.beyond__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }

@media (max-width: 900px) {
  .descend { height: 200svh; }
  .chooser__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chooser__card { grid-template-columns: minmax(0, 1fr); }
  .sitecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marine { height: 260svh; }
  .learn__inner { grid-template-columns: minmax(0, 1fr); }
  .learn__media { order: -1; }
  .learn__media img { aspect-ratio: 3 / 2; }
  .learn__steps li { grid-template-columns: 2.2rem 1fr; }
  .learn__steps span { grid-column: 2; text-align: left; }
}
@media (max-width: 520px) { .sitecards { grid-template-columns: minmax(0, 1fr); } .chooser__opts { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Duna Divers — hero de descenso (buzo fijo, mundo en movimiento)
   ============================================================ */
.dive { position: relative; height: 420svh; background: #06121c; }
.dive__sticky { position: sticky; top: 0; height: 100svh; overflow: clip; }
.dive__world { position: absolute; inset: 0; will-change: transform; }
.dive__band { position: absolute; left: 0; right: 0; height: 100svh; }
.dive__band[data-band="0"] { top: 0; }
.dive__band[data-band="1"] { top: 100svh; }
.dive__band[data-band="2"] { top: 200svh; }
.dive__band[data-band="3"] { top: 300svh; }
.dive__band img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* costura entre bandas: un degradado corto en cada borde, más creíble que un corte */
.dive__band::before, .dive__band::after { content: ""; position: absolute; left: 0; right: 0; height: 18svh; pointer-events: none; }
.dive__band::before { top: -1px; background: linear-gradient(to bottom, rgba(6,18,28,0.55), transparent); }
.dive__band::after { bottom: -1px; background: linear-gradient(to top, rgba(6,18,28,0.55), transparent); }
.dive__band[data-band="0"]::before { display: none; }

.dive__diver {
  position: absolute; left: 50%; top: 40%; z-index: 3;   /* encima del statement, que ahora va debajo de los buzos */
  width: clamp(240px, 34vw, 560px);
  transform: translate(-50%, -50%) rotate(0deg);
  will-change: transform; pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35));
}
.dive__diver img { width: 100%; height: auto; display: block; }
.dive__bubbles { position: absolute; left: 22%; top: 30%; }
.dive__bubbles i { position: absolute; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.15); animation: dive-bubble 3.2s ease-in infinite; }
.dive__bubbles i:nth-child(2) { left: 10px; width: 5px; height: 5px; animation-delay: -1s; }
.dive__bubbles i:nth-child(3) { left: -8px; width: 11px; height: 11px; animation-delay: -2.1s; }
.dive__bubbles i:nth-child(4) { left: 16px; width: 4px; height: 4px; animation-delay: -0.4s; }
@keyframes dive-bubble { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(-160px) translateX(10px) scale(1.2); opacity: 0; } }

.dive__fauna { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dive__animal { position: absolute; opacity: 0; will-change: transform, opacity; }
.dive__animal--turtle { width: clamp(180px, 24vw, 420px); left: 8%; top: 22%; }
.dive__animal--ray { width: clamp(220px, 30vw, 520px); right: 6%; top: 18%; }
.dive__animal--shark { width: clamp(260px, 36vw, 640px); left: 4%; bottom: 14%; }

.dive__scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,18,28,0.35) 0%, transparent 30%, transparent 60%, rgba(6,18,28,0.45) 100%); }
/* el título va abajo, sobre el HUD, para no pisar a los buzos que están al centro */
.dive__copy {
  position: absolute; inset: 0; z-index: 5;
  display: grid; align-content: end; justify-items: center; gap: 1rem;
  padding: 0 var(--gutter) 21vh; text-align: center; color: var(--white);   /* centrado, justo debajo de los buzos */
  pointer-events: none;
}
.dive__copy .btn, .dive__copy a { pointer-events: auto; }
.dive__title {
  font-size: clamp(2.6rem, 2rem + 3.6vw, 5.6rem); font-weight: 500; line-height: 1; max-width: 14ch;
  letter-spacing: -0.01em; text-shadow: 0 6px 40px rgba(0,0,0,0.35);
}
.dive__title em { font-style: italic; color: var(--ocre); }
/* el título se separa: la mitad sube y la mitad baja mientras el buzo pasa entre las palabras */
.dive__hud {
  position: absolute; left: 50%; bottom: 2.2rem; z-index: 5; transform: translateX(-50%);
  display: grid; gap: 0.2rem; justify-items: center; text-align: center; color: var(--white);
}
.dive__depth { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 4rem); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ocre); }
.dive__label { font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.dive__scroll { z-index: 5; bottom: 8.6rem; }
@media (max-width: 900px) {
  .dive { height: 360svh; }
  .dive__sticky { height: calc(100svh - var(--sticky-h)); }
  .dive__band { height: calc(100svh - var(--sticky-h)); }
  .dive__band[data-band="1"] { top: calc(100svh - var(--sticky-h)); }
  .dive__band[data-band="2"] { top: calc(2 * (100svh - var(--sticky-h))); }
  .dive__band[data-band="3"] { top: calc(3 * (100svh - var(--sticky-h))); }
  .dive__diver { width: 62vw; top: 44%; }
  .dive__animal--turtle { width: 42vw; left: 4%; top: 14%; }
  .dive__animal--ray { width: 50vw; right: 2%; top: 12%; }
  .dive__animal--shark { width: 70vw; left: -4%; bottom: 22%; }
  .dive__hud { bottom: 1.4rem; }
  .dive__copy { padding-bottom: 24vh; }
  .dive__hud { bottom: 1.6rem; }
  .dive__scroll { bottom: 7.4rem; }   /* en móvil se montaba sobre el HUD */
}
@media (prefers-reduced-motion: reduce) { .dive { height: auto; } .dive__sticky { position: relative; } .dive__bubbles { display: none; } .dive__animal { opacity: 1; } }

/* About: cifras */
.dabout__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; gap: 1rem; width: min(100%, 60rem); margin-top: 1.4rem; }
.dabout__facts div { display: grid; gap: 0.25rem; padding: 1.1rem 0; border-top: 1px solid var(--perla-tint); }
.dabout__facts b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem); line-height: 1; }
.dabout__facts span { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 600px) { .dabout__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* selector de dos vías */
.chooser--two .chooser__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }

/* La escuela: tarjetas Oceanic */
.school { padding-block: var(--space-section); }
.school__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.school__lead { max-width: 56ch; font-size: var(--text-base); color: var(--ink-soft); }
.school__lead i { font-style: normal; font-weight: 600; color: var(--ink); }
.school__grid { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.ccard { position: relative; overflow: clip; aspect-ratio: 4 / 5; border-radius: 1.4rem; background: var(--ink); }
.ccard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.ccard:hover img { transform: scale(1.05); }
.ccard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,26,26,0.82) 0%, rgba(24,26,26,0.15) 55%, transparent 100%); }
.ccard__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.5rem; color: var(--white); display: grid; gap: 0.3rem; }
.ccard__tag { justify-self: start; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--ocre); color: var(--ink); }
.ccard[data-status="request"] .ccard__tag { background: rgba(255,255,255,0.18); color: var(--white); backdrop-filter: blur(6px); }
.ccard h3 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem); line-height: 1.05; }
.ccard p { font-size: var(--text-sm); color: rgba(255,255,255,0.8); }
.ccard__go { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.16); color: var(--white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3); font-size: 1.1rem; transition: background 0.3s ease, color 0.3s ease; }
.ccard__go:hover { background: var(--white); color: var(--ink); }
@media (max-width: 900px) { .school__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .school__grid { grid-template-columns: minmax(0, 1fr); } .ccard { aspect-ratio: 4 / 3; } }

/* formulario: campos de fecha como botón (abren el calendario del home) */
.fld--date { text-align: left; background: var(--white); border: 1px solid rgba(166, 97, 46, 0.22); padding: 0.85rem 0.9rem; cursor: pointer; font-family: var(--font-body); }
.fld--date b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--ink); }
.fld--date:focus-visible { outline: none; border-color: var(--madera); box-shadow: 0 0 0 3px rgba(166, 97, 46, 0.12); }
/* precio en tarjeta y lista de especialidades */
.ccard__price { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--ocre); margin-top: 0.2rem; }
.school__spec { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.school__sub { font-size: var(--type-feature); margin-bottom: 1.2rem; }
.school__sub small { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-left: 0.8rem; }
.spec__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.4rem, 3vw, 3rem); }
.spec { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--perla-tint); }
.spec > div:first-child { display: grid; gap: 0.15rem; }
.spec b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.spec span { font-size: var(--text-sm); color: var(--ink-soft); }
.spec__meta { display: grid; justify-items: end; gap: 0.1rem; }
.spec__meta em { font-style: normal; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.spec__meta strong { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--madera); }
@media (max-width: 900px) { .spec__list { grid-template-columns: minmax(0, 1fr); } .spec { grid-template-columns: minmax(0, 1fr) auto; } .spec .link-arrow { grid-column: 1 / -1; } }
/* scrubber de fotogramas: cuando hay secuencia, el canvas reemplaza a las
   bandas y al buzo recortado; si no hay (o falla), quedan las capas de siempre */
.dive__seq { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: none; }
.dive.is-seq .dive__seq { display: block; }
.dive.is-seq .dive__world, .dive.is-seq .dive__fauna, .dive.is-seq .dive__diver { display: none; }

/* La escuela: primero elegís nivel, después ves los cursos de ese nivel */
.school__pick { width: min(100% - 2 * var(--gutter), 78rem); margin: 0 auto clamp(1.6rem, 3vw, 2.6rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.4rem); }
/* casi cuadradas (5:4), con animación: la imagen respira al pasar, la caja se
   levanta, el anillo ocre entra al elegir y el resto se atenúa */
.pick { position: relative; overflow: clip; aspect-ratio: 5 / 4; border: 0; padding: 0; border-radius: 1.4rem; background: var(--ink); cursor: pointer; text-align: left; color: var(--white);
  transition: transform 0.6s var(--ease-out); }
.pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease-out), filter 0.6s ease; }
.pick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,26,26,0.82), rgba(24,26,26,0.08) 60%); transition: opacity 0.5s ease; }
.pick::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ocre); opacity: 0; transform: scale(0.96); transition: opacity 0.4s ease, transform 0.5s var(--ease-out); pointer-events: none; }
.pick:hover { transform: translateY(-4px); }
.pick:hover img { transform: scale(1.1); }
.pick[aria-selected="true"]::before { opacity: 1; transform: scale(1); }
.pick[aria-selected="true"] img { transform: scale(1.08); filter: saturate(1.1); }
.school__pick:has([aria-selected="true"]) .pick[aria-selected="false"] img { filter: saturate(0.6) brightness(0.8); }
.school__pick:has([aria-selected="true"]) .pick[aria-selected="false"]:hover img { filter: none; }
.pick__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.3rem; display: grid; gap: 0.2rem; }
.pick__txt b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.05; }
.pick__txt small { font-size: var(--text-sm); color: rgba(255,255,255,0.8); }
.pick__txt i { font-style: normal; font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ocre); margin-top: 0.3rem; }
.school__grid[hidden], .school__spec[hidden] { display: none; }
@media (max-width: 900px) { .school__pick { grid-template-columns: minmax(0, 1fr); } .pick { aspect-ratio: 4 / 3; } }

/* Carrusel en móvil: las tarjetas de sitios, cursos y Chiquita se deslizan de
   lado con scroll-snap; en escritorio siguen siendo cuadrícula */
@media (max-width: 900px) {
  .rail {
    display: flex !important; grid-template-columns: none !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch;
    width: 100% !important; margin-inline: 0 !important; padding-inline: var(--gutter);
    gap: 0.9rem; scrollbar-width: none;
  }
  .rail[hidden] { display: none !important; }   /* el !important del carrusel le ganaba al hidden */
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 78vw; scroll-snap-align: start; }
  .sitecards.rail .sitecard { aspect-ratio: 4 / 5; }
  .school__grid--rail .ccard { aspect-ratio: 4 / 5; }
  .rail + .divemap__legend { margin-top: 1rem; }
}

/* Categorías de la escuela en móvil: slider al estilo de la referencia —
   arranca en Beginner, la activa centrada y grande, las otras asomando,
   botón ↗ en cada caja. Los demás carruseles siguen siendo simples. */
.pick__go { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 1.1rem;
  background: rgba(255,255,255,0.18); color: var(--white); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.3); transition: background 0.3s ease, color 0.3s ease; }
.pick:hover .pick__go, .pick[aria-selected="true"] .pick__go { background: var(--white); color: var(--ink); }
@media (max-width: 900px) {
  /* la fila se fija y el scroll vertical la desplaza en horizontal (GSAP) */
  .school__pickwrap { height: 190svh; overflow: clip; }   /* clip (no scroll) contiene el desborde y no rompe el sticky */
  .school__pick { position: sticky; top: calc(50svh - 31vw); display: flex !important; grid-template-columns: none !important; width: 100% !important; margin-inline: 0 !important;
    padding-inline: 9vw; gap: 0.75rem; overflow: visible; will-change: transform; }
  .school__pick > .pick { flex: 0 0 82vw; aspect-ratio: 4 / 3;
    transform: scale(0.94); opacity: 0.72; transition: transform 0.5s var(--ease-out), opacity 0.5s ease; }
  .school__pick > .pick.is-active { transform: none; opacity: 1; }
  /* texto como antes, sin caja: sólo un degradado negro en la parte baja para que se lea */
  .school__pick > .pick::after { background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 38%, transparent 62%); }
}

/* Interest: subtítulo del About y The Duna Experience */
.dabout__sub { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); color: var(--madera); margin-top: -0.4rem; }
.dxp { padding-block: var(--space-section); background: var(--perla-tint); }
.dxp__inner { display: grid; gap: clamp(2.4rem, 5vw, 4.2rem); }
.dxp__head { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.dxp__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 4rem); }
.dxp__item { display: grid; gap: 0.9rem; align-content: start; padding-top: 1.4rem; border-top: 1px solid rgba(166, 168, 158, 0.45); }
.dxp__num { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em; color: var(--ocre); }
.dxp__name { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.1rem); line-height: 1.05; }
.dxp__item p { font-size: var(--text-lead); line-height: 1.75; color: var(--ink-soft); max-width: 30ch; }
@media (max-width: 900px) { .dxp__list { grid-template-columns: minmax(0, 1fr); gap: 0; } .dxp__item { padding-block: 1.6rem; } .dxp__item:last-child { border-bottom: 1px solid rgba(166, 168, 158, 0.45); } }
/* Action: el formulario se abre con el botón */
#rfpForm[hidden] { display: none; }
.wform__intro .btn { margin-top: 0.6rem; }

/* ============================================================
   Sitios (referencia HUTS): secciones de 130vh con escenario pegajoso.
   ============================================================ */
/* Fondos en flujo (se desplazan con el scroll). Texto + ventana fijos al
   viewport y recortados por su propio bloque (clip-path recorta también a los
   descendientes fixed): cuando el borde del bloque siguiente cruza el texto,
   el texto del siguiente se revela en el mismo sitio. Sin solapes ni fundidos. */
.stack { margin-top: clamp(2.6rem, 5vw, 4.2rem); position: relative; isolation: isolate; }
.stack__item { position: relative; height: 120svh; clip-path: inset(0); background: var(--ink); color: var(--white); }
.stack__item:nth-child(1) { z-index: 1; } .stack__item:nth-child(2) { z-index: 2; } .stack__item:nth-child(3) { z-index: 3; } .stack__item:nth-child(4) { z-index: 4; }
.stack__item:nth-child(5) { z-index: 5; } .stack__item:nth-child(6) { z-index: 6; } .stack__item:nth-child(7) { z-index: 7; } .stack__item:nth-child(8) { z-index: 8; }
.stack__stage { position: static; height: 100%; }
.stack__bg { position: absolute; inset: 0; }
.stack__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stack__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6,18,28,0.62) 0%, rgba(6,18,28,0.25) 55%, rgba(6,18,28,0.1) 100%); }
.stack__inner { position: fixed; left: 0; right: 0; top: 0; height: 100svh; z-index: 2; width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.6rem, 4vw, 4rem); pointer-events: none; }
.stack__inner a { pointer-events: auto; }
.stack__item:first-child .stack__inner { transform: translate3d(0, var(--enter, 0px), 0); will-change: transform; }   /* el primer bloque entra con su texto (HUTS): sube con el borde hasta tocar arriba */
.stack__txt { display: grid; gap: 0.7rem; max-width: 34rem; }
.stack__kind { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocre); }
.stack__name { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 4.4rem); line-height: 1; }
.stack__txt p { font-size: var(--text-sm); line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 44ch; }
.stack__meta { display: flex; gap: 1.6rem; margin-top: 0.2rem; }
.stack__meta span { display: grid; gap: 0.1rem; }
.stack__meta b { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.stack__meta small { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.stack__bar { position: relative; display: block; width: 6rem; height: 2px; margin-top: 0.4rem; background: rgba(255,255,255,0.25); overflow: hidden; }
.stack__bar::after { content: ""; position: absolute; inset: 0; background: var(--ocre); transform: scaleX(var(--p, 0)); transform-origin: left; }
.stack__inset { justify-self: end; width: min(100%, 40rem); aspect-ratio: 4 / 3; overflow: clip; border-radius: 0.9rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.18); }
.stack__inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .stack__item { height: calc(120svh - var(--sticky-h)); }
  .stack__inner { height: calc(100svh - var(--sticky-h)); }
  .stack__inner { grid-template-columns: minmax(0, 1fr); align-content: end; padding-bottom: 3.2rem; gap: 1rem; }
  .stack__inset { justify-self: start; width: 66vw; }
  .stack__name { font-size: clamp(2rem, 1.5rem + 2.6vw, 3rem); }
  .stack__txt p { display: none; }
  .stack__bg::after { background: linear-gradient(to top, rgba(6,18,28,0.78) 0%, rgba(6,18,28,0.25) 55%, rgba(6,18,28,0.1) 100%); }
}

/* =====================================================================
   ROOM DETAIL PAGES (loco.luxury villa structure, Ibagari light palette)
   ===================================================================== */
.rtop { padding-top: calc(var(--header-h, 96px) + 1.2rem); }
.rcrumb { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.2rem; }
.rcrumb:hover { color: var(--madera); }

/* Hero mosaic: big left + two stacked right */
.rhero { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.6rem; height: clamp(420px, 62svh, 640px); }
.rhero__cell { position: relative; overflow: clip; background: var(--perla-tint); cursor: zoom-in; border: 0; padding: 0; }
.rhero__cell:first-child { grid-row: 1 / span 2; }
.rhero__cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.rhero__cell:hover img { transform: scale(1.03); }
.rhero__open { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.1rem; background: rgba(255,255,255,0.92); color: var(--ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border: 0; cursor: pointer; backdrop-filter: blur(6px); }
.rhero__open:hover { background: var(--white); color: var(--madera); }
.rhero__count { display: none; }
.rherowrap { position: relative; }

/* Title block */
.rhead { display: grid; gap: 0.7rem; padding-block: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 2vw, 1.8rem); border-bottom: 1px solid var(--perla-tint); }
.rhead__name { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 4rem); line-height: 1.02; font-weight: 500; }
.rhead__tag { font-size: var(--text-lead); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.rhead__specs { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.4rem; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.rhead__specs span { display: inline-flex; align-items: center; gap: 0.5rem; }
.rhead__specs span::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; }
.rhead__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.rbadge { display: inline-block; padding: 0.4rem 0.75rem; border: 1px solid rgba(166,97,46,0.35); background: var(--ocre-tint); color: var(--madera); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; }

/* Two columns: content + sticky booking card */
.rbody { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block: clamp(2rem, 3vw, 3rem) var(--space-section); }
.rmain > section { padding-block: clamp(1.8rem, 3vw, 2.6rem); border-bottom: 1px solid var(--perla-tint); }
.rmain > section:first-child { padding-top: 0.4rem; }
.rmain h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.3rem); font-weight: 500; margin-bottom: 1rem; }
.rmain h2 em { font-style: italic; color: var(--madera); }
.rabout p { font-size: var(--text-base); line-height: 1.8; max-width: 62ch; color: var(--ink); }
.rabout p + p { margin-top: 1rem; }

.ramen__grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.6rem; }
.ramen__grid li { display: flex; align-items: baseline; gap: 0.7rem; font-size: var(--text-sm); line-height: 1.5; }
.ramen__grid li::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; flex: none; }
.ramen__grid li[hidden] { display: none; }
.ramen__group { margin-top: 1.4rem; }
.ramen__group h3 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.7rem; }
.ramen__more { margin-top: 1.4rem; }

.rphotos__grid { columns: 2; column-gap: 0.8rem; }
.rphotos__grid button { display: block; width: 100%; break-inside: avoid; margin: 0 0 0.8rem; padding: 0; border: 0; background: var(--perla-tint); overflow: clip; cursor: zoom-in; }
.rphotos__grid img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease-out); }
.rphotos__grid button:hover img { transform: scale(1.03); }

.rsleep__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.9rem; }
.rsleep__card { display: grid; gap: 0.5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--perla-tint); background: var(--white); }
.rsleep__card b { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; }
.rsleep__card span { font-size: var(--text-sm); color: var(--ink-soft); }
.rsleep__card i { font-style: normal; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--madera); }

.rpol__list { display: grid; gap: 1.1rem; }
.rpol__item { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; font-size: var(--text-sm); line-height: 1.6; }
.rpol__item b { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; }
.rpol__item p { color: var(--ink-soft); }

.rloc__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.rloc__inner p { font-size: var(--text-base); line-height: 1.8; }
.rloc__list { list-style: none; display: grid; gap: 0.6rem; margin-top: 1rem; font-size: var(--text-sm); }
.rloc__list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--perla-tint); padding-bottom: 0.5rem; }
.rloc__list li span:last-child { color: var(--ink-soft); }
.rloc__map { aspect-ratio: 4 / 3; overflow: clip; background: var(--oceano-tint); }
.rloc__map iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.85); }

/* Sticky booking card: precio, un botón y los beneficios. Sin campos de fecha:
   la disponibilidad se elige en el motor. */
.rbook { position: sticky; top: calc(var(--header-h, 96px) + 1rem); display: grid; gap: 1.1rem; padding: 1.8rem 1.7rem 1.6rem; background: var(--ocre-tint); border: 1px solid rgba(166,97,46,0.14); }
.rbook__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--madera); }
.rbook__price { display: flex; align-items: baseline; gap: 0.5rem; margin-top: -0.3rem; }
.rbook__price b { font-family: var(--font-display); font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -0.01em; }
.rbook__price small { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.rbook .btn { width: 100%; justify-content: center; }
.rbook__perks { list-style: none; display: grid; gap: 0.45rem; font-size: var(--text-sm); padding-top: 0.2rem; }
.rbook__perks li { display: flex; gap: 0.6rem; align-items: baseline; }
.rbook__perks li::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; }
.rbook__note { font-size: var(--text-xs); line-height: 1.6; color: var(--ink-soft); border-top: 1px solid rgba(166,97,46,0.14); padding-top: 0.9rem; }
.rbook__contact { font-size: var(--text-sm); }
.rbook__contact a { color: var(--madera); text-decoration: underline; text-underline-offset: 3px; }

/* FAQ reuse (wfaq) + concierge band */
.rcon { background: var(--ocre-tint); padding-block: var(--space-half); }
.rcon__inner { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.rcon__inner p { max-width: 48ch; font-size: var(--text-lead); line-height: 1.7; color: var(--ink-soft); }
.rcon__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 0.4rem; }


/* Lightbox */
.lb { position: fixed; inset: 0; z-index: var(--z-menu); background: rgba(24,26,26,0.96); display: grid; grid-template-rows: auto 1fr auto; color: var(--white); }
.lb[hidden] { display: none; }
.lb__bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; }
.lb__close { background: transparent; border: 0; color: inherit; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.lb__stage { position: relative; display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.lb__nav:hover { background: rgba(255,255,255,0.12); }
.lb__nav--prev { left: var(--gutter); } .lb__nav--next { right: var(--gutter); }
.lb__cap { padding: 1rem var(--gutter) 1.4rem; text-align: center; font-size: var(--text-sm); color: rgba(255,255,255,0.75); }

@media (max-width: 900px) {
  .rtop { padding-top: calc(var(--header-h, 72px) + 0.6rem); }
  .rhero { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.4rem; height: 62svw; min-height: 260px; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .rhero::-webkit-scrollbar { display: none; }
  .rhero__cell { flex: none; width: 88%; scroll-snap-align: center; }
  .rhero__cell:first-child { grid-row: auto; }
  .rhero__open { left: auto; right: calc(var(--gutter) + 0.6rem); bottom: 0.7rem; padding: 0.55rem 0.8rem; }
  .rhero__count { display: block; position: absolute; left: calc(var(--gutter) + 0.6rem); bottom: 0.7rem; z-index: 2; padding: 0.4rem 0.7rem; background: rgba(24,26,26,0.6); color: var(--white); font-size: var(--text-xs); letter-spacing: 0.14em; }
  .rhero { position: static; }
  .rherowrap { position: relative; }
  .rbody { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .rbook { position: static; order: -1; padding: 1.3rem 1.2rem; }
  .ramen__grid { grid-template-columns: 1fr; }
  .rloc__inner { grid-template-columns: 1fr; }
  .rpol__item { grid-template-columns: 1fr; gap: 0.2rem; }
  .lb__nav { width: 2.4rem; height: 2.4rem; }
}


/* ---------- Room page v2: hero full + intro + gallery + amenities ---------- */
.phero--room { height: 100svh; }
.btn--glass { background: rgba(255,255,255,0.14); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); backdrop-filter: blur(8px); border: 0; cursor: pointer; font-family: var(--font-body); }
.btn--glass::before { background: var(--white); }
.btn--glass:hover { color: var(--ink); }
.rintro { padding-block: var(--space-section) var(--space-half); }
.rintro__inner { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.rintro__text { display: grid; gap: 1.3rem; }
.rintro__text .title { max-width: 18ch; }
.rintro__text p { font-size: var(--text-lead); line-height: 1.85; max-width: 56ch; color: var(--ink-soft); }
.rintro__book { display: grid; gap: 0.9rem; padding: 2rem 1.8rem; background: var(--ocre-tint); }
.rintro__from { font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--madera); font-weight: 600; }
.rintro__price { font-family: var(--font-display); font-weight: 500; font-size: 3rem; line-height: 1; }
.rintro__price small { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-left: 0.5rem; }
.rintro__specs { list-style: none; display: grid; gap: 0.45rem; padding-block: 0.9rem; border-block: 1px solid rgba(166,97,46,0.16); font-size: var(--text-sm); }
.rintro__specs li { display: flex; gap: 0.6rem; align-items: baseline; }
.rintro__specs li::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; }
.rintro__book .btn { justify-content: center; }
.rintro__perks { font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--ink-soft); text-align: center; }
.rgal { padding-block: 0 var(--space-section); }
.rgal__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.rgal__grid { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; columns: 3; column-gap: clamp(0.8rem, 1.4vw, 1.2rem); }
.rgal__item { display: block; width: 100%; break-inside: avoid; margin: 0 0 clamp(0.8rem, 1.4vw, 1.2rem); padding: 0; border: 0; background: var(--perla-tint); overflow: clip; cursor: zoom-in; }
.rgal__item img { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease-out); }
.rgal__item:hover img { transform: scale(1.04); }
.ramen2 { padding-block: var(--space-half); background: var(--perla-tint); }
.ramen2__inner { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.ramen2__grid { list-style: none; width: min(100%, 64rem); margin-top: clamp(1.4rem, 3vw, 2.4rem); columns: 3; column-gap: 2.4rem; text-align: left; }
.ramen2__grid li { break-inside: avoid; display: flex; gap: 0.7rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px solid rgba(54,56,56,0.08); font-size: var(--text-sm); }
.ramen2__grid li::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; flex: none; }
@media (max-width: 900px) {
  .phero--room { height: calc(100svh - var(--sticky-h)); }
  .rintro__inner { grid-template-columns: 1fr; }
  .rgal__grid { columns: 2; }
  .ramen2__grid { columns: 1; }
}

/* ---------- Room page v3 · editorial ---------- */
.rh { height: 100svh; }
.rh__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,24,0.72) 0%, rgba(20,24,24,0.28) 38%, rgba(20,24,24,0) 62%), linear-gradient(to bottom, rgba(20,24,24,0.35), transparent 22%); }
.rh__content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(7.5rem, 15svh, 10rem); z-index: 2; color: var(--white); display: grid; gap: 0.9rem; }
.rh__kicker { font-size: var(--text-xs); letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.85; }
.rh__title { font-family: var(--font-display); font-weight: 400; line-height: 0.92; letter-spacing: -0.015em; font-size: clamp(3rem, 1.2rem + 6.4vw, 8.4rem); max-width: 12ch; }
.rh__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.4rem 0 1.6rem; border-top: 1px solid rgba(255,255,255,0.32); color: var(--white); }
.rh__facts { display: flex; flex-wrap: wrap; gap: 0 2.2rem; font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; }
.rh__facts span { opacity: 0.9; }
.rh__book { display: flex; align-items: center; gap: 1.6rem; }
.rh__from { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.rh__from b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0; text-transform: none; margin-inline: 0.3rem; }

.rstate { padding-block: var(--space-section) var(--space-half); }
.rstate__inner { display: grid; justify-items: center; text-align: center; gap: clamp(1.6rem, 3vw, 2.6rem); }
.rstate__big { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 4.4rem); line-height: 1.12; max-width: 26ch; text-wrap: balance; }
.rfacts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: min(100%, 62rem); border-block: 1px solid var(--perla-tint); }
.rfacts__c { display: grid; gap: 0.35rem; padding: 1.3rem 0.8rem; border-left: 1px solid var(--perla-tint); }
.rfacts__c:first-child { border-left: 0; }
.rfacts__c span { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.rfacts__c b { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; }
.rfacts__c--price b { color: var(--madera); }
.rfacts__c small { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.1em; }
.rstate__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); width: min(100%, 62rem); text-align: left; }
.rstate__cols p { font-size: var(--text-base); line-height: 1.85; color: var(--ink-soft); }

.rcomp { padding-block: var(--space-half) var(--space-section); overflow: clip; }
.rcomp__grid { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(0.8rem, 1.6vw, 1.6rem); row-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.rcomp__f { display: block; padding: 0; border: 0; background: var(--perla-tint); overflow: clip; cursor: zoom-in; will-change: transform; }
.rcomp__f img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease-out); }
.rcomp__f:hover img { transform: scale(1.035); }
.rcomp__f--a { grid-column: 1 / 9; aspect-ratio: 16 / 10; }
.rcomp__f--b { grid-column: 10 / 13; aspect-ratio: 3 / 4; margin-top: clamp(4rem, 12vw, 11rem); }
.rcomp__cap { grid-column: 2 / 6; align-self: center; font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); line-height: 1.3; color: var(--ink); }
.rcomp__f--c { grid-column: 7 / 13; aspect-ratio: 4 / 3; }
.rcomp__f--d { grid-column: 1 / 6; aspect-ratio: 4 / 5; }
.rcomp__f--e { grid-column: 7 / 11; aspect-ratio: 4 / 5; margin-top: clamp(3rem, 10vw, 9rem); }
.rcomp__all { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.rcomp__all .link-arrow { background: none; border: 0; cursor: pointer; font-family: var(--font-body); }

.ramen3 { padding-block: var(--space-half) var(--space-section); }
.ramen3__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.ramen3__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 4rem); border-top: 1px solid var(--ink); padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.ramen3__col h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin-bottom: 1rem; }
.ramen3__col ul { list-style: none; display: grid; }
.ramen3__col li { padding: 0.62rem 0; border-bottom: 1px solid var(--perla-tint); font-size: var(--text-sm); color: var(--ink-soft); }

.rbar { position: fixed; left: 50%; bottom: 1.4rem; z-index: var(--z-sticky-bar); transform: translate(-50%, 140%); display: flex; align-items: center; gap: 1.6rem; padding: 0.6rem 0.6rem 0.6rem 1.6rem; background: rgba(255,255,255,0.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-radius: 999px; box-shadow: 0 18px 50px rgba(54,56,56,0.14); transition: transform 0.7s var(--ease-out); }
.rbar.is-on { transform: translate(-50%, 0); }
.rbar__name { font-family: var(--font-display); font-size: 1.2rem; white-space: nowrap; }
.rbar__price { font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.rbar__price b { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--ink); letter-spacing: 0; margin-inline: 0.2rem; }

@media (max-width: 900px) {
  .rh { height: calc(100svh - var(--sticky-h)); }
  .rh__content { bottom: 8.6rem; }
  .rh__title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .rh__bar { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1rem 0 1.2rem; }
  .rh__facts { gap: 0.3rem 1.2rem; }
  .rh__book .btn { display: none; }
  .rfacts { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .rfacts__c { border-left: 0; border-bottom: 1px solid var(--perla-tint); }
  .rfacts__c--price { grid-column: 1 / -1; border-bottom: 0; }
  .rstate__cols { grid-template-columns: 1fr; }
  .rcomp__grid { row-gap: 1rem; }
  .rcomp__f--a, .rcomp__f--c { grid-column: 1 / -1; }
  .rcomp__f--b { grid-column: 5 / 13; margin-top: 0; }
  .rcomp__cap { grid-column: 1 / -1; padding-block: 1rem; }
  .rcomp__f--d { grid-column: 1 / 8; }
  .rcomp__f--e { grid-column: 6 / 13; margin-top: 3rem; }
  .ramen3__cols { grid-template-columns: 1fr; }
  .rbar { display: none; }
}

/* ---------- Room amenities v4: sticky side + signature tiles + grouped accordions ---------- */
.ramen4 { padding-block: var(--space-section); background: var(--ocre-tint); }
.ramen4__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.ramen4__side { position: sticky; top: calc(var(--header-h, 96px) + 2rem); display: grid; gap: 1.2rem; }
.ramen4__side > p { font-size: var(--text-lead); line-height: 1.75; color: var(--ink-soft); max-width: 34ch; }
.ramen4__photo { margin-top: 0.8rem; aspect-ratio: 4 / 5; overflow: clip; max-width: 26rem; }
.ramen4__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ramen4__sig { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(54,56,56,0.16); border-left: 1px solid rgba(54,56,56,0.16); margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.rsig { display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.4rem, 2.6vw, 2.2rem); border-right: 1px solid rgba(54,56,56,0.16); border-bottom: 1px solid rgba(54,56,56,0.16); background: rgba(255,255,255,0.55); transition: background 0.5s ease; }
.rsig:hover { background: var(--white); }
.rsig svg { width: 44px; height: 44px; color: var(--madera); margin-bottom: 0.8rem; }
.rsig b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); line-height: 1.1; }
.rsig span { font-size: var(--text-sm); color: var(--ink-soft); }
.rgrp { border-top: 1px solid var(--ink); }
.rgrp:last-child { border-bottom: 1px solid rgba(54,56,56,0.16); }
.rgrp summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; cursor: pointer; list-style: none; }
.rgrp summary::-webkit-details-marker { display: none; }
.rgrp__t { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem); transition: color 0.3s ease; }
.rgrp summary:hover .rgrp__t { color: var(--madera); }
.rgrp__n { display: inline-flex; align-items: center; gap: 0.9rem; font-size: var(--text-xs); letter-spacing: 0.2em; color: var(--ink-soft); }
.rgrp__n::after { content: "+"; font-size: 1.2rem; color: var(--madera); transition: transform 0.35s ease; }
.rgrp[open] .rgrp__n::after { transform: rotate(45deg); }
.rgrp ul { list-style: none; columns: 2; column-gap: 2.4rem; padding: 0 0 1.6rem; }
.rgrp li { break-inside: avoid; padding: 0.5rem 0; font-size: var(--text-sm); color: var(--ink-soft); border-bottom: 1px solid rgba(54,56,56,0.07); }
@media (max-width: 900px) {
  .ramen4__inner { grid-template-columns: 1fr; }
  .ramen4__side { position: static; }
  .ramen4__photo { max-width: none; aspect-ratio: 4 / 3; }
  .rsig { padding: 1.2rem 1rem; }
  .rsig svg { width: 36px; height: 36px; }
  .rgrp ul { columns: 1; }
}

/* ---------- Room amenities v5: drifting chip rows ---------- */
.ramen5 { padding-block: var(--space-half) var(--space-section); overflow: clip; }
.ramen5__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.ramen5__rows { display: grid; gap: clamp(0.6rem, 1vw, 0.9rem); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ramen5__row { overflow: hidden; }
.ramen5__track { display: flex; gap: clamp(0.6rem, 1vw, 0.9rem); width: max-content; animation: ramen-drift 60s linear infinite; }
.ramen5__row.is-rev .ramen5__track { animation-direction: reverse; animation-duration: 70s; }
.ramen5__row:nth-child(3) .ramen5__track { animation-duration: 54s; }
.ramen5__rows:hover .ramen5__track { animation-play-state: paused; }
.achip { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.5rem; border: 1px solid rgba(166,97,46,0.16); border-radius: 999px; background: var(--ocre-tint); font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); white-space: nowrap; color: var(--ink); }
.achip svg { width: 22px; height: 22px; color: var(--madera); flex: none; }
@keyframes ramen-drift { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .ramen5__track { animation: none; } .ramen5__row { overflow-x: auto; } }
@media (max-width: 900px) { .achip { padding: 0.75rem 1.1rem; font-size: 1.1rem; } .achip svg { width: 19px; height: 19px; } }

/* Mobile gallery: bento (6 tiles, last opens the lightbox). Desktop keeps .rcomp. */
.rbento { display: none; }
@media (max-width: 900px) {
  .rcomp__grid { display: none; }
  .rbento { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; width: min(100% - 2 * var(--gutter), 40rem); margin-inline: auto; }
  .rbento__t { position: relative; aspect-ratio: 1; padding: 0; border: 0; overflow: clip; background: var(--perla-tint); cursor: zoom-in; }
  .rbento__t--w { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .rbento__t img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rbento__more { position: absolute; inset: 0; display: grid; place-content: center; gap: 0.3rem; text-align: center; background: rgba(30,32,32,0.5); color: var(--white); font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
  .rbento__more small { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; }
  .rcomp__all { margin-top: 1.6rem; }
}

/* =====================================================================
   REMAINING INTERNAL PAGES (build-pages.py)
   ===================================================================== */
.phero--tall { height: 100svh; }
.wspaces__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wspaces__grid:not(.wspaces__grid--three):not(.wspaces__grid--two):has(> .wspace:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wspaces__grid:has(> .wspace:nth-child(4):last-child) .wspace__name { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.2rem); }
.wspace__link { display: grid; gap: 0.9rem; color: inherit; }
.wspace__link .link-arrow { justify-self: start; }
.xtag { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--madera); }
.wincl--white { background: var(--white); }
.wincl--rev .wincl__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.wincl--rev .wincl__media { grid-row: 1; grid-column: 1; }
.wincl--rev .wincl__text { grid-row: 1; grid-column: 2; }
.wincl__text .link-arrow { justify-self: start; margin-top: 0.6rem; }
/* Estas reglas van después del bloque móvil de .wspaces/.wincl y lo pisaban:
   en el teléfono quedaban 4 columnas y la foto al lado del texto. */
@media (max-width: 900px) {
  .wspaces__grid--two,
  .wspaces__grid:not(.wspaces__grid--three):not(.wspaces__grid--two):has(> .wspace:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
  .wincl--rev .wincl__inner { grid-template-columns: minmax(0, 1fr); }
  .wincl--rev .wincl__media, .wincl--rev .wincl__text { grid-row: auto; grid-column: auto; }
}

/* Accommodation overview */
.acc { padding-block: 0 var(--space-section); }
.acc--homes { padding-top: var(--space-half); background: var(--ocre-tint); padding-bottom: var(--space-section); }
/* Suites / Homes landings: the list follows the hero (or the other band) directly, so it needs its own top space */
.phero + .acc, .acc--homes + .acc { padding-top: var(--space-half); }
.phero + .acc--homes { padding-top: var(--space-half); }
.acc__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.acc__head p { max-width: 52ch; font-size: var(--text-lead); line-height: 1.7; color: var(--ink-soft); }
.acc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.2rem); }
.acc__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acc .room { width: auto; }
.acc .room__media { height: clamp(380px, 34vw, 560px); }
.acc__grid--two .room__media { height: clamp(420px, 40vw, 640px); }

/* Rows (wellness treatments, activities) */
.xrows { padding-block: 0 var(--space-section); }
.xrows__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4.4rem); }
.xrows__list { display: grid; gap: clamp(3rem, 7vw, 6.5rem); }
.xrow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.xrow--rev .xrow__media { order: 2; }
.xrow__media { overflow: clip; aspect-ratio: 3 / 2; }
.xrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease-out); }
.xrow:hover .xrow__media img { transform: scale(1.03); }
.xrow__txt { display: grid; gap: 0.9rem; align-content: center; }
.xrow__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3.2rem); line-height: 1.05; }
.xrow__txt p { font-size: var(--text-base); line-height: 1.8; color: var(--ink-soft); max-width: 46ch; }
.xrow__txt .link-arrow { justify-self: start; margin-top: 0.3rem; }

/* This week (activities) */
.wk { padding-block: var(--space-section) var(--space-half); }
.wk__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.wk__list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.6rem, 1.2vw, 1rem); }
.wk__i { display: grid; gap: 0.9rem; }
.wk__media { aspect-ratio: 3 / 4; overflow: clip; }
.wk__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk__txt { display: grid; gap: 0.3rem; border-top: 1px solid var(--ink); padding-top: 0.8rem; }
.wk__d { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--madera); font-weight: 600; }
.wk__txt b { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.1; }
.wk__t { font-size: var(--text-sm); color: var(--ink-soft); }

/* Packages */
.pkgs { padding-block: 0 var(--space-section); }
.pkgs__list { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.pkg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ocre-tint); }
.pkg:nth-child(even) .pkg__media { order: 2; }
.pkg__media { overflow: clip; min-height: 100%; }
.pkg__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pkg__body { display: grid; gap: 1rem; align-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.pkg__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.5rem + 1.8vw, 3.2rem); line-height: 1.05; }
.pkg__list { list-style: none; display: grid; gap: 0.5rem; font-size: var(--text-sm); }
.pkg__list li { display: flex; gap: 0.7rem; align-items: baseline; }
.pkg__list li::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; }
.pkg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(166,97,46,0.18); padding-top: 1.2rem; margin-top: 0.4rem; }
.pkg__price { display: grid; gap: 0.15rem; }
.pkg__price b { font-family: var(--font-display); font-weight: 500; font-size: 2.4rem; line-height: 1; }
.pkg__price span { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.pkg__note { font-size: var(--text-xs); color: var(--ink-soft); }

/* Facts (our concept) */
.facts { padding-block: var(--space-section); }
.facts__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin-bottom: 2rem; }
.facts__grid > div { padding: 1.5rem 1.4rem 1.6rem 0; border-right: 1px solid var(--perla-tint); }
.facts__grid > div + div { padding-left: 1.4rem; }
.facts__grid > div:last-child { border-right: 0; }
.facts dt { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }
.facts dd { font-size: var(--text-sm); line-height: 1.7; color: var(--ink-soft); }

/* Awards photo grid */
.awg { padding-block: 0 var(--space-section); }
.awg__grid { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.awg__f { aspect-ratio: 3 / 4; overflow: clip; }
.awg__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.awg__sign { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); }
.awg__sign em { color: var(--madera); }

/* Club perks + join form */
.perks { padding-block: 0 var(--space-half); }
.perks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--perla-tint); }
.perk { display: grid; gap: 0.5rem; padding: clamp(1.6rem, 3vw, 2.6rem); border-right: 1px solid var(--perla-tint); border-bottom: 1px solid var(--perla-tint); }
.perk__n { font-size: var(--text-xs); letter-spacing: 0.2em; color: var(--madera); font-weight: 600; }
.perk b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height: 1.1; }
.perk > span:last-child { font-size: var(--text-sm); color: var(--ink-soft); }
.perks__note { margin-top: 1.2rem; font-size: var(--text-xs); color: var(--ink-soft); }
.join { padding-block: var(--space-half) var(--space-section); }
.join__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.join__media { aspect-ratio: 4 / 5; overflow: clip; }
.join__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.join__form { display: grid; gap: 1.1rem; }
.join__form .btn { justify-self: start; border: 0; cursor: pointer; }

/* Doc pages (policies, privacy) */
body.doc-page .phero, body.doc-page .phero__scroll { display: none; }
.docpage { padding-block: calc(var(--header-h, 96px) + clamp(3rem, 6vw, 5rem)) var(--space-section); }
.docpage__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.docpage__head { position: sticky; top: calc(var(--header-h, 96px) + 2rem); display: grid; gap: 1rem; }
.docpage__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); line-height: 1; }
.docpage__head p { font-size: var(--text-lead); line-height: 1.7; color: var(--ink-soft); max-width: 36ch; }
.docpage__toc { display: flex; gap: 1.4rem; margin-top: 0.6rem; }
.docpage__toc a { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--madera); border-bottom: 1px solid rgba(166,97,46,0.4); padding-bottom: 0.2rem; }
.doc__group { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); padding-top: 0.4rem; margin: 0 0 0.4rem; scroll-margin-top: 7rem; }
.doc__group + .doc__s { border-top: 1px solid var(--ink); }
.doc__group:not(:first-child) { margin-top: clamp(2.5rem, 5vw, 4rem); }
.doc__s { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--perla-tint); }
.doc__s h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; grid-row: 1 / span 20; }
.doc__s p, .doc__s li { font-size: var(--text-base); line-height: 1.75; color: var(--ink-soft); }
.doc__s > *:not(h2) + *:not(h2) { margin-top: 0.7rem; }
.doc__s > :not(h2) { grid-column: 2; }
.doc__s ul { list-style: none; display: grid; gap: 0.55rem; }
.doc__s li { display: flex; gap: 0.7rem; align-items: baseline; }
.doc__s li::before { content: "\2726"; color: var(--ocre); font-size: 0.7em; flex: none; }
/* FAQ page: the wfaq accordion inside the policies layout, aligned left */
.docpage--faq .wfaq__list { width: 100%; margin-top: 0; }
.docpage--faq .doc__group + .wfaq__list .wfaq__item:first-child { border-top-color: var(--ink); }
.docpage--faq .wfaq__item summary { justify-content: space-between; text-align: left; }
.docpage--faq .wfaq__a { justify-items: start; }
.docpage--faq .wfaq__a p { max-width: 62ch; }
.docpage--faq .wfaq__a a, .docpage__more a { color: var(--madera); border-bottom: 1px solid rgba(166,97,46,0.4); }
.docpage__more { font-size: var(--text-base) !important; margin-top: 0.8rem; }
.phero + .docpage--faq { padding-top: var(--space-half); }
.docpage--faq .docpage__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }   /* questions first, contact box on the right */
@media (max-width: 900px) { .docpage--faq .docpage__inner { grid-template-columns: 1fr; } .docpage--faq .docpage__head { margin-top: 1rem; padding-top: 2.4rem; border-top: 1px solid var(--perla-tint); } }
@media (min-width: 901px) { .phero.phero--faq .phero__lead { max-width: 34ch; white-space: normal; } }   /* keeps the line clear of the people in the photo */
.docpage--faq .docpage__toc { flex-wrap: wrap; gap: 0.9rem 1.4rem; }
.docpage--faq .docpage__toc a { white-space: nowrap; }
.docpage--faq .docpage__title { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); }
.doc__s a, .ct a { color: var(--madera); }

/* Contact */
.ct { padding-block: var(--space-section); }
.ct__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ct__info { display: grid; gap: 1.3rem; }
.ct__list { display: grid; border-top: 1px solid var(--ink); }
.ct__list > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--perla-tint); }
.ct__list dt { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.2rem; }
.ct__list dd { font-family: var(--font-display); font-size: 1.35rem; }
.ct__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.4rem; }
.ct__form { background: var(--ocre-tint); padding: clamp(1.8rem, 4vw, 3rem); }
.ct__ft { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; }
.ct__map { margin-top: clamp(3rem, 6vw, 5rem); aspect-ratio: 21 / 8; overflow: clip; background: var(--oceano-tint); }
.ct__map iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.8); }
.wgal--page { padding-block: var(--space-half) var(--space-section); }

@media (max-width: 900px) {
  .phero--tall { height: calc(100svh - var(--sticky-h)); }
  .wspaces__grid:has(> .wspace:nth-child(4):last-child), .wspaces__grid--two { grid-template-columns: 1fr; }
  .wincl--rev .wincl__media, .wincl--rev .wincl__text { grid-row: auto; grid-column: auto; }
  .acc__grid, .acc__grid--two { grid-template-columns: 1fr; }
  .acc .room__media, .acc__grid--two .room__media { height: 120vw; max-height: 560px; }
  .xrow, .xrow--rev { grid-template-columns: 1fr; gap: 1.2rem; }
  .xrow--rev .xrow__media { order: 0; }
  .wk__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.6rem; scrollbar-width: none; }
  .wk__list::-webkit-scrollbar { display: none; }
  .wk__i { scroll-snap-align: start; }
  .pkg { grid-template-columns: 1fr; }
  .pkg:nth-child(even) .pkg__media { order: 0; }
  .pkg__media { aspect-ratio: 4 / 3; }
  .pkg__body { padding: 1.6rem 1.3rem 1.8rem; }
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .facts__grid > div { padding: 1.2rem 0.9rem 1.3rem 0; }
  .facts__grid > div + div { padding-left: 0.9rem; }
  .facts__grid > div:nth-child(2n) { border-right: 0; }
  .facts__grid > div:nth-child(3) { padding-left: 0; }
  .awg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perks__grid { grid-template-columns: 1fr 1fr; }
  .join__inner, .ct__inner, .docpage__inner { grid-template-columns: 1fr; }
  .join__media { aspect-ratio: 4 / 3; }
  .docpage__head { position: static; }
  .doc__s { grid-template-columns: 1fr; gap: 0.6rem; }
  .doc__s h2 { grid-row: auto; margin-bottom: 0.4rem; }
  .doc__s > :not(h2) { grid-column: 1; }
  .ct__list > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .ct__map { aspect-ratio: 4 / 3; }
}

/* ---------- Duna: facts legibles ---------- */
.dabout__facts span { text-transform: none; letter-spacing: 0.01em; font-size: var(--text-sm); line-height: 1.45; max-width: 18ch; margin-inline: auto; }

/* ---------- Duna: The School v2 — lista de cursos por nivel con foto fija ---------- */
.school2 { padding-block: var(--space-section); background: var(--oceano-tint); }
.school2__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.school2__side { position: sticky; top: calc(var(--header-h, 96px) + 2rem); display: grid; gap: 1.2rem; }
.school2__lead { font-size: var(--text-base); line-height: 1.8; color: var(--ink-soft); max-width: 42ch; }
.school2__fig { position: relative; aspect-ratio: 4 / 5; overflow: clip; margin-top: 0.6rem; max-width: 30rem; background: var(--ink); }
.cfig { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 0.8s var(--ease-out), transform 1.4s var(--ease-out); }
.cfig.is-on { opacity: 1; transform: scale(1); }
.cfig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctabs { display: flex; gap: clamp(1.4rem, 3vw, 2.6rem); border-bottom: 1px solid rgba(54,56,56,0.18); overflow-x: auto; scrollbar-width: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctab { background: none; border: 0; padding: 0 0 1.1rem; margin-bottom: -1px; border-bottom: 1px solid transparent; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: color 0.3s ease, border-color 0.3s ease; }
.ctab sup { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--madera); margin-left: 0.35rem; vertical-align: super; }
.ctab:hover { color: var(--ink); }
.ctab[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.ctab:focus-visible { outline: 2px solid var(--madera); outline-offset: 4px; }
.cpan[hidden] { display: none; }
.cpan__lead { padding: 1.3rem 0 0.4rem; font-size: var(--text-sm); color: var(--ink-soft); }
.crows { list-style: none; }
.crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.6rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid rgba(54,56,56,0.12); }
.crow__main { display: grid; gap: 0.35rem; }
.crow__tag { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--madera); font-weight: 600; }
.crow__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 2rem); line-height: 1.1; }
.crow__main p { font-size: var(--text-sm); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.crow__side { display: grid; justify-items: end; gap: 0.15rem; text-align: right; }
.crow__price { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; line-height: 1; }
.crow__side small { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.crow__side .link-arrow { margin-top: 0.6rem; }
.crow { transition: background 0.4s ease; }
@media (hover: hover) { .crow:hover .crow__name { color: var(--madera); } }

/* ---------- Duna: Beyond Diving v2 — paneles que se expanden ---------- */
.beyond2 { padding-block: var(--space-section); }
.beyond2__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.beyond2__head p { max-width: 50ch; font-size: var(--text-lead); line-height: 1.7; color: var(--ink-soft); }
.bpanels { width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto; display: flex; gap: 0.6rem; height: clamp(460px, 68svh, 680px); }
.bpanel { position: relative; flex: 1; overflow: clip; color: var(--white); transition: flex 0.9s var(--ease-out); }
.bpanel.is-open { flex: 2.6; }
.bpanel picture, .bpanel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bpanel img { transition: transform 1.4s var(--ease-out); }
.bpanel.is-open img { transform: scale(1.03); }
.bpanel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,28,30,0.8) 0%, rgba(18,28,30,0.25) 45%, rgba(18,28,30,0.05) 75%); }
.bpanel__txt { position: absolute; left: clamp(1.2rem, 2.4vw, 2.2rem); right: clamp(1.2rem, 2.4vw, 2.2rem); bottom: clamp(1.4rem, 2.6vw, 2.4rem); z-index: 1; display: grid; gap: 0.6rem; }
.bpanel__txt i { font-style: normal; font-size: var(--text-xs); letter-spacing: 0.2em; opacity: 0.8; }
.bpanel__txt b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 3rem); line-height: 1; white-space: nowrap; }
.bpanel__txt > span, .bpanel__txt em { max-width: 34ch; font-size: var(--text-sm); line-height: 1.6; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.2s, transform 0.6s var(--ease-out) 0.2s; }
.bpanel__txt em { font-style: normal; display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }
.bpanel.is-open .bpanel__txt > span, .bpanel.is-open .bpanel__txt em { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .school2__inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .school2__side { position: static; }
  .school2__fig { aspect-ratio: 16 / 10; max-width: none; }
  .crow { grid-template-columns: 1fr; gap: 0.8rem; }
  .crow__side { grid-template-columns: auto auto 1fr; align-items: baseline; justify-items: start; gap: 0.5rem; text-align: left; }
  .crow__side .link-arrow { justify-self: end; margin-top: 0; }
  .bpanels { flex-direction: column; height: auto; }
  .bpanel, .bpanel.is-open { flex: none; aspect-ratio: 4 / 5; }
  .bpanel__txt > span, .bpanel__txt em { opacity: 1; transform: none; }
}

/* ---------- Duna · The School v3: rail horizontal fijado + índice de niveles ---------- */
.school3 { padding-block: calc(var(--header-h, 90px) + clamp(0.6rem, 2vh, 1.6rem)) clamp(1.6rem, 3vh, 2.6rem); background: var(--oceano-tint); min-height: 100svh; display: grid; align-content: center; overflow: clip; }
.school3__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.school3__title { display: grid; gap: 0.8rem; }
.school3__title p { font-size: var(--text-sm); line-height: 1.7; color: var(--ink-soft); max-width: 58ch; }
.school3__lv { display: flex; gap: 0.4rem; background: var(--white); border-radius: 999px; padding: 0.35rem; box-shadow: 0 8px 26px rgba(54,56,56,0.07); }
.slv { display: inline-flex; align-items: baseline; gap: 0.45rem; border: 0; background: none; border-radius: 999px; padding: 0.85rem 1.3rem; cursor: pointer; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; transition: background 0.35s ease, color 0.35s ease; }
.slv em { font-style: normal; color: var(--madera); letter-spacing: 0.1em; transition: color 0.35s ease; }
.slv sup { font-size: 0.62rem; letter-spacing: 0.05em; opacity: 0.7; }
.slv:hover { color: var(--ink); }
.slv[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.slv[aria-pressed="true"] em { color: var(--ocre); }
.school3__rail { overflow-x: auto; scrollbar-width: none; }
.school3__rail::-webkit-scrollbar { display: none; }
.school3__rail.is-driven { overflow: hidden; }
.school3__track { display: flex; gap: clamp(0.7rem, 1.2vw, 1rem); padding-inline: max(var(--gutter), (100vw - 86rem) / 2); width: max-content; will-change: transform; }
.sc { flex: none; width: clamp(260px, 22vw, 330px); display: grid; grid-template-rows: auto 1fr; background: var(--white); }
.sc__img { position: relative; aspect-ratio: 4 / 3; overflow: clip; }
.sc__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.sc:hover .sc__img img { transform: scale(1.05); }
.sc__tag { position: absolute; left: 0.8rem; top: 0.8rem; background: rgba(255,255,255,0.92); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--madera); }
.sc__b { display: grid; gap: 0.55rem; align-content: start; padding: 1.2rem 1.25rem 1.3rem; grid-template-rows: auto 1fr auto auto; }
.sc__b h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; line-height: 1.1; }
.sc__b p { font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }
.sc__meta { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.sc__f { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border-top: 1px solid var(--perla-tint); padding-top: 0.9rem; margin-top: 0.2rem; }
.sc__p b { font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; line-height: 1; }
.sc__p small { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-left: 0.3rem; }
.sc__go { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 999px; padding: 0.65rem 1rem; background: var(--ocre-tint); color: var(--madera); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.3s ease, color 0.3s ease; }
.sc__go:hover { background: var(--madera); color: var(--white); }
.sc--lv { background: var(--ink); color: var(--white); padding: clamp(1.4rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 0.8rem; width: clamp(230px, 19vw, 290px); }
.sc--lv em { font-style: normal; font-family: var(--font-display); font-size: 4.2rem; line-height: 0.8; color: var(--ocre); }
.sc--lv b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3rem); line-height: 1; margin-top: auto; }
.sc--lv p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.72); }
.sc--lv span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocre); font-weight: 600; }
.school3__ui { display: flex; align-items: center; gap: 1.4rem; margin-top: clamp(1.2rem, 2.6vh, 2rem); }
.school3__bar { flex: 1; height: 1px; background: rgba(54,56,56,0.16); position: relative; }
.school3__bar i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%; background: var(--madera); transform-origin: left; transform: scaleX(0); }
.school3__hint { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 900px) {
  .school3 { min-height: calc(100svh - var(--sticky-h)); padding-block: calc(var(--header-h, 72px) + 0.4rem) 1.2rem; }
  .school3__head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
  .school3__title p { display: none; }
  .school3__title .title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .school3__lv { width: 100%; justify-content: space-between; }
  .slv { padding: 0.7rem 0.75rem; font-size: 0.64rem; letter-spacing: 0.1em; }
  .slv em, .slv sup { display: none; }
  .sc { width: 74vw; }
  .sc__img { aspect-ratio: 16 / 10; }
  .sc__b p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sc--lv { width: 60vw; }
  .sc--lv em { font-size: 3rem; }
}
.bpanel:not(.is-open) .bpanel__txt b { white-space: normal; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); }
@media (max-width: 900px) { .bpanel:not(.is-open) .bpanel__txt b { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 3rem); } }
.bpanel__credit { position: absolute; right: 0.8rem; top: 0.7rem; z-index: 1; font-size: 0.6rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.75); }

/* ---------- Duna · Request drawer ---------- */
.rq { position: fixed; inset: 0; z-index: calc(var(--z-menu) + 2); }
.rq[hidden] { display: none; }
.rq__scrim { position: absolute; inset: 0; background: rgba(24,28,28,0.5); opacity: 0; transition: opacity 0.5s ease; }
.rq.is-open .rq__scrim { opacity: 1; }
.rq__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 38rem); background: var(--white); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.6rem, 3vw, 2.6rem); transform: translateX(100%); transition: transform 0.6s var(--ease-out); display: grid; align-content: start; gap: 1.2rem; }
.rq.is-open .rq__panel { transform: none; }
.rq__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.rq__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1.05; margin-top: 0.5rem; }
.rq__title em { color: var(--madera); }
.rq__x { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--perla-tint); background: none; cursor: pointer; font-size: 1rem; flex: none; }
.rq__x:hover { background: var(--ink); color: var(--white); }
.rq__lead { font-size: var(--text-sm); line-height: 1.7; color: var(--ink-soft); }
.rq .wform__form { display: grid; gap: 1.2rem; }
.rq .wform__grid { grid-template-columns: 1fr 1fr; }
.rq .wform__set legend { font-family: var(--font-display); font-size: 1.35rem; }
@media (max-width: 600px) { .rq .wform__grid { grid-template-columns: 1fr 1fr; } .rq__panel { width: 100%; padding-bottom: calc(1.6rem + var(--sticky-h)); } }
.bpanel img[src*="charter"] { object-position: 60% 92%; }
.fld select.is-flash { box-shadow: 0 2px 0 var(--madera); transition: box-shadow 0.3s ease; }
/* Retratos (chef): siempre verticales, también en móvil (la regla general 3:2 de .wincl__media los recortaba) */
@media (max-width: 900px) { .wincl .wincl__media.wincl__media--portrait img { aspect-ratio: 4 / 5; object-position: center 20%; } }

/* Weddings · Your Day (reemplaza "Four Settings") */
.wday { padding-block: 0 var(--space-section); }
.wday__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.wday__head p { max-width: 48ch; font-size: var(--text-lead); line-height: 1.7; color: var(--ink-soft); }
.wday__rail { width: min(100% - 2 * var(--gutter), 86rem); margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.4rem); position: relative; }
.wday__rail::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--wday-h, 0px)); height: 0; }
.wday__i { display: grid; gap: 0.6rem; align-content: start; }
.wday__media { position: relative; aspect-ratio: 3 / 4; overflow: clip; margin-bottom: 0.4rem; }
.wday__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.wday__i:hover .wday__media img { transform: scale(1.04); }
.wday__n { position: absolute; left: 0.9rem; top: 0.7rem; font-family: var(--font-display); font-size: 2.2rem; color: var(--white); text-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.wday__tag { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--madera); font-weight: 600; }
.wday__t { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.2rem); line-height: 1.1; }
.wday__i p { font-size: var(--text-sm); line-height: 1.7; color: var(--ink-soft); max-width: 34ch; }
@media (max-width: 900px) {
  .wday__rail { width: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .wday__rail::-webkit-scrollbar { display: none; }
  .wday__i { flex: none; width: 76vw; scroll-snap-align: start; }
}

/* About · reconocimientos */
.recog { border-bottom: 1px solid var(--perla-tint); }
.recog__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recog__i { display: grid; gap: 0.3rem; justify-items: center; text-align: center; padding: clamp(1.4rem, 3vw, 2.2rem) 1rem; }
.recog__i + .recog__i { border-left: 1px solid var(--perla-tint); }
.recog__i b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); }
.recog__i span { font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
/* Club · íconos */
.perk__ic { width: 46px; height: 46px; color: var(--madera); margin-bottom: 0.6rem; }
/* Michelin · encabezado de la galería de servicio */
.awg__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.awg__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Retreats · próximo retiro */
.nextret { padding-block: var(--space-half) var(--space-section); background: var(--ocre-tint); }
.nextret__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.nextret__media { aspect-ratio: 4 / 3; overflow: clip; }
.nextret__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nextret__txt { display: grid; gap: 1.1rem; }
.nextret__txt p { font-size: var(--text-lead); line-height: 1.75; color: var(--ink-soft); max-width: 44ch; }
.wgal__item[data-lb] { cursor: zoom-in; }
@media (max-width: 900px) {
  .recog__row { grid-template-columns: 1fr; }
  .recog__i + .recog__i { border-left: 0; border-top: 1px solid var(--perla-tint); }
  .nextret__inner { grid-template-columns: 1fr; }
  .awg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Special Packages · stacking cards ---------- */
.pkstack { padding: 0 var(--gutter) var(--space-section); }
.pkstack__list { width: min(100%, 90rem); margin-inline: auto; }
.pkc { position: sticky; top: calc(var(--header-h, 90px) + 1rem + var(--i) * 14px); height: min(calc(100svh - var(--header-h, 90px) - 3rem), 760px); margin-bottom: 8svh; }
.pkc:last-child { margin-bottom: 0; }
/* Pausa: la tarjeta se queda entera y quieta este tramo de scroll antes de que suba la siguiente */
.pkc:not(:last-child) { margin-bottom: 45svh; }
@media (max-width: 900px) { .pkc:not(:last-child) { margin-bottom: 55svh; } }
.pkc__in { height: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); background: var(--ocre-tint); border-radius: 22px; overflow: clip; box-shadow: 0 -18px 60px rgba(40,34,28,0.12); transform-origin: 50% 0; will-change: transform; }
.pkc:nth-child(2) .pkc__in { background: #eef1f0; }
.pkc:nth-child(3) .pkc__in { background: #f4efe9; }
.pkc:nth-child(4) .pkc__in { background: #f6ece6; }
.pkc__media { position: relative; overflow: clip; }
.pkc__media picture, .pkc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pkc__media img { transform: scale(1.08); transition: transform 2.4s var(--ease-out); }
.pkc.is-in .pkc__media img { transform: scale(1); }
.pkc__num { position: absolute; left: clamp(1.2rem, 2.4vw, 2rem); bottom: clamp(1rem, 2vw, 1.6rem); font-family: var(--font-display); font-size: clamp(3.4rem, 2rem + 4vw, 6.4rem); line-height: 0.8; color: var(--white); text-shadow: 0 4px 30px rgba(0,0,0,0.3); }
.pkc__num i { font-style: normal; font-size: 0.26em; letter-spacing: 0.12em; margin-left: 0.4rem; opacity: 0.85; }
.pkc__body { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.4vh, 1.1rem); padding: clamp(1.6rem, 3.6vw, 3.6rem); overflow-y: auto; }
.pkc__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 1.5rem + 2.6vw, 4.2rem); line-height: 0.98; letter-spacing: -0.01em; }
.pkc__pitch { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.4; color: var(--ink-soft); max-width: 30ch; }
.pkc__inc { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.4rem; }
.pkc__inc li { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; background: rgba(255,255,255,0.7); border-radius: 12px; font-size: 0.84rem; line-height: 1.35; }
.pkc__inc svg { width: 22px; height: 22px; flex: none; color: var(--madera); }
.pkc__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid rgba(54,56,56,0.12); }
.pkc__price { display: grid; gap: 0.1rem; }
.pkc__price small, .pkc__price span { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.pkc__price b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); line-height: 1; color: var(--ink); }
.pkc__cta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pkc__note { font-size: 0.72rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .pkstack { padding-inline: 0.5rem; }
  .pkc { top: calc(var(--header-h, 72px) + 0.3rem + var(--i) * 9px); height: calc(100svh - var(--header-h, 72px) - var(--sticky-h) - 1.2rem - var(--i) * 9px); min-height: 560px; margin-bottom: 5svh; }
  .pkc__in { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 30%) 1fr; border-radius: 18px; }
  .pkc__num { font-size: 2.8rem; }
  .pkc__body { padding: 1rem 1.05rem 1.05rem; gap: 0.55rem; overflow: hidden; }
  .pkc__name { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .pkc__pitch { display: none; }
  .pkc__inc { grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-top: 0.1rem; }
  .pkc__inc li { padding: 0.5rem 0.55rem; gap: 0.45rem; font-size: 0.74rem; border-radius: 10px; }
  .pkc__inc svg { width: 17px; height: 17px; }
  .pkc__foot { padding-top: 0.7rem; gap: 0.6rem; }
  .pkc__price b { font-size: 2.2rem; }
  .pkc__cta { width: 100%; }
  .pkc__cta .btn { flex: 1; justify-content: center; padding-inline: 0.8rem; }
  .pkc__note { display: none; }
}


/* Luna Muna · horarios compactos */
.lmh { padding-block: var(--space-half) var(--space-section); }
.lmh__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
.lmh__list { display: grid; border-top: 1px solid var(--ink); }
.lmh__i { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); padding: 1.1rem 0; border-bottom: 1px solid var(--perla-tint); color: inherit; }
.lmh__img { aspect-ratio: 4 / 3; overflow: clip; }
.lmh__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-out); }
.lmh__i:hover .lmh__img img { transform: scale(1.06); }
.lmh__t { display: flex; align-items: baseline; gap: 1.6rem; flex-wrap: wrap; }
.lmh__t b { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.6rem); line-height: 1.1; }
.lmh__t span { font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.lmh__go { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--madera); }
.lmh__i:hover .lmh__t b { color: var(--madera); }
@media (max-width: 900px) {
  .lmh__i { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.9rem; }
  .lmh__t { flex-direction: column; gap: 0.2rem; }
  .lmh__go { grid-column: 2; }
  /* portada: título abajo, sobre la foto del home */
  .phero--lm .phero__content { align-content: end; padding-bottom: 4.6rem; }
  .phero--lm .phero__scrim { background: linear-gradient(to top, rgba(24,26,26,0.78) 0%, rgba(24,26,26,0.35) 40%, rgba(24,26,26,0.1) 70%, rgba(24,26,26,0.35) 100%); }
  .phero--lm .phero__title { font-size: clamp(3rem, 14vw, 4.2rem); }
  .phero--lm .phero__scroll { display: none; }
}

/* Luna Muna · sombra suave detrás del texto del hero (≈20%) */
.phero--lm .phero__content::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(58rem, 96vw); height: 22rem; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(18,20,20,0.34) 0%, rgba(18,20,20,0.2) 45%, rgba(18,20,20,0) 72%); z-index: -1; pointer-events: none; }
.phero--lm .phero__content { isolation: isolate; }
@media (max-width: 900px) { .phero--lm .phero__content::before { top: auto; bottom: 0; transform: translateX(-50%); width: 140vw; height: 26rem; background: radial-gradient(ellipse at 50% 70%, rgba(18,20,20,0.36) 0%, rgba(18,20,20,0.2) 45%, rgba(18,20,20,0) 72%); } }

/* Chef · nombre y cargo sobre la foto */
.wincl__media--portrait .wincl__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3.2rem 1.3rem 1.2rem; border-top: 0; background: linear-gradient(to top, rgba(18,20,20,0.7), rgba(18,20,20,0)); }
.wincl__media--portrait .wincl__cap b { color: var(--white); font-size: 1.6rem; }
.wincl__media--portrait .wincl__cap span { color: rgba(255,255,255,0.85); }

/* Heros internos (escritorio): texto abajo a la izquierda, botones abajo a la
   derecha, en vez de todo centrado. Móvil sin cambios. */
@media (min-width: 901px) {
  .phero .phero__content {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-rows: auto;
    align-content: end; justify-items: start; text-align: left;
    column-gap: 3rem; row-gap: 0.9rem;
    width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto; padding: 0 0 clamp(3rem, 7svh, 5rem);
  }
  .phero .phero__content > * { grid-column: 1; }
  .phero .phero__content .eyebrow { justify-self: start; }
  .phero .phero__content .eyebrow::before { display: none; }
  .phero .phero__title { font-size: clamp(3.2rem, 1.6rem + 4.4vw, 7rem); line-height: 0.95; letter-spacing: -0.01em; font-weight: 500; }
  .phero .phero__lead { max-width: 52ch; }
  .phero .phero__actions { grid-column: 2; grid-row: 1 / span 3; align-self: end; justify-content: flex-end; margin: 0; }
  .phero .phero__scrim { background: linear-gradient(to top, rgba(18,20,20,0.62) 0%, rgba(18,20,20,0.28) 38%, rgba(18,20,20,0.08) 65%, rgba(18,20,20,0.32) 100%), linear-gradient(to right, rgba(18,20,20,0.3), rgba(18,20,20,0) 55%); }
  .phero .phero__scroll { left: auto; right: var(--gutter); transform: none; display: none; }
  .phero--lm .phero__content::before { left: 0; top: auto; bottom: 0; width: 60rem; height: 24rem; transform: translate(-18%, 25%); background: radial-gradient(ellipse at 30% 60%, rgba(18,20,20,0.34) 0%, rgba(18,20,20,0.18) 45%, rgba(18,20,20,0) 72%); }
}

/* Heros internos (móvil): texto abajo con sombra para leer bien */
@media (max-width: 900px) {
  .phero .phero__content { align-content: end; padding-bottom: 3.2rem; }
  .phero .phero__scrim { background: linear-gradient(to top, rgba(16,18,18,0.78) 0%, rgba(16,18,18,0.45) 32%, rgba(16,18,18,0.12) 60%, rgba(16,18,18,0.35) 100%); }
  .phero .phero__scroll { display: none; }
}

/* Paquetes (móvil): la tarjeta mide lo que su contenido; precio justo debajo */
@media (max-width: 900px) {
  .pkc { height: auto; min-height: 0; margin-bottom: 1.2rem; }
  .pkc__in { grid-template-rows: 210px auto; }
  .pkc__body { overflow: visible; }
  .pkc__inc { grid-template-columns: 1fr; gap: 0.3rem; }
  .pkc__foot { margin-top: 0.3rem; }
}

/* This Week (móvil): fila deslizable real */
@media (max-width: 900px) {
  .wk__list { display: flex; gap: 0.7rem; width: auto; margin: 0; padding: 0 var(--gutter) 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .wk__i { flex: none; width: 64vw; scroll-snap-align: start; }
}

/* About · logos de reconocimiento */
.recog__logo { height: clamp(34px, 3.2vw, 46px); width: auto; object-fit: contain; margin-bottom: 0.3rem; }

/* Luna Muna · reseñas */
.lmr { padding-block: 0 var(--space-section); }
.lmr__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lmr__scores { display: flex; gap: clamp(1.4rem, 4vw, 3.4rem); margin-top: 0.4rem; }
.lmr__scores div { display: grid; justify-items: center; gap: 0.15rem; }
.lmr__scores dt { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.lmr__scores dd { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.lmr__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.lmr__q { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--ocre-tint); margin: 0; }
.lmr__stars { color: var(--madera); letter-spacing: 0.2em; font-size: 0.85rem; }
.lmr__q blockquote { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.35; margin: 0; }
.lmr__q figcaption { margin-top: auto; font-size: var(--text-sm); font-weight: 600; }
.lmr__q figcaption span { font-weight: 400; color: var(--ink-soft); }
.lmr__more { display: flex; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
@media (max-width: 900px) {
  .lmr__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.7rem; width: auto; padding-inline: var(--gutter); scrollbar-width: none; }
  .lmr__grid::-webkit-scrollbar { display: none; }
  .lmr__q { flex: none; width: 78vw; scroll-snap-align: start; }
  .lmr__scores { gap: 1.2rem; }
}

/* Activities · This Week: la sección se fija y el scroll mueve la fila */
.wk { overflow: clip; }
.wk__rail { overflow-x: auto; scrollbar-width: none; }
.wk__rail::-webkit-scrollbar { display: none; }
.wk__rail.is-driven { overflow: hidden; }
.wk .wk__list { display: flex; gap: clamp(0.7rem, 1.2vw, 1rem); width: max-content; margin: 0; padding: 0 max(var(--gutter), (100vw - 82rem) / 2); overflow: visible; will-change: transform; }
.wk .wk__i { flex: none; width: clamp(260px, 26vw, 380px); }
@media (max-width: 900px) { .wk .wk__i { width: 70vw; } .wk .wk__list { padding: 0 var(--gutter); } }
.xp--page { padding-top: 0; }
.awg { padding-top: var(--space-section); }

/* Duna · Beyond Diving: tres paneles iguales, texto siempre visible */
.bpanel, .bpanel.is-open { flex: 1; }
.bpanel__txt > span, .bpanel__txt em { opacity: 1; transform: none; }
.bpanel:not(.is-open) .bpanel__txt b, .bpanel__txt b { white-space: normal; font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.8rem); }
.bpanel:hover img { transform: scale(1.04); }
.bpanels { height: clamp(460px, 62svh, 620px); }

/* Paquetes (móvil) v3: tarjeta más angosta y cuadrada, foto más grande, todo centrado */
@media (max-width: 900px) {
  .pkstack { padding-inline: 7vw; }
  .pkc__in { grid-template-rows: auto auto; border-radius: 16px; }
  .pkc__media { aspect-ratio: 4 / 3; }
  .pkc__body { align-items: center; text-align: center; padding: 1.1rem 1rem 1.2rem; gap: 0.6rem; }
  .pkc__name { font-size: clamp(1.8rem, 7.5vw, 2.2rem); }
  .pkc__inc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
  .pkc__inc li { padding: 0.4rem 0.65rem; border-radius: 999px; font-size: 0.72rem; gap: 0.35rem; }
  .pkc__inc svg { width: 15px; height: 15px; }
  .pkc__foot { flex-direction: column; align-items: center; width: 100%; gap: 0.7rem; }
  .pkc__price { justify-items: center; }
  .pkc__cta { justify-content: center; }
}

/* Móvil: EN / ES siempre visible en el header */
@media (max-width: 900px) {
  .header .header__lang { display: inline-flex; font-size: 0.72rem; letter-spacing: 0.14em; }
  .header__right { display: flex; align-items: center; justify-content: flex-end; }
}

/* Activities · This Week (móvil): tarjeta completa por encima de la barra fija */
@media (max-width: 900px) {
  .wk { padding-block: 1.2rem 1.6rem; }
  .wk__head { margin-bottom: 1rem; }
  .wk .wk__i { width: 68vw; }
  .wk__media { aspect-ratio: 4 / 3; }
  .wk__txt b { font-size: 1.3rem; }
}

/* Luna Muna · reseñas (móvil): carrusel infinito con fundido en los bordes */
@media (max-width: 900px) {
  .lmr__grid { display: block; overflow: hidden; padding: 0; width: auto; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .lmr__track { display: flex; gap: 0.8rem; width: max-content; animation: lmr-loop 36s linear infinite; }
  .lmr__grid:active .lmr__track { animation-play-state: paused; }
  .lmr__q { width: 250px; flex: none; padding: 1.3rem; }
  .lmr__q blockquote { font-size: 1.2rem; }
}
@keyframes lmr-loop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lmr__track { animation: none; } }
@media (max-width: 900px) { .header .header__lang { font-size: 0.86rem; letter-spacing: 0.12em; padding: 0.4rem 0.2rem; } }
@media (max-width: 900px) {
  .wk { padding-block: clamp(3.5rem, 12vw, 5rem) 1.6rem; }
  .wk__media { aspect-ratio: 3 / 4; }
  .wk .wk__i { width: 58vw; }
}

/* Espacio real entre This Week y la sección siguiente */
.wk { padding-bottom: clamp(3rem, 7vw, 6rem); }
.wk + .xp--page { padding-top: var(--space-half); }
@media (max-width: 900px) { .wk { padding-bottom: 3.4rem; } .wk + .xp--page { padding-top: 2.6rem; } }
/* Michelin · logo sobre la introducción */
.awlogo { display: flex; justify-content: center; padding-top: var(--space-section); }
.awlogo { gap: clamp(1.2rem, 3vw, 2.6rem); }
.awlogo img { width: clamp(120px, 13vw, 190px); height: auto; }   /* dos Llaves MICHELIN (2025 y 2026) */
.awlogo + .wintro { padding-top: clamp(1.6rem, 3vw, 2.6rem); }
@media (max-width: 900px) { .wk { padding-bottom: 5rem; } }
@media (max-width: 900px) { .bpanels { height: auto; } .bpanel, .bpanel.is-open { flex: none; aspect-ratio: 4 / 5; } }

/* Duna · sitios de buceo (móvil): tarjetas que se apilan, como los paquetes */
@media (max-width: 900px) {
  .stack { margin-top: 1.6rem; padding: 0 7vw; isolation: auto; }
  .stack__item { position: sticky; top: calc(var(--header-h, 72px) + 0.4rem + var(--si, 0) * 9px); height: auto; clip-path: none; background: transparent; color: var(--ink); margin-bottom: 1.2rem; z-index: auto; }
  .stack__item:nth-child(1) { --si: 0; } .stack__item:nth-child(2) { --si: 1; } .stack__item:nth-child(3) { --si: 2; } .stack__item:nth-child(4) { --si: 3; }
  .stack__item:nth-child(5) { --si: 4; } .stack__item:nth-child(6) { --si: 5; } .stack__item:nth-child(7) { --si: 6; }
  .stack__stage { height: auto; display: grid; background: #eef1f0; border-radius: 16px; overflow: clip; box-shadow: 0 -16px 50px rgba(20,34,36,0.14); transform-origin: 50% 0; will-change: transform; }
  .stack__item:nth-child(even) .stack__stage { background: var(--ocre-tint); }
  .stack__bg { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .stack__bg::after { display: none; }
  .stack__inner { position: static; height: auto; width: auto; margin: 0; display: block; padding: 1.1rem 1rem 1.3rem; pointer-events: auto; color: var(--ink); }
  .stack__txt { justify-items: center; text-align: center; gap: 0.5rem; max-width: none; }
  .stack__kind { color: var(--madera); }
  .stack__name { font-size: clamp(1.9rem, 8vw, 2.3rem); color: var(--ink); }
  .stack__txt p { display: block; font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft); }
  .stack__meta { justify-content: center; gap: 0.5rem; }
  .stack__meta span { background: rgba(255,255,255,0.75); border-radius: 999px; padding: 0.4rem 0.8rem; display: inline-flex; gap: 0.35rem; align-items: baseline; }
  .stack__meta b { font-size: 1rem; color: var(--ink); }
  .stack__meta small { color: var(--ink-soft); font-size: 0.6rem; }
  .stack__txt .link-arrow--light { color: var(--madera); }
  .stack__bar, .stack__inset { display: none; }
}
@media (max-width: 900px) { .stack__item:first-child .stack__inner { transform: none; } }

/* ------------------------------------------------------------
   iOS / barra de Safari. 100svh = pantalla con la barra del navegador
   expandida; al hacer scroll Safari la recoge y el área visible crece hasta
   100lvh. Los escenarios fijos (pin/sticky) medidos en svh dejaban una franja
   oscura abajo. Se miden en lvh (no cambia nunca) y lo que va anclado abajo
   se sube --tb para que la barra del navegador no lo tape cuando está abierta.
   ------------------------------------------------------------ */
:root { --tb: calc(100lvh - 100svh); }
@supports not (height: 100lvh) { :root { --tb: 0px; } }
@media (max-width: 900px) {
  .fromabove__stage { height: calc(100lvh - var(--sticky-h)); }
  .fromabove__caption { padding-bottom: calc(clamp(3.5rem, 8vh, 5rem) + var(--tb)); }
  .fromabove__ui { bottom: calc(1.6rem + var(--tb)); }

  .dive__sticky, .dive__band { height: calc(100lvh - var(--sticky-h)); }
  .dive__band[data-band="1"] { top: calc(100lvh - var(--sticky-h)); }
  .dive__band[data-band="2"] { top: calc(2 * (100lvh - var(--sticky-h))); }
  .dive__band[data-band="3"] { top: calc(3 * (100lvh - var(--sticky-h))); }
  .dive__hud { bottom: calc(1.6rem + var(--tb)); }
  .dive__scroll { bottom: calc(7.4rem + var(--tb)); }
  .dive__copy { padding-bottom: calc(24svh + var(--tb)); }
}

/* La barra fija de móvil tapaba la línea legal (© / Designed by) y el
   wordmark al final de la página: el footer reserva su alto debajo. */
@media (max-width: 900px) {
  .footer { padding-bottom: calc(var(--sticky-h) + 0.6rem); }
  .footer__wordmark { transform: none; }
}

/* ------------------------------------------------------------
   Menús de Luna Muna — ventana emergente (main.js initMenuViewer)
   ------------------------------------------------------------ */
.mnu { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: clamp(0.8rem, 3vw, 2.4rem);
  background: rgba(30, 32, 32, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.mnu.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
html.mnu-open, html.mnu-open body { overflow: hidden; }
.mnu__panel { width: min(100%, 60rem); height: min(100%, 92svh); display: flex; flex-direction: column; background: var(--white);
  border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(14px); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mnu.is-open .mnu__panel { transform: none; }
.mnu__bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.9rem 0.8rem 1.1rem; border-bottom: 1px solid var(--perla-tint); }
.mnu__tabs { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.mnu__tabs::-webkit-scrollbar { display: none; }
.mnu__tab { flex: none; font: 500 0.875rem/1 var(--font-body); letter-spacing: 0.04em; color: var(--ink); background: var(--perla-tint);
  border: 1px solid transparent; border-radius: 999px; padding: 0.6rem 1rem; cursor: pointer; transition: background 0.25s, color 0.25s; }
.mnu__tab:hover { background: var(--madera-tint); }
.mnu__tab.is-active { background: var(--madera); color: var(--white); }
.mnu__pdf { flex: none; font: 500 var(--text-xs)/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--madera);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mnu__close { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--perla-tint); background: var(--white);
  color: var(--ink); font-size: 1rem; cursor: pointer; }
.mnu__close:hover { background: var(--perla-tint); }
.mnu__pages { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #f7f6f3;
  padding: clamp(0.6rem, 2vw, 1.4rem); display: grid; gap: clamp(0.6rem, 1.6vw, 1rem); align-content: start; }
.mnu__pages img { display: block; width: 100%; height: auto; background: var(--white); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06); }
@media (max-width: 700px) {
  .mnu { padding: 0; }
  .mnu__panel { width: 100%; height: 100%; border-radius: 0; }
  .mnu__bar { flex-wrap: wrap; padding: 0.7rem 0.8rem; }
  .mnu__tabs { order: 3; flex-basis: 100%; }
  .mnu__pdf { margin-right: auto; }
}

/* ------------------------------------------------------------
   WhatsApp flotante (solo escritorio; en móvil está en la barra inferior)
   ------------------------------------------------------------ */
.wa-float { position: fixed; right: clamp(1rem, 2vw, 1.8rem); bottom: clamp(1rem, 2vw, 1.8rem); z-index: var(--z-sticky-bar);
  display: none; align-items: center; gap: 0.7rem; text-decoration: none; }
.wa-float svg { width: 58px; height: 58px; padding: 13px; border-radius: 50%; background: #25d366; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.wa-float:hover svg { transform: scale(1.06); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24); }
.wa-float__tip { font: 500 0.875rem/1 var(--font-body); color: var(--ink); background: var(--white); padding: 0.7rem 1rem; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); opacity: 0; transform: translateX(8px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.wa-float:hover .wa-float__tip, .wa-float:focus-visible .wa-float__tip { opacity: 1; transform: none; }
@media (min-width: 901px) { .wa-float { display: inline-flex; } }
.header.is-menu-open ~ .wa-float, html.mnu-open .wa-float { display: none; }

/* Luna Muna — experiencias (Ancestral Menu, Chef's Table, Wine Selection):
   bloques foto + texto alternados después de la FAQ; Ancestral lleva carrusel. */
.lmx { padding-top: var(--space-section); background: var(--perla-tint); }   /* one band: title + the three experiences */
.lmx__head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: 0; }
.lmx__item.wincl, .lmx__item.wincl--white { padding-block: var(--space-half); background: transparent; }
.lmx__item + .lmx__item .wincl__inner { border-top: 1px solid rgba(43, 44, 44, 0.12); padding-top: var(--space-half); }
.lmx__item:last-child { padding-bottom: var(--space-section); }
.lmx .wincl__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.lmx__item--flip .wincl__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.lmx__item--flip .wincl__media { order: 2; }
.lmx .wincl__text h3.title { font-size: clamp(2rem, 1.6rem + 1.6vw, 3.1rem); }
.lmx__courses { list-style: none; display: grid; gap: 0; margin-top: 0.4rem; counter-reset: lmx; }
.lmx__courses li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.4rem; padding: 0.85rem 0; border-top: 1px solid rgba(43, 44, 44, 0.12); counter-increment: lmx; }
.lmx__courses li:last-child { border-bottom: 1px solid rgba(43, 44, 44, 0.12); }
.lmx__courses li::before { content: counter(lmx, decimal-leading-zero); grid-row: 1 / span 2; font-size: var(--text-xs); letter-spacing: 0.14em; color: var(--ocre); padding-top: 0.45rem; }
.lmx__courses b { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25; }
.lmx__courses span { font-size: var(--text-base); color: var(--ink-soft); line-height: 1.6; }
.lmx__label { font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.4rem; }
.lmx__menu { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.6rem; }
.lmx__menu li { display: flex; gap: 0.7rem; align-items: baseline; font-family: var(--font-display); font-size: 1.2rem; }
.lmx__menu li::before { content: "\2726"; color: var(--ocre); font-size: 0.6em; }
.lmx__note { font-size: var(--text-xs) !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--madera); }
.lmx .wincl__text .btn { margin-top: 0.4rem; }

.lmx__car { position: relative; }
.lmx__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.lmx__track::-webkit-scrollbar { display: none; }
.lmx__track:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }
.lmx__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.lmx .wincl__media img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.lmx__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.lmx__count { font-size: var(--text-xs); letter-spacing: 0.2em; color: var(--ink-soft); }
.lmx__count b { color: var(--ink); font-weight: 500; }
.lmx__btn { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(43, 44, 44, 0.25); color: var(--ink); background: transparent; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.lmx__btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.lmx__btn:focus-visible { outline: 2px solid var(--ocre); outline-offset: 2px; }
@media (max-width: 900px) {
  .lmx__menu { grid-template-columns: 1fr; }
  .lmx .wincl__inner, .lmx__item--flip .wincl__inner { grid-template-columns: 1fr; gap: 2rem; }
  .lmx__item--flip .wincl__media { order: 0; }
}