/* ==========================================================================
   Chile Adventure Pro — Maqueta de plataforma de experiencias
   Sistema visual derivado del logo: verde bosque #003018 + rojo #D83018
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Marca */
  --forest-950: #04120B;
  --forest-900: #071B10;
  --forest-800: #0A2416;
  --forest-700: #0F3221;
  --forest-600: #17452D;
  --brand: #003018;
  --lava: #D83018;
  --lava-600: #C0290F;
  --lava-soft: #F2704F;
  /* Acento del titular sobre fotografia. Medido contra las cinco fotos del
     hero ya con el velo aplicado: #F2704F caia a 2.98:1 sobre la del Tatio,
     bajo el minimo. Este tono conserva el rojo y da 5.01:1 en el peor caso. */
  --lava-hero: #FF8F73;
  --azul: #1848A8;

  /* Neutros cálidos */
  --bone: #F6F3EC;
  --sand: #E8E2D5;
  --stone: #B9B2A3;
  --slate: #6E6A60;
  --ink: #0A0F0C;

  --gold: #E9B44C;

  /* Superficies */
  --bg: var(--bone);
  --surface: #FFFFFF;
  --surface-2: #FBF9F4;
  --line: rgba(10, 15, 12, 0.10);
  --line-strong: rgba(10, 15, 12, 0.18);

  /* Texto */
  --text: #131A15;
  --text-2: #4A5149;
  /* Oscurecido el 13-08-2026: #7C827A daba 3.55:1 sobre el fondo hueso y
     3.94:1 sobre blanco, bajo el mínimo AA de 4.5:1 para texto chico. Es el
     color de metadato más usado del sitio (ubicación de tarjeta, migas,
     datos rápidos). Mismo matiz, ahora 4.9:1 sobre hueso. */
  --text-3: #666B63;

  /* Tipografía */
  /* Sistema elegido el 13-08-2026 sobre render comparado. Host Grotesk es
     una grotesca neutra de la misma familia que usan los referentes reales
     del rubro: Neue Haas Grotesk en 57hours, Objektiv Mk1 en explora,
     GT Eesti en GetYourGuide, Brother 1816 en Backroads. Fraunces quedó
     fuera: no la usa nadie del segmento y pertenece al set de fuentes que
     delatan un diseño generado por IA. */
  --font-display: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent: "Instrument Serif", ui-serif, Georgia, serif;
  /* Sin monoespaciada (regla del 28-09-2026): etiquetas y cifras en la misma
     sans, caja alta con tracking y cifras tabulares. */
  --font-label: var(--font-sans);

  /* Escala */
  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.30rem + 0.75vw, 2rem);
  --step-3: clamp(1.9rem, 1.60rem + 1.5vw, 2.9rem);
  --step-4: clamp(2.4rem, 1.85rem + 2.75vw, 4.4rem);
  --step-5: clamp(2.9rem, 1.90rem + 5vw, 6.2rem);

  /* Espacio y forma */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(10, 15, 12, 0.06), 0 2px 8px rgba(10, 15, 12, 0.04);
  --shadow: 0 4px 12px rgba(10, 15, 12, 0.07), 0 14px 40px rgba(10, 15, 12, 0.08);
  --shadow-lg: 0 10px 24px rgba(10, 15, 12, 0.10), 0 30px 70px rgba(10, 15, 12, 0.14);
  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Base --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 880px); margin-inline: auto; }

.eyebrow {
  font-family: var(--font-label); font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lava);
  font-weight: 500;
}

svg { stroke-linecap: round; stroke-linejoin: round; }
.icon { width: 20px; height: 20px; stroke-width: 1.5; flex: none; }
.icon-sm { width: 16px; height: 16px; stroke-width: 1.5; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Aviso de maqueta ---------------------------------------------------- */
.demo-bar {
  background: var(--forest-950);
  color: var(--sand);
  font-family: var(--font-label); font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.55rem 1rem;
  position: relative;
  z-index: 60;
}
.demo-bar strong { color: var(--lava-soft); font-weight: 500; }
/* En móvil el aviso completo ocupa tres líneas y empuja el logo hacia abajo. */
@media (max-width: 480px) {
  .demo-bar { padding: 0.5rem 1rem; }
  .demo-bar strong { display: none; }
}

/* --- Header -------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 243, 236, 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--line); }
.header.on-hero {
  background: linear-gradient(to bottom, rgba(4, 18, 11, 0.55), transparent);
  color: var(--bone);
}
.header.on-hero .nav-link { color: rgba(246, 243, 236, 0.88); }
.header.on-hero .btn-ghost { color: var(--bone); border-color: rgba(246, 243, 236, 0.35); }
.header.on-hero .logo-mark { filter: brightness(0) invert(1); }

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 74px;
}

/* El nombre escrito al lado de la marca se retiró el 27-08-2026 a pedido de
   Paolo ("es redundante"): el archivo del logo ya lleva el nombre dentro.
   Con él se fueron .logo-text y .logo-text span, que no los usa nadie más.
   En teléfono ese texto ya estaba oculto, así que el cambio solo nivela el
   escritorio con lo que la pantalla chica hacía desde antes. */
.logo { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.logo-mark { height: 38px; width: auto; transition: filter 0.3s var(--ease); }

.nav { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.2s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--lava);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav-link:hover { color: var(--lava); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Submenú de disciplinas en Deportes, Tours y Expediciones (27-08-2026).
   Se abre con el puntero y con el foco de teclado: :focus-within cubre a
   quien llega con Tab sin necesidad de duplicar la lógica en JavaScript.
   El enlace padre sigue siendo navegable y lleva al catálogo filtrado. */
.nav-item { position: relative; display: flex; align-items: center; gap: 0.3rem; }
.nav-chev { width: 13px; height: 13px; color: var(--text-3); transition: transform 0.28s var(--ease); }
.header.on-hero .nav-chev { color: rgba(246, 243, 236, 0.7); }
.nav-item:hover .nav-chev,
.nav-item:focus-within .nav-chev { transform: rotate(180deg); color: var(--lava); }

/* Puente invisible: sin él, el submenú se cierra al cruzar el espacio que lo
   separa del enlace y queda imposible de alcanzar con el mouse. */
.nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.7rem; }

.nav-sub {
  position: absolute; top: calc(100% + 0.6rem); left: -0.6rem; z-index: 60;
  min-width: 190px; padding: 0.4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  display: grid; gap: 2px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { opacity: 1; transform: none; pointer-events: auto; }
.nav-sub a {
  padding: 0.5rem 0.7rem; border-radius: var(--r-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--text-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-sub a:hover { background: var(--surface-2); color: var(--lava); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.nav + .header-actions { margin-left: 0; }

.menu-btn {
  display: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  place-items: center; color: inherit; flex: none;
}
.header.on-hero .menu-btn { border-color: rgba(246, 243, 236, 0.35); color: var(--bone); }

.mobile-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 0.5rem 1.25rem 1.25rem;
  display: grid;
  transform: translateY(-10px);
  opacity: 0; pointer-events: none;
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.mobile-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
.mobile-nav a {
  padding: 0.9rem 0; font-weight: 600; font-size: 0.95rem;
  color: var(--text); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a .icon-sm { color: var(--lava); }

/* Las mismas disciplinas en teléfono, como acordeón dentro del panel que ya
   existe. Un solo mecanismo de apertura: el panel se abre con el botón de
   menú y las disciplinas se despliegan dentro, sin una segunda capa. */
.mnav-item { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.mnav-item > a { border-bottom: 0; }
.mnav-toggle {
  width: 40px; height: 40px; border: 0; background: none;
  display: grid; place-items: center; color: var(--lava); border-radius: 50%;
}
.mnav-toggle .nav-chev { color: inherit; }
.mnav-toggle[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.mnav-sub { grid-column: 1 / -1; display: grid; padding: 0 0 0.6rem 0.9rem; }
.mnav-sub[hidden] { display: none; }
.mnav-sub a { padding: 0.6rem 0; font-size: 0.88rem; font-weight: 500; color: var(--text-2); border-bottom: 0; }

/* --- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--lava); color: #fff; box-shadow: 0 2px 10px rgba(216, 48, 24, 0.28); }
.btn-primary:hover { background: var(--lava-600); box-shadow: 0 6px 22px rgba(216, 48, 24, 0.36); transform: translateY(-1px); }

.btn-dark { background: var(--forest-900); color: var(--bone); }
.btn-dark:hover { background: var(--brand); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--text); background: rgba(10, 15, 12, 0.04); }

.btn-lg { padding: 0.95rem 1.9rem; font-size: 0.98rem; }
.btn-block { width: 100%; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: flex;
  align-items: flex-end;
  margin-top: -74px;
  padding-top: 74px;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.15s var(--ease), transform 7s var(--ease);
  will-change: opacity, transform;
}
/* La foto entrante hace un micro-zoom mientras aparece: el mismo recurso de
   cross-fade que usamos en Zaza, que evita el corte seco entre imagenes. */
.hero-media img.is-on { opacity: 1; transform: scale(1); }
/* Velo en dos capas, calibrado midiendo el contraste real del texto sobre
   las siete fotografias del cliente. Antes el titular quedaba en 1.87:1
   sobre la foto del Villarrica, muy por debajo del minimo AA de 4.5. Con
   estas dos capas el peor caso del banco queda en 5.1:1 y la fotografia
   sigue leyendose. Es direccional: pesa donde va el texto, se abre donde
   esta la imagen. */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(4, 18, 11, 0.62) 0%,
      rgba(4, 18, 11, 0.48) 42%,
      rgba(4, 18, 11, 0.14) 78%,
      rgba(4, 18, 11, 0.04) 100%),
    linear-gradient(to top,
      rgba(4, 18, 11, 0.24) 0%,
      rgba(4, 18, 11, 0.10) 45%,
      rgba(4, 18, 11, 0) 100%),
    /* Tercera capa, concentrada donde cae el titular: sube el contraste del
       texto grande sin oscurecer la fotografia completa. */
    linear-gradient(to bottom,
      rgba(4, 18, 11, 0) 18%,
      rgba(4, 18, 11, 0.26) 30%,
      rgba(4, 18, 11, 0.26) 52%,
      rgba(4, 18, 11, 0) 64%);
}
/* Sin `width:100%`: pisaba el ancho de .wrap y dejaba el titular, el buscador
   y las cifras pegados al borde izquierdo, desalineados con la cabecera. */
.hero-content { position: relative; z-index: 2; color: var(--bone); padding-bottom: 2.5rem; }
.hero-eyebrow { color: var(--lava-soft); margin-bottom: 1rem; }
.hero h1 {
  font-size: var(--step-5);
  font-weight: 700;
  max-width: 16ch;
  margin-bottom: 1.1rem;
  /* Halo apenas perceptible. No reemplaza al velo, pero separa el titular de
     cualquier fotografia que se cargue mas adelante sin volver a medir. */
  text-shadow: 0 2px 28px rgba(4, 18, 11, 0.45), 0 1px 3px rgba(4, 18, 11, 0.25);
}
.hero h1 em { color: var(--lava-hero); }
.hero-sub { font-size: var(--step-1); color: rgba(246, 243, 236, 0.82); max-width: 46ch; margin-bottom: 2rem; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-bottom: 2.4rem; }
.hero-stat b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1; }
.hero-stat span { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.66; }

/* Buscador */
.searchbar {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  align-items: stretch;
  padding: 0.5rem;
  gap: 0.25rem;
  color: var(--text);
}
.search-field {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1.1rem;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.2s var(--ease);
  min-width: 0;
}
.search-field:hover { background: var(--surface-2); }
.search-field + .search-field { box-shadow: -1px 0 0 var(--line); }
.search-field .icon { color: var(--lava); }
.search-field label { display: block; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.search-field input,
.search-field .val {
  border: 0; background: transparent; padding: 0; width: 100%;
  font-size: 0.92rem; font-weight: 600; color: var(--text); outline: none;
  font-family: var(--font-sans);
}
.search-field input::placeholder { color: var(--text-3); font-weight: 500; }
.search-submit { align-self: center; margin-right: 0.25rem; }

/* Sugerencias del buscador (acuerdo con Paolo, 27-08-2026: el campo sugiere a
   medida que se escribe en vez de desplegar una lista larga). El panel flota
   sobre el contenido para no alterar la grilla de cuatro columnas de la barra:
   si empujara, la barra saltaría de alto en cada tecla. */
.search-field-auto { position: relative; }
.search-sug {
  position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 40;
  margin: 0; padding: 0.35rem; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
}
/* Obligatoria: el display de la clase le gana al atributo hidden. */
.search-sug[hidden] { display: none; }
.search-sug li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0.55rem 0.75rem; border-radius: var(--r-sm);
  cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--text);
}
.search-sug li span {
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); font-weight: 400;
}
.search-sug li[aria-selected="true"],
.search-sug li:hover { background: var(--surface-2); }
.search-sug mark { background: none; color: var(--lava); font-weight: 700; }
.search-sug .search-sug-vacio { color: var(--text-3); font-weight: 500; cursor: default; }
/* En teléfono la barra pasa a una columna y el panel cae sobre el campo de
   fecha: el campo abierto tiene que quedar por encima de sus hermanos. */
.search-field-auto:focus-within { z-index: 41; }

/* --- Franja de confianza -------------------------------------------------- */
.trust {
  background: var(--forest-950);
  color: var(--sand);
  padding: 1.15rem 0;
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.trust-item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.84rem; }
.trust-item .icon { color: var(--lava-soft); }
.trust-item b { font-weight: 600; display: block; color: var(--bone); }
.trust-item span { color: rgba(232, 226, 213, 0.6); font-size: 0.76rem; }

/* --- Secciones ------------------------------------------------------------ */
.section { padding: clamp(3.5rem, 7vw, 7rem) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; }
.section-head h2 { font-size: var(--step-3); max-width: 18ch; }
.section-head p { color: var(--text-2); max-width: 44ch; margin-top: 0.7rem; }
.section-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: var(--lava); flex: none; }
.section-link:hover .icon-sm { transform: translateX(3px); }
.section-link .icon-sm { transition: transform 0.25s var(--ease); }

/* --- Cards de experiencia -------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--forest-800); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.card:hover .card-media img { transform: scale(1.06); }

.card-chip {
  position: absolute; top: 0.85rem; left: 0.85rem;
  background: rgba(4, 18, 11, 0.72);
  backdrop-filter: blur(10px);
  color: var(--bone);
  font-family: var(--font-label); font-variant-numeric: tabular-nums;
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: 999px;
}
.card-fav {
  position: absolute; top: 0.7rem; right: 0.7rem;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); border: 0;
  display: grid; place-items: center; color: var(--text-2);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card-fav:hover { color: var(--lava); transform: scale(1.1); }
.card-fav.is-on { color: var(--lava); }
.card-fav.is-on .icon-sm { fill: currentColor; }

.card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card-loc { display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--text-3); margin-bottom: 0.45rem; }
.card h3 { font-size: 1.18rem; margin-bottom: 0.6rem; }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.78rem; color: var(--text-2); margin-bottom: 0.9rem; }
.card-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }

.rating { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; }
.rating .icon-sm { color: var(--gold); fill: var(--gold); }
.rating small { color: var(--text-3); font-weight: 400; }

.card-foot {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.price small { display: block; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.price b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.price i { font-style: normal; font-size: 0.75rem; color: var(--text-3); }

.tag-free {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 600; color: #1B6B46;
  background: rgba(27, 107, 70, 0.09);
  padding: 0.25rem 0.55rem; border-radius: 6px;
}

/* Placeholder para tours sin foto */
.ph {
  position: absolute; inset: 0;
  background: linear-gradient(140deg, var(--forest-700), var(--forest-900) 60%, var(--brand));
  display: grid; place-items: center;
  color: rgba(246, 243, 236, 0.35);
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 25%, rgba(216, 48, 24, 0.22), transparent 45%),
                    radial-gradient(circle at 80% 75%, rgba(24, 72, 168, 0.18), transparent 45%);
}
.ph span {
  position: relative;
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* --- Grid de actividades --------------------------------------------------- */
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.8rem; }
.act {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 0.86rem; font-weight: 600;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.act:hover { border-color: var(--lava); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.act .icon-sm { color: var(--lava); }
.act em { margin-left: auto; font-style: normal; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.7rem; color: var(--text-3); }

/* --- Bloque inmersivo ------------------------------------------------------ */
.immersive {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
  color: var(--bone);
  text-align: center;
  overflow: hidden;
}
.immersive-media { position: absolute; inset: 0; }
.immersive-media img { width: 100%; height: 100%; object-fit: cover; }
.immersive-media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 18, 11, 0.62); }
.immersive-content { position: relative; z-index: 2; padding: 4rem 1.5rem; }
.immersive h2 { font-size: var(--step-4); max-width: 16ch; margin: 1rem auto 1.2rem; }
.immersive h2 em { font-style: normal; color: var(--lava-soft); }
.immersive p { max-width: 52ch; margin: 0 auto 2rem; color: rgba(246, 243, 236, 0.8); font-size: var(--step-1); }

/* --- Regiones -------------------------------------------------------------- */
.regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.region {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
  display: flex; align-items: flex-end; padding: 1.3rem;
  color: var(--bone);
  transition: transform 0.4s var(--ease);
}
.region:hover { transform: translateY(-5px); }
.region img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.region:hover img { transform: scale(1.07); }
.region::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 18, 11, 0.88), rgba(4, 18, 11, 0.08) 65%); }
.region-body { position: relative; z-index: 2; }
.region-body h3 { font-size: 1.25rem; }
.region-body span { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }

/* --- Reseñas --------------------------------------------------------------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.review {
  background: var(--surface); border-radius: var(--r-lg); padding: 1.6rem;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.review-stars { display: flex; gap: 2px; color: var(--gold); }
.review-stars .icon-sm { fill: currentColor; width: 15px; height: 15px; }
.review p { font-size: 0.95rem; color: var(--text-2); flex: 1; }
.review-who { display: flex; align-items: center; gap: 0.7rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--forest-700); color: var(--bone);
  display: grid; place-items: center;
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.72rem; font-weight: 500;
}
.review-who b { display: block; font-size: 0.86rem; }
.review-who span { font-size: 0.74rem; color: var(--text-3); }

/* --- CTA final -------------------------------------------------------------- */
.cta-final {
  background: var(--forest-950);
  color: var(--bone);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(216, 48, 24, 0.3), transparent 60%);
}
.cta-final > * { position: relative; }
.cta-final h2 { font-size: var(--step-3); max-width: 20ch; margin: 0.8rem auto 1rem; }
.cta-final p { color: rgba(246, 243, 236, 0.72); max-width: 48ch; margin: 0 auto 2rem; }
.cta-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }

/* --- Footer ----------------------------------------------------------------- */
.footer { background: var(--forest-950); color: var(--sand); padding: 4rem 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
.footer h4 { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lava-soft); font-weight: 500; margin-bottom: 1.1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer a { font-size: 0.86rem; color: rgba(232, 226, 213, 0.72); transition: color 0.2s var(--ease); }
.footer a:hover { color: var(--bone); }
.footer-about p { font-size: 0.86rem; color: rgba(232, 226, 213, 0.6); max-width: 34ch; margin: 1rem 0 1.4rem; }
.footer .logo-mark { filter: brightness(0) invert(1); }
.socials { display: flex; gap: 0.6rem; }
.socials a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(232, 226, 213, 0.2);
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.socials a:hover { background: var(--lava); border-color: var(--lava); color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(232, 226, 213, 0.12);
  padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  font-size: 0.78rem; color: rgba(232, 226, 213, 0.5);
}
.nuvaus-credit {
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(232, 226, 213, 0.34);
  transition: color 0.25s var(--ease);
}
.nuvaus-credit:hover { color: #4FD1C5; }
.pay-methods { display: flex; align-items: center; gap: 0.5rem; }
.pay-chip {
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.6rem; letter-spacing: 0.06em;
  border: 1px solid rgba(232, 226, 213, 0.2); border-radius: 5px;
  padding: 0.24rem 0.5rem; color: rgba(232, 226, 213, 0.6);
}

/* ==========================================================================
   Vista: ficha de tour
   ========================================================================== */
.breadcrumb { font-size: 0.78rem; color: var(--text-3); padding: 1.6rem 0 0.9rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--lava); }

.tour-head { padding-bottom: 1.5rem; }
.tour-head h1 { font-size: var(--step-3); max-width: 22ch; margin-bottom: 0.9rem; }
.tour-head-meta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-2); }
.badge-top {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(216, 48, 24, 0.1); color: var(--lava-600);
  font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 6px;
}

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.6rem; height: 480px; border-radius: var(--r-lg); overflow: hidden; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: opacity 0.3s var(--ease); }
.gallery img:hover { opacity: 0.9; }
.gallery > *:first-child { grid-row: span 2; }
.gallery-more {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px);
  padding: 0.55rem 1rem; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.4rem; border: 0;
}

/* --- Visor de fotos ------------------------------------------------------- */
.visor { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; opacity: 0; transition: opacity 0.22s var(--ease); }
.visor.is-in { opacity: 1; }
.visor-fondo { position: absolute; inset: 0; background: rgba(10, 12, 10, 0.92); }
.visor-caja { position: relative; margin: 0; max-width: min(1200px, 92vw); display: grid; grid-template-rows: 1fr auto; gap: 0.6rem; }
.visor-img { max-width: min(1200px, 92vw); max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r); background: #000; display: block; margin: 0 auto; }
.visor-pie { display: flex; justify-content: space-between; gap: 1rem; color: rgba(246, 243, 236, 0.85); font-size: 0.8rem; }
.visor-contador { font-family: var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.visor-x, .visor-nav {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(246, 243, 236, 0.28); background: rgba(246, 243, 236, 0.12); color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background 0.2s var(--ease);
}
.visor-x:hover, .visor-nav:hover { background: rgba(246, 243, 236, 0.26); }
.visor-x { top: 1rem; right: 1rem; }
.visor-nav { top: 50%; transform: translateY(-50%); }
.visor-ant { left: 1rem; }
.visor-sig { right: 1rem; }
.visor-nav[disabled] { display: none; }
.visor .icon-sm { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .visor-nav { top: auto; bottom: 1.2rem; transform: none; }
  .visor-img { max-height: 74vh; }
}
@media (prefers-reduced-motion: reduce) { .visor { transition: none; } }

.tour-layout { display: grid; grid-template-columns: minmax(0, 1fr) 388px; gap: 3.5rem; padding: 2.8rem 0 4rem; align-items: start; }

.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.4rem 0; border-block: 1px solid var(--line); margin-bottom: 2.2rem; }
.qf { display: flex; gap: 0.7rem; align-items: flex-start; }
.qf .icon { color: var(--lava); margin-top: 2px; }
.qf b { display: block; font-size: 0.88rem; }
.qf span { font-size: 0.76rem; color: var(--text-3); }
.quick-facts.n3 { grid-template-columns: repeat(3, 1fr); }

.tour-block { padding-bottom: 2.6rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--line); }
.tour-block:last-child { border-bottom: 0; }
.tour-block h2 { font-size: var(--step-2); margin-bottom: 1.2rem; }
.tour-block p { color: var(--text-2); margin-bottom: 1rem; }
.ficha-video { display: block; width: 100%; max-width: 340px; height: auto; border-radius: 12px; background: #000; }
.ficha-video.horizontal { max-width: 100%; }

.highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.highlights li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; }
.highlights .icon-sm { color: var(--lava); margin-top: 4px; }

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1.5px; background: var(--line-strong); }
.timeline li { position: relative; padding-left: 2.2rem; padding-bottom: 1.6rem; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--lava);
}
.timeline time { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--lava); display: block; margin-bottom: 0.25rem; }
.timeline b { display: block; font-size: 0.98rem; margin-bottom: 0.2rem; }
.timeline p { font-size: 0.88rem; margin: 0; }
/* Itinerario por fases: los deportes no llevan hora por hora (acuerdo del
   27-08-2026) y, desde el 6-10-2026, tampoco numeral: la fase no lleva marca
   y la línea de tiempo da el orden. Sin la hora arriba, el título de la fase
   pasa a ser la primera línea y el punto baja para quedar a su altura. */
.timeline-fases li::before { top: 4px; }

.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.incl ul { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; gap: 0.65rem; }
.incl li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--text-2); }
.incl h4 { font-family: var(--font-sans); font-size: 0.94rem; font-weight: 700; }
.incl .yes { color: #1B6B46; }
.incl .no { color: var(--text-3); }
/* Listas entregadas por el operador: qué llevar (equipo personal), requisitos
   e información relevante. Dos columnas en escritorio, una en teléfono. */
.lista-equipo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem 1.5rem; }
.lista-equipo li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--text-2); }
.lista-equipo .icon-sm { color: var(--lava); margin-top: 0.2rem; }
.lista-info { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.lista-info li { display: grid; gap: 0.2rem; font-size: 0.9rem; color: var(--text); padding: 0.75rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.lista-info b { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.map-link { margin-top: 0.9rem; }
.map-link .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
@media (max-width: 640px) { .lista-equipo { grid-template-columns: 1fr; } }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left;
  padding: 1.05rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.98rem; font-weight: 600;
}
.faq-q .icon-sm { transition: transform 0.3s var(--ease); color: var(--lava); }
.faq-item.is-open .faq-q .icon-sm { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-a p { font-size: 0.92rem; padding-bottom: 1.1rem; margin: 0; }
.faq-item.is-open .faq-a { max-height: 320px; }

/* Widget de reserva */
.booking {
  position: sticky; top: 96px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.booking-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.3rem; }
.booking-price b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.03em; }
.booking-price s { color: var(--text-3); font-size: 0.95rem; }
.booking-price i { font-style: normal; font-size: 0.82rem; color: var(--text-3); }
.booking-usd { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.7rem; color: var(--text-3); margin-bottom: 1.2rem; }

/* Letra chica junto al precio. Paolo, 27-08-2026: "junto al precio, el mismo
   tamaño de la letra". No reducir el font-size de estos dos bloques: que se
   lea igual que el resto de la ficha es el requisito, no un descuido. */
.booking-fineprint {
  display: grid; gap: 0.55rem; margin: 0 0 1.3rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
/* Sin font-size a propósito: hereda el cuerpo de la ficha. Poner 0.95rem
   aquí volvía a hacerla más chica que el resto, que es justo lo que Paolo
   pidió corregir. */
.fineprint-item {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0; line-height: 1.45; color: var(--text-2);
}
.fineprint-item .icon-sm { margin-top: 0.18em; color: var(--text-3); }

/* Condiciones de compra en la vista de teléfono ----------------------------
   Bajo 1080 px el módulo lateral (.booking-desktop) se oculta y sólo queda la
   barra fija con precio y botón, así que la letra chica desaparecía justo en
   el dispositivo por donde compra la mayoría. Este bloque vive en el cuerpo
   de la ficha y se muestra únicamente en ese ancho: el comprador lee las
   condiciones mientras recorre la ficha, sin tener que abrir nada y sin que
   la barra fija cambie de alto ni tape el botón de reservar.
   Se mantiene oculto en escritorio para no repetir lo que ya está al lado del
   precio en el módulo lateral. */
.condiciones-movil { display: none; scroll-margin-top: 100px; }
.condiciones-movil .booking-price { margin: 0 0 1rem; }
/* Sin borde ni relleno inferior: el separador aquí lo pone el .tour-block. */
.condiciones-movil .booking-fineprint {
  margin: 0; padding-bottom: 0; border-bottom: 0;
}

/* Mismo criterio en el flujo de reserva y en la confirmación, donde la
   referencia de tamaño es la fila "Total CLP" del resumen. */
.letra-chica { font-size: 1.05rem; }
.letra-chica-tit { font-weight: 700; color: var(--text); margin: 0 0 0.5rem; }
.letra-chica-lista {
  margin: 0; padding-left: 1.15rem;
  display: grid; gap: 0.4rem;
  color: var(--text-2); line-height: 1.45;
}

.field-label { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.5rem; display: block; }

/* --- Calendario mensual (ficha y reserva) --------------------------------- */
.cal { margin-bottom: 1.2rem; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.cal-mes { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.cal-nav {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cal-nav svg { width: 16px; height: 16px; }
.cal-nav:hover:not([disabled]) { border-color: var(--text-2); color: inherit; }
.cal-nav[disabled] { opacity: 0.35; cursor: default; }
.cal-sem, .cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-sem span { text-align: center; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 0.2rem 0 0.35rem; }
.cal-dia {
  position: relative; aspect-ratio: 1; min-height: 34px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font-size: 0.86rem; font-weight: 600; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.cal-dia em { position: absolute; right: 3px; top: 2px; font-style: normal; font-size: 0.55rem; color: var(--lava); font-weight: 700; }
.cal-dia:hover:not([disabled]) { border-color: var(--text-2); }
.cal-dia.is-hoy { box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-dia.is-abierta, .cal-dia.is-sujeta { border-color: var(--line-strong); }
.cal-dia.is-sel { background: var(--lava); border-color: var(--lava); color: #fff; }
.cal-dia.is-sel em { color: #fff; }
/* Completa pero clicable: abre la alerta de cupo en vez de ser un muro. */
.cal-dia.is-llena { color: var(--text-3); text-decoration: line-through; }
.cal-dia.is-llena:hover { border-color: var(--lava); color: var(--lava); }
.cal-dia[disabled] { opacity: 0.35; cursor: default; background: transparent; }
.cal-dia.is-sin[disabled] { opacity: 0.22; }
.cal-leyenda { display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--text-3); }
.cal-leyenda.is-aviso { color: var(--text-2); }
/* Anticipación mínima de la ficha: es una condición de compra, se lee como tal. */
.cal-leyenda.cal-anticip { color: var(--text-2); font-weight: 600; margin-top: 0.35rem; }
.cal-dia.is-anticipacion[disabled] { opacity: 0.3; }
.cal-pto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid var(--line-strong); background: var(--surface); margin-left: 0.4rem; }
.cal-pto:first-child { margin-left: 0; }
.cal-pto.is-llena { background: var(--line); }
.cal-inline { max-width: 360px; }

.stepper { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.55rem 0.7rem; margin-bottom: 1rem; }
.stepper-label b { display: block; font-size: 0.9rem; font-weight: 600; }
.stepper-label span { font-size: 0.74rem; color: var(--text-3); }
.stepper-ctrl { display: flex; align-items: center; gap: 0.85rem; }
.stepper-ctrl button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); display: grid; place-items: center; color: var(--text);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.stepper-ctrl button:hover:not(:disabled) { border-color: var(--lava); color: var(--lava); }
.stepper-ctrl button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper-ctrl output { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 18px; text-align: center; }

.breakdown { border-top: 1px solid var(--line); margin-top: 1.1rem; padding-top: 1.1rem; display: grid; gap: 0.55rem; font-size: 0.88rem; }
.breakdown div { display: flex; justify-content: space-between; color: var(--text-2); }
.breakdown .total { border-top: 1px solid var(--line); padding-top: 0.7rem; margin-top: 0.35rem; color: var(--text); font-weight: 700; font-size: 1.05rem; }
.breakdown .total b { font-family: var(--font-display); font-size: 1.3rem; }

.booking-reassure { display: grid; gap: 0.55rem; margin-top: 1.1rem; font-size: 0.79rem; color: var(--text-2); }
.booking-reassure div { display: flex; gap: 0.5rem; align-items: center; }
.booking-reassure .icon-sm { color: #1B6B46; }

.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lava); flex: none; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.3); } }

/* Barra móvil de reserva */
.mobile-book {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 0.8rem 1.25rem calc(0.8rem + env(safe-area-inset-bottom));
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 -6px 24px rgba(10, 15, 12, 0.1);
}

/* ==========================================================================
   Vista: reserva / checkout
   ========================================================================== */
.steps { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 2.2rem 0 2.6rem; }
.step { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-3); font-weight: 600; }
.step i {
  font-style: normal; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: 0.76rem; font-family: var(--font-label); font-variant-numeric: tabular-nums;
}
.step.is-active { color: var(--text); }
.step.is-active i { border-color: var(--lava); background: var(--lava); color: #fff; }
.step.is-done i { border-color: #1B6B46; background: #1B6B46; color: #fff; }
.step-sep { width: 40px; height: 1.5px; background: var(--line-strong); }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 3rem; padding-bottom: 5rem; align-items: start; }
.co-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem; margin-bottom: 1.3rem; }
.co-card h3 { font-size: 1.2rem; margin-bottom: 1.3rem; }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
/* min-width:0: una opcion larga de un <select> no puede ensanchar la pista y
   empujar el calendario fuera de la tarjeta en el telefono. */
.form-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 0.7rem 0.85rem; font-family: var(--font-sans); font-size: 0.92rem;
  background: var(--surface); color: var(--text); outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  /* Un control de formulario trae un ancho mínimo propio: el de su opción más
     larga. En el paso 1 de la reserva, "Cualquier horario sujeto a
     disponibilidad" empujaba el <select> a 318 px y con eso la tarjeta a
     377 px dentro de una pantalla de 375 px: el borde derecho quedaba cortado.
     Con min-width en cero el control se ajusta al ancho disponible. */
  min-width: 0; max-width: 100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--lava); box-shadow: 0 0 0 3px rgba(216, 48, 24, 0.12);
}

/* --- Consentimiento (Ley 21.719) -------------------------------------------
   Dos autorizaciones separadas, ninguna marcada de antemano. El recuadro no
   es decoración: separa visualmente lo que la persona está autorizando del
   resto del formulario, que es lo que la ley pide que sea inequívoco.
   -------------------------------------------------------------------------- */
.consent {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.9rem 1rem; margin: 0.2rem 0;
  display: grid; gap: 0.7rem; background: var(--surface-2);
}
.consent-legend {
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.65rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); padding: 0 0.35rem;
}
.consent-item {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem;
  align-items: start; cursor: pointer;
  font-size: 0.84rem; line-height: 1.45; color: var(--text-2);
}
.consent-item input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; margin-top: 0.12rem;
  accent-color: var(--lava); flex: 0 0 auto; cursor: pointer;
}
.consent-item a { text-decoration: underline; text-underline-offset: 2px; }
.consent-item em {
  display: block; font-style: normal; font-size: 0.78rem;
  color: var(--text-3); margin-top: 0.15rem;
}
.consent-item input:focus-visible { outline: 2px solid var(--lava); outline-offset: 2px; }
.consent-item input[aria-invalid="true"] { outline: 2px solid #B3261E; outline-offset: 2px; }
.consent-nota { font-size: 0.76rem; color: var(--text-3); margin: 0; }
.consent-error { font-size: 0.8rem; color: #B3261E; margin-top: 0.6rem; text-align: center; }

/* Casillas legales del checkout, que van sueltas y no dentro del recuadro. */
.check-legal { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.88rem; color: var(--text-2); }
.check-legal + .check-legal { margin-top: 0.9rem; }
.field-note { margin: 0.5rem 0 0; }

/* --- Autocompletado en formularios -----------------------------------------
   Mismo patrón que el buscador de portada, en el campo "experiencia de
   interés" de contacto, cuenta y cuestionario. .form-field no está
   posicionado, así que el ancla la pone la clase del contenedor.
   -------------------------------------------------------------------------- */
.autocompletar { position: relative; }
.ac-lista {
  position: absolute; z-index: 30; top: 100%; left: 0; right: 0;
  margin: 0.25rem 0 0; padding: 0.3rem; list-style: none;
  max-height: 16rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.ac-lista[hidden] { display: none; }
.ac-lista li {
  padding: 0.5rem 0.6rem; border-radius: calc(var(--r-sm) - 2px);
  cursor: pointer; font-size: 0.88rem; color: var(--text);
}
.ac-lista li span {
  display: block; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}
.ac-lista li[aria-selected="true"],
.ac-lista li:hover { background: var(--surface-2); }
.ac-lista mark { background: none; font-weight: 700; color: var(--lava); }
.ac-lista .ac-vacio { color: var(--text-3); cursor: default; }
.ac-ayuda { font-size: 0.76rem; color: var(--text-3); margin: 0.35rem 0 0; }

.pay-option {
  display: flex; align-items: center; gap: 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 11px;
  padding: 1rem 1.1rem; margin-bottom: 0.7rem; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.pay-option:hover { border-color: var(--text-2); }
.pay-option.is-active { border-color: var(--lava); background: rgba(216, 48, 24, 0.04); box-shadow: inset 0 0 0 1px var(--lava); }
.pay-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; }
.pay-option.is-active .pay-radio { border-color: var(--lava); }
.pay-option.is-active .pay-radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lava); }
.pay-option b { display: block; font-size: 0.92rem; }
.pay-option span { font-size: 0.78rem; color: var(--text-3); }
.pay-logo { margin-left: auto; font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.66rem; color: var(--text-3); border: 1px solid var(--line); padding: 0.2rem 0.45rem; border-radius: 5px; }

.summary { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.summary-media { height: 150px; position: relative; }
.summary-media img { width: 100%; height: 100%; object-fit: cover; }
.summary-body { padding: 1.4rem; }
.summary-body h4 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.8rem; }
.summary-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--text-2); padding: 0.35rem 0; }
.summary-line b { color: var(--text); font-weight: 600; }

/* Confirmación */
.confirm { text-align: center; max-width: 620px; margin: 0 auto; padding: 3rem 0 5rem; }
.confirm-icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 1.6rem;
  background: rgba(27, 107, 70, 0.1); color: #1B6B46;
  display: grid; place-items: center;
  animation: pop 0.5s var(--ease);
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm h2 { font-size: var(--step-3); margin-bottom: 0.9rem; }
.confirm > p { color: var(--text-2); margin-bottom: 2.2rem; }
.voucher {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.8rem; text-align: left; box-shadow: var(--shadow-sm); margin-bottom: 1.6rem;
  position: relative;
}
.voucher::before, .voucher::after {
  content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg); top: 50%; margin-top: -11px;
}
.voucher::before { left: -12px; }
.voucher::after { right: -12px; }
.voucher-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px dashed var(--line-strong); margin-bottom: 1.2rem; }
.voucher-code { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--lava); }
.voucher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.voucher-grid span { font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 3px; }
.voucher-grid b { font-size: 0.94rem; }
.next-steps { display: grid; gap: 0.7rem; text-align: left; margin-top: 2rem; }
.next-step { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--surface-2); border-radius: var(--r); padding: 1rem 1.1rem; }
.next-step .icon { color: var(--lava); margin-top: 2px; }
.next-step b { display: block; font-size: 0.9rem; }
.next-step p { font-size: 0.82rem; color: var(--text-2); margin: 0; }

/* --- Utilidades ------------------------------------------------------------- */
.view { display: none; }
.view.is-active { display: block; animation: fadeUp 0.5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Aparicion con desenfoque: el elemento entra flotando y enfocandose, en vez
   de solo deslizarse. Es el mismo recurso de Zaza. El blur se omite bajo
   860 px porque en gama media de Android cuesta caro al GPU y baja los fps;
   ahi queda solo el desplazamiento, que comunica lo mismo. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
@media (max-width: 860px) {
  .reveal { filter: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
}

.note {
  font-family: var(--font-label); font-variant-numeric: tabular-nums; font-size: 0.65rem; letter-spacing: 0.06em;
  color: var(--text-3); border-left: 2px solid var(--lava); padding-left: 0.7rem; margin-top: 1rem;
}
/* Servicio privado (cobro mínimo): se lee junto al selector y al total, más
   grande que una nota al pie, y se resalta cuando la selección lo activa. */
.note-privado { font-size: 0.8rem; letter-spacing: 0.02em; color: var(--text-2); line-height: 1.4; }
.note-privado.is-activo { color: var(--text); font-weight: 600; }

/* --- Responsive -------------------------------------------------------------- */
@media (max-width: 1080px) {
  /* minmax(0, 1fr) y no 1fr: con `1fr` la columna no puede bajar del ancho
     mínimo de su contenido, así que cualquier control largo desborda la
     pantalla en teléfono en vez de encogerse. */
  .tour-layout, .checkout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .booking { position: static; }
  .summary { position: static; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .regions { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: 1fr; }
  .booking-desktop { display: none; }
  .mobile-book { display: flex; }
  /* Contrapartida de ocultar el módulo lateral: las condiciones que iban
     pegadas al precio pasan al cuerpo de la ficha, no se pierden. */
  .condiciones-movil { display: block; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  /* El selector de idioma y moneda se queda en telefono (Paolo, 5-10-2026:
     "multi-idioma no se puede ver desde un celular"). */
  .header-actions .btn-ghost:not(.locale-btn) { display: none; }
  .header-actions .locale-btn { padding: 0.55rem 0.7rem; font-size: 0.78rem; }
  .searchbar { grid-template-columns: 1fr; }
  .search-field + .search-field { box-shadow: 0 -1px 0 var(--line); }
  .search-submit { margin: 0.25rem; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .quick-facts { grid-template-columns: repeat(2, 1fr); }
  .quick-facts.n3 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: 1fr 1fr; height: 340px; }
  .gallery > *:first-child { grid-column: span 2; grid-row: span 1; }
  .gallery > img:nth-child(n+4) { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .incl { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (max-width: 620px) {
  .header-inner { gap: 0.6rem; height: 66px; }
  .logo-mark { height: 34px; }
  .header-actions .btn-primary { padding: 0.6rem 1.05rem; font-size: 0.85rem; }
  /* Solo el globo: con la etiqueta "ES · CLP" no caben logo, Reservar y menu. */
  .header-actions .locale-btn { padding: 0.55rem; }
  .header-actions .locale-btn #localeLabel { display: none; }
  .hero { margin-top: -66px; padding-top: 66px; }
  .cards { grid-template-columns: 1fr; }
  .regions { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 1.4rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .steps .step span { display: none; }
  .step-sep { width: 22px; }
  .voucher-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}