/* Peak Luxe Travel — Visor de Propuesta
   Clon visual de la referencia (ski.com / Ski Travel Agents): tipografía
   (condensada en mayúsculas) y layout se copian tal cual — ver spec sección
   6. La PALETA DE COLORES sí tiene excepciones confirmadas de marca: dorado
   de PLT como acento (antes celeste de ski.com) y Navy/Cream de PLT en los
   fondos oscuros/claros (antes navy casi negro / blanco-gris de ski.com).
   Todo pasa por variables (--accent*, --bg-dark*, --bg-light), nunca colores
   sueltos hardcodeados, para que sea reversible fácil si algo no cierra.
   El copy sigue la Guía de Marca (español, voseo rioplatense, sin
   superlativos ni palabras de posicionamiento). */

:root {
  /* Navy "casi negro" y blanco-gris ORIGINALES de la referencia (ski.com) —
     quedan definidos acá sin usarse en ningún otro lado del archivo, solo
     como valor de referencia para poder revertir el punto de abajo en un
     cambio de una línea si hace falta. */
  --navy-deepest: #060d16;
  --navy-deep: #0a1622;
  --navy: #0f1f30;
  --navy-mid: #16324a;
  --sky-blue: #5aa7e6;
  --sky-blue-dark: #3b7dde;
  --sky-blue-rgb: 90, 167, 230;
  --sky-blue-dark-rgb: 59, 125, 222;
  --gold-plt: #b59a77;
  --gold-plt-dark: #8d785c;
  --gold-plt-rgb: 181, 154, 119;
  --gold-plt-dark-rgb: 141, 120, 92;
  --plt-navy: #1e2d40;
  --plt-navy-2: #2a3950;
  --plt-cream: #fbfbfb;

  /* Experimento visual (spec sección 6) confirmado y ampliado — cobertura
     completa, no parcial: dorado de PLT como acento (antes celeste), y Navy
     de PLT en TODO lo navy de la página (antes navy casi negro de ski.com) —
     fondos oscuros, texto y bordes por igual, misma variable para los tres
     usos. Cream de PLT en los fondos claros (antes blanco-gris de ski.com).
     Todo ese uso pasa por estas variables — para volver a la paleta original
     de la referencia, cambiá SOLO estas líneas: los --accent a var(--sky-blue)
     equivalentes, y los --bg-dark / --bg-light a var(--navy) / var(--navy-deep)
     / var(--off-white).
     OJO al editar este comentario: nunca escribir asterisco pegado a barra
     (cierre de comentario CSS) dentro del texto — separarlos siempre con un
     espacio. Eso fue justo el bug de la vuelta pasada: una nota escrita sin
     ese espacio cerraba el comentario ahí mismo y dejaba `--accent` sin
     valor (inválido, heredaba el color del padre) en toda la página, sin
     ningún error visible en consola — así se ve el bug real de contraste
     que reportó Pili. */
  --accent: var(--gold-plt);
  --accent-dark: var(--gold-plt-dark);
  --accent-rgb: var(--gold-plt-rgb);
  --accent-dark-rgb: var(--gold-plt-dark-rgb);
  --bg-dark: var(--plt-navy);
  --bg-dark-2: var(--plt-navy-2);
  --bg-light: var(--plt-cream);
  --white: #ffffff;
  --off-white: #f7f8fa;
  --text-dark: #14181f;
  --text-gray: #6b7280;
  --border-light: #e7e9ec;
  --black-pill: #14181f;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --bar-height: 84px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
}

/* Evita que el contenido quede tapado por la barra inferior fija. */
body { padding-bottom: var(--bar-height); }

img { max-width: 100%; display: block; }

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before, .eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.eyebrow.align-left { justify-content: flex-start; }
.eyebrow.align-left::before { display: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  /* Margen izquierdo más chico que el resto de las secciones (3vw en vez de
     6vw) a propósito — en la referencia de ski.com el bloque de texto del
     hero arranca mucho más pegado al borde que las demás secciones. */
  padding: 0 6vw 64px 3vw;
  /* Pedido explícito: nada de degradé ni de bandas distintas por sección —
     una única capa PLANA y constante (mismo rgba, sin variar con la
     posición) de punta a punta del hero, .resumen-section e
     .incluye-section. Se usa la más transparente de las que había antes
     (la que se veía arriba del hero al entrar a la página), así no cambia
     la primera impresión pero desaparecen los "cortes" entre secciones. */
  background:
    linear-gradient(rgba(8,16,26,0.12), rgba(8,16,26,0.12)),
    var(--hero-image, none),
    /* Placeholder mientras no hay foto real cargada del destino: degradé +
       "montañas" en SVG en vez de una imagen de stock (ver nota en propuesta.js). */
    linear-gradient(180deg, #3a5068 0%, #1c2c40 38%, #0f1f30 70%, #0a1622 100%);
  background-size: cover;
  background-position: center;
  /* "fixed" (spec sección 12, ajuste al punto 5): la foto queda anclada al
     viewport en vez de a la caja de esta sección — combinado con el mismo
     background-position/fixed en .resumen-section y .incluye-section más
     abajo, las 3 secciones muestran la MISMA porción de foto sin
     "reiniciarla" en cada borde, así que se lee como una sola imagen
     continua detrás de las 3, con la MISMA capa semitransparente plana
     encima de punta a punta (nunca un bloque sólido opaco cortando la
     foto, y nunca un cambio de tono entre secciones). */
  background-attachment: fixed;
  overflow: hidden;
}

.hero-mountains {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 55%;
  opacity: 0.5;
  pointer-events: none;
}

.hero-content { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--accent); opacity: 0.7; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(40px, 7vw, 84px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0 0 34px;
}
.hero-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 600;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-stat .k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.hero-stat .v {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

/* Barra superior sacada a pedido de Pili (spec 5.2) — queda solo la
   inferior. Ver nota en propuesta.js. */

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-pill:hover { transform: translateY(-1px); }
.btn-pill svg { width: 15px; height: 15px; }
.btn-pill.btn-blue { background: var(--accent-dark); color: var(--white); }
/* Antes --black-pill (casi negro): en peakluxetravel.com los botones sólidos
   son navy o dorado, nunca negro — se alinea acá (repaso, punto 2). */
.btn-pill.btn-black { background: var(--bg-dark); color: var(--white); }

/* ---------- Card: Resumen del viaje ---------- */

/* Misma capa plana que .hero (ver esa nota) — mismo rgba exacto, para que no
   se note ningún corte de tono al pasar de una sección a la otra. La
   tarjeta blanca de "Resumen del viaje" sigue arriba de todo esto (z-index),
   sin cambios. */
.resumen-section {
  background:
    linear-gradient(rgba(8,16,26,0.12), rgba(8,16,26,0.12)),
    var(--hero-image, none),
    var(--bg-dark);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 56px 6vw 0;
}
.resumen-card {
  max-width: 1040px;
  /* Antes -70px: con el hero.padding-top (56px) de .resumen-section, el
     cuadro quedaba montado sobre la foto de portada (repaso, punto 2). Con
     -24px flota sobre el borde de la sección navy sin invadir el hero. */
  margin: -24px auto 0;
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(5,12,20,0.35);
  padding: 40px 44px;
}
.resumen-card .eyebrow { justify-content: flex-start; margin-bottom: 14px; }
.resumen-card .eyebrow::before { display: none; }
.resumen-titulo {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-dark);
  margin: 0 0 18px;
}
.resumen-titulo em { font-style: italic; color: var(--accent-dark); font-weight: 600; }
.resumen-texto { font-size: 15px; line-height: 1.6; color: #374151; margin: 0 0 26px; max-width: 720px; }
.resumen-divider { height: 1px; background: var(--border-light); margin-bottom: 22px; }
.resumen-asesor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.resumen-asesor .label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 6px; }
.resumen-asesor .nombre { font-weight: 700; font-size: 16px; color: var(--text-dark); }
.resumen-asesor .email { font-size: 14px; color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.resumen-asesor .email:hover { text-decoration: underline; }

/* "WhatsApp" al lado del número en los 3 lugares donde aparece el contacto
   del asesor (barra fija, resumen del viaje, checkout) — el número solo no
   aclara de qué medio se trata. Un solo selector porque la marca ".canal"
   es la misma estructura en los tres, solo cambia el tamaño heredado de
   cada ".email" contenedor. */
.email .canal { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }

/* ---------- Qué incluye ---------- */

/* Mismo criterio que .resumen-section (ver esa nota): misma capa plana,
   mismo rgba exacto — la foto fija del hero sigue hasta acá, esta sección
   llega hasta "Desplazate para revisar y personalizar tu viaje"
   (.incluye-scroll-hint más abajo), que es el límite pedido para el fondo
   continuo. De .incluye-section para abajo (paradas, alojamiento, etc.) no
   cambia nada. */
.incluye-section {
  background:
    linear-gradient(rgba(8,16,26,0.12), rgba(8,16,26,0.12)),
    var(--hero-image, none),
    var(--bg-dark);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 90px 6vw 70px;
  text-align: center;
  color: var(--white);
}
.incluye-titulo {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  text-transform: uppercase;
  margin: 16px 0 56px;
}
.incluye-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 64px;
  margin-bottom: 48px;
}
.incluye-item { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 120px; }
.incluye-item .label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.incluye-divider { max-width: 1040px; margin: 0 auto 40px; height: 1px; background: rgba(255,255,255,0.14); }

.incluye-total .label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-right: 10px; }
.incluye-total .monto { font-family: var(--font-display); font-size: 32px; font-weight: 700; }
.incluye-total .pp { font-size: 15px; font-style: italic; color: rgba(255,255,255,0.7); margin-left: 8px; }

.incluye-scroll-hint {
  margin-top: 54px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.scroll-chevron {
  margin: 14px auto 0;
  width: 26px;
  height: 42px;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 14px;
  position: relative;
}
.scroll-chevron::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,0.8);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 1.6s ease-in-out infinite;
}

/* Ícono de "Qué incluye": logo propio de Pili (PNG dorado sobre blanco),
   recortado en círculo por el contenedor — el PNG no necesita venir
   circular, ni tener fondo transparente, el recorte lo hace este CSS. Sin
   fondo celeste: el blanco del PNG ya funciona como fondo de la placa. */
.icon-badge {
  display: block;
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.icon-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes scrollDot {
  0% { opacity: 1; top: 8px; }
  70% { opacity: 0; top: 22px; }
  100% { opacity: 0; top: 8px; }
}

/* ---------- Resumen final / pago ---------- */

/* Fondo blanco puro detrás del recuadro crema — mismo par de tonos que las
   tarjetas de testimonios de referencia (page blanco / card #fbfbfb), la
   sombra es la que separa el recuadro de la página, no un salto de color. */
.resumen-final-section { background: var(--white); padding: 40px 6vw 90px; }
/* Excepción puntual (spec 5.7, repaso): este recuadro deja de ser navy
   oscuro como el resto de las secciones oscuras de la página, y pasa a ser
   claro/crema con sombra suave — mismo tratamiento que las tarjetas de
   testimonios de peakluxetravel.com. "Resumen del viaje" y "Qué incluye" de
   arriba siguen en navy sin cambios, esto es solo este recuadro. */
.resumen-final-card {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--bg-light);
  border-radius: 20px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  color: var(--text-dark);
  box-shadow: 0 18px 50px rgba(15,25,40,0.1);
}

.resumen-final-izq .eyebrow { justify-content: flex-start; margin-bottom: 16px; }
.resumen-final-izq .eyebrow::before { display: none; }
.resumen-final-titulo {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--bg-dark); font-size: clamp(30px, 4vw, 46px); margin: 0 0 10px; line-height: 1;
}
.resumen-final-meta { font-size: 14px; color: var(--text-gray); margin-bottom: 26px; }
.resumen-final-total { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5vw, 56px); line-height: 1; color: var(--bg-dark); }
.resumen-final-pp { font-size: 14px; color: var(--text-gray); margin: 8px 0 26px; }

.rf-divider { height: 1px; background: var(--border-light); margin: 22px 0; }
.rf-divider-clara { background: var(--border-light); }

.rf-heading { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-gray); margin-bottom: 16px; }
.rf-pago-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--text-dark); margin-bottom: 12px; }
.rf-pago-row strong { font-size: 16px; font-weight: 700; color: var(--bg-dark); }

.rf-vencimiento {
  display: flex; align-items: center; gap: 8px;
  background: #fdf1de;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px; font-weight: 600;
  color: #92400e;
  margin-bottom: 20px;
}

.rf-btn-reservar { width: 100%; justify-content: center; margin-bottom: 26px; }

.rf-cancelacion-dorada {
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fdf8f0;
}
.rf-aviso-traduccion {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 10px;
}
.rf-cancelacion-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rf-cancelacion-header strong { font-size: 15px; color: var(--text-dark); }
.link-politica {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--accent-dark);
  text-decoration: underline;
}
.rf-politica-texto {
  font-family: var(--font-body);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px;
  margin: 0;
}
.rf-politica-texto.oculto { display: none; }

.rf-incluye-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-gray); margin-bottom: 8px; }
.rf-incluye-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rf-incluye-top .destino { font-weight: 700; color: var(--accent-dark); font-size: 15px; }
.rf-incluye-top .noches { font-size: 13px; color: var(--text-gray); }
.rf-incluye-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--text-dark); }
/* Corrección 11.7 (spec sección 11): era el único eyebrow/label de énfasis
   que había quedado en negro liso en vez del dorado que ya usan el resto
   ("destino", "Incluido", etc.) — ver bug del mismo tipo documentado en la
   sección 6 del spec. */
.rf-incluye-row .bold { font-weight: 700; color: var(--accent-dark); }
.rf-incluye-row .incluido { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-dark); white-space: nowrap; }
.rf-incluye-sub { font-size: 13px; color: var(--text-gray); margin-top: 4px; }
.rf-incluye-sub-row { margin-top: 4px; padding-left: 4px; }
.rf-incluye-sub-row .incluido { font-size: 11.5px; }
.rf-incluye-item { padding-bottom: 4px; }

@media (max-width: 860px) {
  .resumen-final-card { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
}

/* ---------- Mountain components (servicios por viajero) ---------- */

.mountain-section { background: var(--bg-light); padding: 60px 6vw 30px; }

/* Header corregido (spec 5.5): nada de watermark gigante ni frase del
   asesor — logo + líneas + título, mismo espíritu que el patrón "eyebrow
   con líneas" que ya se usa en el resto de la página. */
.mountain-header { text-align: center; max-width: 780px; margin: 0 auto 8px; }
.mountain-header-linea-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.mountain-header-linea { flex: 1; max-width: 120px; height: 1px; background: var(--border-light); }
.plt-logo-badge {
  width: 44px; height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}
.mountain-header-titulo {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--bg-dark); font-size: clamp(24px, 3.5vw, 34px); margin: 0;
}

.grupo-label {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  max-width: 1180px; margin: 40px auto 24px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-gray);
}
.grupo-label::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

.viajeros-grid {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto 20px;
  display: grid;
  /* Punto 2 (spec sección 12): antes "1fr" hacía que las tarjetas se
     estiraran a ocupar todo el ancho disponible cuando había pocas — ahora
     tienen un ancho máximo fijo (400px) y, si sobra espacio, queda vacío a
     los costados en vez de ensancharlas (justify-content: center). */
  grid-template-columns: repeat(auto-fit, minmax(320px, 400px));
  justify-content: center;
  gap: 24px;
}

.viajero-card { border: 1.5px solid var(--bg-dark); border-radius: 16px; padding: 24px; background: var(--white); }
.viajero-card .grupo-label-chico { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-gray); margin-bottom: 8px; }

.viajero-nombre-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  border: 1.5px dashed #b9c6d6;
  border-radius: 8px;
  padding: 10px 36px 10px 12px;
  /* El ícono de lápiz es un SVG inline en data-URI — no puede leer
     var(--accent), así que el color va hardcodeado acá aparte. Si se
     revierte el experimento del punto 11 a celeste, este hex hay que
     cambiarlo a mano (%235aa7e6) junto con las variables de :root. */
  background: #f7fafd url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%23b59a77" stroke-width="1.6"><path d="M13 3l4 4-10 10H3v-4z"/></svg>') no-repeat right 12px center;
  background-size: 15px;
  margin-bottom: 18px;
}
.viajero-nombre-input:focus { outline: none; border-color: var(--accent-dark); }

.viajero-divider { height: 1px; background: var(--border-light); margin: 4px 0 16px; }
.servicio-viajero-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-dark); margin-bottom: 10px; }

.servicio-viajero-box {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1.5px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.servicio-viajero-box .nombre { font-weight: 700; font-size: 15px; color: var(--text-dark); margin-bottom: 6px; }
.servicio-viajero-box .vencimiento {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #92400e;
  background: #fdf1de; border-radius: 999px; padding: 4px 12px; margin-bottom: 8px;
}
.servicio-viajero-box .resumen { font-size: 13px; color: #4b5563; line-height: 1.5; }
.servicio-viajero-check { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.servicio-viajero-check .precio { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.servicio-viajero-check .incluido-row { display: flex; align-items: center; gap: 8px; }
.servicio-viajero-check .incluido-label { font-size: 12.5px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.servicio-viajero-check .check-box {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.servicio-viajero-check .check-box svg { width: 13px; height: 13px; stroke: var(--white); fill: none; stroke-width: 3; }

/* ---------- Ground transfers ---------- */

.transfers-section { max-width: 1040px; margin: 0 auto; padding: 44px 6vw 70px; }
.transfers-card { background: var(--white); border-radius: 18px; padding: 32px; box-shadow: 0 10px 30px rgba(15,25,40,0.06); }
.transfers-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.transfers-header h2 { font-family: var(--font-display); font-size: 24px; font-weight: 700; text-transform: uppercase; color: var(--bg-dark); margin: 0; }
.transfers-header .incluido-label { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-dark); }
.transfers-resumen { font-size: 14px; color: var(--text-gray); margin: 0 0 22px; }

.transfer-leg {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1.5px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.transfer-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 5px solid var(--accent-dark);
  background: var(--white);
  flex-shrink: 0; margin-top: 3px;
}
.transfer-leg .cuerpo { flex: 1; }
.transfer-leg .tipo { font-weight: 700; font-size: 15px; color: var(--text-dark); margin-bottom: 4px; }
.transfer-leg .meta { font-size: 13.5px; color: #4b5563; margin-bottom: 8px; }
.transfer-leg .equipaje { font-size: 12.5px; color: var(--text-gray); line-height: 1.55; }
.transfer-leg-precio-incluido { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.transfer-leg-precio-incluido .precio { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.transfer-leg-precio-incluido .incluido-label { font-size: 12.5px; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }

@media (max-width: 640px) {
  .transfer-leg { flex-wrap: wrap; }
  .transfer-leg-precio-incluido { flex-direction: row; margin-left: 32px; }
}

/* ---------- Intro de parada (stop) ---------- */

.stop-intro { padding: 56px 6vw 0; background: var(--bg-light); }
.stop-intro-media {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 440px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  background:
    linear-gradient(to top, rgba(6,13,22,0.9) 0%, rgba(10,22,35,0.35) 55%, rgba(20,35,50,0.15) 100%),
    var(--stop-image, none),
    /* Placeholder mientras no hay foto real de la parada — mismo criterio
       que el hero (ver nota en propuesta.js). */
    linear-gradient(135deg, #2b4258 0%, #1b2c3f 55%, #0e1b28 100%);
  background-size: cover;
  /* Punto 6 (spec sección 12): antes "center" dejaba mucho cielo arriba y
     poca nieve visible abajo — corrida hacia abajo para mostrar más piso. */
  background-position: center 75%;
}
.stop-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.stop-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--accent); opacity: 0.7; }
.stop-fechas { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--white); margin-bottom: 6px; }
.stop-destino {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--white); font-size: clamp(34px, 5vw, 56px); margin: 0 0 16px; line-height: 1;
}
.stop-copy { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.6; max-width: 520px; margin: 0; }

.elegir-alojamiento-intro { max-width: 780px; margin: 0 auto; padding: 64px 6vw 8px; text-align: center; }
.elegir-alojamiento-intro .eyebrow { margin-bottom: 16px; }
.elegir-titulo {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--bg-dark); font-size: clamp(30px, 4.5vw, 46px); margin: 0 0 16px;
}
.elegir-subtitulo { color: var(--text-gray); font-size: 15px; line-height: 1.6; margin: 0; }

/* ---------- Tarjetas de alojamiento ---------- */

.alojamientos-grid {
  /* Más ancho que el resto de las secciones (1180px) a propósito: con
     minmax(360px,1fr) + este gap, 3 tarjetas de 360px mínimo necesitan
     ~1130px de espacio de grid ya sin contar el padding lateral — con
     1180px de contenedor no entraban las 3 juntas en pantallas grandes y
     cualquier cuarta opción caía sola a una segunda fila. 1440px deja
     margen de sobra para el caso típico de 3 opciones, en vez de angostar
     el mínimo de vuelta. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 6vw 80px;
  display: grid;
  /* Punto 2 (spec sección 12): "1fr" hacía que 2 tarjetas se estiraran a
     ocupar todo el ancho del contenedor (mismo ancho de contenedor que con
     3) — ahora tienen un máximo fijo (420px) y el espacio que sobra queda
     vacío a los costados (justify-content: center) en vez de ensancharlas.
     No afecta el caso de 3 juntas en una fila (nota de abajo): el cálculo
     ahí usaba el mínimo de 360px, así que un máximo de 420px por tarjeta
     nunca les exige MÁS espacio que antes. */
  grid-template-columns: repeat(auto-fit, minmax(360px, 420px));
  justify-content: center;
  gap: 24px;
  /* stretch (default), no "start": las 3 tarjetas tienen que quedar de la
     misma altura sin importar cuánto texto tenga cada una — ver nota del
     pedido. */
}

.alojamiento-card {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(15,25,40,0.05);
  cursor: pointer;
}
.alojamiento-card:hover { border-color: #b9d4ef; }
.alojamiento-card.seleccionado { border-color: var(--accent-dark); box-shadow: 0 10px 28px rgba(var(--accent-dark-rgb), 0.18); cursor: default; }

.alojamiento-imagen {
  height: 170px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  font-size: 13px; font-weight: 600; text-align: center; padding: 16px;
  background: linear-gradient(135deg, #3d5468, #1c2a38);
  overflow: hidden;
}
/* Foto real de la propiedad (agregarAlojamiento en el CRM ya sube fotos a
   Drive) — el degradé de arriba queda como fondo visible solo mientras no
   haya ninguna foto cargada todavía para esa propiedad. */
.alojamiento-imagen img { width: 100%; height: 100%; object-fit: cover; }
/* Un degradé levemente distinto por tarjeta (según la posición), para que
   las 3 no se vean idénticas mientras no hay foto real cargada — se
   reemplaza por la foto real de la propiedad apenas esté disponible. */
.alojamiento-card:nth-child(2) .alojamiento-imagen { background: linear-gradient(135deg, #46607a, #202f42); }
.alojamiento-card:nth-child(3) .alojamiento-imagen { background: linear-gradient(135deg, #35506a, #16222f); }
.alojamiento-card:nth-child(4n) .alojamiento-imagen { background: linear-gradient(135deg, #4a5a72, #232f42); }

.alojamiento-card-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: default;
}
/* El bloque de precio + botón siempre pegado abajo, aunque la descripción
   de otra tarjeta sea más larga (mismo motivo que el stretch del grid) —
   el margin-top:auto va en el divider que sigue a la descripción, así
   empuja ESE grupo entero (divider + precio + botón) al fondo junto, no
   solo el botón suelto lejos del precio. */
.alojamiento-descripcion + .alojamiento-divider { margin-top: auto; }

.alojamiento-nombre-corto { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent-dark); text-transform: uppercase; margin-bottom: 2px; }
.alojamiento-nombre { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--bg-dark); text-transform: uppercase; margin: 0 0 8px; }
.alojamiento-tipo { font-size: 14px; color: #374151; margin-bottom: 12px; }

.alojamiento-tags { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.tag svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tag.tag-muted { color: var(--text-gray); }
a.tag:hover { text-decoration: underline; }

.alojamiento-descripcion { font-size: 13.5px; line-height: 1.6; color: #4b5563; margin: 0 0 8px; }
.alojamiento-descripcion .texto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.alojamiento-descripcion.expandido .texto { -webkit-line-clamp: unset; }
.link-ver-mas {
  background: none; border: none; padding: 0; margin-top: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-dark); cursor: pointer;
}

.alojamiento-divider { height: 1px; background: var(--border-light); margin: 16px 0; }

.alojamiento-precio-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.alojamiento-precio-row .label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-gray); margin-bottom: 4px; }
.alojamiento-precio-row .monto { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text-dark); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--white); border: 1.5px solid var(--accent-dark);
  color: var(--accent-dark); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
  white-space: nowrap;
}
.btn-outline:hover { background: rgba(var(--accent-dark-rgb), 0.06); }
.btn-outline svg { width: 13px; height: 13px; }

.btn-elegir {
  width: 100%;
  padding: 15px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--bg-dark);
  color: var(--white);
}
.btn-elegir:hover { filter: brightness(1.1); }
.btn-elegir.seleccionado { background: var(--accent-dark); cursor: default; }
.btn-elegir.seleccionado:hover { filter: none; }

/* ---------- Modal de detalle de alojamiento ---------- */

.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,10,16,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay.oculto { display: none; }

.modal-alojamiento {
  background: var(--white);
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  border-radius: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-galeria-main {
  position: relative;
  aspect-ratio: 16 / 8;
  background: linear-gradient(135deg, #33495e, #17222e);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  flex-shrink: 0;
  overflow: hidden;
}
.modal-galeria-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.modal-icon-btn, .modal-nav {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(10,15,22,0.6);
  color: var(--white);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.modal-icon-btn:hover, .modal-nav:hover { background: rgba(10,15,22,0.85); }
.modal-close { top: 14px; right: 14px; }
.modal-expand { top: 14px; right: 56px; }
.modal-paginacion {
  position: absolute; top: 14px; left: 14px;
  background: rgba(10,15,22,0.6); color: var(--white);
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
}
.modal-nav-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.modal-nav-next { right: 14px; top: 50%; transform: translateY(-50%); }
.modal-nav[hidden] { display: none; }

.modal-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}
.modal-thumb {
  flex-shrink: 0;
  width: 76px; height: 54px;
  border-radius: 8px;
  border: 2px solid transparent;
  background-color: #1c2a38;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
}
.modal-thumb.activo { border-color: var(--accent-dark); }

.modal-body { padding: 24px 28px; flex: 1; }
.modal-body .label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 14px; }
.modal-body p { font-size: 14.5px; line-height: 1.7; color: #374151; margin: 0 0 8px; }
.modal-divider { height: 1px; background: var(--border-light); margin: 22px 0; }

.modal-property-nombre {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--bg-dark); font-size: 26px; margin: 0 0 20px;
}

/* "Tu unidad" — fotos y descripción de la unidad puntual asignada, con su
   propio carrusel chico, independiente del carrusel grande de arriba (que
   son las fotos generales de la propiedad). */
.modal-unidad-titulo {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  color: var(--text-dark); font-size: 18px; margin: 0 0 14px;
}
.modal-unidad-galeria { max-width: 340px; margin-bottom: 14px; }
.modal-unidad-galeria-main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #3d5468, #1c2a38);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75);
  font-size: 12px; font-weight: 600; text-align: center; padding: 14px;
}
.modal-unidad-galeria-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.modal-icon-btn-chico { width: 26px; height: 26px; top: 8px; right: 8px; font-size: 12px; }
.modal-paginacion-chica { top: 8px; left: 8px; font-size: 10px; padding: 3px 9px; }
.modal-nav-chico { width: 26px; height: 26px; font-size: 13px; }
.modal-unidad-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.modal-thumb-chico { width: 44px; height: 32px; font-size: 10px; }

.modal-unidad-cancelacion { font-size: 13px; font-weight: 700; color: #1a7a3e; margin-top: 4px; }

.modal-about-section p { color: #374151; }

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
}

.modal-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  background: var(--white);
  position: sticky;
  bottom: 0;
}
.modal-footer .label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-gray); margin-bottom: 2px; }
.modal-footer .monto { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text-dark); }
.modal-footer .sub { font-size: 12px; color: var(--text-gray); }
.modal-footer .btn-elegir { width: auto; padding: 14px 30px; }

@media (max-width: 720px) {
  .modal-body { padding: 20px; }
  .modal-footer { flex-direction: column; align-items: stretch; }
  .modal-footer .btn-elegir { width: 100%; }
}

/* ---------- Barra inferior (fixed) ---------- */
/* SIEMPRE visible, distinta de la de arriba: avatar del asesor, "Tu
   paquete" (no "Total del viaje"), botón "Revisar y reservar" (no
   "Reservar") — ver nota del pedido: dos barras, cada una con su propio
   texto. */

.barra-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--white);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 20px rgba(15,25,40,0.1);
  /* Oculta hasta salir del hero (ver IntersectionObserver en propuesta.js) —
     si no, queda tapando parte de la imagen del hero desde el arranque. */
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.barra-inferior.visible { transform: translateY(0); }
.barra-inferior-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.barra-inferior-contacto { display: flex; align-items: center; gap: 12px; }
.avatar-asesor {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-dark);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.barra-inferior-contacto .label { font-size: 12px; color: var(--text-gray); }
.barra-inferior-contacto .nombre { font-weight: 700; font-size: 14px; color: var(--text-dark); }
.barra-inferior-contacto .email { font-size: 12px; color: var(--accent-dark); text-decoration: none; }
.barra-inferior-contacto .email:hover { text-decoration: underline; }

.barra-inferior-total { text-align: right; }
.barra-inferior-total .label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-gray); }
.barra-inferior-total .monto { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-dark); }
.barra-inferior-total .pp { font-size: 12px; color: var(--text-gray); }

@media (max-width: 720px) {
  .hero { padding: 0 24px 40px; align-items: flex-end; }
  .hero-stats { gap: 24px; }
  .resumen-card { padding: 28px 24px; margin-top: -18px; }
  .barra-inferior-inner { padding: 12px 20px; }
  .barra-inferior-total { display: none; }
  .incluye-grid { gap: 32px; }
  .incluye-item { width: 90px; }
}

/* ---------- Checkout final (spec 5.8) ---------- */
/* La barra inferior no se muestra en esta vista (irACheckout/volverAPropuesta
   togglean esta clase en <body>) — no hace falta el espacio que le reserva
   normalmente `body { padding-bottom: var(--bar-height) }`. */
body.checkout-activo { padding-bottom: 0; }

/* Punto 4 (spec sección 12): antes esta portada era un degradé plano, sin
   relación con la foto del hero principal — ahora usa la misma
   `--hero-image` (seteada en renderHero) por detrás del degradé, para que
   sea la misma imagen en los dos lugares. */
.checkout-header {
  background:
    linear-gradient(to top, rgba(6,13,22,0.6) 0%, rgba(10,22,35,0.38) 60%, rgba(20,35,50,0.16) 100%),
    var(--hero-image, none),
    linear-gradient(180deg, #3a5068 0%, #1c2c40 45%, #0f1f30 80%, #0a1622 100%);
  background-size: cover;
  background-position: center;
  padding: 44px 6vw 56px;
}
.checkout-header-inner { max-width: 1180px; margin: 0 auto; }
.checkout-volver {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  margin-bottom: 28px;
}
.checkout-volver:hover { background: rgba(255,255,255,0.18); }
.checkout-header .hero-eyebrow { margin-bottom: 14px; }
.checkout-header-titulo {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1;
  margin: 0 0 28px;
}
.checkout-header-titulo em { font-style: italic; color: var(--accent); font-weight: 600; }
.checkout-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.checkout-meta-item .k {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 5px;
}
.checkout-meta-item .v {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--white);
}

.checkout-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 6vw 90px;
  display: grid;
  /* Punto 2 (ajuste sobre spec sección 12): la columna del resumen quedaba
     tan angosta (1fr de un 1.5fr/1fr) que montos grandes como "USD
     $9.296,00" se partían en dos renglones — ensanchada a 1.15fr/1fr. */
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
}
.checkout-form { display: flex; flex-direction: column; gap: 24px; }

.checkout-card {
  background: var(--white);
  border-radius: 18px;
  padding: 30px 32px;
  box-shadow: 0 10px 30px rgba(15,25,40,0.06);
}
.checkout-card-titulo { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.checkout-card-sub { font-size: 13px; color: var(--text-gray); margin-bottom: 22px; }
.checkout-subtitulo {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-gray); margin: 22px 0 14px;
}

.checkout-grid-2, .checkout-grid-3 {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.checkout-grid-2 { grid-template-columns: repeat(2, 1fr); }
.checkout-grid-3 { grid-template-columns: repeat(3, 1fr); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-gray);
}
.campo input {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-dark);
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--white);
}
.campo input:focus { outline: none; border-color: var(--accent-dark); }
.campo-fecha { margin-bottom: 8px; max-width: 240px; }
.campo-ayuda { font-size: 12.5px; color: var(--text-gray); margin: -6px 0 16px; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-dark);
  cursor: pointer;
  margin-top: 4px;
}
.checkbox-row input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent-dark); flex-shrink: 0; }

.checkout-direccion-acompanante { margin-top: 16px; }
.checkout-direccion-acompanante.oculto { display: none; }

.checkout-politica-texto {
  font-family: var(--font-body);
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
  background: var(--bg-light);
  border-radius: 10px;
  padding: 18px;
  margin: 0 0 18px;
}
.checkbox-row-terminos { border-top: 1px solid var(--border-light); padding-top: 16px; }

.checkout-error {
  background: #fdecec;
  border: 1px solid #f3b8b8;
  color: #9c2b2b;
  font-size: 13.5px;
  border-radius: 10px;
  padding: 14px 16px;
}
.checkout-error.oculto { display: none; }

.checkout-btn-enviar { width: 100%; justify-content: center; padding: 16px; font-size: 15px; }

.checkout-resumen {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,25,40,0.06);
  position: sticky;
  top: 24px;
}
.checkout-resumen-imagen {
  height: 130px;
  background: linear-gradient(135deg, var(--bg-dark-2) 0%, var(--bg-dark) 100%);
}
.checkout-resumen-body { padding: 24px 26px; }
.checkout-resumen-titulo { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: 0.01em; color: var(--text-dark); }
.checkout-resumen-meta { font-size: 13px; color: var(--text-gray); margin-top: 4px; }
.checkout-resumen-divider { height: 1px; background: var(--border-light); margin: 18px 0; }
.checkout-resumen-item-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-dark); }
.checkout-resumen-item-header .incluido { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-dark); white-space: nowrap; }
.checkout-resumen-item-sub { font-size: 13px; color: var(--text-gray); margin-top: 4px; }
.checkout-resumen-total-row { display: flex; align-items: baseline; justify-content: space-between; }
.checkout-resumen-total-row span { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-gray); }
.checkout-resumen-total-row strong { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.checkout-resumen-pp { font-size: 12.5px; color: var(--text-gray); margin-top: 4px; }
.checkout-resumen-pago-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-dark); margin-bottom: 10px; }
.checkout-resumen-pago-row strong { font-weight: 700; white-space: nowrap; }
.checkout-resumen-nota { font-size: 12px; line-height: 1.6; color: var(--text-gray); margin: 18px 0; }
.checkout-resumen-asesor {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 18px;
}
.checkout-resumen-asesor .nombre { font-weight: 700; font-size: 13.5px; color: var(--text-dark); }
.checkout-resumen-asesor .email { font-size: 12.5px; color: var(--accent-dark); text-decoration: none; }
.checkout-resumen-asesor .email:hover { text-decoration: underline; }

.checkout-confirmacion {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 6vw;
}
.checkout-confirmacion-card {
  max-width: 460px;
  text-align: center;
  background: var(--white);
  border-radius: 18px;
  padding: 48px 40px;
  box-shadow: 0 20px 50px rgba(15,25,40,0.1);
}
.checkout-confirmacion-icono {
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
}
.checkout-confirmacion-icono svg { width: 26px; height: 26px; stroke: var(--white); fill: none; stroke-width: 2.4; }
.checkout-confirmacion-titulo { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text-dark); margin: 0 0 14px; }
.checkout-confirmacion-texto { font-size: 14.5px; line-height: 1.6; color: var(--text-gray); margin: 0 0 28px; }

@media (max-width: 860px) {
  .checkout-body { grid-template-columns: 1fr; }
  .checkout-resumen { position: static; }
}
@media (max-width: 640px) {
  .checkout-header { padding: 32px 24px 40px; }
  .checkout-body { padding: 32px 24px 70px; }
  .checkout-card { padding: 24px 22px; }
  .checkout-grid-2, .checkout-grid-3 { grid-template-columns: 1fr; }
  .checkout-header-meta { gap: 22px; }
}

/* Estado de carga/error al conectar con el backend real (Code.gs:
   getPropuestaPublica) — ver initApp() en propuesta.js. */
.carga-propuesta {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  text-align: center;
  background: var(--bg-dark);
  color: rgba(255,255,255,0.85);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}

/* ---------- Fondo fijo en mobile ----------
   `background-attachment: fixed` (hero, .resumen-section, .incluye-section)
   no anda en iOS ni en muchos Android: el navegador lo ignora o escala la
   foto al alto de TODA la sección/página en vez de al de la pantalla, y por
   eso en el celu se veía con muchísimo zoom y pixelada. En pantallas táctiles
   / angostas el mismo efecto (una sola foto continua y quieta detrás de las 3
   secciones) se arma con un ::before en position:fixed del tamaño exacto de
   la pantalla, recortado a cada sección con clip-path. En vertical usa el
   recorte 9:16 (--hero-image-mobile) en vez de la foto apaisada. Desktop no
   cambia nada. */
.hero, .resumen-section, .incluye-section {
  --hero-img-activa: var(--hero-image, none);
}
@media (hover: none) and (pointer: coarse), (max-width: 860px) {
  .hero, .resumen-section, .incluye-section {
    /* Respaldo gris nieve (no navy): Safari en iPhone tiñe la zona de la
       hora/batería con este color, y es lo que asoma si la foto fija no
       llega al borde de abajo — en navy se veían 2 franjas azules. */
    background: #dfe4e9;
    position: relative;
    isolation: isolate;
    clip-path: inset(0);
  }
  .hero::before, .resumen-section::before, .incluye-section::before {
    content: '';
    position: fixed;
    /* Se pasa 80px arriba y abajo de la pantalla para cubrir las zonas de
       la barra de estado y de la barra inferior de Safari (iOS 26). */
    top: -80px; left: 0;
    width: 100%;
    height: calc(100vh + 160px);
    height: calc(100lvh + 160px);
    background-color: #dfe4e9;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(rgba(8,16,26,0.12), rgba(8,16,26,0.12)),
      var(--hero-img-activa);
    background-size: cover;
    background-position: center;
  }
}
@media (orientation: portrait) and (max-width: 860px) {
  .hero, .resumen-section, .incluye-section {
    --hero-img-activa: var(--hero-image-mobile, var(--hero-image, none));
  }
}

/* Contraste de los textos dorados del hero en mobile: con el recorte
   vertical, el título y el eyebrow caen sobre la nieve (blanco) y el dorado
   se perdía. Sombra suave solo en el texto — no se toca la capa plana del
   fondo (pedido: sin degradés ni bandas). Desktop sin cambios. */
@media (max-width: 860px) {
  .hero-eyebrow,
  .hero-title {
    text-shadow: 0 1px 2px rgba(8,16,26,0.55), 0 0 18px rgba(8,16,26,0.35);
  }
  .hero-eyebrow::before, .hero-eyebrow::after {
    box-shadow: 0 1px 2px rgba(8,16,26,0.45);
  }
}

/* PRUEBA (7/10/2026): textos dorados sobre la foto → Navy de PLT.
   Afecta solo: "Propuesta a medida" + sus 2 líneas, "TRIP" del título,
   "Qué incluye" + sus 2 líneas y "Total del paquete". Para volver al
   dorado, borrar este bloque entero (o poner --texto-sobre-foto: var(--accent)). */
:root { --texto-sobre-foto: var(--plt-navy); }
.hero-eyebrow,
.hero-title em,
.incluye-section > .eyebrow,
.incluye-total .label {
  color: var(--texto-sobre-foto);
  text-shadow: none;
}
.hero-eyebrow::before, .hero-eyebrow::after,
.incluye-section > .eyebrow::before, .incluye-section > .eyebrow::after {
  background: var(--texto-sobre-foto);
  box-shadow: none;
}