/* ==========================================================================
   TEOTI SKY TOURS — Sistema de diseño v2
   Línea gráfica: layout claro, tarjetas flotantes, radios grandes,
   collages de imagen y barras de búsqueda (estilo travel landing moderno).
   Paleta de marca intacta: azul marino + dorado + crema.
   ========================================================================== */

:root {
  /* ---- Colores de marca (sin cambios) ---- */
  --teoti-night:      #0B1F3A;
  --teoti-night-2:    #14294D;
  --teoti-night-3:    #1E3A66;
  --teoti-gold:       #C8A046;
  --teoti-gold-d:     #A8842E;
  --teoti-gold-soft:  #F5EBD1;
  --teoti-cream:      #F5EFE2;
  --teoti-paper:      #FAF7F0;
  --teoti-white:      #FFFFFF;

  --teoti-ink:        #1A1A1A;
  --teoti-text:       #2C2C2C;
  --teoti-muted:      #6B6B6B;
  --teoti-faint:      #9A9A9A;
  --teoti-line:       #E5DFD1;

  --teoti-success:    #2E7D5B;
  --teoti-error:      #C53030;
  --teoti-warn:       #B8823A;

  /* ---- Alias semánticos ---- */
  --ink:        var(--teoti-night);
  --ink-2:      var(--teoti-night-2);
  --accent:     var(--teoti-gold);
  --accent-d:   var(--teoti-gold-d);
  --accent-soft:var(--teoti-gold-soft);
  --surface:    #FFFFFF;
  --surface-2:  #EFE8DA;
  /* Fondo de página: arena cálida de la propia paleta. No es blanco, pero
     deja que las tarjetas blancas sigan destacando encima. */
  --bg:         #F6F2E8;
  --bg-header:  rgba(250, 247, 240, .9);
  --muted:      var(--teoti-muted);
  --line:       #E3DBC9;
  --line-2:     #EBE4D6;

  /* ---- Tipografía ---- */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Métrica ---- */
  --wrap:        1200px;
  --wrap-narrow: 860px;
  --r-xs:  8px;
  --r-sm:  12px;
  --radius:16px;
  --r-lg:  24px;
  --r-xl:  34px;

  --sh-1: 0 2px 10px rgba(11, 31, 58, .05);
  --sh-2: 0 12px 32px rgba(11, 31, 58, .08);
  --sh-3: 0 24px 60px rgba(11, 31, 58, .13);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ---------- Bloqueo del desplazamiento horizontal ----------
   El bloqueo vive en `body` (más abajo, en su propia regla) y NO aquí.

   NO poner overflow-x en `html`, ni `hidden` ni `clip`: probado, rompe el
   position:sticky de la cabecera. Con la raíz en overflow-x:clip, al bajar
   700px la cabecera se iba a -650 en vez de quedarse en 0. En la raíz
   cualquiera de los dos valores cambia quién es el contenedor de scroll, y
   el sticky deja de tener contra qué pegarse. En un contenedor intermedio
   `clip` sí es seguro; en la raíz no.

   Con `body { overflow-x: hidden }` la página no se desplaza en horizontal
   (comprobado con window.scrollTo). Eso CONTIENE el síntoma: lo que se
   salga se recorta y desaparece, que puede ser peor que la barra. Para
   detectar desbordes reales, en la consola:
     document.documentElement.scrollWidth > document.documentElement.clientWidth */

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

::selection { background: var(--accent); color: var(--ink); }

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

/* ---------- Tipografía ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.02em;
}
h1 strong, h2 strong, h3 strong { font-weight: 800; }

h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }
h5 { font-size: .9rem; font-weight: 700; }

p { color: var(--muted); }

.lead {
  font-size: 1.02rem;
  color: var(--muted);
  max-width: 58ch;
  line-height: 1.75;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-d);
  margin-bottom: .9rem;
  letter-spacing: 0;
}
.eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.eyebrow svg { width: 18px; height: 18px; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.section--tint { background: var(--surface-2); }

.section-head { max-width: 640px; margin-bottom: 2.6rem; }
/* Encabezado ancho: evita que el título parta en dos líneas. El .lead
   interno se autolimita a 58ch, así que la lectura no se ve afectada. */
.section-head--wide { max-width: 960px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.section-head p { margin-top: .9rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn-solid {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(200, 160, 70, .28);
}
.btn-solid:hover {
  background: var(--accent-d);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(168, 132, 46, .32);
}
.btn-ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-d);
}
.btn-ghost:hover { background: var(--accent-soft); }
.btn-navy { background: var(--ink); color: #fff; }
.btn-navy:hover { background: var(--ink-2); transform: translateY(-2px); }
.btn-soft {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--line);
}
.btn-soft:hover { background: var(--accent-soft); border-color: var(--accent); }
/* Botón de WhatsApp: verde de la marca, para que se reconozca al vuelo. */
.btn-wa {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.btn-wa:hover {
  background: #1DA851;
  border-color: #1DA851;
  color: #fff;
  transform: translateY(-2px);
}
.btn-wa svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-sm { padding: .62rem 1.15rem; font-size: .85rem; }
.btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg-header);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s;
}
.site-header.is-stuck {
  box-shadow: 0 4px 24px rgba(11, 31, 58, .07);
  border-bottom-color: var(--line-2);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  height: 96px;
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-logo {
  height: 68px;
  width: auto;
  object-fit: contain;
}
.brand-logo--light { height: 76px; }

.main-nav { justify-self: center; }
.main-nav > ul { display: flex; align-items: center; gap: .2rem; }
.main-nav > ul > li { position: relative; }
.main-nav a {
  display: block;
  padding: .6rem .9rem;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: #55606F;
  border-radius: var(--r-xs);
  /* En inglés algunas entradas son más largas ("About us"): sin esto el menú
     parte la palabra en dos renglones y descuadra la cabecera. */
  white-space: nowrap;
  transition: color .18s, background .18s;
}
.main-nav a:hover { color: var(--ink); background: var(--surface-2); }
.main-nav a[aria-current="page"] { color: var(--accent-d); }
.has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: .45rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .55;
}
.submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 236px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--sh-3);
  padding: .45rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .58rem .7rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.submenu a:hover { background: var(--accent-soft); color: var(--accent-d); }
.submenu .ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: .9rem;
  flex-shrink: 0;
}

/* ---------- Iconos del sprite ----------
   Todos vienen de Bootstrap Icons (MIT) y Font Awesome Free (CC BY 4.0), y
   heredan el color del texto: se tiñen solos con el contexto donde están. */
.ico svg { width: 15px; height: 15px; color: var(--accent-d); }
.feature-ico svg { width: 22px; height: 22px; }
.nav-toggle svg { width: 20px; height: 20px; }
.testi-stars { display: flex; gap: 3px; }
.testi-stars svg { width: 15px; height: 15px; }

.header-actions { display: flex; align-items: center; gap: .6rem; }

/* ---------- Selector de idioma (banderas) ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  flex-shrink: 0;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: 0 .7rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  transition: background .18s, color .18s, box-shadow .18s;
}
.lang-btn .flag {
  width: 22px;
  height: 15px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(11, 31, 58, .14);
  flex-shrink: 0;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-1);
}

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.2rem;
  place-items: center;
}

@media (max-width: 1000px) {
  /* Tercera columna: el selector de idioma sigue visible sin abrir el menú. */
  .header-inner { grid-template-columns: auto 1fr auto; height: 92px; gap: .7rem; }
  .brand-logo { height: 66px; }
  .brand-logo--light { height: 72px; }
  .header-actions { justify-self: end; }
  .header-actions .btn { display: none; }
  .lang-btn { min-height: 44px; }
  .nav-toggle { display: grid; justify-self: end; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    /* .main-nav es hijo de un grid (.header-inner) y en escritorio lleva
       justify-self:center. Al posicionarlo en absoluto ese justify-self
       SIGUE aplicando, y una caja con left:0 + right:0 MÁS una alineación
       deja de estirarse: el navegador la encoge al contenido y la centra.
       El menú salía a 288px de ancho en una pantalla de 430. Con stretch
       vuelve a mandar el par left/right y ocupa el ancho completo. */
    justify-self: stretch;
    background: #fff;
    border-top: 1px solid var(--line-2);
    box-shadow: var(--sh-2);
    padding: .5rem .9rem 1rem;
    /* Con los dos submenús desplegados el menú pasaba de alto de pantalla
       y las últimas entradas quedaban fuera de alcance. Que desborde
       dentro de sí mismo en vez de crecer sin fin. */
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Cerrado con visibility en vez de display:none. display no se puede
       animar —salta de golpe—, y visibility sí acepta transición: además
       de esconderlo lo saca del foco del teclado y de los lectores de
       pantalla, cosa que opacity:0 por sí solo NO hace (dejaría un menú
       invisible pero tabulable).
       El retardo de la visibility es lo que deja terminar el fundido
       antes de ocultarlo del todo al cerrar. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .24s ease,
                transform .3s cubic-bezier(.22, .61, .36, 1),
                visibility 0s linear .3s;
  }
  .main-nav.open {
    visibility: visible;
    opacity: 1;
    transform: none;
    /* Al abrir, la visibility cambia YA: sin esto el panel se desliza
       mientras sigue oculto y no se ve el principio de la animación. */
    transition: opacity .24s ease,
                transform .34s cubic-bezier(.22, .61, .36, 1),
                visibility 0s;
  }

  /* Cascada: las entradas entran escalonadas detrás del panel. Es lo que
     separa un desplegable que «aparece» de uno que se siente montado.
     Los retardos son cortos a propósito — pasado medio segundo el menú
     deja de sentirse elegante y empieza a sentirse lento. */
  .main-nav > ul > li {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .26s ease, transform .26s ease;
  }
  .main-nav.open > ul > li {
    opacity: 1;
    transform: none;
  }
  .main-nav.open > ul > li:nth-child(1) { transition-delay: .06s; }
  .main-nav.open > ul > li:nth-child(2) { transition-delay: .10s; }
  .main-nav.open > ul > li:nth-child(3) { transition-delay: .14s; }
  .main-nav.open > ul > li:nth-child(4) { transition-delay: .18s; }
  .main-nav.open > ul > li:nth-child(5) { transition-delay: .22s; }

  /* El icono del botón gira al abrir. El estado sale de aria-expanded,
     que main.js ya mantiene al día: una sola fuente de verdad, sin una
     clase paralela que se pueda desincronizar. */
  .nav-toggle svg {
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  .nav-toggle[aria-expanded="true"] {
    background: var(--accent-soft);
    color: var(--accent-d);
  }
  .nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

  /* Compacto sin sacrificar el dedo: se recorta el relleno vertical pero
     se garantizan 44px de alto de toque (WCAG). */
  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .35rem .6rem;
    font-size: .98rem;
  }
  /* Submenús plegados. Antes venían siempre abiertos y las nueve entradas
     de Experiencias y Servicios hacían un menú más alto que la pantalla.
     Se abren tocando su título; lo gobierna .sub-open desde main.js. */
  .submenu {
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    min-width: 0;

    opacity: 0;
    visibility: hidden;
    max-height: 0;
    padding: 0 .25rem;
    margin: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(.22, .61, .36, 1),
                opacity .2s ease,
                padding .3s ease, margin .3s ease,
                visibility 0s linear .3s;
  }

  /* En móvil no hay hover de verdad, pero un toque deja el :hover pegado
     en muchos navegadores, y al enfocar el enlace se activa :focus-within.
     Cualquiera de los dos reabriría el submenú por su cuenta, peleándose
     con el acordeón. Aquí se anulan y manda solo .sub-open. */
  .has-sub:hover > .submenu,
  .has-sub:focus-within > .submenu {
    opacity: 0;
    visibility: hidden;
    /* El transform TIENE que anularse aquí y no solo en .submenu: la regla
       de escritorio que lo pone (.has-sub:hover > .submenu) pesa (0,3,0) y
       ganaba a un `.submenu { transform: none }` de (0,1,0). Al tocar el
       título el enlace se queda con el foco, se activaba :focus-within y el
       submenú se corría media anchura a la izquierda: la caja se veía
       vacía porque sus enlaces quedaban en x negativa, fuera de pantalla. */
    transform: none;
  }

  /* Debe ir DESPUÉS del bloque de :hover: misma especificidad, así que
     decide el orden en el archivo. */
  .has-sub.sub-open > .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Tope holgado: es un límite para poder animar, no la altura real.
       El submenú más alto (Servicios, 5 entradas) ronda los 230px. */
    max-height: 340px;
    padding: .25rem;
    margin: .1rem 0 .35rem;
    transition: max-height .34s cubic-bezier(.22, .61, .36, 1),
                opacity .26s ease,
                padding .34s ease, margin .34s ease,
                visibility 0s;
  }

  /* La flecha apunta hacia abajo cerrada y hacia arriba abierta. */
  .has-sub > a::after { transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
  .has-sub.sub-open > a::after { transform: translateY(2px) rotate(-135deg); opacity: .8; }
  .has-sub.sub-open > a { color: var(--accent-d); }

  .submenu a {
    min-height: 40px;
    padding: .3rem .55rem;
    font-size: .88rem;
    gap: .55rem;
  }
  .submenu .ico { width: 24px; height: 24px; border-radius: 7px; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero-title { margin-bottom: 1.2rem; }
.hero-copy > p { max-width: 46ch; margin-bottom: 1.8rem; font-size: 1rem; }

/* Collage */
.collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  aspect-ratio: 1 / .96;
  gap: 0;
}
.tile {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--sh-2);
  border: 5px solid #fff;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
/* Foto del collage aún no subida: fuera, sin icono de imagen rota. */
.tile.is-missing { display: none; }

.hero-art .t1 { grid-area: 1 / 3 / 7 / 8; }
.hero-art .t2 { grid-area: 2 / 8 / 8 / 13; }
.hero-art .t3 { grid-area: 6 / 1 / 12 / 7; }
.hero-art .t4 { grid-area: 8 / 7 / 13 / 12; }

.float-badge {
  position: absolute;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--sh-3);
  padding: .8rem 1rem;
  max-width: 190px;
  z-index: 5;
}
.float-badge strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.2;
}
.float-badge span {
  display: block;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: .2rem;
}
.fb-1 { left: -4%; top: 22%; }
/* 150px dejaban «Hotel a 7 minutos de globopuertos» en cuatro líneas
   y la insignia se volvía una columna. Con 186px caben en dos y sigue
   sin invadir la foto de al lado. */
.fb-2 { right: 4%; top: 2%; max-width: 186px; }

/* ---------- Barra de búsqueda ---------- */
.searchbar {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--sh-2);
  padding: .55rem .6rem;
}
.search-field {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: 1 1 0;
  min-width: 0;
  padding: .4rem .55rem;
  border-radius: var(--r-sm);
}
.search-field + .search-field { border-left: 1px solid var(--line-2); }
.search-ico {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-d);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.search-ico svg { width: 17px; height: 17px; }
.search-body { min-width: 0; flex: 1; }
.search-body label {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.search-body input,
.search-body select {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: .8rem;
  color: var(--muted);
  padding: 2px 0 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  text-overflow: ellipsis;
}
.search-body select option { color: var(--teoti-text); }
.searchbar .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .searchbar { flex-direction: column; align-items: stretch; }
  .search-field + .search-field { border-left: 0; border-top: 1px solid var(--line-2); }
  .searchbar .btn { width: 100%; margin-top: .3rem; }
}

/* ---------- Selector y calendario del buscador ---------- */
.picker { position: relative; }

.picker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 2px 0 0;
  font-size: .8rem;
  color: var(--muted);
  text-align: left;
}
.picker-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-trigger[data-filled="true"] .picker-value { color: var(--ink); font-weight: 600; }
.picker-caret {
  width: 7px; height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  opacity: .5;
  flex-shrink: 0;
  transition: transform .18s;
}
.picker.is-open .picker-caret { transform: translateY(1px) rotate(-135deg); }

.picker-pop {
  position: absolute;
  z-index: 120;
  top: calc(100% + 14px);
  left: -.55rem;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--sh-3);
  padding: .45rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.picker.is-open .picker-pop { opacity: 1; visibility: visible; transform: none; }
.picker-pop--right { left: auto; right: -.55rem; }

/* Lista de opciones */
.picker-list {
  min-width: 252px;
  max-height: 306px;
  overflow-y: auto;
}
.picker-opt {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  border-radius: var(--r-xs);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.picker-opt .ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--surface-2);
  display: grid; place-items: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.picker-opt-tx { flex: 1; min-width: 0; }
.picker-opt--muted { color: var(--muted); font-weight: 500; }
.picker-opt.is-active,
.picker-opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-d); }
.picker-opt[aria-selected="true"] .ico { background: #fff; }
.picker-opt[aria-selected="true"]::after {
  content: "";
  width: 6px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  flex-shrink: 0;
}

/* Calendario */
.picker-pop--cal {
  width: min(346px, calc(100vw - 2.5rem));
  padding: .8rem;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}
.cal-title {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  text-transform: capitalize;
}
.cal-nav {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .15s, opacity .15s;
}
.cal-nav::before {
  content: "";
  width: 8px; height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(2px, -2px);
}
.cal-nav--next::before { transform: rotate(-135deg) translate(2px, -2px); }
.cal-nav:hover:not(:disabled) { background: var(--accent); }
.cal-nav:disabled { opacity: .28; cursor: not-allowed; }

/* La rejilla va sobre un gris más oscuro que el blanco de los días: el
   panel del selector es blanco y el día también, así que sin el fondo
   no había nada que separase un día del siguiente. Mismo criterio que
   el calendario del widget de reservas y el del panel. */
.cal-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .45rem;
  background: #ECEEF3;
  border-radius: 12px;
}
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  font-size: .68rem;
  font-weight: 700;
  color: var(--teoti-faint);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: .45rem;
}
.cal-day {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--teoti-text);
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
/* El día que SÍ se puede elegir es el que lleva ficha blanca; el que no,
   se queda sobre el gris. Antes ambos eran transparentes y la única
   diferencia era la opacidad del número. */
.cal-day:not([aria-disabled="true"]) {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.cal-day:hover:not([aria-disabled="true"]) { background: var(--accent-soft); color: var(--accent-d); }
.cal-day[aria-disabled="true"] { color: var(--teoti-faint); opacity: .4; cursor: not-allowed; }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-day.is-selected,
.cal-day.is-selected:hover { background: var(--ink); color: #fff; }

.cal-foot {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line-2);
}
.cal-btn {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent-d);
  padding: .4rem .7rem;
  border-radius: var(--r-xs);
  transition: background .15s;
}
.cal-btn:hover { background: var(--accent-soft); }

/* ---------- Píldoras de estadística ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .9rem;
  margin-top: 2rem;
}
.stat-pill {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-align: center;
}
.stat-pill strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1.1;
}
.stat-pill span {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-top: .2rem;
}

/* Píldora SIN cifra: dice una cualidad, no un número.
   El tamaño de 1.5rem está pensado para «+10» o «365»; una frase a
   ese cuerpo desbordaría la píldora y rompería la fila de tres. Se
   baja el cuerpo y se centra en vertical para que las tres píldoras
   sigan pareciendo hermanas aunque una no lleve número. */
.stat-pill--texto {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-pill--texto strong {
  font-size: 1.02rem;
  line-height: 1.25;
  text-wrap: balance;
}

/* ---------- Estado de la reserva al volver de Stripe ----------
   El h1 global está pensado para el titular de una portada
   —clamp(2.3rem, 4.4vw, 3.6rem), hasta 57px— y aquí lo heredaba tal
   cual: «Estamos confirmando tu pago» ocupaba media pantalla y hacía
   parecer un error lo que es un aviso de «espera un momento».
   Esta pantalla es un mensaje corto, no una portada. */
.res-estado {
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
}

.res-estado h1 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin: .35rem 0 .6rem;
}

.res-estado .lead {
  font-size: 1rem;
  line-height: 1.6;
}

.res-estado .res-nota {
  margin-top: .8rem;
  font-size: .88rem;
  color: var(--muted);
}

/* El icono de estado: grande él, para que se entienda de un vistazo
   sin necesidad de que el titular grite. */
.res-estado .res-icono {
  display: block;
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: .5rem;
}

.res-estado .res-icono--ok     { color: #2F6F4E; }
.res-estado .res-icono--espera { color: #C8A046; }
.res-estado .res-icono--no     { color: #C53030; }

/* ---------- Bloque "Nosotros" ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about-art .t1 { grid-area: 1 / 1 / 9 / 7; }
.about-art .t2 { grid-area: 2 / 6 / 7 / 13; z-index: 2; }
.about-art .t3 { grid-area: 7 / 3 / 13 / 10; z-index: 3; }

/* ---------- Features ---------- */
.features-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 1fr);
  gap: 1.2rem;
  align-items: start;
}
.feature {
  padding: 1.4rem 1.2rem;
  border-radius: var(--r-lg);
  background: transparent;
  transition: transform .25s, box-shadow .25s, background .25s;
}
.feature--raised,
.feature:hover {
  background: #fff;
  box-shadow: var(--sh-3);
  transform: translateY(-6px);
}
.feature-ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-d);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.feature h3 { margin-bottom: .45rem; font-size: 1.02rem; }
.feature p { font-size: .84rem; line-height: 1.6; }

/* ---------- Banda destacada ---------- */
.band {
  background: var(--surface-2);
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.3rem, 4vw, 3.4rem);
  text-align: center;
}
.band .eyebrow { justify-content: center; }
.band h2 { max-width: 34ch; margin: 0 auto .8rem; }
.band > p { max-width: 60ch; margin: 0 auto 2rem; font-size: .93rem; }
.band .searchbar { text-align: left; }

/* ---------- Tarjetas de experiencia ----------
   Flex en vez de grid: con 5 tarjetas en 3 columnas la última fila queda
   incompleta, y en grid las sobrantes se pegaban a la izquierda dejando el
   hueco a la derecha. Con flex + justify-content:center la fila corta se
   centra sola, sin depender de cuántas tarjetas haya. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
/* Más específico que la regla .exp-card del slider de "otras experiencias",
   que fija un flex-basis pensado para la pista horizontal. */
.card-grid > .exp-card,
.card-grid > .promo-card {
  flex: 1 1 300px;
  max-width: 100%;
}
/* El ancho máximo iguala al de una columna, para que las tarjetas de la fila
   incompleta midan lo mismo que las de las filas llenas. */
@media (min-width: 672px) {
  .card-grid > .exp-card,
  .card-grid > .promo-card { max-width: calc((100% - 1.5rem) / 2); }
}
@media (min-width: 996px) {
  .card-grid > .exp-card,
  .card-grid > .promo-card { max-width: calc((100% - 3rem) / 3); }
}
.exp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: .7rem .7rem 1.1rem;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.exp-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: transparent;
}
.exp-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
}
.exp-media img { width: 100%; height: 100%; object-fit: cover; }
.exp-tag {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  padding: .32rem .7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  box-shadow: var(--sh-1);
}
.exp-tag i { color: var(--accent); font-style: normal; }
.exp-body { padding: 1rem .5rem 0; flex: 1; display: flex; flex-direction: column; }
.exp-body h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.exp-body > p {
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}
.exp-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.exp-meta svg { width: 14px; height: 14px; color: var(--accent-d); flex-shrink: 0; }
.exp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.exp-foot .go {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
}
.exp-foot .go::after { content: " →"; color: var(--accent-d); }
.price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  border: 1.5px solid var(--accent);
  color: var(--accent-d);
  background: #fff;
  border-radius: var(--r-xs);
  padding: .4rem .75rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  white-space: nowrap;
}
.price-chip small { font-weight: 600; font-size: .68rem; opacity: .8; }

/* Tarjeta promocional dentro del grid */
.promo-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
  background: linear-gradient(150deg, var(--teoti-night) 0%, var(--teoti-night-3) 100%);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem;
  color: rgba(255, 255, 255, .78);
  position: relative;
  overflow: hidden;
}
.promo-card h3 { color: #fff; font-size: 1.25rem; }
.promo-card p { color: rgba(255, 255, 255, .72); font-size: .88rem; }
.promo-card .btn { align-self: flex-start; margin-top: .4rem; }
.promo-card::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -30px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 160, 70, .28), transparent 68%);
  pointer-events: none;
}

/* ---------- Tarjetas de servicio ---------- */
/* Otros servicios: 3 arriba y 2 abajo, centrados.
   `auto-fit` repartía 4 en la primera fila y dejaba la quinta tarjeta
   sola y pegada a la izquierda. Con 6 columnas y tarjetas que ocupan
   2, caben 3 por fila exactas; la segunda fila arranca en la columna
   2, así que sus 2 tarjetas quedan centradas bajo las 3 de arriba.

   Depende de que sean 5 tarjetas: con 6 el `nth-child(4)` habría que
   quitarlo, y con 4 basta el reparto normal. */
.serv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}
.serv-grid > .serv-card { grid-column: span 2; }
.serv-grid > .serv-card:nth-child(4) { grid-column: 2 / span 2; }

@media (max-width: 1000px) {
  /* Dos por fila: la quinta queda sola pero centrada, no descolgada. */
  .serv-grid { grid-template-columns: repeat(4, 1fr); }
  .serv-grid > .serv-card,
  .serv-grid > .serv-card:nth-child(4) { grid-column: span 2; }
  .serv-grid > .serv-card:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 640px) {
  .serv-grid { grid-template-columns: 1fr; }
  .serv-grid > .serv-card,
  .serv-grid > .serv-card:nth-child(4),
  .serv-grid > .serv-card:nth-child(5) { grid-column: 1 / -1; }
}
.serv-card {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  transition: transform .25s, box-shadow .25s;
}
.serv-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.serv-card .feature-ico { margin-bottom: .9rem; }
.serv-card h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.serv-card p { font-size: .85rem; line-height: 1.6; }
.serv-card .go {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  color: var(--accent-d);
}
.serv-card .go::after { content: " →"; }

/* ---------- Testimonios ----------
   Banda oscura de marca: es el bloque que más tiene que resaltar de la
   página, así que rompe con el fondo claro en lugar de fundirse con él. */
.testi-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--teoti-night) 0%, var(--teoti-night-3) 100%);
}
.testi-band::after {
  content: "";
  position: absolute;
  right: -8%; top: -34%;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 160, 70, .24), transparent 68%);
  pointer-events: none;
}
.testi-band > .wrap { position: relative; z-index: 1; }
.testi-band h2 { color: #fff; }
.testi-band .lead { color: rgba(255, 255, 255, .76); }
.testi-band .eyebrow { color: var(--teoti-gold); }

.testi-slider { position: relative; }
/* pan-y deja pasar el scroll vertical y reserva el gesto horizontal al slider */
.testi-track {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Holgura arriba y abajo para que no se recorte la sombra de las tarjetas. */
  padding: 1.4rem .2rem 1.8rem;
  touch-action: pan-y;
  /* La barra se oculta: se navega con las flechas, los puntos o arrastrando. */
  scrollbar-width: none;
  /* Igual que en .exp-track: con pocos testimonios se centran; si desbordan,
     "safe" recupera la alineación al inicio y no se pierde ninguno. */
  justify-content: safe center;
}
.testi-track::-webkit-scrollbar { display: none; }

.testi-card {
  position: relative;
  flex: 0 0 clamp(255px, 31%, 380px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.7rem 1.5rem 1.4rem;
  box-shadow: var(--sh-3);
}
.testi-card::after {
  content: "\201D";
  position: absolute;
  top: 0; right: 20px;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: var(--accent);
  opacity: .26;
  pointer-events: none;
}
.testi-stars {
  color: var(--accent);
  line-height: 1;
  margin-bottom: .85rem;
}
.testi-quote {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--teoti-text);
  flex: 1;
}
.testi-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-2);
}
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  flex-shrink: 0;
}
.testi-head strong {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--ink);
}
.testi-head span {
  font-size: .76rem;
  font-weight: 600;
  color: var(--accent-d);
}

.testi-arrow {
  position: absolute;
  top: 42%;
  z-index: 4;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-2);
  transform: translateY(-50%);
  transition: background .18s, opacity .18s;
}
.testi-arrow::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(2px, -2px);
}
.testi-arrow--next::before { transform: rotate(-135deg) translate(2px, -2px); }
.testi-arrow:hover { background: var(--accent); }
.testi-arrow--prev { left: 2px; }
.testi-arrow--next { right: 2px; }
.testi-arrow[disabled] { opacity: 0; pointer-events: none; }

/* Con sitio de sobra las flechas viven en un pasillo propio y no tapan el
   texto de la primera ni de la última tarjeta. */
@media (min-width: 901px) {
  .testi-slider { padding: 0 58px; }
  .testi-arrow--prev { left: 4px; }
  .testi-arrow--next { right: 4px; }
}

.testi-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: .2rem;
}
.testi-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
  transition: background .2s, width .2s;
}
.testi-dot:hover { background: rgba(255, 255, 255, .6); }
.testi-dot.is-active { width: 28px; background: var(--accent); }
.testi-slider.is-static .testi-dots { display: none; }

@media (max-width: 900px) {
  .testi-card { flex-basis: 78%; }
}

/* ---------- Fotos con zoom lento (base compartida) ----------
   Las fotos se apilan y se cruzan con fundido. El reposo es scale(1), que es
   donde termina el zoom: así al quitar .is-active no hay salto de escala. */
.photo-cycle { position: relative; overflow: hidden; }
.photo-cycle img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.4s ease;
}
.photo-cycle img.is-active {
  opacity: 1;
  z-index: 2;
  animation: foto-zoom 7s linear forwards;
}
@keyframes foto-zoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* Slider vertical con flechas */
.photo-slider {
  /* width explícito: con margin-inline auto el item deja de estirarse en el
     grid, y como las fotos son absolutas no habría nada que le diera ancho. */
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 440px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--sh-3);
}
/* Foto aún no subida: fuera del carrusel, sin icono de imagen rota. */
.photo-cycle img.is-missing { display: none; }

/* Sin ninguna foto disponible, las flechas no tienen nada que mover. */
.photo-cycle.is-empty .ps-nav { display: none; }

/* Variante apaisada: recupera las proporciones del antiguo .page-banner
   (16/10, a todo el ancho de su columna) para las páginas donde la foto
   luce mejor ancha que alta. */
.photo-slider--wide {
  aspect-ratio: 16 / 10;
  max-width: none;
}

/* Cuando el hero lleva foto apaisada, la columna de texto cede espacio:
   la imagen es lo que tiene que lucir. */
.page-hero-grid:has(.photo-slider--wide) {
  grid-template-columns: .78fr 1.22fr;
}

/* Con la columna de texto estrecha, el título necesita bajar de escalón:
   a tamaño completo se partía en cuatro renglones. */
.page-hero-grid:has(.photo-slider--wide) h1 {
  max-width: 100%;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  line-height: 1.18;
}

.ps-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  box-shadow: var(--sh-1);
  transition: background .18s;
}
.ps-nav:hover { background: #fff; }
.ps-nav--prev { left: 12px; }
.ps-nav--next { right: 12px; }
.ps-nav::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(2px, -2px);
}
.ps-nav--next::before { transform: rotate(-135deg) translate(2px, -2px); }

/* ---------- CTA ---------- */
.cta-band {
  background: var(--accent-soft);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align: center;
}
.cta-band h2 { max-width: 22ch; margin: 0 auto .8rem; }
.cta-band p { max-width: 52ch; margin: 0 auto 1.8rem; font-size: .95rem; color: #7A6B4C; }
.cta-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Página interior ---------- */
.page-hero { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(1.5rem, 3vw, 2.4rem); }
.crumbs {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: var(--teoti-faint);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--accent-d); }
.crumbs span { color: var(--accent-d); font-weight: 600; }
.page-hero h1 { margin-bottom: .8rem; max-width: 18ch; }
/* Título largo: baja un escalón para que entre en dos renglones. */
.page-hero h1.is-long { font-size: clamp(2rem, 3.7vw, 3rem); }
.page-hero .lead { font-size: 1.02rem; }
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.page-banner {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  box-shadow: var(--sh-2);
}
.page-banner img { width: 100%; height: 100%; object-fit: cover; }

.page-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.4rem;
}
.fact {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--surface-2);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-display);
}
.fact i { color: var(--accent-d); font-style: normal; }
.fact svg { width: 15px; height: 15px; color: var(--accent-d); flex-shrink: 0; }

/* ---------- Detalle experiencia ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}
.panel {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.panel + .panel { margin-top: 1.5rem; }
.panel[id] { scroll-margin-top: 112px; }
.panel .eyebrow { margin-bottom: .6rem; }
.panel > h2 { margin-bottom: 1rem; }
.panel > p { margin-bottom: 1rem; font-size: .95rem; line-height: 1.8; }
.panel > p:last-child { margin-bottom: 0; }

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .3rem 1.5rem;
}
/* Flex en vez de posición absoluta: así la palomita se alinea con la PRIMERA
   línea del texto. Antes se centraba respecto a todo el <li> y en los ítems
   de dos renglones quedaba flotando entre ambos. */
.checks li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--teoti-text);
  border-bottom: 1px solid var(--line-2);
}
/* La palomita va dentro del círculo como imagen de fondo: un solo
   pseudoelemento, que es lo que permite tratarlo como ítem del flex. */
.checks li::before {
  content: "";
  flex: 0 0 21px;
  height: 21px;
  /* centra el círculo respecto al alto de la primera línea */
  margin-top: calc((1.6em - 21px) / 2);
  border-radius: 50%;
  background: var(--accent-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23A8842E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m3.6 8.4 3 3 5.8-6.2'/%3E%3C/svg%3E")
    center / 11px 11px no-repeat;
}

/* ---------- Columna derecha de las fichas ----------
   Arriba el calendario de reservas y debajo el resumen rápido. La columna se
   ensancha respecto al aside normal porque el calendario son 7 columnas y por
   debajo de ~400 px los días quedan apretados. */
.detail-grid--booking { grid-template-columns: 1fr 430px; }
.detail-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Acompaña el scroll de la columna larga en vez de perderse arriba.
     align-self:start es imprescindible: sin él el ítem del grid se estira a
     toda la altura de la fila y sticky no tiene margen para moverse. */
  position: sticky;
  top: 104px;
  align-self: start;
  /* Si la columna no cabe en la ventana, se desplaza por dentro: así nunca
     queda un trozo inalcanzable ni recortado bajo la cabecera. */
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Sitio para que no se recorten las sombras de las tarjetas al desplazar. */
  padding: 6px;
  margin: -6px;
}
.detail-side .panel { margin-top: 0; padding: 1.4rem; }
/* Título del panel de reserva: más discreto para que el calendario suba. */
.panel-title--sm { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
/* El precio vive ahora dentro del panel, bajo el título y separado del
   calendario por una línea. */
.detail-side .panel > .aside-price {
  font-size: 1.9rem;
  margin: .8rem 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-2);
}
/* Dentro de la columna el widget ya vive en un panel: sin su propia tarjeta
   se evita el marco dentro del marco y se gana ancho para el calendario. */
.detail-side .teoti-widget {
  max-width: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.aside-card {
  position: sticky;
  top: 112px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  box-shadow: var(--sh-2);
}
.aside-card h4 {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-d);
  margin-bottom: .9rem;
}
.aside-price {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.03em;
}
.aside-price small {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: .4rem;
  letter-spacing: 0;
}
.aside-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .65rem 1rem;
  margin: 1.3rem 0;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  font-size: .86rem;
}
.aside-dl dt { color: var(--muted); }
.aside-dl dd { color: var(--ink); font-weight: 600; text-align: right; font-family: var(--font-display); }
.aside-note {
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin-top: .9rem;
}

/* ---------- Opciones de una experiencia con su precio ---------- */
.opt-list { margin-top: .4rem; }
.opt-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .4rem 1.2rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-2);
}
.opt-row:last-child { border-bottom: 0; padding-bottom: 0; }
.opt-row strong {
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 700;
  color: var(--ink);
}
.opt-row span {
  display: block;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
  margin-top: .2rem;
}
.opt-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent-d);
  white-space: nowrap;
  text-align: right;
}
.opt-price small {
  display: block;
  font-weight: 600;
  font-size: .68rem;
  color: var(--muted);
  margin-top: .1rem;
}
@media (max-width: 560px) {
  .opt-row { grid-template-columns: 1fr; }
  .opt-price { text-align: left; margin-top: .35rem; }
  .opt-price small { display: inline; margin-left: .35rem; }
}

/* ---------- Itinerario por horas ---------- */
.timeline { margin-top: .4rem; }
.timeline li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: .3rem 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--teoti-text);
}
.timeline li:last-child { border-bottom: 0; padding-bottom: 0; }
.timeline b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  color: var(--accent-d);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .timeline li { grid-template-columns: 1fr; }
}

/* ---------- Aviso destacado dentro de un panel ---------- */
.note-box {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 1rem 1.15rem;
  margin-top: 1.3rem;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--teoti-text);
}
.note-box strong { color: var(--ink); font-family: var(--font-display); }

/* Botón de WhatsApp dentro del aviso de tarifas.
   Va en su propia línea y no al hilo del párrafo: dentro del texto competía
   con él y en un móvil quedaba partido entre dos renglones. */
.note-box-wa {
  display: inline-flex;
  margin-top: .85rem;
}

/* El número acompaña a la acción, en un tono más suave: lo que decide el
   clic es «Reservar por WhatsApp»; el número es la confirmación de a dónde
   va, y ver a quién se llama antes de pulsar da confianza. */
.note-box-wa-num {
  padding-left: .55rem;
  margin-left: .1rem;
  border-left: 1px solid rgba(255, 255, 255, .45);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: .92;
}

@media (max-width: 480px) {
  /* En pantallas estrechas el botón manda a lo ancho y el número se baja:
     los dos en una línea obligaban a encoger la letra por debajo de lo
     cómodo. */
  .note-box-wa {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .note-box-wa-num {
    flex-basis: 100%;
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
    text-align: center;
    font-size: .84rem;
  }
}

/* Lista sobria para recomendaciones y restricciones: la palomita de .checks
   celebraría una restricción, que es justo lo contrario de lo que dice. */
.plain-list { margin-top: .4rem; }
.plain-list li {
  position: relative;
  padding: .45rem 0 .45rem 1.1rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--teoti-text);
}
.plain-list li::before {
  content: "";
  position: absolute;
  /* .45rem de padding + media línea: el punto queda a la altura del texto
     de la primera línea, no del centro del ítem. */
  left: 0; top: calc(.45rem + .8em);
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 1.5rem;
}

.inline-cta {
  background: var(--accent-soft);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  margin-top: 1.5rem;
}
.inline-cta p { color: #7A6B4C; margin-bottom: 1rem; font-size: .95rem; }

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-2);
}
.contact-item:last-child { border-bottom: 0; }
.contact-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-d);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-item strong {
  display: block;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: .92rem;
  margin-bottom: .1rem;
}
.contact-item span { font-size: .88rem; color: var(--muted); }
.contact-item a { color: var(--accent-d); font-weight: 600; }
.contact-item a:hover { text-decoration: underline; }
.contact-ico svg { width: 19px; height: 19px; }

.form {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--sh-2);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: .92rem;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 160, 70, .16);
}
.field textarea { resize: vertical; min-height: 120px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--teoti-night);
  color: rgba(255, 255, 255, .74);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.newsletter {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  padding: .35rem .35rem .35rem 1rem;
  min-width: 300px;
}
.newsletter input {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: .88rem;
  min-width: 0;
}
.newsletter button {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background .18s, color .18s;
}
.newsletter button:hover { background: var(--accent-d); color: #fff; }
.newsletter svg { width: 17px; height: 17px; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 2.4rem 0;
}
.footer-cols h5 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-cols li { margin-bottom: .6rem; font-size: .86rem; color: rgba(255, 255, 255, .74); }
.footer-cols a { color: rgba(255, 255, 255, .74); transition: color .18s; }
.footer-cols a:hover { color: var(--accent); }

.social { display: flex; gap: .5rem; margin-top: .2rem; }
.social a {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: .9rem;
  transition: all .18s;
}
.social a svg { width: 18px; height: 18px; display: block; }
.social a:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(255, 255, 255, .62);
}

/* ---------- Botón flotante de WhatsApp ---------- */
/* z-index por debajo del modal de reserva (1000) y de SweetAlert2 (1060):
   mientras el usuario completa una reserva, el botón no debe estorbar. */
.wa-float {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 19px;
  border-radius: 28px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(11, 31, 58, .28);
  transition: gap .25s ease, padding .25s ease, box-shadow .2s ease, transform .2s ease;
}

.wa-float svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* La etiqueta se despliega al pasar el cursor o al enfocar con teclado;
   en reposo el botón es solo el círculo del icono. */
.wa-float-txt {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 600;
  transition: max-width .25s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
  gap: 10px;
  box-shadow: 0 8px 26px rgba(11, 31, 58, .36);
  transform: translateY(-2px);
}

.wa-float:hover .wa-float-txt,
.wa-float:focus-visible .wa-float-txt {
  max-width: 160px;
}

.wa-float:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-float:hover, .wa-float:focus-visible { transform: none; }
  .wa-float-txt { transition: none; }
}

/* ---------- Aviso del botón flotante ----------
   Burbuja que asoma al llegar a media pantalla e invita a escribir. Se
   coloca justo encima del botón, con la esquina inferior derecha en punta
   para que se lea como un bocadillo que sale de él. */
.wa-tip {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: calc(56px + clamp(14px, 3vw, 26px) + 14px);
  z-index: 91;
  width: min(272px, calc(100vw - 2.5rem));
  padding: .95rem 2.3rem .95rem 1.05rem;
  background: #fff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 14px 36px rgba(11, 31, 58, .2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.96);
  transform-origin: 100% 100%;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s;
}
.wa-tip.is-on { opacity: 1; visibility: visible; transform: none; }
.wa-tip strong {
  display: block;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: .15rem;
}
.wa-tip span {
  display: block;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
}
.wa-tip-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--teoti-faint);
  transition: background .15s, color .15s;
}
.wa-tip-close:hover { background: var(--surface-2); color: var(--ink); }
.wa-tip-close svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .wa-tip { transition: none; transform: none; }
}

/* ---------- Otras experiencias (slider de tarjetas) ---------- */

/* Entrada de menú que solo despliega submenú: no navega a ningún sitio. */
.nav-parent { cursor: default; }

.exp-slider {
  position: relative;
  margin-top: 1.6rem;
}

/* En contacto las tarjetas son solo foto, sin texto ni precio.
   Mantienen el mismo 4:5 vertical que las de experiencias. */
.exp-card--foto {
  margin: 0;
  flex-basis: clamp(200px, 23%, 265px);
}

.exp-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: .6rem;
  /* La barra se oculta: se navega con las flechas o arrastrando. */
  scrollbar-width: none;
  /* Cuando las tarjetas caben todas (3 experiencias), se centran en vez de
     amontonarse a la izquierda con el hueco a la derecha. La palabra clave
     "safe" es la que evita el clásico fallo del centrado en un contenedor
     con scroll: si hay desbordamiento vuelve a alinear al inicio, para que
     las primeras tarjetas sigan siendo alcanzables. */
  justify-content: safe center;
}

.exp-track::-webkit-scrollbar { display: none; }

.exp-card {
  flex: 0 0 clamp(240px, 30%, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E7E9EF);
  border-radius: var(--r-lg, 14px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.exp-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent, #C8A046);
  box-shadow: var(--sh-2);
}

.exp-card-img {
  aspect-ratio: 4 / 5;      /* vertical, no apaisada */
  overflow: hidden;
  background: var(--surface-2, #F7F5F0);
}

.exp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.exp-card-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
  padding: 1rem 1.1rem 1.1rem;
}

.exp-card-body h3 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink, #0B1F3A);
}

.exp-card-meta {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent-d, #A8842E);
}

.exp-card-body p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted, #475569);
}

.exp-card-price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-top: auto;
  padding-top: .8rem;
}

.exp-card-price strong {
  font-family: var(--font-display, inherit);
  font-size: 1.25rem;
  color: var(--ink, #0B1F3A);
}

.exp-card-price span {
  font-size: .76rem;
  color: var(--teoti-faint, #94A3B8);
}

/* Flechas: se colocan fuera de la pista cuando hay sitio. */
.exp-nav {
  position: absolute;
  top: 38%;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line, #E7E9EF);
  border-radius: 50%;
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}

.exp-nav:hover { background: var(--surface-2, #F7F5F0); }

.exp-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

.exp-nav--prev { left: -14px; }
.exp-nav--next { right: -14px; }

.exp-nav::before {
  content: "";
  width: 9px; height: 9px;
  border-left: 2px solid var(--ink, #0B1F3A);
  border-bottom: 2px solid var(--ink, #0B1F3A);
  transform: rotate(45deg) translate(2px, -2px);
}

.exp-nav--next::before { transform: rotate(-135deg) translate(2px, -2px); }

@media (max-width: 900px) {
  .exp-card { flex-basis: 74%; }
  .exp-nav--prev { left: 4px; }
  .exp-nav--next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-track { scroll-behavior: auto; }
  .exp-card { transition: none; }
  .exp-card:hover { transform: none; }
}

/* ---------- Utilidades ---------- */
.center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.text-gold { color: var(--accent-d); }
.center-btn { display: flex; justify-content: center; margin-top: 2.5rem; }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid,
  .about-grid,
  .page-hero-grid,
  /* La variante con foto apaisada tiene más especificidad por el :has(),
     así que hay que repetirla aquí o en móvil seguiría a dos columnas. */
  .page-hero-grid:has(.photo-slider--wide) { grid-template-columns: 1fr; }
  .hero-art, .about-art { max-width: 560px; margin: 0 auto; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid,
  .detail-grid--booking { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  /* En una sola columna, reservar va antes que la lectura larga y el bloque
     deja de ser sticky: ahí estorba más de lo que ayuda. */
  .detail-side {
    order: -1;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 15px; }
  .brand-logo { height: 58px; }
  .brand-logo--light { height: 64px; }
  .lang-btn span { display: none; }
  .lang-btn { padding: 0 .5rem; }
}
/* Móviles estrechos: el logo manda, así que las banderas se aprietan y el
   botón de menú se estrecha para dejarle todo el sitio posible. */
@media (max-width: 420px) {
  .header-inner { gap: .35rem; height: 86px; }
  .brand-logo { height: 52px; }
  .brand-logo--light { height: 58px; }
  .lang-switch { padding: 2px; }
  .lang-btn { padding: 0 .3rem; }
  .lang-btn .flag { width: 19px; height: 13px; }
  .nav-toggle { width: 38px; }
  .features-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; gap: 1.6rem; }
  .newsletter { min-width: 0; width: 100%; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .fb-1 { left: -2%; top: 26%; max-width: 155px; padding: .65rem .8rem; }
  .fb-2 { max-width: 130px; padding: .65rem .8rem; }
  .float-badge strong { font-size: .9rem; }
  .checks { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    /* Anular solo la duración deja vivos los retardos: la cascada del
       menú móvil seguiría escalonándose y el panel tardaría 300 ms en
       ocultarse al cerrar. Para quien pide menos movimiento eso no es
       «más suave», es «va lento». */
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   FORMAS DE PAGO
   Banda del inicio: aclara con qué se paga y en qué momento. Las marcas se
   dibujan con SVG en línea y tipografía de la casa, sin archivos externos ni
   peticiones extra.
   ========================================================================== */
.pay-band {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--sh-1);
}
.pay-band h2 { margin-bottom: .8rem; }
.pay-intro p { font-size: .95rem; line-height: 1.75; max-width: 46ch; }

.pay-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: .8rem;
}
.pay-card {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.pay-mark {
  width: 52px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
}
.pay-mark svg { width: 32px; height: 21px; display: block; }
.pay-visa {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: .8rem;
  letter-spacing: .01em;
  color: #1A1F71;
}
.pay-card-tx strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.25;
}
.pay-card-tx span { font-size: .78rem; color: var(--muted); }

.pay-when {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: 1.1rem;
  padding: .9rem 1rem;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  font-size: .85rem;
  line-height: 1.6;
  color: #7A6B4C;
}
.pay-when svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-d);
}
.pay-when strong { color: var(--ink); font-family: var(--font-display); }

@media (max-width: 900px) {
  .pay-band { grid-template-columns: 1fr; }
  .pay-intro p { max-width: none; }
}

/* La tarjeta oscura de "arma tu experiencia" lleva dos botones: el gap de la
   tarjeta ya los separa, así que el segundo no vuelve a empujar hacia abajo. */
.promo-card .btn + .btn { margin-top: 0; }

/* ==========================================================================
   BANNER · ALBERCA CLIMATIZADA INCLUIDA
   Banda a sangre con la foto de la alberca de fondo. Se usa en Inicio y en
   Hotel desde app/Views/partials/banner-alberca.php.

   El texto NO va directo sobre la foto: el cielo y el agua son las zonas más
   claras del encuadre y se comen un titular blanco. Encima va un degradado
   azul noche, opaco donde vive el texto y transparente a la derecha para que
   la alberca se siga viendo — que es lo que el banner está vendiendo.
   ========================================================================== */
.pool-banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 46vw, 540px);
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
  /* Color de respaldo: si la foto tarda o falla, el texto claro sigue
     legible en vez de quedar blanco sobre blanco. */
  background: var(--teoti-night);
}

.pool-banner-media {
  position: absolute;
  inset: 0;
}
.pool-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anclado abajo: la alberca vive en la franja baja de la foto y los
     tinacos de la azotea en la alta. Encuadrar al fondo sube el agua y
     recorta el desorden del techo. Si se sustituye la foto desde el panel,
     este es el valor a reajustar. */
  object-position: center bottom;
}
.pool-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 31, 58, .94) 0%,
    rgba(11, 31, 58, .88) 34%,
    rgba(11, 31, 58, .58) 66%,
    rgba(11, 31, 58, .30) 100%
  );
}

/* position:relative basta para quedar por encima del media absoluto:
   ambos son hijos de la sección y este va después en el documento. */
.pool-banner-inner {
  position: relative;
  max-width: 680px;
}

.pool-banner .eyebrow { color: var(--accent); }
.pool-banner .eyebrow::after { background: var(--accent); }

.pool-banner h2 { color: var(--teoti-white); }
.pool-banner h2 strong { color: var(--accent); }

.pool-banner p {
  margin-top: 1.1rem;
  max-width: 56ch;
  color: rgba(245, 239, 226, .88);
  line-height: 1.75;
}

/* ---- Píldoras de lo que incluye ---- */
.pool-banner-perks {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.7rem;
}
.pool-banner-perks li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .95rem;
  border: 1px solid rgba(245, 235, 209, .30);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 600;
  color: var(--teoti-cream);
}
.pool-banner-perks svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

/* ---- Llamadas a la acción ---- */
.pool-banner-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.1rem;
}
/* El .btn-ghost de la casa es dorado sobre claro; sobre el azul noche ese
   dorado oscuro no contrasta, así que aquí se pasa a blanco. */
.pool-banner .btn-ghost {
  border-color: rgba(245, 239, 226, .55);
  color: var(--teoti-white);
}
.pool-banner .btn-ghost:hover {
  background: rgba(245, 239, 226, .16);
  border-color: var(--teoti-white);
  color: var(--teoti-white);
}

@media (max-width: 760px) {
  .pool-banner { min-height: 0; }
  /* En vertical no queda ancho a la derecha que preservar: el degradado
     pasa a ser de arriba abajo y cubre la foto entera. */
  .pool-banner-media::after {
    background: linear-gradient(
      180deg,
      rgba(11, 31, 58, .68) 0%,
      rgba(11, 31, 58, .88) 55%,
      rgba(11, 31, 58, .92) 100%
    );
  }
  .pool-banner-cta .btn { flex: 1 1 100%; }
}