/* ==========================================================================
   THE COLOMBIA TRAVELS — hoja de estilos principal
   --------------------------------------------------------------------------
    1. Variables de marca
    2. Reset y base
    3. Utilidades y layout
    4. Botones
    5. Header (solo logo) y riel de navegación
    6. Hero con video
    7. Cómo funciona (pasos)
    8. Pestañas de vuelos
    9. Carruseles horizontales
   10. Tarjetones (vuelo / paquete / experiencia)
   11. Sección oscura de paquetes
   12. Chips de filtro
   12b. Secciones de marca (Quiénes somos, Lo que creamos, Destinos...)
   13. Formulario
   13a. Diseña tu experiencia (preguntas tipo chip)
   13b. Modal de Términos y Condiciones
   14. Footer
   15. Animaciones y accesorios
   16. Responsive
   17. Página legal
   ========================================================================== */
/* 1. VARIABLES DE MARCA
   Paleta costera. Los 5 colores base son los definidos para la marca; los
   marcados como "derivado" son aclarados o transparencias de esos mismos.
   ========================================================================== */
:root {
  /* --- Paleta base --- */
  --cerulean: #1c85a6;
  --stormy-teal: #056065;
  --pine-teal: #084f4a;
  --ash-grey: #c7cfc3;
  --charcoal: #36322b;
  --sol: #c9994b; /* reservado al sol del logo y a las ilustraciones */
  --sol-rgb: 201, 153, 75; /* el mismo dorado, para los rgba() con transparencia */
  /* --- Derivados --- */
  --fondo-claro: #f5f7f3;
  --blanco: #ffffff;
  --pine-oscuro: #063733;
  --ash-suave: #dde3da;
  /* --- Roles ---
     Contraste verificado sobre --fondo-claro:
       charcoal 11.7:1 · pine-teal 8.7:1 · stormy-teal 6.7:1  → texto OK
       cerulean 3.9:1  → SOLO títulos grandes y acentos, nunca texto chico
       ash-grey 1.5:1  → nunca como texto                                    */
  --fondo: var(--fondo-claro);
  --superficie: var(--blanco);
  --banda: var(--ash-grey);
  --texto: var(--charcoal);
  --texto-suave: rgba(54, 50, 43, 0.72);
  --primario: var(--stormy-teal);
  --profundo: var(--pine-teal);
  --acento: var(--cerulean);
  --borde: rgba(54, 50, 43, 0.14);
  --borde-fuerte: rgba(54, 50, 43, 0.24);
  /* Tipografías */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  /* Medidas */
  --ancho-max: 1200px;
  --radio: 14px;
  --radio-chico: 8px;
  --header-alto: 74px;
  /* Sombras y transiciones */
  --sombra: 0 2px 8px rgba(54, 50, 43, 0.06);
  --sombra-alta: 0 14px 38px rgba(6, 55, 51, 0.16);
  --transicion: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* 2. RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-alto);
}
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
video {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.16;
}
h1,
h2 {
  font-family: var(--serif);
  font-weight: 600;
}
h1 {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
}
h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
}
h3 {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
p {
  margin: 0 0 1.05em;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 2.5px solid var(--acento);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Enlace de salto para lectores de pantalla */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--profundo);
  color: #fff;
  padding: 12px 20px;
}
.salto-contenido:focus {
  left: 12px;
  top: 12px;
}
/* 3. UTILIDADES Y LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.seccion {
  padding-block: clamp(64px, 9vw, 118px);
  position: relative;
}
.banda-clara {
  background: var(--banda);
}
.seccion-head {
  max-width: 62ch;
  margin-bottom: clamp(34px, 5vw, 56px);
}
.seccion-head h2 {
  margin-bottom: 0.35em;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primario);
  margin-bottom: 0.9em;
}
.seccion-bajada {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--texto-suave);
  margin: 0;
}
.nota-fina {
  margin: 34px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--acento);
  font-size: 0.9rem;
  color: var(--texto-suave);
  max-width: 62ch;
}
/* 4. BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background var(--transicion),
    color var(--transicion),
    border-color var(--transicion),
    transform var(--transicion);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn-solido {
  background: var(--primario);
  color: #fff;
}
.btn-solido:hover {
  background: var(--profundo);
}
.btn-linea {
  border-color: rgba(255, 255, 255, 0.68);
  color: #fff;
}
.btn-linea:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
}
.btn-chico {
  padding: 9px 19px;
  font-size: 0.82rem;
  border-color: var(--borde-fuerte);
  color: var(--primario);
  background: transparent;
}
.btn-chico:hover {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}
.btn-claro {
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--fondo-claro);
}
.btn-claro:hover {
  background: var(--fondo-claro);
  border-color: var(--fondo-claro);
  color: var(--profundo);
}
.btn-ancho {
  width: 100%;
}
/* 5. HEADER Y NAVEGACIÓN
   El header no es una barra separada: un degradado se funde con el hero y se
   desvanece hacia abajo. Al bajar la página se vuelve barra sólida.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-bottom: 26px; /* el aire donde muere el degradado */
  transition:
    padding var(--transicion),
    box-shadow var(--transicion);
}
/* la capa que se funde con el hero */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(245, 247, 243, 0.95) 0%,
    rgba(245, 247, 243, 0.82) 48%,
    rgba(245, 247, 243, 0.34) 78%,
    rgba(245, 247, 243, 0) 100%
  );
  backdrop-filter: blur(10px);
  /* la máscara desvanece el fondo Y el desenfoque a la vez: sin borde visible */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 52%,
    rgba(0, 0, 0, 0.35) 80%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 80%, transparent 100%);
  transition: background var(--transicion);
}
.site-header.pegado {
  padding-bottom: 0;
  box-shadow: 0 1px 0 var(--borde);
}
.site-header.pegado::before {
  background: rgba(245, 247, 243, 0.94);
  -webkit-mask-image: none;
  mask-image: none;
}
.header-inner {
  height: var(--header-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* --- logo: siempre en color --- */
.logo {
  display: inline-block;
  flex-shrink: 0;
}
.logo img {
  height: 54px;
  width: auto;
  transition:
    transform var(--transicion),
    height var(--transicion);
}
.site-header.pegado .logo img {
  height: 46px;
}
.logo:hover img {
  transform: translateY(-2px) scale(1.03);
}
/* --- nav --- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  font-size: 0.88rem;
  font-weight: 500;
}
.nav a {
  position: relative;
  padding-block: 6px;
  color: var(--texto);
  white-space: nowrap;
}
/* subrayado que crece al pasar el mouse y queda fijo en la sección actual */
.nav a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta).activo::after {
  transform: scaleX(1);
}
.nav a:not(.nav-cta).activo {
  color: var(--primario);
}
/* se califica con `.nav a` (en todas sus reglas, incluidas las de los media
   queries) para ganarle a `.nav a` por especificidad y no por !important */
.nav a.nav-cta {
  background: var(--primario);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  /* se distingue del resto del menú (que es --sans) con la misma serif itálica
     que usamos para las frases de marca — así se lee como una invitación, no
     como un enlace más de navegación */
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.02rem;
  transition:
    background var(--transicion),
    transform var(--transicion);
}
.nav a.nav-cta:hover {
  background: var(--profundo);
  transform: translateY(-2px);
}

/* selector ES/EN: muestra los dos idiomas juntos, el activo resaltado */
.idioma-switch {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.idioma-switch a,
.idioma-switch .idioma-actual {
  color: var(--texto-suave);
  transition: color var(--transicion);
}
.idioma-switch a:hover {
  color: var(--primario);
}
.idioma-switch .idioma-actual {
  color: var(--primario);
  font-weight: 700;
}
.idioma-switch .idioma-sep {
  color: var(--borde-fuerte);
}
/* --- botón hamburguesa --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
}
.nav-toggle span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--profundo);
  transition:
    transform var(--transicion),
    opacity var(--transicion);
}
.nav-toggle.abierto span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle.abierto span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.abierto span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}
/* 6. HERO CON VIDEO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 136svh;
  display: grid;
  place-items: safe center;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background: var(--pine-oscuro);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.12) contrast(1.06) brightness(1.02);
}
/* velo: garantiza contraste del texto sobre cualquier fotograma */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(6, 55, 51, 0.52) 0%,
      rgba(6, 55, 51, 0.26) 42%,
      rgba(8, 79, 74, 0.84) 100%
    ),
    radial-gradient(ellipse at 50% 45%, rgba(54, 50, 43, 0) 0%, rgba(54, 50, 43, 0.22) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: calc(var(--header-alto) + 10px) clamp(20px, 5vw, 40px) clamp(124px, 18vh, 184px);
  max-width: 920px;
}
.hero-logo {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  /* separación propia del logo: arriba lo despega del header, abajo del texto */
  padding-top: clamp(32px, 8vh, 96px);
  /* un poco más de aire que antes: abajo ahora vive también el contador */
  padding-bottom: clamp(78px, 13vh, 148px);
}
.hero-logo-svg {
  /* --------------------------------------------------------------------
     TAMAÑO FINAL DEL LOGO: 62.5vh de alto por 62.5vw de ancho.
     Un solo lugar para cambiarlo: los dos números de abajo. Si algún día
     lo quieres más grande, se suben los dos (por ejemplo a 45) y el resto
     se acomoda solo, en todas las pantallas.
     Por qué no va "width: 25vw; height: 25vh" a secas: el dibujo tiene una
     proporción fija (380 × 420 del viewBox) y siempre se ajusta al lado que
     primero se queda corto, así que la otra mitad de la caja quedaba vacía
     empujando el texto hacia abajo. Con min() la caja mide exactamente lo
     que ocupa el dibujo dentro de esos 25vw × 25vh: se ve igual de grande,
     sin aire de sobra.
     -------------------------------------------------------------------- */
  --logo-vw: 62.5;
  --logo-vh: 62.5;
  --logo-prop: 0.904762; /* 380 / 420 = ancho / alto del viewBox */
  position: relative;
  z-index: 1;
  display: block;
  width: min(calc(var(--logo-vw) * 1vw), calc(var(--logo-vh) * 1vh * var(--logo-prop)));
  height: min(calc(var(--logo-vh) * 1vh), calc(var(--logo-vw) * 1vw / var(--logo-prop)));
  /* sin halo detrás: la sombra es lo que separa el logo del agua */
  filter: drop-shadow(0 4px 18px rgba(6, 55, 51, 0.45));
  /* estado inicial de la animación de entrada (ver @keyframes logo-entra) */
  transform: scale(0.24);
  opacity: 0;
  animation: logo-entra 1500ms cubic-bezier(0.5, 0.5, 0.5, 0.4) 160ms forwards;
}
/* Entrada del logo: arranca chico y transparente y crece hasta su tamaño
   final, con un rebote muy leve al asentarse para que no se sienta seco. */
@keyframes logo-entra {
  0% {
    transform: scale(0.24);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  76% {
    transform: scale(1.35);
  }
  100% {
    /* termina en su tamaño real (el de la caja, 62.5vw × 62.5vh): si acá
       queda más grande que 1, el dibujo se pinta más grande que el espacio
       reservado y se superpone con el header y con el texto de abajo. */
    transform: scale(1.2);
    opacity: 1;
  }
}
/* Contador de visitas: fichas tipo "flip clock" vintage, viven en el hueco
   que deja el logo antes del texto de bienvenida. */
.hero-contador {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vh, 22px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hero-contador-fichas {
  display: flex;
  gap: clamp(3px, 0.6vw, 5px);
  padding: 6px 8px;
  background: rgba(6, 55, 51, 0.32);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(var(--sol-rgb), 0.55);
}
.ficha {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(20px, 4.2vw, 28px);
  height: clamp(30px, 6.6vw, 42px);
  background: linear-gradient(180deg, #f7f4ec 0%, #ece2c9 100%);
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(6, 20, 18, 0.45);
  overflow: hidden;
  perspective: 140px;
}
/* línea de bisagra al medio, como en los relojes de fichas reales */
.ficha::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: rgba(54, 50, 43, 0.4);
  z-index: 2;
}
.ficha-num {
  display: block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(0.9rem, 2.4vw, 1.25rem);
  color: var(--charcoal);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.ficha.girando .ficha-num {
  animation: ficha-flip 480ms ease-in-out;
}
@keyframes ficha-flip {
  0% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}
.hero-contador-label {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(0.56rem, 1vw, 0.62rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.hero-bienvenida {
  font-family: var(--mono);
  font-size: clamp(0.66rem, 1.2vw, 0.74rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 1.15em;
}
.hero-frase {
  font-size: clamp(1.55rem, 3.6vw, 2.85rem);
  margin-bottom: 0.7em;
  text-shadow: 0 2px 24px rgba(6, 55, 51, 0.45);
}
.hero-sub {
  font-family: var(--mono);
  font-size: clamp(0.66rem, 1.2vw, 0.74rem);
  letter-spacing: 0.32em;
  
  color: rgba(255, 255, 255, 0.86);
  max-width: 76ch;
  margin: 0 auto 2.1em;
}
.hero-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
/* indicador de scroll */
.hero-baja {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 34px;
  height: 54px;
  display: grid;
  place-items: center;
}
.hero-baja-linea {
  width: 1.5px;
  height: 44px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
  animation: baja 2.1s ease-in-out infinite;
}
@keyframes baja {
  0%,
  100% {
    transform: scaleY(0.45);
    transform-origin: top;
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}
/* 7. CÓMO FUNCIONA (PASOS)
   ========================================================================== */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  counter-reset: paso;
}
.paso {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radio);
  padding: 26px 24px 22px;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion),
    background var(--transicion);
}
.paso:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--sombra-alta);
}
.paso-n {
  display: block;
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--acento);
  margin-bottom: 12px;
}
.paso h3 {
  margin-bottom: 0.45em;
  color: var(--profundo);
}
.paso p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--texto-suave);
}
/* 8. PESTAÑAS DE VUELOS
   ========================================================================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(26px, 4vw, 40px);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 12px 22px;
  background: var(--superficie);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
  transition: all var(--transicion);
}
.tab:hover {
  border-color: var(--acento);
  transform: translateY(-2px);
}
.tab.activa {
  background: var(--profundo);
  border-color: var(--profundo);
  color: #fff;
  box-shadow: var(--sombra-alta);
}
.tab-cod {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--acento);
}
.tab.activa .tab-cod {
  color: var(--ash-grey);
}
.tab-ciudad {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.82;
}
.panel[hidden] {
  display: none;
}
/* 9. CARRUSELES HORIZONTALES
   ========================================================================== */
.carrusel {
  position: relative;
}
.car-pista {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 6px 4px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}
.car-pista::-webkit-scrollbar {
  height: 7px;
}
.car-pista::-webkit-scrollbar-track {
  background: rgba(54, 50, 43, 0.07);
  border-radius: 99px;
}
.car-pista::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border-radius: 99px;
}
.car-pista::-webkit-scrollbar-thumb:hover {
  background: var(--acento);
}
.car-pista > * {
  scroll-snap-align: start;
}
/* mientras se arrastra con el mouse */
.car-pista.arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.car-pista.arrastrando * {
  pointer-events: none;
}
.car-flecha {
  position: absolute;
  top: 42%;
  z-index: 5;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--profundo);
  box-shadow: var(--sombra-alta);
  transition: all var(--transicion);
}
.car-flecha.izq {
  left: -14px;
}
.car-flecha.der {
  right: -14px;
}
.car-flecha:hover {
  background: var(--profundo);
  color: #fff;
  border-color: var(--profundo);
}
.car-flecha[disabled] {
  opacity: 0;
  pointer-events: none;
}
/* 10. TARJETONES
   ========================================================================== */
.t-vuelo,
.t-paquete,
.t-exp {
  flex: 0 0 clamp(258px, 76vw, 330px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion),
    border-color var(--transicion);
}
.t-vuelo:hover,
.t-paquete:hover,
.t-exp:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-alta);
  border-color: transparent;
}
/* --- tarjetón de vuelo: banda de color con la ruta y el destino --- */
.t-vuelo {
  padding: 0;
}
.t-vuelo-banda {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  color: #fff;
}
/* un degradado distinto según el tipo de destino: es lo que le da vida */
.t-vuelo[data-tipo='caribe'] .t-vuelo-banda {
  background: linear-gradient(125deg, #084f4a 0%, #056065 45%, #1c85a6 100%);
}
.t-vuelo[data-tipo='isla'] .t-vuelo-banda {
  background: linear-gradient(125deg, #056065 0%, #1c85a6 100%);
}
.t-vuelo[data-tipo='ciudad'] .t-vuelo-banda {
  background: linear-gradient(125deg, #36322b 0%, #084f4a 55%, #056065 100%);
}
.t-vuelo[data-tipo='resort'] .t-vuelo-banda {
  background: linear-gradient(125deg, #084f4a 0%, #056065 100%);
}
.t-vuelo[data-tipo='mundo'] .t-vuelo-banda {
  background: linear-gradient(125deg, #063733 0%, #36322b 55%, #1c85a6 100%);
}
/* sol de la marca, apenas insinuado: aporta calidez sin tocar el contraste */
.t-vuelo-banda::after {
  content: '';
  position: absolute;
  right: -34px;
  top: -44px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--sol-rgb), 0.55) 0%,
    rgba(var(--sol-rgb), 0) 70%
  );
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}
.t-vuelo:hover .t-vuelo-banda::after {
  transform: scale(1.35) translate(-8px, 8px);
}
.t-vuelo-banda .ruta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--mono);
  /* 20px semibold: cuenta como texto grande, así el blanco sobre el degradado
     cumple contraste en toda la extensión del color */
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
}
.t-vuelo-banda h3 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 600;
  margin: 0 0 0.05em;
  color: #fff;
}
.t-vuelo-banda .t-pais {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.ruta-arco {
  flex: 1;
  height: 20px;
  position: relative;
}
.ruta-arco::before {
  content: '';
  position: absolute;
  inset: auto 0 2px 0;
  height: 18px;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 50% / 100% 100% 0 0;
}
.ruta-arco::after {
  content: '✈';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  font-size: 0.95rem;
  color: #fff;
  transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.t-vuelo:hover .ruta-arco::after {
  left: 76%;
}
.t-vuelo-cuerpo {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.t-vuelo-cuerpo .t-texto {
  margin-bottom: 1em;
}
.t-pais {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.9em;
}
.t-vuelo-banda .t-pais {
  font-size: 0.7rem;
}
.t-texto {
  font-size: 0.9rem;
  color: var(--texto-suave);
  margin-bottom: 1.1em;
}
.t-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}
.t-tags li {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(28, 133, 166, 0.14);
  color: var(--primario);
  border: 1px solid rgba(28, 133, 166, 0.2);
}
.t-vuelo .btn,
.t-exp .btn,
.t-paquete .btn {
  margin-top: auto;
  align-self: flex-start;
}
/* --- imagen de tarjetón --- */
.t-img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ash-suave);
}
.t-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}
.t-paquete:hover .t-img img,
.t-exp:hover .t-img img {
  transform: scale(1.06);
}
.t-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  background: rgba(6, 55, 51, 0.82);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.t-cuerpo {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.t-donde {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.6em;
}
.t-lista {
  margin-bottom: 20px;
  display: grid;
  gap: 9px;
}
.t-lista li {
  position: relative;
  padding-left: 20px;
  font-size: 0.89rem;
  line-height: 1.45;
}
.t-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.55;
}
.t-exp h3 {
  font-size: 1.06rem;
  margin-bottom: 0.5em;
}
/* tarjeta oculta por el filtro */
.t-exp[hidden] {
  display: none;
}
.sin-resultados {
  margin-top: 20px;
  padding: 22px;
  background: var(--superficie);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  text-align: center;
  color: var(--texto-suave);
}
/* 11. SECCIÓN OSCURA DE PAQUETES
   ========================================================================== */
.seccion-oscura {
  background: var(--profundo);
  color: var(--fondo-claro);
  overflow: hidden;
}
.seccion-oscura .fondo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.62;
}
.seccion-oscura .fondo-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* opaco arriba (donde va el título) y más abierto abajo, para que el
       agua se vea moverse detrás de las tarjetas sin comerse el texto */ linear-gradient(
    180deg,
    rgba(6, 55, 51, 0.97) 0%,
    rgba(6, 55, 51, 0.94) 32%,
    rgba(8, 79, 74, 0.62) 68%,
    rgba(6, 55, 51, 0.92) 100%
  );
}
.seccion-oscura .wrap {
  position: relative;
  z-index: 2;
}
.seccion-oscura .eyebrow {
  color: var(--ash-grey);
}
.seccion-oscura .seccion-bajada {
  color: rgba(245, 247, 243, 0.82);
}
.seccion-oscura .nota-fina {
  color: rgba(245, 247, 243, 0.82);
  border-left-color: rgba(245, 247, 243, 0.45);
}
/* tarjetas translúcidas para que se lea el video detrás */
.t-paquete {
  background: rgba(6, 55, 51, 0.52);
  border-color: rgba(199, 207, 195, 0.24);
  backdrop-filter: blur(10px);
  color: var(--fondo-claro);
}
.t-paquete:hover {
  border-color: rgba(199, 207, 195, 0.5);
}
.t-paquete .t-pais {
  color: rgba(245, 247, 243, 0.68);
}
.t-paquete h3 {
  font-size: 1.32rem;
}
.seccion-oscura .car-flecha {
  background: rgba(6, 55, 51, 0.72);
  border-color: rgba(199, 207, 195, 0.3);
  color: var(--fondo-claro);
  backdrop-filter: blur(8px);
}
.seccion-oscura .car-flecha:hover {
  background: var(--fondo-claro);
  color: var(--profundo);
}
.seccion-oscura .car-pista {
  scrollbar-color: rgba(199, 207, 195, 0.4) transparent;
}
.seccion-oscura .car-pista::-webkit-scrollbar-track {
  background: rgba(199, 207, 195, 0.12);
}
.seccion-oscura .car-pista::-webkit-scrollbar-thumb {
  background: rgba(199, 207, 195, 0.4);
}
/* 12. CHIPS DE FILTRO
   ========================================================================== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.chip {
  padding: 8px 18px;
  background: transparent;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--texto);
  transition: all var(--transicion);
}
.chip:hover {
  border-color: var(--acento);
  color: var(--primario);
}
.chip.activa {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}
/* 12b. SECCIONES DE MARCA
   Quiénes somos, Por qué The Colombia, Lo que creamos, Por qué The Colombia
   Travels, Destinos, Colombia, Argentina, El Mundo, Inspírate.
   ========================================================================== */
.texto-marca {
  max-width: 68ch;
  display: grid;
  gap: 1em;
  color: var(--texto-suave);
  font-size: 1.02rem;
}
.texto-marca p {
  margin: 0;
}
.frase-destacada {
  margin: clamp(32px, 5vw, 52px) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--profundo);
  line-height: 1.3;
}
.origen-grid {
  margin-top: clamp(48px, 6vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.origen-grid h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}
.origen-nombre {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--profundo);
}
.lista-poetica {
  display: grid;
  gap: 14px;
  padding-left: 22px;
  border-left: 2px solid var(--acento);
}
.lista-poetica li {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--texto);
  line-height: 1.4;
}
/* --- Lo que creamos --- */
.creamos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 28px);
}
.creamos-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 260px;
  max-width: 350px;
  gap: 0.75em;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion);
}
.creamos-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}
.creamos-card h3 {
  color: var(--profundo);
  font-size: 1.2rem;
  margin-bottom: 0.1em;
}
.creamos-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--texto-suave);
}
/* calificado con `.creamos-card p` para ganarle por especificidad, sin !important */
.creamos-card p.creamos-cierre {
  margin-top: auto;
  padding-top: 0.6em;
  font-weight: 600;
  color: var(--primario);
}
/* --- Por qué The Colombia Travels --- */
.valores-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 3vw, 28px);
}
.valor-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radio);
  padding: 24px 22px;
  flex: 1 1 220px;
  max-width: 260px;
}
.valor-card h3 {
  color: var(--profundo);
  margin-bottom: 0.4em;
}
.valor-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto-suave);
}
/* --- Destinos (3 teasers) --- */
.destinos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 28px);
}
.destino-card {
  display: block;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 26px;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion),
    border-color var(--transicion);
}
.destino-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: var(--acento);
}
.destino-emoji {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 10px;
}
.destino-eyebrow {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.4em;
}
.destino-card h3 {
  color: var(--profundo);
  margin-bottom: 0.35em;
}
.destino-card p:last-child {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.92rem;
}
/* --- Colombia / Argentina (regiones) --- */
.region-intro {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--texto);
  margin: 0 0 18px;
}
.region-pregunta {
  margin: clamp(36px, 5vw, 56px) 0 16px;
  font-weight: 700;
  color: var(--profundo);
}
.categorias-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.categorias-lista li {
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--borde-fuerte);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--profundo);
}
#argentina .categorias-lista li,
#mundo .categorias-lista li {
  background: rgba(28, 133, 166, 0.1);
}
.region-cierre {
  margin-top: clamp(40px, 6vw, 60px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--borde);
}
.region-cierre > p:not(.frase-destacada) {
  max-width: 62ch;
  color: var(--texto-suave);
}
.region-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.region-acciones-centro {
  justify-content: center;
}
.region-cierre > p.region-pregunta-chica {
  max-width: none;
  margin-top: 22px;
  font-weight: 700;
  color: var(--profundo);
}
.btn-linea-osc {
  border: 1.5px solid var(--borde-fuerte);
  color: var(--profundo);
}
.btn-linea-osc:hover {
  background: var(--profundo);
  border-color: var(--profundo);
  color: #fff;
}
/* --- El Mundo --- */
.mundo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 26px);
}
.mundo-grupo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 22px 20px;
  flex: 1 1 220px;
  max-width: 260px;
}
.mundo-grupo h3 {
  font-size: 1rem;
  color: var(--profundo);
  margin-bottom: 0.5em;
}
.mundo-grupo p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--texto-suave);
}
/* --- Inspírate --- */
.inspirate-grid {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.6vw, 26px);
}
.inspirate-card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px 22px;
  transition:
    transform var(--transicion),
    box-shadow var(--transicion);
}
.inspirate-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}
.inspirate-cat {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.6em;
}
.inspirate-card h3 {
  margin: 0;
  font-size: 1.02rem;
  color: var(--profundo);
}
/* 13. FORMULARIO
   ========================================================================== */
.contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.contacto-datos {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}
.contacto-datos li {
  display: grid;
  gap: 2px;
}
.dato-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primario);
}
.contacto-datos a {
  border-bottom: 1px solid var(--borde-fuerte);
  justify-self: start;
}
.contacto-datos a:hover {
  border-color: var(--acento);
  color: var(--primario);
}
.formulario {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(24px, 3.5vw, 38px);
  box-shadow: var(--sombra);
  display: grid;
  gap: 18px;
}
.campo {
  display: grid;
  gap: 6px;
}
.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.campo-fila:has(.campo-corto) {
  grid-template-columns: 1fr 1fr 88px;
}
.campo label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--texto);
}
.campo label span[aria-hidden] {
  color: var(--acento);
}
.opcional {
  font-weight: 400;
  color: var(--texto-suave);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--texto);
  background: var(--fondo-claro);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  transition:
    border-color var(--transicion),
    background var(--transicion),
    box-shadow var(--transicion);
}
.campo textarea {
  resize: vertical;
  min-height: 96px;
}
.campo input::placeholder,
.campo textarea::placeholder {
  color: rgba(54, 50, 43, 0.45);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(28, 133, 166, 0.16);
}
.campo input[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
  border-color: #a8412a;
}
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2336322B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}
.campo-check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 4px;
}
.campo-check input {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  accent-color: var(--primario);
  padding: 0;
  border-radius: 4px;
}
.campo-check label {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.5;
}
.campo-check a {
  color: var(--primario);
  border-bottom: 1px solid currentColor;
}
.campo-check .error {
  grid-column: 1 / -1;
}
.error {
  margin: 0;
  font-size: 0.79rem;
  color: #a8412a;
  min-height: 0;
}
.error:empty {
  display: none;
}
.form-estado {
  margin: 0;
  font-size: 0.88rem;
  text-align: center;
}
.form-estado.ok {
  color: var(--primario);
  font-weight: 600;
  background: rgba(5, 96, 101, 0.08);
  padding: 14px;
  border-radius: var(--radio-chico);
}
.form-estado.mal {
  color: #a8412a;
}

/* 13a. DISEÑA TU EXPERIENCIA — preguntas tipo "chip"
   Cada pregunta es un <fieldset>; las opciones son inputs radio/checkbox
   ocultos visualmente, con su <label> estilada como una píldora clicable
   (mismo lenguaje visual que .chip). Funciona sin JavaScript: el estado
   marcado/no marcado lo maneja el propio navegador.
   ========================================================================== */
.pregunta {
  border: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.pregunta legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texto);
}
.pregunta-n {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--acento);
}
.pregunta-n-inline {
  margin-right: 2px;
}
.pregunta-datos {
  padding-top: 6px;
  border-top: 1px solid var(--borde);
}
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.opciones input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.opciones label {
  cursor: pointer;
  padding: 8px 18px;
  background: var(--fondo-claro);
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--texto);
  transition: all var(--transicion);
}
.opciones label:hover {
  border-color: var(--acento);
  color: var(--primario);
}
.opciones input:checked + label {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}
.opciones input:focus-visible + label {
  outline: 2.5px solid var(--acento);
  outline-offset: 2px;
}
.campo-libre {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--texto);
  background: var(--fondo-claro);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  transition:
    border-color var(--transicion),
    background var(--transicion),
    box-shadow var(--transicion);
}
.campo-libre::placeholder {
  color: rgba(54, 50, 43, 0.45);
}
.campo-libre:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(28, 133, 166, 0.16);
}
.campo-corto-libre {
  max-width: 200px;
}

/* 13b. MODAL DE TÉRMINOS Y CONDICIONES
   Se abre con <dialog>.showModal(); el contenido vive en un iframe que apunta
   al archivo real de Términos, así la persona nunca sale de la página.
   ========================================================================== */
dialog#dialog-terminos {
  box-sizing: border-box;
  width: min(700px, 92vw);
  height: min(720px, 86vh);
  padding: 0;
  border: none;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
dialog#dialog-terminos::backdrop {
  background: rgba(20, 24, 20, 0.55);
}
.dialog-terminos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--primario);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dialog-terminos-cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transicion);
}
.dialog-terminos-cerrar:hover {
  background: rgba(255, 255, 255, 0.26);
}
.dialog-terminos-iframe {
  display: block;
  width: 100%;
  height: calc(100% - 56px);
  border: none;
  background: var(--fondo);
}

/* 14. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--charcoal);
  color: var(--fondo-claro);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 74px) 40px;
}
.footer-logo {
  display: block;
  height: 128px;
  width: auto;
  margin-inline: auto;
}
.footer-tagline {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(245, 247, 243, 0.62);
  margin: 14px 0 0;
}
.footer-col {
  display: grid;
  gap: 9px;
  align-content: start;
}
.footer-col h4 {
  color: rgba(245, 247, 243, 0.5);
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 0.9rem;
  color: rgba(245, 247, 243, 0.88);
  justify-self: start;
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--transicion),
    color var(--transicion);
}
.footer-col a:hover {
  color: #fff;
  border-color: var(--ash-grey);
}
.footer-nota {
  margin: 12px 0 0;
  font-size: 0.79rem;
  line-height: 1.55;
  color: rgba(245, 247, 243, 0.55);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  justify-content: space-between;
  padding-block: 20px 26px;
  border-top: 1px solid rgba(245, 247, 243, 0.14);
  font-size: 0.78rem;
  color: rgba(245, 247, 243, 0.55);
}
.footer-legal p {
  margin: 0;
}
/* Páginas de Términos: el footer es más simple, sin columnas de enlaces, así
   que la línea de derechos reservados va sola y centrada, en vez de
   repartirse con "justify-content: space-between" (que quedaba raro con un
   solo renglón de texto). */
.footer-legal.footer-legal-solo {
  display: block;
  text-align: center;
}
/* 15. ANIMACIONES Y ACCESORIOS
   ========================================================================== */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0, 0.2, 1);
}
[data-anim].visible {
  opacity: 1;
  transform: none;
}
.paso[data-anim]:nth-child(2) {
  transition-delay: 80ms;
}
.paso[data-anim]:nth-child(3) {
  transition-delay: 160ms;
}
.paso[data-anim]:nth-child(4) {
  transition-delay: 240ms;
}
.volver-arriba {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--profundo);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  box-shadow: var(--sombra-alta);
  transition:
    transform var(--transicion),
    background var(--transicion);
}
.volver-arriba:hover {
  background: var(--primario);
  transform: translateY(-3px);
}
.volver-arriba[hidden] {
  display: none;
}
/* 16. RESPONSIVE
   Cuatro tramos: escritorio chico, tablet horizontal, tablet vertical y
   teléfono. El nav pasa a menú desplegable por debajo de 900 px.
   ========================================================================== */
/* --- escritorio chico / tablet horizontal (hasta 1180) --- */
@media (max-width: 1180px) {
  .car-flecha.izq {
    left: 4px;
  }
  .car-flecha.der {
    right: 4px;
  }
  .nav {
    gap: 16px;
    font-size: 0.83rem;
  }
  .nav a.nav-cta {
    padding: 9px 18px;
  }
}
/* --- tablet vertical (hasta 1024) --- */
@media (max-width: 1024px) {
  :root {
    --ancho-max: 900px;
  }
  .pasos {
    grid-template-columns: repeat(2, 1fr);
  }
  .contacto-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .formulario {
    max-width: 620px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-marca {
    grid-column: 1 / -1;
  }
  .footer-logo {
    height: 104px;
  }
}
/* --- de acá abajo el nav se convierte en menú --- */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }
  .nav {
    position: fixed;
    inset: calc(var(--header-alto)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px clamp(20px, 5vw, 40px) 24px;
    background: rgba(245, 247, 243, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 18px 40px rgba(6, 55, 51, 0.14);
    font-size: 1.02rem;
    /* oculto de entrada, sin quitarlo del flujo para poder animarlo */
    transform: translateY(-125%);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
    max-height: calc(100vh - var(--header-alto));
    overflow-y: auto;
  }
  .nav.abierto {
    transform: translateY(0);
  }
  .nav a {
    padding-block: 15px;
    border-bottom: 1px solid var(--borde);
  }
  .nav a:not(.nav-cta)::after {
    display: none;
  }
  .nav a:not(.nav-cta).activo {
    color: var(--primario);
    font-weight: 600;
  }
  .nav a.nav-cta {
    margin-top: 18px;
    text-align: center;
    border-bottom: 0;
    padding-block: 14px;
  }
  /* el degradado del header estorba cuando el menú está abierto */
  .site-header.menu-abierto::before {
    background: rgba(245, 247, 243, 0.97);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .site-header.menu-abierto {
    padding-bottom: 0;
  }
}
/* --- tablet chica / teléfono grande (hasta 760) --- */
@media (max-width: 760px) {
  .pasos {
    grid-template-columns: 1fr;
  }
  .seccion {
    padding-block: clamp(52px, 8vw, 78px);
  }
  .t-vuelo,
  .t-paquete,
  .t-exp {
    flex-basis: clamp(250px, 82vw, 320px);
  }
  .tabs {
    gap: 8px;
  }
  .tab {
    padding: 10px 16px;
    flex: 1 1 auto;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-legal {
    flex-direction: column;
    gap: 4px;
  }
}
/* --- teléfono (hasta 620) --- */
@media (max-width: 620px) {
  :root {
    --header-alto: 66px;
  }
  .logo img {
    height: 46px;
  }
  .site-header.pegado .logo img {
    height: 40px;
  }
  /* en pantalla chica se desliza con el dedo: las flechas sobran y además
     chocaban con el botón de volver arriba */
  .car-flecha {
    display: none;
  }
  .hero-inner {
    padding-top: calc(var(--header-alto) + 30px);
    padding-bottom: 120px;
  }
  .hero-acciones {
    flex-direction: column;
  }
  .hero-acciones .btn {
    width: 100%;
  }
  .campo-fila,
  .campo-fila:has(.campo-corto) {
    grid-template-columns: 1fr;
  }
  .formulario {
    padding: 22px 18px 26px;
  }
  .t-vuelo-banda h3 {
    font-size: 1.6rem;
  }
  .t-vuelo-banda .ruta {
    font-size: 1.12rem;
  }
  .volver-arriba {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}
/* --- teléfono chico (hasta 380) --- */
@media (max-width: 380px) {
  .chips {
    gap: 7px;
  }
  .chip {
    padding: 7px 14px;
    font-size: 0.79rem;
  }
}
/* --- pantallas bajas y anchas (portátiles chicos, tablet horizontal) --- */
@media (max-height: 700px) and (min-width: 760px) {
  .hero-inner {
    padding-bottom: 108px;
  }
  .hero-logo-svg {
    --logo-vw: 42;
    --logo-vh: 42;
  }
}
/* Quien pidió menos movimiento en su sistema, lo recibe */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-anim] {
    opacity: 1;
    transform: none;
  }
  /* el logo del hero aparece directamente en su tamaño final, sin la entrada */
  .hero-logo-svg {
    transform: none;
    opacity: 1;
    animation: none;
  }
}
/* 17. PÁGINA LEGAL (terminos/terminos.html)
   ========================================================================== */
.page-head {
  padding-block: calc(var(--header-alto) + 46px) 8px;
}
.page-head h1 {
  margin-top: 10px;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
}
.page-head .bajada {
  color: var(--texto-suave);
  max-width: 62ch;
}
.legal {
  max-width: 78ch;
  padding-block: 40px 78px;
}
.legal h2 {
  font-size: 1.3rem;
  margin-top: 2.3em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--borde);
}
.legal h2 .n {
  color: var(--acento);
  font-family: var(--mono);
  font-size: 0.82em;
  margin-right: 8px;
}
.legal ul {
  padding-left: 20px;
  list-style: disc;
}
.legal li {
  margin-bottom: 0.6em;
}
.legal a {
  color: var(--primario);
  border-bottom: 1px solid currentColor;
}