/* ---------------------------------------------------------------------------
   00. TIPOGRAFÍAS
   ---------------------------------------------------------------------------
   El sitio usa Playfair Display (titulares) e Inter (textos), ambas gratuitas
   y cargadas desde Google Fonts.

   Se eligieron como equivalentes cercanas de Signifier y Söhne, que son
   fuentes COMERCIALES de Klim Type Foundry (klim.co.nz) y requieren comprar
   una licencia web.

   SI MÁS ADELANTE COMPRAS LA LICENCIA:
     1. Copia los .woff2 en assets/fonts/ (ver assets/fonts/LEEME.txt)
     2. Descomenta el bloque @font-face de abajo
     3. Antepón 'Signifier' y 'Söhne' en --font-display y --font-body
     4. Ejecuta actualizar-version.command

   Se dejan comentadas a propósito: si se declaran sin que existan los
   archivos, el navegador pide seis .woff2 que no están y recibe seis 404
   en cada carga de página.

@font-face { font-family: 'Söhne';     src: url('../assets/fonts/soehne-buch.woff2')       format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Söhne';     src: url('../assets/fonts/soehne-kraftig.woff2')    format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Söhne';     src: url('../assets/fonts/soehne-halbfett.woff2')   format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Signifier'; src: url('../assets/fonts/signifier-light.woff2')   format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Signifier'; src: url('../assets/fonts/signifier-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Signifier'; src: url('../assets/fonts/signifier-medium.woff2')  format('woff2'); font-weight: 500; font-display: swap; }
   ------------------------------------------------------------------------- */

/* ============================================================================
   PURE SPA · HOJA DE ESTILOS
   Basada en el sistema de diseño de la marca (design system pure spa.html)
   ----------------------------------------------------------------------------
   ÍNDICE
   01. Tokens de marca
   02. Reset y base
   03. Tipografía
   04. Layout (contenedor, secciones, grillas)
   05. Botones
   06. Etiquetas y detalles
   07. Barra de promoción
   08. Navegación
   09. Hero
   10. Franjas de confianza
   11. Tarjetas de experiencia
   12. Detalle de experiencia
   13. Ritual paso a paso
   14. Beneficios
   15. Galería / evidencia
   16. Bloque oscuro (diferenciación)
   17. Gift card
   18. Preguntas frecuentes
   19. Contacto y ubicación
   20. CTA final
   21. Pie de página
   22. CTA fija móvil
   23. Utilidades y animación
   ========================================================================== */

/* ---------------------------------------------------------------------------
   01. TOKENS DE MARCA
   Colores oficiales del brandbook Pure Spa.
   ------------------------------------------------------------------------- */
:root {
  /* Paleta oficial */
  --gold:        #C5A143;
  --gold-deep:   #B88A2A;
  --champagne:   #D8C17A;
  --ivory:       #F8F3EA;
  --white:       #FFFFFF;
  --espresso:    #2B2520;
  --taupe:       #8C7860;

  /* Variantes de apoyo, derivadas de la paleta, para cumplir contraste
     accesible en texto pequeño (el taupe original solo se usa en líneas
     y detalles decorativos, donde no necesita contraste de lectura). */
  --taupe-text:  #6A5947;   /* texto secundario sobre marfil/blanco */
  /* El dorado de marca (#C5A143 / #B88A2A) es un ACENTO: sobre fondos claros
     no alcanza el contraste mínimo para texto pequeño (2,8:1). Para textos
     dorados usamos esta variante profunda, que sí cumple AA:
     5,4:1 sobre marfil · 6,0:1 sobre blanco · 4,8:1 sobre champagne. */
  --gold-text:   #7E5E12;
  --champagne-soft: #EFE4C8;
  --line:        rgba(140,120,96,.22);
  --line-strong: rgba(140,120,96,.38);

  /* Tipografía */
  /* Playfair Display → titulares.  Inter → texto e información comercial.
     Para volver a Signifier/Söhne, ver el bloque 00 arriba. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-accent:  'Great Vibes', 'Snell Roundhand', cursive;

  /* Espaciado */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  32px;
  --space-xl:  64px;
  --space-2xl: 128px;

  /* Radios */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 2px 12px rgba(43,37,32,.05);
  --shadow-md: 0 6px 28px rgba(43,37,32,.08);
  --shadow-lg: 0 18px 60px rgba(43,37,32,.14);

  /* Medidas */
  --container: 1200px;
  --nav-h: 68px;
}

/* ---------------------------------------------------------------------------
   02. RESET Y BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la navegación fija al saltar a un ancla */
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--espresso);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: inherit; }

/* Enlace de salto para lectores de pantalla y teclado */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--espresso);
  color: var(--ivory);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   03. TIPOGRAFÍA
   Playfair Display → titulares.  Inter → texto e información comercial.
   Great Vibes → acento muy puntual.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 6.6vw, 3.9rem); font-weight: 400; }
h2 { font-size: clamp(1.8rem, 4.6vw, 2.75rem); font-weight: 400; }
h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
h4 { font-size: 1.12rem; }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.02rem, 2.1vw, 1.19rem);
  line-height: 1.72;
  color: var(--taupe-text);
  font-weight: 400;
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-md);
}
.eyebrow--light { color: var(--champagne); }

/* Acento manuscrito: solo frases muy cortas, nunca párrafos */
.script {
  font-family: var(--font-accent);
  font-size: clamp(1.7rem, 4.5vw, 2.5rem);
  color: var(--gold-text);
  line-height: 1.35;
  font-weight: 400;
}

.muted { color: var(--taupe-text); }
.small { font-size: .875rem; line-height: 1.6; }
.xsmall { font-size: .78rem; line-height: 1.55; }

/* Encabezado de sección */
.sec-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { color: var(--taupe-text); font-size: 1.03rem; }


/* ---------------------------------------------------------------------------
   04. LAYOUT
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 3.4vw, 44px);
}

.section { padding: clamp(56px, 9vw, 108px) 0; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
/* El sitio usa solo dos fondos: marfil y blanco, alternados, con el fundido
   del bloque 24 entre ellos. La variante oscura (espresso) se retiró de las
   secciones de contenido: quedaba como un corte duro en medio de la lectura.
   El café solo sobrevive en el pie de página. */
.section--white { background: var(--white); }
.section--ivory { background: var(--ivory); }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Carrusel de experiencias en móvil: las 3 tarjetas de cada panel
   (individual y para dos) se deslizan en horizontal en vez de apilarse.
   Solo aplica dentro de #experiencias, así no afecta el grid--3 de
   "Lo que te llevas al salir". Desde 700px vuelve a ser grilla normal. */
@media (max-width: 699px) {
  #experiencias .grid--3 {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: clamp(20px, 3.4vw, 44px);
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * clamp(20px, 3.4vw, 44px));
    padding: 4px clamp(20px, 3.4vw, 44px) 14px;
    scrollbar-width: none;
  }
  #experiencias .grid--3::-webkit-scrollbar { display: none; }
  #experiencias .grid--3 > .exp-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
}

/* ---------------------------------------------------------------------------
   05. BOTONES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  padding: 15px 32px;
  /* Área táctil cómoda en móvil */
  min-height: 48px;
  transition: background-color .22s ease, color .22s ease,
              border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gold); color: var(--espresso); }
.btn--primary:hover { background: var(--gold-deep); color: var(--white); box-shadow: var(--shadow-md); }

.btn--dark { background: var(--espresso); color: var(--ivory); }
.btn--dark:hover { background: #1d1916; box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn--outline:hover { background: var(--espresso); color: var(--ivory); }

.btn--ghost { background: transparent; color: var(--gold-text); border-color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--espresso); }

/* Sobre fondo oscuro */
.btn--light { background: var(--ivory); color: var(--espresso); }
.btn--light:hover { background: var(--white); box-shadow: var(--shadow-md); }
.btn--outline-light { background: transparent; color: var(--ivory); border-color: rgba(248,243,234,.5); }
.btn--outline-light:hover { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }

/* Enlace subrayado tipo texto */
.btn--text {
  background: none; border: 0; border-radius: 0;
  /* Relleno vertical para alcanzar un área táctil cómoda (~44px)
     sin separar el subrayado del texto. */
  padding: 12px 0; min-height: 44px;
  color: var(--gold-text);
  letter-spacing: .12em;
  text-decoration: underline;
  text-decoration-color: var(--champagne);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.btn--text:hover { color: var(--espresso); text-decoration-color: var(--espresso); transform: none; }

.btn--block { width: 100%; }
.btn--sm { padding: 11px 22px; font-size: .75rem; min-height: 42px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.btn-row--center { justify-content: center; }

/* Ícono de WhatsApp dentro del botón */
.btn svg { width: 17px; height: 17px; flex: none; }

/* ---------------------------------------------------------------------------
   06. ETIQUETAS Y DETALLES
   ------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tag--gold     { background: var(--champagne-soft); color: var(--gold-text); }
.tag--ivory    { background: var(--ivory); color: var(--taupe-text); border: 1px solid var(--line); }
.tag--espresso { background: var(--espresso); color: var(--champagne); }
.tag--outline  { background: transparent; color: var(--taupe-text); border: 1px solid var(--line-strong); }

/* Metadatos de una experiencia: precio y duración */
.meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.meta__price {
  font-family: var(--font-body);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--espresso);
  letter-spacing: .01em;
}
.meta__dur {
  font-size: .78rem;
  font-weight: 500;
  color: var(--taupe-text);
  letter-spacing: .04em;
}
.meta__note { font-size: .78rem; color: var(--taupe-text); width: 100%; }

/* ---------------------------------------------------------------------------
   07. BARRA DE PROMOCIÓN
   Oculta salvo que se active en datos.js
   ------------------------------------------------------------------------- */
.topbar {
  background: var(--espresso);
  color: var(--champagne);
  text-align: center;
  font-size: .75rem;
  letter-spacing: .09em;
  padding: 9px 20px;
}
.topbar[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   08. NAVEGACIÓN
   ------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248,243,234,.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-h);
}
.nav__brand { display: flex; align-items: center; flex: none; }
.nav__brand img { width: auto; height: 40px; }

.nav__links { display: none; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
  flex: none;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--espresso);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Panel móvil.
   Se oculta con opacidad + visibilidad, NO desplazándolo fuera de pantalla:
   un elemento fixed trasladado a translateX(100%) ensancha el documento al
   doble del viewport y provoca scroll horizontal en móvil. */
.nav__panel {
  position: fixed;
  inset: 0;
  top: 0;
  z-index: 99;
  background: var(--ivory);
  padding: calc(var(--nav-h) + 28px) 24px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  /* visibility se retrasa SOLO al cerrar (0s tras la animación).
     Si se interpolara, al abrir el panel quedaría oculto —y sin poder
     recibir el foco— durante la mitad de la transición. */
  transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
}
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .26s ease, transform .26s ease, visibility 0s linear 0s;
}

.nav__panel a {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--espresso);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.nav__panel a[aria-current="page"] { color: var(--gold-text); }
.nav__panel .btn { margin-top: var(--space-lg); font-size: .75rem; }
.nav__panel .nav__contact { border: 0; font-family: var(--font-body); font-size: .85rem; color: var(--taupe-text); padding-top: var(--space-lg); }

body.nav-open { overflow: hidden; }

@media (min-width: 800px) {
  .nav__toggle, .nav__panel { display: none; }
  .nav__links {
    display: flex;
    align-items: center;
    /* Muy justo entre 800 y 1100px, cómodo a partir de ahí */
    gap: clamp(13px, 1.9vw, 30px);
  }
  .nav__links a {
    font-size: clamp(.72rem, .68rem + .18vw, .8rem);
    font-weight: 500;
    letter-spacing: .085em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--espresso);
    padding: 6px 0;
    position: relative;
  }
  .nav__links a:not(.btn)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .nav__links a:not(.btn):hover::after,
  .nav__links a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
  .nav__links a[aria-current="page"] { color: var(--gold-text); }
  .nav__links .btn { margin-left: 4px; padding-left: clamp(16px, 1.8vw, 22px); padding-right: clamp(16px, 1.8vw, 22px); }
  .nav__brand img { height: 46px; }
}

/* Navegación superpuesta al hero (solo en la portada).
   Al bajar, recupera el fondo marfil para seguir siendo legible. */
.home .nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.home .nav__links a:not(.btn) { color: #fff; }
.home .nav__links a:not(.btn)::after { background: var(--champagne); }
.home .nav__links a[aria-current="page"] { color: var(--champagne); }
.home .nav__toggle span { background: #fff; }
.home .nav__brand .brand--claro { display: block; }
.home .nav__brand .brand--oscuro { display: none; }

/* Estado sólido: al hacer scroll o con el menú móvil abierto */
.home .nav.is-solid,
body.nav-open .nav {
  background: rgba(248,243,234,.94);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.home .nav.is-solid .nav__links a:not(.btn) { color: var(--espresso); }
.home .nav.is-solid .nav__toggle span,
body.nav-open .nav__toggle span { background: var(--espresso); }
.home .nav.is-solid .nav__links a[aria-current="page"] { color: var(--gold-text); }
.home .nav.is-solid .nav__links a:not(.btn)::after { background: var(--gold); }
.home .nav.is-solid .nav__brand .brand--claro,
body.nav-open .home .nav__brand .brand--claro,
body.nav-open .nav__brand .brand--claro { display: none; }
.home .nav.is-solid .nav__brand .brand--oscuro,
body.nav-open .home .nav__brand .brand--oscuro,
body.nav-open .nav__brand .brand--oscuro { display: block; }

/* ---------------------------------------------------------------------------
   09. HERO A PANTALLA COMPLETA
   Fotografía real del ritual de fondo + velo oscuro que se desvanece hacia la
   derecha, para que el texto se lea sin tapar la imagen.
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  min-height: 100svh;
  /* El hero sube por debajo de la navegación transparente */
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + 40px) 0 clamp(90px, 14vh, 150px);
  overflow: hidden;
  background: var(--espresso);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }
/* La misma fotografía cuadrada (Imagen_banner) se usa en todas las pantallas.
   Al ser cuadrada, el recorte cambia de eje según la forma de la pantalla:
   en móvil (más angosta que alta) se recorta a los costados y se ve el alto
   completo, así que importa la posición horizontal; en escritorio (más ancha
   que alta) se recorta arriba/abajo y se ve el ancho completo, así que
   importa la posición vertical. La cara está en x≈52%, y≈46% de la foto. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 52% center;   /* móvil: cara, arco y cabello */
}
@media (min-width: 760px) {
  .hero__media img { object-position: center 46%; }
}

/* Velo: intenso a la izquierda, transparente a la derecha.
   En móvil el degradado es vertical, porque el texto ocupa todo el ancho. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* En móvil el texto ocupa todo el ancho, así que el velo cubre de forma
     pareja: suficiente para leer sin apagar la fotografía. */
  background:
    linear-gradient(to top,
      rgba(20,17,14,.90) 0%,
      rgba(20,17,14,.66) 34%,
      rgba(20,17,14,.56) 62%,
      rgba(20,17,14,.62) 100%);
}

@media (min-width: 760px) {
  .hero__scrim {
    background:
      linear-gradient(100deg,
        rgba(20,17,14,.95) 0%,
        rgba(20,17,14,.91) 24%,
        rgba(20,17,14,.76) 42%,
        rgba(20,17,14,.44) 58%,
        rgba(20,17,14,.16) 74%,
        rgba(20,17,14,0)   92%);
  }
}

.hero__inner { position: relative; z-index: 2; max-width: 1200px; }
.hero__inner .eyebrow { color: var(--champagne); }

.hero h1 {
  color: #fff;
  max-width: 17ch;
  font-size: clamp(2.3rem, 5.8vw, 4.1rem);
  font-weight: 400;
  margin-bottom: var(--space-lg);
  text-shadow: 0 2px 24px rgba(0,0,0,.32);
}
.hero h1 .hl { color: var(--champagne); }

.hero__lead {
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  line-height: 1.72;
  max-width: 46ch;
  margin-bottom: var(--space-lg);
  text-shadow: 0 1px 14px rgba(0,0,0,.34);
}

/* Indicador de scroll, en vertical al costado derecho */
.hero__scroll {
  position: absolute;
  right: clamp(14px, 2.6vw, 34px);
  bottom: clamp(96px, 13vh, 130px);   /* deja libre el botón flotante de WhatsApp */
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  padding: 10px 6px;
}
.hero__scroll span {
  writing-mode: vertical-rl;
  font-size: .75rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.hero__scroll svg { width: 17px; height: 17px; animation: bajar 2.4s ease-in-out infinite; }
.hero__scroll:hover { color: var(--champagne); }
@keyframes bajar { 0%,100% { transform: translateY(0); opacity: .65 } 50% { transform: translateY(6px); opacity: 1 } }
@media (min-width: 900px) { .hero__scroll { display: flex; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }

/* ---------------------------------------------------------------------------
   09c. SELECTOR INDIVIDUAL / PARA DOS
   ------------------------------------------------------------------------- */
.switch { display: flex; justify-content: center; margin-bottom: clamp(34px, 5vw, 52px); }
.switch[hidden] { display: none; }
.switch__track {
  display: inline-flex;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px;
  box-shadow: var(--shadow-sm);
  gap: 4px;
}
.switch__opt {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 12px clamp(24px, 4.4vw, 46px);
  min-height: 46px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--taupe-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .24s ease, color .24s ease;
}
.switch__opt:hover { color: var(--espresso); }
.switch__opt.is-active {
  background: var(--gold);
  color: var(--espresso);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(184,138,42,.28);
}

/* Cruce suave entre los paneles "Individual" / "Para dos": sin esto el
   cambio de panel era un corte seco. mostrar() en main.js anima con
   opacity inline antes de tocar 'hidden'. */
[data-exp-panel] { transition: opacity .18s ease; }

/* Título de grupo (visible solo cuando no hay selector, es decir sin JS) */
.exp-group__title {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--taupe-text);
  text-align: center;
  margin-bottom: var(--space-lg);
}
.exp-group__title--spaced { margin-top: var(--space-xl); }

/* ---------------------------------------------------------------------------
   10. FRANJAS DE CONFIANZA
   ------------------------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
  margin-top: clamp(32px, 5vw, 46px);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}
.trust__item { display: flex; gap: 11px; align-items: flex-start; }
.trust__item svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--gold-text); }
.trust__item b {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--espresso);
  line-height: 1.35;
}
.trust__item span { font-size: .8rem; color: var(--taupe-text); line-height: 1.45; }

/* En escritorio la franja vive dentro de media columna del hero:
   dos columnas dan aire suficiente; cuatro apretarían el texto. */
@media (min-width: 1180px) { .trust { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } }

/* Franja de sellos horizontal */
.strip { background: var(--espresso); color: var(--ivory); padding: 22px 0; }
.strip__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(20px, 4vw, 52px);
  text-align: center;
}
.strip__grid span {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--champagne);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.strip__grid span::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ---------------------------------------------------------------------------
   11. TARJETAS DE EXPERIENCIA
   ------------------------------------------------------------------------- */
.exp-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
}
.exp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--champagne);
}
.exp-card--featured { border-color: var(--gold); }

.exp-card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--ivory);
}
.exp-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.exp-card:hover .exp-card__media img { transform: scale(1.045); }

.exp-card__flag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
}

.exp-card__body {
  padding: var(--space-lg) 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-md);
}
.exp-card__title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.exp-card__text { color: var(--taupe-text); font-size: .9rem; line-height: 1.62; margin: 0; }

/* Lista de "qué incluye" dentro de la tarjeta.
   Todas las tarjetas listan los mismos pasos del ritual: primero los que trae
   esa experiencia, agrupados bajo "Incluye"; después, aparte y bajo su propio
   rótulo "No incluye", los que no trae. Separarlos en dos bloques (en vez de
   tacharlos intercalados) hace más fácil leer de un vistazo qué trae cada una,
   sin tener que ir línea por línea distinguiendo cuáles están tachadas. */
.exp-card__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0;
}
/* Rótulo del segundo bloque: mismo tratamiento tipográfico que "Incluye"
   (misma familia de etiquetas usada en toda la página), pero en tono apagado
   para que quede claramente secundario. */
.exp-card__label--out {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--taupe-text);
  margin: 0;
}
.exp-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.exp-card__list li {
  position: relative;
  padding-left: 19px;
  font-size: .855rem;
  line-height: 1.5;
}
.exp-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
/* Incluye: texto al contraste más alto de la tarjeta y viñeta dorada sólida,
   para que destaque frente al resto del cuerpo de la tarjeta. */
.exp-card__list--in { flex: 1; }
.exp-card__list--in li {
  color: var(--espresso);
  font-weight: 500;
}
.exp-card__list--in li::before { background: var(--gold); }
/* No incluye: texto apagado y tachado, viñeta hueca. El tachado no es el
   único indicador: también baja el contraste y cambia de rótulo. */
.exp-card__list--out li {
  color: var(--taupe-text);
  opacity: .75;
  text-decoration: line-through;
  text-decoration-color: var(--taupe);
  text-decoration-thickness: 1px;
}
.exp-card__list--out li::before { border: 1.5px solid var(--line-strong); }

/* La palabra "tacha" del texto introductorio, tachada como ejemplo */
.is-out-demo {
  text-decoration: line-through;
  text-decoration-color: var(--taupe);
  text-decoration-thickness: 1px;
}
.exp-card__foot { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.exp-card__foot .btn-row { margin-top: var(--space-md); gap: 10px; }
.exp-card__foot .btn { flex: 1 1 auto; }

/* Enlace que cubre la tarjeta completa, manteniendo los botones accesibles */
.exp-card__link { text-decoration: none; color: inherit; }
.exp-card:hover .exp-card__link { color: var(--gold-text); }
.exp-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.exp-card__foot .btn { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------------
   12. DETALLE DE EXPERIENCIA (página Experiencias)
   ------------------------------------------------------------------------- */
.exp-detail {
  scroll-margin-top: calc(var(--nav-h) + 24px);
  padding: clamp(38px, 6vw, 64px) 0;
  border-top: 1px solid var(--line);
}
.exp-detail:first-of-type { border-top: 0; }

.exp-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (min-width: 900px) {
  .exp-detail__grid { grid-template-columns: .82fr 1.18fr; }
  .exp-detail__media { position: sticky; top: calc(var(--nav-h) + 24px); }
}

.exp-detail__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.exp-detail__head { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-md); }
.exp-detail h2 { margin-bottom: var(--space-sm); }

.exp-detail__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: var(--space-md) 0;
  margin: var(--space-md) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.exp-detail__price .meta__price { font-size: 1.7rem; }

/* Lista "qué incluye" */
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.includes li { display: flex; gap: 12px; align-items: flex-start; }
.includes li::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  flex: none;
  margin-top: 8px;
}
.includes b { display: block; font-size: .93rem; font-weight: 600; color: var(--espresso); line-height: 1.45; }
.includes span { font-size: .855rem; color: var(--taupe-text); line-height: 1.55; }

/* Rótulo "Qué no incluye": mismo tratamiento que "Qué incluye" pero apagado,
   igual que .exp-card__label--out en las tarjetas de la portada. */
.includes-heading--out { color: var(--taupe-text); margin-top: var(--space-lg); }
/* Variante "no incluye" de la lista: viñeta hueca y texto tachado/apagado,
   coherente con .exp-card__list--out de las tarjetas de la portada. */
.includes--out { margin-top: var(--space-md); }
.includes--out li::before { border-color: var(--line-strong); }
.includes--out b {
  color: var(--taupe-text);
  font-weight: 500;
  opacity: .8;
  text-decoration: line-through;
  text-decoration-color: var(--taupe);
  text-decoration-thickness: 1px;
}
.includes--out span { opacity: .8; }

/* Bloque "para quién" */
.for-who {
  background: var(--ivory);
  border-left: 3px solid var(--champagne);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px;
  margin: var(--space-lg) 0;
}
.for-who b {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.for-who p { font-size: .92rem; color: var(--taupe-text); margin: 0; }

/* ---------------------------------------------------------------------------
   13. RITUAL PASO A PASO
   ------------------------------------------------------------------------- */
.steps { counter-reset: paso; display: grid; gap: var(--space-lg); }
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  counter-increment: paso;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px 26px;
}
.step::before {
  content: counter(paso);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--champagne);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.22rem; margin-bottom: 8px; }
.step p { font-size: .885rem; color: var(--taupe-text); line-height: 1.62; margin: 0; }

/* Sobre marfil la tarjeta blanca ya se despega sola; sobre blanco necesita
   el borde algo más marcado para no perderse. */
.section--white .step { border-color: var(--line-strong); }

/* Video documental del ritual (dentro de "La experiencia", fondo claro) */
.ritual-video { margin: 0 auto; max-width: 420px; text-align: center; }
.ritual-video__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #14110f;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(216,193,122,.22);
}
.ritual-video__frame img,
.ritual-video__frame video { width: 100%; height: 100%; object-fit: cover; }
.ritual-video__frame video { position: absolute; inset: 0; }
.ritual-video figcaption {
  margin-top: var(--space-md);
  font-size: .8rem;
  color: var(--taupe-text);
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   14. BENEFICIOS
   ------------------------------------------------------------------------- */
.benefit {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  height: 100%;
}
.benefit__ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--champagne);
  margin-bottom: var(--space-md);
}
.benefit__ic svg { width: 21px; height: 21px; color: var(--gold-text); }
.benefit h3 { font-size: 1.25rem; margin-bottom: 9px; }
.benefit p { font-size: .89rem; color: var(--taupe-text); line-height: 1.63; margin: 0; }

/* ---------------------------------------------------------------------------
   15. GALERÍA / EVIDENCIA
   ------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.gallery figure { margin: 0; position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--ivory); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 14px 11px;
  font-size: .75rem;
  letter-spacing: .05em;
  color: #fff;
  background: linear-gradient(to top, rgba(24,20,17,.82), transparent);
}
.gallery__wide { grid-column: span 2; }
.gallery__wide img { aspect-ratio: 16/9; }

@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .gallery__wide { grid-column: span 2; }
  .gallery__tall { grid-row: span 2; }
  .gallery__tall img { aspect-ratio: auto; height: 100%; }
}

/* ---------------------------------------------------------------------------
   16. DIFERENCIACIÓN
   ------------------------------------------------------------------------- */
.compare {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (min-width: 800px) { .compare { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); } }

.compare__col h3 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding-bottom: 13px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid rgba(216,193,122,.3);
}
.compare__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.compare__col li { display: flex; gap: 12px; font-size: .92rem; line-height: 1.6; align-items: flex-start; }
.compare__col li svg { width: 17px; height: 17px; flex: none; margin-top: 4px; }
/* Sobre fondo claro la jerarquía se marca con el color del texto:
   la columna "no" queda apagada, la "sí" con el espresso a plena intensidad. */
.compare__col h3 { color: var(--espresso); }
.compare__col--no { color: var(--taupe-text); }
.compare__col--no h3 { color: var(--taupe-text); }
.compare__col--no svg { color: var(--taupe); }
.compare__col--yes svg { color: var(--gold-text); }
.compare__col--yes li { color: var(--espresso); }

/* ---------------------------------------------------------------------------
   17. GIFT CARD
   Reproduce la tarjeta real de Pure Spa: marfil con líneas doradas, logo,
   título y las tres líneas que se completan a mano.
   ------------------------------------------------------------------------- */
.gift {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) { .gift { grid-template-columns: 1fr 1fr; } }

.gift__card {
  position: relative;
  aspect-ratio: 1.6 / 1;
  border-radius: var(--radius-lg);
  /* Líneas doradas finas en las esquinas, como en la tarjeta real */
  background:
    linear-gradient(128deg, transparent 0 79%, rgba(197,161,67,.5)  79% 79.4%, transparent 79.4%),
    linear-gradient(128deg, transparent 0 86%, rgba(216,193,122,.4) 86% 86.3%, transparent 86.3%),
    linear-gradient(128deg, transparent 0 14%, rgba(197,161,67,.42) 14% 14.4%, transparent 14.4%),
    linear-gradient(128deg, transparent 0 8%,  rgba(216,193,122,.32) 8% 8.3%,  transparent 8.3%),
    linear-gradient(150deg, #FFFFFF 0%, var(--ivory) 58%, #F2EADC 100%);
  border: 1px solid rgba(197,161,67,.3);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
  padding: clamp(20px, 3.2vw, 34px);
  overflow: hidden;
  text-align: center;
}
.gift__card img {
  width: clamp(58px, 8.4vw, 86px);
  height: auto;
}
.gift__card b {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.1vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--gold-deep);
  text-transform: uppercase;
  line-height: 1;
}
/* Las tres líneas que se completan al entregarla */
.gift__lineas {
  width: min(100%, 300px);
  margin-top: clamp(4px, 1vw, 10px);
  display: grid;
  gap: clamp(7px, 1.3vw, 12px);
}
.gift__lineas span {
  display: block;
  text-align: left;
  font-size: clamp(.75rem, 1.5vw, .82rem);
  color: var(--taupe-text);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(197,161,67,.5);
}

/* ---------------------------------------------------------------------------
   18. PREGUNTAS FRECUENTES
   ------------------------------------------------------------------------- */
.faq { max-width: 56rem; margin: 0 auto; }
.faq__group + .faq__group { margin-top: var(--space-xl); }
.faq__group > h2 {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--space-md);
}

.faq details {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.faq details:first-of-type { border-top: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 20px 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--espresso);
  list-style: none;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 11px; height: 11px;
  flex: none;
  margin-top: 6px;
  border-right: 1.5px solid var(--gold-text);
  border-bottom: 1.5px solid var(--gold-text);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--gold-text); }

.faq__answer { padding: 0 4px 22px; max-width: 52rem; overflow: hidden; }
/* Abre/cierra con una animación de alto en vez del salto seco de <details>.
   abrirFaq() en main.js pone el max-height inline; esto solo define la
   transición. Sin JavaScript, <details> sigue funcionando normal (sin animar). */
.js .faq__answer { transition: max-height .3s ease; }
.faq__answer p { font-size: .93rem; color: var(--taupe-text); line-height: 1.72; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer a { color: var(--gold-text); text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   19. CONTACTO Y UBICACIÓN
   ------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(28px, 4vw, 52px); }
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-list svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--gold-text); }
.contact-list b {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--taupe-text);
  margin-bottom: 4px;
}
.contact-list a, .contact-list p { font-size: 1rem; color: var(--espresso); text-decoration: none; margin: 0; }
.contact-list a:hover { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  /* El mapa va solo en su columna (antes lo acompañaba una foto), así que
     necesita más alto para equilibrar la lista de contacto de al lado. */
  min-height: clamp(300px, 46vh, 460px);
  background: var(--ivory);
}
.map-frame iframe { width: 100%; height: 100%; min-height: clamp(300px, 46vh, 460px); border: 0; display: block; }

/* Aviso de dato pendiente de confirmar (visible solo si falta el dato) */
.notice {
  background: var(--ivory);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: .87rem;
  color: var(--taupe-text);
}

/* ---------------------------------------------------------------------------
   20. CTA FINAL
   ------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  text-align: center;
  padding: clamp(60px, 9vw, 116px) 0;
  background: var(--ivory);
  color: var(--espresso);
  overflow: hidden;
}
/* Un halo dorado muy suave arriba: separa el cierre de la sección anterior
   sin recurrir al fondo oscuro. */
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 380px at 50% 0%, rgba(197,161,67,.13), transparent 68%);
  pointer-events: none;
}
/* Cuando viene después de una sección marfil no hay cambio de color, así que
   una línea fina marca el corte. */
.section--ivory + .cta-final { border-top: 1px solid var(--line); }
.cta-final .container { position: relative; z-index: 1; }
.cta-final h2 { color: var(--espresso); max-width: 20ch; margin-inline: auto; }
.cta-final p { color: var(--taupe-text); max-width: 46ch; margin-inline: auto; }
.cta-final .btn-row { margin-top: var(--space-lg); }
/* Las variantes "para fondo oscuro" del bloque siguen en el marcado de varias
   páginas: aquí se reinterpretan para el fondo claro. */
.cta-final .eyebrow--light { color: var(--gold-text); }
.cta-final .btn--outline-light { color: var(--espresso); border-color: var(--espresso); }
.cta-final .btn--outline-light:hover { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }

/* ---------------------------------------------------------------------------
   21. PIE DE PÁGINA
   ------------------------------------------------------------------------- */
.footer {
  background: var(--espresso);
  color: rgba(248,243,234,.72);
  padding: clamp(48px, 6vw, 76px) 0 0;
  border-top: 1px solid rgba(216,193,122,.18);
}
.footer__grid {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-lg); } }

.footer img.footer__logo { width: 132px; margin-bottom: var(--space-md); }
.footer h3 {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: var(--space-md);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: rgba(248,243,234,.72); text-decoration: none; font-size: .89rem; }
.footer a:hover { color: var(--champagne); text-decoration: underline; text-underline-offset: 3px; }
.footer p { font-size: .89rem; line-height: 1.7; }

.footer__bottom {
  border-top: 1px solid rgba(216,193,122,.16);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--space-lg);
  justify-content: space-between;
  align-items: center;
  font-size: .76rem;
  color: rgba(248,243,234,.55);
}
.footer__social { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Botones redondos de Instagram, WhatsApp y correo */
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(216,193,122,.35);
  background: rgba(255,255,255,.05);
  color: var(--champagne);
  transition: background-color .24s ease, color .24s ease,
              border-color .24s ease, transform .24s ease;
}
.social-btn svg { width: 19px; height: 19px; }
.social-btn:hover { transform: translateY(-2px); border-color: transparent; }
.social-btn--ig:hover   { background: #C5A143; color: var(--espresso); }
.social-btn--wa:hover   { background: #25D366; color: #fff; }
.social-btn--mail:hover { background: var(--champagne); color: var(--espresso); }

.footer__legal { margin-left: 6px; font-size: .8rem; }

/* ---------------------------------------------------------------------------
   22. CTA FIJA MÓVIL
   Siempre accesible: reservar y WhatsApp.
   ------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 9px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: rgba(248,243,234,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.sticky-cta .btn { flex: 1; padding: 13px 12px; font-size: .75rem; letter-spacing: .1em; }

@media (min-width: 800px) { .sticky-cta { display: none; } }
/* Evita que la barra tape el final de la página en móvil */
@media (max-width: 799px) { body { padding-bottom: 74px; } }

/* Botón flotante de WhatsApp en escritorio */
.wa-float {
  display: none;
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(37,211,102,.4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 12px 32px rgba(37,211,102,.5); }
.wa-float svg { width: 29px; height: 29px; }
@media (min-width: 800px) { .wa-float { display: flex; } }

/* ---------------------------------------------------------------------------
   23. UTILIDADES Y ANIMACIÓN
   ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.maxw { max-width: 46rem; }
.maxw--center { max-width: 46rem; margin-inline: auto; }

/* Aparición suave al hacer scroll.
   El estado oculto se aplica SOLO si hay JavaScript (clase .js en <html>).
   Así, si el JS falla o está desactivado, todo el contenido se ve igual. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .75s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* Respeta la preferencia del sistema de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .exp-card:hover, .wa-float:hover { transform: none; }
  .exp-card:hover .exp-card__media img { transform: none; }
}

/* Impresión: deja legible la información de reserva */
@media print {
  .nav, .sticky-cta, .wa-float, .topbar, .hero__media { display: none !important; }
  body { background: #fff; padding: 0; }
  .section, .hero { padding: 18px 0; }
}

/* ---------------------------------------------------------------------------
   24. TRANSICIONES ENTRE SECCIONES
   ---------------------------------------------------------------------------
   Todas las secciones son claras (marfil ↔ blanco), así que el fundido se
   aplica en todos los cortes: la diferencia es mínima y el paso se suaviza.

   Con el fondo café que había antes esto no se podía hacer: al interpolar
   marfil con espresso siempre aparecía una franja terrosa. Por eso se retiró
   ese fondo de las secciones (ver bloque 04).
   ------------------------------------------------------------------------- */

.section--white + .section--ivory,
.section--ivory + .section--white,
.section--white + .cta-final { position: relative; }
.section--white + .section--ivory::before,
.section--ivory + .section--white::before,
.section--white + .cta-final::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  pointer-events: none;
}
.section--white + .section--ivory::before,
.section--white + .cta-final::after {
  background: linear-gradient(to bottom, var(--white) 0%, transparent 100%);
}
.section--ivory + .section--white::before {
  background: linear-gradient(to bottom, var(--ivory) 0%, transparent 100%);
}