/* =========================================================
   ESTAVIA — estavia.css
   Entrada, barra, portada, buscador, resultados, calendario,
   secciones, pie, alojamientos y mapa de rutas.

   Todo lo de aquí obedece las tres reglas de base.css: nada
   de cajas ni sombras, todo a la izquierda, un solo acento.

   Índice
     1. Entrada
     2. Barra
     3. Portada y buscador
     4. Avisos
     5. Resultados
     6. Calendario de precios
     7. Secciones de contenido
     8. Preguntas y cierre
     9. Pie
    10. Alojamientos
    11. Mapa de rutas
    12. Páginas sueltas
   ========================================================= */

/* ---------------------------------------------------------
   1. Entrada — el único movimiento del sitio
   --------------------------------------------------------- */
.entrada{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--papel); transition:opacity .5s ease .25s, visibility .5s ease .25s;
}
.entrada--fuera{ opacity:0; visibility:hidden; }
.entrada__marca{ text-align:center; }
.entrada__vuelo{
  display:block; width:clamp(78px, 12vw, 120px); height:auto;
  margin:0 auto 10px;
  animation:crece 1s cubic-bezier(.2,.75,.25,1) both;
}
.entrada__palabra{
  margin:0; font-size:clamp(1.75rem, 5.2vw, 2.9rem); font-weight:700;
  letter-spacing:-.035em; line-height:1; color:var(--tinta);
  animation:crece 1s cubic-bezier(.2,.75,.25,1) .08s both;
}

/* En la entrada la cola entra una sola vez y se queda. La pantalla
   dura menos de dos segundos, así que repetirlo sería un parpadeo. */
.entrada__vuelo .cl-todo{
  animation: cl-llega 1.6s cubic-bezier(.22,.7,.2,1) .2s both;
}
.entrada__linea{
  margin:18px 0 0; font-size:.9375rem; color:var(--humo);
  animation:asoma .6s ease .45s both;
}
@keyframes crece{ from{ transform:scale(.72); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes asoma{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
  .entrada__vuelo, .entrada__palabra, .entrada__linea{
    animation:none; transform:none; opacity:1; }
}

/* ---------------------------------------------------------
   2. Barra
   --------------------------------------------------------- */
.menu{
  position:sticky; top:0; z-index:90;
  background:var(--papel); border-bottom:1px solid var(--linea);
}
.menu__pastilla{
  width:min(100% - (var(--pad-x) * 2), var(--ancho)); margin-inline:auto;
  min-height:var(--barra); display:flex; align-items:center; gap:28px;
}
.menu__marca{ flex:0 0 auto; display:flex; align-items:center; }
.marca__logo{ height:var(--logo-alto, 30px); width:auto; }
.menu__marca img{ height:var(--logo-alto, 30px); width:auto; }

/* gap más corto y rótulos que no se parten: con un logotipo
   más ancho, "Lista tu alojamiento" se rompía a media frase.
   Un rótulo de menú partido en dos renglones se lee como dos
   opciones distintas. */
.menu__links{ display:flex; align-items:center; gap:20px; margin-right:auto; }
.menu__links a{ white-space:nowrap; }
.menu__links a{
  position:relative; padding:4px 0; font-size:.9375rem; font-weight:450; color:var(--humo);
  transition:color .15s ease;
}
.menu__links a:hover{ color:var(--tinta); }
.menu__links a.activo{ color:var(--tinta); }
.menu__links a.activo::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--estela);
}
.menu__sep{ display:none; }

.idioma{ display:flex; align-items:center; gap:2px; }
.idioma button{
  border:none; background:none; cursor:pointer; padding:5px 7px;
  font-family:inherit; font-size:.8125rem; font-weight:500; color:var(--niebla);
  transition:color .15s ease;
}
.idioma button:hover{ color:var(--tinta); }
.idioma button[aria-pressed="true"], .idioma button.activo{ color:var(--tinta); }

.menu__reservas{
  font-size:.9375rem; font-weight:500; padding:9px 16px; white-space:nowrap;
  border:1px solid var(--linea-f); border-radius:var(--r-md);
  transition:border-color .15s ease;
}
.menu__reservas:hover{ border-color:var(--tinta); }

.menu__boton{
  display:none; width:38px; height:38px; place-items:center;
  border:1px solid var(--linea-f); border-radius:var(--r-md); background:none; cursor:pointer;
}

/* El logotipo de Estavia es más ancho que los anteriores, así
   que el menú necesita colapsar antes: abajo de 1120 px los
   enlaces ya no caben junto a la marca y el botón de reservas. */
@media (max-width: 1120px){
  .menu__pastilla{ gap:12px; position:relative; }
  .menu__marca img{ height:24px; }
  .menu__boton{ display:grid; order:9; }
  .menu__reservas{ order:8; padding:8px 13px; font-size:.875rem; }
  .idioma{ order:7; margin-left:auto; }
  .menu__links{
    position:absolute; left:0; right:0; top:100%; display:none; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel); border-bottom:1px solid var(--linea);
    padding:4px var(--pad-x) 12px;
  }
  .menu__links.abierto{ display:flex; }
  .menu__links a{ padding:13px 0; border-top:1px solid var(--linea); font-size:1rem; }
  .menu__links a.activo::after{ display:none; }
}

/* ---------------------------------------------------------
   3. Portada y buscador
   El buscador es el héroe: la portada existe para llevarte a
   él en el primer vistazo, no para enseñar una ilustración.
   --------------------------------------------------------- */
.portada{ padding:clamp(52px, 8vw, 104px) 0 clamp(44px, 6vw, 76px); }
.portada h1{ max-width:15ch; }
.portada h1 em{ font-style:normal; }

/* Centrado, no al ras de abajo: el texto es de una línea y la
   brújula mide 108px, así que alinearlos por la base abría un
   hueco muerto entre el titular y la frase. */
.portada__pie{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  margin-top:clamp(18px, 2.4vw, 26px);
}
.portada__texto{
  margin:0; max-width:50ch; font-size:1.0625rem; line-height:1.6; color:var(--humo);
}
.portada__marca{ flex:0 0 auto; width:clamp(74px, 9vw, 108px); height:auto; }
@media (max-width: 760px){
  .portada__marca{ display:none; }
}

/* --- el buscador --- */
.buscador{ margin-top:clamp(26px, 3vw, 34px); }
.buscador__viaje{ display:flex; gap:8px; margin-bottom:14px; }

.buscador__campos{
  display:grid;
  grid-template-columns:1fr auto 1fr .8fr .8fr .72fr auto;
  align-items:stretch;
  border:1px solid var(--tinta); border-radius:var(--r-md); background:var(--papel);
}
.buscador__campos .campo{
  gap:3px; padding:11px 16px; border-left:1px solid var(--linea); justify-content:center;
}
.buscador__campos .campo:first-child{ border-left:none; }
.buscador__campos .campo > span{ font-size:.75rem; font-weight:450; color:var(--niebla); }
.buscador__campos .campo input,
.buscador__campos .campo select{
  min-height:0; padding:0; border:none; border-radius:0; background:none;
  font-size:1rem; font-weight:500; letter-spacing:-.012em; color:var(--tinta);
}
.buscador__campos .campo input{ font-variant-numeric:tabular-nums; }
.buscador__campos .campo input:focus,
.buscador__campos .campo select:focus{ outline:none; }
.buscador__campos .campo:focus-within{ background:var(--velo); }

.buscador__voltear{
  width:36px; display:grid; place-items:center; cursor:pointer;
  border:none; border-left:1px solid var(--linea); background:none; color:var(--niebla);
  transition:color .15s ease;
}
.buscador__voltear:hover{ color:var(--tinta); }
.buscador__voltear svg{ width:17px; height:17px; }

.buscador__btn{
  border-radius:0; margin:-1px -1px -1px 0; min-height:auto;
  border-top-right-radius:var(--r-md); border-bottom-right-radius:var(--r-md);
  padding-inline:26px;
}
.buscador--inactivo #campoVuelta{ display:none; }
.buscador--inactivo .buscador__campos{ grid-template-columns:1fr auto 1fr .9fr .8fr auto; }

.buscador__pie{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:12px 0 0; font-size:.8125rem; color:var(--humo);
}
.enlace-chico{
  border:none; background:none; padding:0; cursor:pointer; font-family:inherit;
  font-size:.8125rem; font-weight:500; color:var(--tinta);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; text-decoration-color:var(--linea-f);
}
.enlace-chico:hover{ text-decoration-color:currentColor; }

@media (max-width: 1000px){
  .buscador__campos{ grid-template-columns:1fr auto 1fr; border-radius:var(--r-md); }
  .buscador--inactivo .buscador__campos{ grid-template-columns:1fr auto 1fr; }
  .buscador__campos .campo:nth-child(n+4){ border-top:1px solid var(--linea); }
  .buscador__campos .campo:nth-child(4){ border-left:none; }
  .buscador__btn{
    grid-column:1 / -1; margin:0; border-radius:0;
    border-bottom-left-radius:var(--r-md); border-bottom-right-radius:var(--r-md);
    min-height:50px;
  }
}
@media (max-width: 560px){
  .buscador__campos{ grid-template-columns:1fr auto; }
  .buscador__campos .campo{ grid-column:1 / -1; border-left:none; border-top:1px solid var(--linea); }
  .buscador__campos .campo:first-child{ border-top:none; }
  .buscador__voltear{ display:none; }
}

/* --- las cifras: texto, no tarjetas --- */
.cifras{
  display:flex; flex-wrap:wrap; gap:clamp(26px, 5vw, 64px);
  margin-top:clamp(40px, 5vw, 64px); padding-top:26px; border-top:1px solid var(--linea);
}
.cifra b{
  display:block; font-size:1.625rem; font-weight:600; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.cifra span{ display:block; margin-top:6px; font-size:.8125rem; color:var(--humo); max-width:18ch; }

/* ---------------------------------------------------------
   4. Avisos
   --------------------------------------------------------- */
.aviso{
  display:flex; gap:11px; align-items:flex-start;
  padding:16px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  font-size:.875rem; line-height:1.6; color:var(--humo);
}
.aviso strong{ color:var(--tinta); font-weight:600; }
.aviso__ico{ flex:0 0 auto; color:var(--estela); margin-top:1px; }
.aviso__ico svg{ width:17px; height:17px; }

.invitacion{ padding:clamp(44px, 6vw, 76px) 0; max-width:54ch; }
.invitacion svg{ width:26px; height:26px; color:var(--niebla); margin-bottom:18px; }
.invitacion h3{ font-size:1.375rem; letter-spacing:-.025em; }
.invitacion p{ margin:10px 0 0; color:var(--humo); }

/* ---------------------------------------------------------
   5. Resultados — una lista, no un muro de tarjetas
   --------------------------------------------------------- */
.seccion--corta{ padding-top:0; }
.seccion--corta:not(:has(.tarifa, .invitacion, .vacio--vuelos)){ padding:0; }

.vuelos__barra{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:8px 0 20px;
}
.vuelos__ruta{ font-size:1.25rem; font-weight:600; letter-spacing:-.025em; }
.vuelos__ruta small{ display:block; margin-top:5px; font-size:.8125rem; font-weight:400; color:var(--humo); letter-spacing:0; }
.vuelos__cuenta{ font-size:.8125rem; color:var(--humo); text-align:right; }
.pista-hosp{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-top:5px; }
.pista-hosp svg{ width:15px; height:15px; color:var(--niebla); }

.tarifa{
  display:grid; grid-template-columns:148px minmax(0,1fr) 250px; gap:clamp(16px, 2.6vw, 36px);
  align-items:center; padding:26px 0; border-top:1px solid var(--linea);
}
.tarifa:last-child{ border-bottom:1px solid var(--linea); }
.tarifa--mejor{ position:relative; }

.tarifa__aero{ display:grid; gap:9px; align-content:start; }
.aero__logo{ height:24px; width:auto; max-width:112px; object-fit:contain; object-position:left center; }
.aero{ display:flex; align-items:center; gap:8px; }
.aero__mono{ font-weight:600; font-size:.875rem; }
.aero__nombre{ font-size:.875rem; font-weight:500; }
.tarifa__equipaje{ font-size:.8125rem; color:var(--humo); line-height:1.4; }
.tarifa__sello{
  display:inline-block; width:fit-content; padding:2px 8px; border-radius:var(--r-sm);
  background:var(--estela-10); color:var(--estela); font-size:.75rem; font-weight:600;
}

.tarifa__tramos{ display:grid; gap:18px; min-width:0; }
.tramo{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; }
.tramo__hora{ display:flex; flex-direction:column; }
.tramo__hora b{ font-size:1.25rem; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.tramo__hora span{ font-size:.8125rem; color:var(--humo); }
.tramo__dia{ color:var(--estela) !important; font-weight:600; }
.tramo__linea{ display:grid; justify-items:center; gap:4px; min-width:0; }
.tramo__linea em{ font-style:normal; font-size:.75rem; color:var(--humo); }
.tramo__linea i{ display:block; width:100%; height:1px; background:var(--linea-f); }

.tarifa__precio{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:3px; }
.tarifa__ref{ font-size:.875rem; color:var(--niebla); text-decoration:line-through; font-variant-numeric:tabular-nums; }
.tarifa__estavia{
  margin:0; font-size:1.875rem; font-weight:600; line-height:1.05;
  letter-spacing:-.035em; color:var(--estela); font-variant-numeric:tabular-nums;
}
.tarifa__detalle{ font-size:.75rem; color:var(--humo); }
.tarifa__ahorro{ margin-top:4px; font-size:.8125rem; font-weight:500; color:var(--verde); }
.tarifa__entrega{ display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--humo); }
.tarifa__entrega svg{ width:14px; height:14px; }
.tarifa__acciones{ margin-top:12px; }

@media (max-width: 900px){
  .tarifa{ grid-template-columns:1fr; gap:18px; }
  .tarifa__aero{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
  .tarifa__aero .aero{ flex:0 1 auto; min-width:0; }
  .tarifa__sello{ order:2; }
  .tarifa__equipaje{ order:3; flex:1 1 100%; }
  .tarifa__precio{ align-items:flex-start; text-align:left; }
  .tarifa__acciones{ width:100%; }
  .tarifa__acciones .btn{ width:100%; }
  .vuelos__cuenta{ text-align:left; }
  .pista-hosp{ justify-content:flex-start; }
}

/* ---------------------------------------------------------
   6. Calendario de precios
   --------------------------------------------------------- */
.calp{ margin-top:8px; }
.calp__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
.calp__ruta{ font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; }
.calp__ruta small{ display:block; margin-top:3px; font-size:.8125rem; font-weight:400; color:var(--humo); letter-spacing:0; }
.calp__nav{ display:flex; align-items:center; gap:10px; }
.calp__titulo{ min-width:148px; text-align:center; font-size:.9375rem; font-weight:500; }

/* La tira: los días que se venden, uno junto a otro. Lo que
   manda es el precio, así que es lo más grande de cada celda. */
.tira{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:8px; margin:4px 0 0;
}
.tira__dia{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:13px 12px 14px; cursor:pointer; text-align:left;
  border:1px solid var(--linea); border-radius:var(--r-md);
  background:var(--papel); font-family:inherit; color:var(--tinta);
  transition:border-color .12s ease;
}
.tira__dia:hover{ border-color:var(--tinta); }
.tira__dia:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.tira__sem{ font-size:.75rem; color:var(--humo); line-height:1.2; }
.tira__fecha{ font-size:.9375rem; font-weight:600; letter-spacing:-.015em; line-height:1.2; }
.tira__precio{
  font-style:normal; margin-top:3px; font-size:.9375rem; font-weight:600;
  line-height:1.2; font-variant-numeric:tabular-nums;
}

.tira__dia--barato{ background:var(--verde-10); border-color:var(--verde-10); }
.tira__dia--barato .tira__precio{ color:var(--verde); }
.tira__dia--caro{ background:var(--rojo-10); border-color:var(--rojo-10); }
.tira__dia--caro .tira__precio{ color:var(--rojo); }
.tira__dia--minimo{ border-color:var(--verde); }
.tira__dia--ida, .tira__dia--vuelta{
  background:var(--tinta); border-color:var(--tinta); color:var(--papel);
}
.tira__dia--ida .tira__sem, .tira__dia--vuelta .tira__sem{ color:rgba(255,255,255,.7); }
.tira__dia--ida .tira__precio, .tira__dia--vuelta .tira__precio{ color:var(--papel); }
.tira__dia--ida:hover, .tira__dia--vuelta:hover{ border-color:var(--tinta); }

@media (max-width: 560px){
  .tira{ grid-template-columns:repeat(auto-fit, minmax(84px, 1fr)); gap:6px; }
  .tira__dia{ padding:11px 9px 12px; }
}

.calp__leyenda{ display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; font-size:.8125rem; color:var(--humo); }
.calp__leyenda > span{ display:flex; align-items:center; gap:7px; }
.calp__punto{ width:11px; height:11px; border-radius:2px; background:var(--velo); flex:0 0 auto; }
.calp__punto--barato{ background:var(--verde-10); border:1px solid var(--verde); }
.calp__punto--normal{ background:var(--velo); border:1px solid var(--linea-f); }
.calp__punto--caro{ background:var(--rojo-10); border:1px solid var(--rojo); }
.calp__minimo{ color:var(--verde); font-weight:500; }
.calp__elige{ padding:40px 0; color:var(--humo); font-size:.9375rem; }

/* fechas flexibles */
.flex-fechas{ margin-top:clamp(32px, 4vw, 48px); padding-top:26px; border-top:1px solid var(--linea); }
.flex-fechas__titulo{ margin:0 0 14px; font-size:.9375rem; font-weight:600; }
.flex-fechas__tira{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.flex-fechas__dia{
  flex:0 0 auto; min-width:94px; padding:12px 14px; cursor:pointer; text-align:left;
  border:1px solid var(--linea); border-radius:var(--r-md); background:none; font-family:inherit;
  transition:border-color .15s ease;
}
.flex-fechas__dia:hover{ border-color:var(--tinta); }
.flex-fechas__dia b{ display:block; font-size:.9375rem; font-weight:600; color:var(--verde); font-variant-numeric:tabular-nums; }
.flex-fechas__dia span{ display:block; margin-top:3px; font-size:.75rem; color:var(--humo); }

/* ---------------------------------------------------------
   7. Secciones de contenido
   --------------------------------------------------------- */
.seccion + .seccion{ border-top:1px solid var(--linea); }

/* Más grandes que antes: a 22px el movimiento no se alcanzaba
   a ver y el dibujo se perdía. A 34 respira y se nota. */
/* El icono crece con el titular. A 34px al lado de un h2 de
   42px parecía un adorno pegado; a 52 es parte del encabezado. */
.sec-ico{
  display:block; width:clamp(40px, 3.6vw, 52px); height:clamp(40px, 3.6vw, 52px);
  margin-bottom:clamp(14px, 1.4vw, 20px); color:var(--tinta);
}
.sec-ico svg{ width:100%; height:100%; }

/* --- Qué es ESTAVIA --- */
.manifiesto{ display:grid; grid-template-columns:.95fr 1.15fr; gap:clamp(32px, 6vw, 96px); align-items:start; }
@media (max-width: 900px){ .manifiesto{ grid-template-columns:1fr; } }
.manifiesto__cabeza h2{ max-width:12ch; }
.manifiesto__pie{ margin:20px 0 0; max-width:48ch; color:var(--humo); font-size:1rem; line-height:1.65; }

.razones{ display:grid; }
.razon{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(16px, 3vw, 40px);
  padding:22px 0; border-top:1px solid var(--linea);
}
.razon:last-child{ border-bottom:1px solid var(--linea); }
.razon h3{ margin:0; }
.razon p{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--humo); }
.razon__num{ display:none; }
@media (max-width: 620px){ .razon{ grid-template-columns:1fr; gap:8px; } }

/* --- Entrega --- */
/* Tres columnas, que son las tres formas de pago. Con cuatro
   quedaba una celda vacía y el fondo de la rejilla se veía
   como un bloque gris roto a la derecha. */
.entregas{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--linea); border-block:1px solid var(--linea); }
.entrega{ background:var(--papel); border:none; border-radius:0; padding:26px clamp(16px, 2vw, 26px) 30px; }
.entrega__ico{ display:block; width:20px; height:20px; margin-bottom:18px; color:var(--niebla); }
.entrega__ico svg{ width:100%; height:100%; }
.entrega .entrega__tiempo{
  margin:0; font-size:1.5rem; font-weight:600; line-height:1;
  letter-spacing:-.03em; color:var(--tinta); font-variant-numeric:tabular-nums;
}
.entrega h3{ margin:12px 0 8px; font-size:.9375rem; }
.entrega p{ margin:0; font-size:.875rem; line-height:1.6; color:var(--humo); }
/* Una sola columna en angosto: con tres tarjetas, dos
   columnas dejan una huérfana y el hueco se pinta gris. */
@media (max-width: 900px){ .entregas{ grid-template-columns:1fr; } }
@media (max-width: 540px){ .entregas{ grid-template-columns:1fr; } }

/* --- Comparativa --- */
.comp{ padding-top:20px; border-top:2px solid var(--linea); }
.comp--estavia{ border-top-color:var(--estela); }
.comp h3{ font-size:1rem; }
.comp > p{ margin:6px 0 0; font-size:.875rem; color:var(--humo); }
.comp--estavia h3{ color:var(--estela); }
.comp__num{ display:none; }
.lista-simple{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px; }
.lista-simple li{ position:relative; padding-left:18px; font-size:.9375rem; line-height:1.55; color:var(--humo); }
.lista-simple li::before{
  content:''; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--linea-f);
}
.comp--estavia .lista-simple li::before{ background:var(--estela); }
.comp--estavia .lista-simple li{ color:var(--tinta); }

/* ---------------------------------------------------------
   8. Preguntas y cierre
   --------------------------------------------------------- */
.faq{ display:grid; max-width:72ch; }
.faq details{ border-top:1px solid var(--linea); }
.faq details:last-child{ border-bottom:1px solid var(--linea); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:19px 0; cursor:pointer; list-style:none;
  font-size:1.0625rem; font-weight:500; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; flex:0 0 auto; width:8px; height:8px; margin:-4px 3px 0 0;
  border-right:1.5px solid var(--niebla); border-bottom:1.5px solid var(--niebla);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq p{ margin:0; padding:0 0 22px; max-width:62ch; font-size:.9375rem; line-height:1.7; color:var(--humo); }

.cierre{ max-width:52ch; }
.cierre h2{ max-width:16ch; }
.cierre h2 + p{ margin-top:18px; }
.cierre__icono{ display:none; }
.suscribir{
  display:flex; gap:0; margin-top:26px;
  border:1px solid var(--tinta); border-radius:var(--r-md);
}
.suscribir input{
  flex:1 1 auto; min-width:0; min-height:48px; padding:12px 15px;
  border:none; background:none; font-family:inherit; font-size:.9375rem; color:var(--tinta);
}
.suscribir input:focus{ outline:none; }
.suscribir button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; margin:-1px; border:1px solid var(--tinta); cursor:pointer;
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--tinta); color:var(--papel);
  font-family:inherit; font-size:.9375rem; font-weight:600;
}
.suscribir button:hover{ background:#2A2A2E; }
/* Envuelve: cuatro enlaces en una sola línea sacaban la página
   de la pantalla en el celular. */
.redes-linea{ display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:24px; font-size:.875rem; }
.redes-linea a{ color:var(--humo); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--linea-f); }
.redes-linea a:hover{ color:var(--tinta); }

/* ---------------------------------------------------------
   9. Pie
   --------------------------------------------------------- */
.pie{ padding:clamp(44px, 5vw, 64px) 0 44px; border-top:1px solid var(--linea); }
.pie__fila{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.pie__marca img{ height:28px; width:auto; }
.pie__links{ display:flex; flex-wrap:wrap; gap:18px; font-size:.8125rem; }
.pie__links a{ color:var(--humo); }
.pie__links a:hover{ color:var(--tinta); }
.pie .enlace{ font-size:.875rem; }

/* ---------------------------------------------------------
   10. Alojamientos de propietario
   --------------------------------------------------------- */
.hosp-lista{ display:grid; border-top:1px solid var(--linea); }
.hosp{
  display:grid; grid-template-columns:180px minmax(0,1fr) auto; gap:clamp(16px, 2.4vw, 30px);
  padding:22px 0; border-bottom:1px solid var(--linea);
  background:none; border-radius:0;
}
.hosp--elegido{ background:var(--velo); }
.hosp__marco{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-md); background:var(--velo); }
.hosp__marco img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* mientras no haya foto del propietario, un hueco honesto y no un clipart */
.hosp__sin{ position:absolute; inset:0; display:grid; place-items:center; color:var(--niebla); }
.hosp__sin svg{ width:22px; height:22px; }
.hosp__sello{
  position:absolute; left:8px; top:8px; z-index:2; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 7px;
  border-radius:var(--r-sm); background:var(--papel);
  font-size:.6875rem; font-weight:600; color:var(--tinta);
}
.hosp__sello svg{ position:static; inset:auto; width:12px; height:12px; flex:0 0 auto; color:var(--verde); }
.hosp__tipo{ font-size:.75rem; color:var(--humo); }
.hosp__cuerpo h3{ margin:4px 0 3px; }
.hosp__zona{ margin:0 0 10px; font-size:.875rem; color:var(--humo); }
.hosp__anfitrion{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:.8125rem; color:var(--humo); }
.hosp__inicial{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--velo); color:var(--tinta); font-size:.6875rem; font-weight:600;
}
.hosp__incluye{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:5px 16px; }
.hosp__incluye li{ position:relative; padding-left:16px; font-size:.8125rem; color:var(--humo); }
.hosp__incluye li::before{ content:''; position:absolute; left:0; top:.68em; width:7px; height:1px; background:var(--linea-f); }
.hosp__mapa{ display:inline-block; margin-top:12px; font-size:.8125rem; color:var(--humo);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--linea-f); }
.hosp__mapa:hover{ color:var(--tinta); }
.hosp__precio{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:2px; min-width:150px; text-align:right; }
.hosp__noche{ font-size:1.25rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.hosp__dato{ font-size:.75rem; color:var(--humo); }
.hosp__estancia{ margin-top:3px; font-size:.8125rem; color:var(--humo); font-variant-numeric:tabular-nums; }
.hosp__btn{ margin-top:12px; }
.hosp-saltar{ margin-top:26px; padding-top:22px; border-top:1px solid var(--linea); }
@media (max-width: 860px){
  .hosp{ grid-template-columns:1fr; }
  .hosp__marco{ aspect-ratio:16/9; }
  .hosp__precio{ align-items:flex-start; text-align:left; }
}

/* ---------------------------------------------------------
   11. Mapa de rutas
   El contorno es el dato: el país en gris muy claro, los
   destinos como puntos, y la etiqueta sobre papel para que
   se lea encima del mapa sin taparlo.
   --------------------------------------------------------- */
.mapa{ margin-top:8px; }
.mapa__lienzo{ width:100%; }
.mapa__svg{ width:100%; height:auto; display:block; }
/* en celular el mapa no se encoge hasta ser ilegible: se desliza */
@media (max-width: 760px){
  .mapa__lienzo{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .mapa__svg{ min-width:860px; }
}
.mapa__tierra{ fill:var(--velo); stroke:var(--linea-f); stroke-width:1; stroke-linejoin:round; }
.mapa__hilo{ stroke:var(--linea-f); stroke-width:1; stroke-dasharray:2 5; stroke-linecap:round; }
.mapa__guia{ stroke:var(--linea-f); stroke-width:1; }

/* el origen */
.mapa__origen circle:first-child{ fill:var(--estela); opacity:.14; }
.mapa__origen circle:last-child{ fill:var(--estela); }
.mapa__origen-t{ font-size:13px; font-weight:600; fill:var(--estela); text-anchor:middle; }

/* cada destino */
.mapa__punto{ cursor:pointer; }
.mapa__punto:focus{ outline:none; }
.mapa__bolita{ fill:var(--papel); stroke:var(--tinta); stroke-width:1.6; }
.mapa__caja{ fill:var(--papel); stroke:var(--linea-f); stroke-width:1; transition:stroke .15s ease; }
.mapa__ciudad{ font-size:13px; font-weight:500; fill:var(--humo); text-anchor:middle; }
.mapa__precio{ font-size:14px; font-weight:600; fill:var(--tinta); text-anchor:middle; font-variant-numeric:tabular-nums; }

.mapa__punto:hover .mapa__caja,
.mapa__punto:focus-visible .mapa__caja{ stroke:var(--estela); }
.mapa__punto:hover .mapa__precio,
.mapa__punto:focus-visible .mapa__precio{ fill:var(--estela); }

.mapa__pie{ margin:20px 0 0; font-size:.8125rem; color:var(--humo); }

/* ---------------------------------------------------------
   12. Páginas sueltas
   --------------------------------------------------------- */
.cabecera-pag{ padding:clamp(44px, 6vw, 72px) 0 0; }
.cabecera-pag h1{ font-size:clamp(2rem, 4vw, 3rem); }
.cabecera-pag p{ margin:16px 0 0; max-width:58ch; color:var(--humo); }

.reserva{ padding:22px 0; border-top:1px solid var(--linea); }
.reserva:last-child{ border-bottom:1px solid var(--linea); }
.reserva__marco{ display:grid; gap:4px; }
.marbete{
  display:inline-block; padding:2px 8px; border-radius:var(--r-sm);
  background:var(--velo); font-size:.75rem; font-weight:500; color:var(--humo);
}
.anclaje{ scroll-margin-top:calc(var(--barra) + 20px); }
.corte{ height:1px; background:var(--linea); border:none; margin:0; }
.villa__lugar{ font-size:.8125rem; color:var(--humo); }
.portada__acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ---------------------------------------------------------
   13. Subida de identificación
   Pantalla aparte, a la que solo se llega con un enlace
   privado. Columna angosta y nada que distraiga: aquí la
   persona tiene que entender para qué se le pide y decidir.
   --------------------------------------------------------- */
.ident{ max-width:34rem; }
.ident__caja h1{ font-size:clamp(1.75rem, 3.2vw, 2.375rem); max-width:16ch; }
.ident__intro{ margin:18px 0 0; font-size:1rem; line-height:1.65; color:var(--humo); }

.ident__ico{ display:block; width:26px; height:26px; margin-bottom:18px; color:var(--estela); }
.ident__ico--ok{ color:var(--verde); }
.ident__ico svg{ width:100%; height:100%; }

.ident__datos{ margin:26px 0 0; padding:0; border-top:1px solid var(--linea); }
.ident__datos > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--linea);
}
.ident__datos dt{ font-size:.875rem; color:var(--humo); }
.ident__datos dd{ margin:0; font-size:.875rem; font-weight:500; text-align:right; }

.ident__reglas{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px; }
.ident__reglas li{ position:relative; padding-left:18px; font-size:.875rem; line-height:1.55; color:var(--humo); }
.ident__reglas li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--linea-f); }

.ident__soltar{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  margin-top:26px; padding:30px 20px; cursor:pointer; text-align:center;
  border:1px dashed var(--linea-f); border-radius:var(--r-md); background:var(--papel);
  transition:border-color .15s ease, background .15s ease;
}
.ident__soltar:hover{ border-color:var(--tinta); }
.ident__soltar:focus-within{ border-color:var(--tinta); background:var(--velo); }
.ident__soltarIco{ width:24px; height:24px; color:var(--niebla); }
.ident__soltarIco svg{ width:100%; height:100%; }
.ident__soltarT{ font-size:.9375rem; font-weight:600; }
.ident__soltarP{ font-size:.8125rem; color:var(--humo); }
.ident__soltar--puesto{ border-style:solid; border-color:var(--verde); }

.ident__vista{ margin-top:16px; border-radius:var(--r-md); overflow:hidden; background:var(--velo); }
.ident__vista img{ width:100%; height:auto; display:block; }
.ident__pdf{ display:flex; align-items:center; gap:10px; padding:18px; font-size:.875rem; }
.ident__pdf svg{ width:20px; height:20px; flex:0 0 auto; color:var(--niebla); }

.ident__recado{ margin:14px 0 0; font-size:.875rem; color:var(--humo); }
.ident__recado--malo{ color:var(--rojo); }
.ident__pie{ margin:16px 0 0; font-size:.8125rem; color:var(--humo); text-align:center; }

/* ---------------------------------------------------------
   14. Páginas legales
   Una columna de lectura, medida corta y jerarquía clara: si
   el aviso de privacidad no se puede leer, no sirve de nada.
   --------------------------------------------------------- */
.legal{ max-width:68ch; }
.legal h1{ font-size:clamp(2rem, 4vw, 2.75rem); }
.legal__fecha{ margin:14px 0 0; font-size:.875rem; color:var(--humo); }
.legal h2{
  margin:clamp(34px, 4vw, 48px) 0 14px; padding-top:22px;
  border-top:1px solid var(--linea);
  font-size:1.125rem; letter-spacing:-.02em;
}
.legal p{ margin:0 0 14px; font-size:1rem; line-height:1.7; color:var(--humo); }
.legal strong{ color:var(--tinta); font-weight:600; }
.legal__lista{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:10px; }
.legal__lista li{ position:relative; padding-left:20px; font-size:1rem; line-height:1.65; color:var(--humo); }
.legal__lista li::before{ content:''; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--linea-f); }
.legal__pie{ margin-top:clamp(34px, 4vw, 48px); padding-top:22px; border-top:1px solid var(--linea); }

/* ---------------------------------------------------------
   15. Anfitriones
   La página donde un dueño lista su alojamiento. Mismo
   lenguaje que el resto: blanco, reglas finas y el rojo del
   ala solo donde está la oferta.
   --------------------------------------------------------- */
.an__acciones{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(26px, 3vw, 36px); }

/* Tres por fila: son seis tarjetas, así caen en dos filas exactas.
   Con auto-fit salían cuatro y dos, y el hueco de las dos que
   faltaban se veía como un bloque gris roto. */
.an__oferta{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--linea); border-block:1px solid var(--linea); }
@media (max-width: 980px){ .an__oferta{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .an__oferta{ grid-template-columns:1fr; } }
.an__card{ background:var(--papel); padding:26px clamp(16px,2vw,26px) 30px; }
.an__cardIco{ display:block; width:20px; height:20px; margin-bottom:18px; color:var(--estela); }
.an__cardIco svg{ width:100%; height:100%; }
.an__card h3{ margin:0 0 8px; font-size:1rem; }
.an__card p{ margin:0; font-size:.875rem; line-height:1.6; color:var(--humo); }

.an__pasos{ list-style:none; margin:0; padding:0; display:grid; max-width:72ch; }
.an__paso{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:22px 0; border-top:1px solid var(--linea); }
.an__paso:last-child{ border-bottom:1px solid var(--linea); }
.an__pasoN{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--tinta); color:var(--papel); font-size:.8125rem; font-weight:600;
  font-variant-numeric:tabular-nums; }
.an__paso h3{ margin:2px 0 6px; font-size:1rem; }
.an__paso p{ margin:0; font-size:.9375rem; line-height:1.65; color:var(--humo); }

/* --- el formulario --- */
.an__alta{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px, 5vw, 72px); align-items:start; }
@media (max-width: 900px){ .an__alta{ grid-template-columns:1fr; } }
.an__altaCabeza h2{ max-width:14ch; }
.an__altaCabeza p{ margin:16px 0 0; color:var(--humo); font-size:1rem; line-height:1.65; max-width:46ch; }

.an__form{ max-width:40rem; }
.an__grupo{ border:none; margin:0 0 28px; padding:22px 0 0; border-top:1px solid var(--linea); }
.an__grupo:first-child{ padding-top:0; border-top:none; }
.an__grupo legend{ padding:0; margin-bottom:16px; font-size:.8125rem; font-weight:500; color:var(--humo); }
.an__form .campo > span em{ font-style:normal; color:var(--niebla); font-weight:400; }
.an__tres{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width: 620px){ .an__tres{ grid-template-columns:1fr; } }

.an__check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:.9375rem; line-height:1.5; color:var(--tinta); }
.an__check input{ flex:0 0 auto; margin-top:3px; width:16px; height:16px; accent-color:var(--tinta); }
.an__check small{ display:block; margin-top:4px; font-size:.8125rem; line-height:1.55; color:var(--humo); }
.an__check--oferta{ padding:16px; border:1px solid var(--estela); border-radius:var(--r-md); background:var(--estela-10); }
.an__check--oferta input{ accent-color:var(--estela); }

.an__recado{ margin:16px 0 0; font-size:.875rem; color:var(--humo); }
.an__recado--malo{ color:var(--rojo); }
.an__nota{ margin:14px 0 0; font-size:.8125rem; color:var(--humo); text-align:center; }

.an__gracias{ padding:8px 0; }
.an__graciasIco{ display:block; width:26px; height:26px; margin-bottom:18px; color:var(--verde); }
.an__graciasIco svg{ width:100%; height:100%; }
.an__gracias h3{ font-size:1.375rem; letter-spacing:-.025em; }
.an__gracias p{ margin:12px 0 0; font-size:.9375rem; line-height:1.65; color:var(--humo); max-width:46ch; }
.an__gracias .an__nota{ text-align:left; }

/* ---------------------------------------------------------
   16. La ventana de la oferta
   Interrumpe, así que se nota poco y se cierra fácil.
   --------------------------------------------------------- */
.vn{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; }
.vn__fondo{ position:absolute; inset:0; background:rgba(0,0,0,.42); opacity:0; transition:opacity .2s ease; }
.vn--vista .vn__fondo{ opacity:1; }
.vn__caja{
  position:relative; width:min(100%, 26rem); background:var(--papel);
  border-radius:var(--r-lg); padding:30px 28px 26px;
  opacity:0; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease;
}
.vn--vista .vn__caja{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .vn__fondo, .vn__caja{ transition:none; }
  .vn__caja{ transform:none; }
}
.vn__x{ position:absolute; right:14px; top:10px; width:34px; height:34px; border:none;
  background:none; cursor:pointer; font-size:26px; line-height:1; color:var(--niebla); }
.vn__x:hover{ color:var(--tinta); }
.vn__ico{ display:block; width:24px; height:24px; margin-bottom:16px; color:var(--estela); }
.vn__ico svg{ width:100%; height:100%; }
.vn__caja h2{ font-size:1.375rem; letter-spacing:-.025em; max-width:18ch; }
.vn__cuerpo{ margin:12px 0 0; font-size:.9375rem; line-height:1.6; color:var(--humo); }
.vn__lista{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.vn__lista li{ position:relative; padding-left:18px; font-size:.875rem; line-height:1.5; }
.vn__lista li::before{ content:''; position:absolute; left:0; top:.6em; width:8px; height:1px; background:var(--estela); }
.vn__botones{ display:flex; gap:8px; align-items:center; margin-top:24px; }
.vn__botones .btn--tinta{ flex:1 1 auto; }
@media (max-width: 420px){
  .vn__caja{ padding:26px 20px 22px; }
  .vn__botones{ flex-direction:column; align-items:stretch; }
}

/* ---------------------------------------------------------
   17. El avión de la portada

   La estela corre sin parar y el avión flota apenas. No es un
   despegue que se repite: es algo que lleva rato volando, que
   es lo que quieres que sienta alguien que está a punto de
   comprar un boleto.

   La cola entra por la derecha y frena en su lugar, como un
   avión que acaba de pasar frente a ti y se detiene. Es el
   único movimiento del logotipo: no gira, no rebota, no
   parpadea.

   Dos grupos: el de afuera lleva el recorte y no se mueve, el
   de adentro viaja. El recorte corta solo por la derecha, para
   que la cola entre por el borde del cuadro en vez de montarse
   sobre la palabra.
   --------------------------------------------------------- */
.cl-todo{ animation: cl-llega 3.6s cubic-bezier(.22,.7,.2,1) infinite; }

@keyframes cl-llega{
   0%      { transform: translateX(44px) }
  30%,100%{ transform: translateX(0) }
}

@media (prefers-reduced-motion: reduce){
  .cl-todo{ animation:none; transform:none; }
}

/* ---------------------------------------------------------
   18. Chofer (solo Ciudad de México)
   --------------------------------------------------------- */
.entregas--tres{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.encabezado .etiqueta{
  margin:0 0 12px;
  background:var(--estela-10); color:var(--estela); font-weight:600;
}

.chofer__cierre{
  margin-top:26px; display:flex; align-items:center;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.chofer__cierre .sutil{ margin:0; max-width:62ch; font-size:.8125rem; line-height:1.6; }

@media (max-width: 860px){
  .entregas--tres{ grid-template-columns:1fr; }
  .chofer__cierre{ align-items:stretch; flex-direction:column; }
}


/* ---------------------------------------------------------
   19. La barra en pantallas muy angostas
   A 390px el logotipo, el idioma, "Mis reservas" y el botón de
   menú no cabían juntos y empujaban la página 29px de lado.
   Se aprieta todo en vez de esconder nada: la reserva es
   justo lo que alguien busca desde el teléfono.
   --------------------------------------------------------- */
/* Arriba de 440px el enlace de reservas del desplegable sobra:
   el botón de la barra ya está ahí. */
.menu__links-reservas{ display:none; }

@media (max-width: 440px){
  .menu__pastilla{ gap:9px; }
  .menu__marca img{ height:19px; }
  .idioma{ gap:5px; }
  /* el botón se va de la barra y aparece dentro del desplegable */
  .menu__reservas{ display:none; }
  .menu__links-reservas{ display:block; }
}

/* ---------------------------------------------------------
   20. Las pantallas de espera

   Una por cada espera real del sitio. El icono es del set de
   siempre —misma rejilla, mismo trazo— y lo que se mueve es
   lo de alrededor: las nubes pasan, la pista corre, la banda
   de la maleta avanza. Así la espera cuenta algo en vez de
   ser un círculo dando vueltas.

   Todo se apaga con "menos movimiento" al final de la sección.
   --------------------------------------------------------- */
.carga{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:44px 20px; color:var(--tinta);
}
.carga__texto{
  margin:0; font-size:.9375rem; color:var(--humo);
  animation:cg-latir 1.9s ease-in-out infinite;
}
/* recortado al marco: las nubes del desfile viven fuera del
   viewBox mientras entran, y sin esto se derraman sobre lo
   que tengan al lado */
.cg{ width:min(240px, 70vw); height:auto; display:block; overflow:hidden; }

@keyframes cg-latir{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* --- nubes: el mundo pasa y el avión flota --- */
.cg-desfile{ animation:cg-pasar 9s linear infinite; }
@keyframes cg-pasar{ from{ transform:translateX(0) } to{ transform:translateX(-140px) } }

.cg-flota{ animation:cg-flotar 3.2s ease-in-out infinite; }
@keyframes cg-flotar{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3.5px) } }

.cg-estela{ animation:cg-estela 1.4s linear infinite; }
@keyframes cg-estela{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-10 } }

/* --- despegue: sube, se va, vuelve a empezar --- */
.cg-pista{ animation:cg-pista 1.1s linear infinite; }
@keyframes cg-pista{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-18 } }

.cg-despega{ animation:cg-despegar 2.6s cubic-bezier(.4,0,.7,.5) infinite; }
@keyframes cg-despegar{
  0%       { transform:translate(-14px,6px);  opacity:0 }
  14%      { transform:translate(0,3px);      opacity:1 }
  70%      { transform:translate(56px,-26px); opacity:1 }
  88%,100% { transform:translate(84px,-42px); opacity:0 }
}

/* --- maleta: rebota y la banda avanza --- */
.cg-bota{ animation:cg-botar 1.6s ease-in-out infinite; }
@keyframes cg-botar{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }

/* el recorrido es el ancho del cuerpo de la maleta (28), ni
   un pixel más: una banda que se sale no parece una maleta */
.cg-banda{ stroke-dasharray:10 28; animation:cg-banda 1.8s ease-in-out infinite; }
@keyframes cg-banda{ 0%{ stroke-dashoffset:28 } 100%{ stroke-dashoffset:-10 } }

/* --- casa: se dibuja sola --- */
.cg-traza path{ stroke-dasharray:120; animation:cg-trazar 2.4s ease-in-out infinite; }
.cg-traza path:nth-child(2){ animation-delay:.35s; }
@keyframes cg-trazar{
  0%      { stroke-dashoffset:120 }
  55%,75% { stroke-dashoffset:0 }
  100%    { stroke-dashoffset:-120 }
}

/* --- vuelo: la estela corre y el avión flota --- */
.cg-estela{ animation:cg-correr 1.5s linear infinite; }
@keyframes cg-correr{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-16 } }
.cg-avion{
  transform-box:view-box; transform-origin:63px 37px;
  animation:cg-flotar-avion 3.2s ease-in-out infinite;
}
@keyframes cg-flotar-avion{
  0%,100%{ transform:translate(0,0) }
  50%    { transform:translate(1.8px,-3px) }
}

/* --- la capa de pantalla completa (confirmar la reserva) --- */
.carga-capa{
  position:fixed; inset:0; z-index:220; display:grid; place-items:center;
  background:var(--papel); opacity:0; transition:opacity .25s ease;
}
.carga-capa--visible{ opacity:1; }
body.con-capa{ overflow:hidden; }

/* --- menos movimiento: se ve el dibujo, quieto --- */
@media (prefers-reduced-motion: reduce){
  .cg-desfile, .cg-flota, .cg-estela, .cg-pista, .cg-despega,
  .cg-bota, .cg-banda, .cg-traza path, .cg-estela, .cg-avion, .carga__texto{
    animation:none !important;
  }
  .cg-despega{ transform:translate(28px,-12px); opacity:1; }
  .cg-flota{ transform:none; }
  .cg-banda{ stroke-dasharray:none; }
  .cg-traza path{ stroke-dasharray:none; stroke-dashoffset:0; }
  .carga-capa{ transition:none; }
}


/* ---------------------------------------------------------
   21. Los iconos de sección, uno por uno

   Cada movimiento dice lo que dice su sección: el reloj avanza,
   las barras crecen, el coche rueda, el alfiler cae. Ninguno se
   mueve por adornar.

   Todos van colgados de .ic-vivo, que un observador pone cuando
   el icono entra en pantalla y quita cuando sale. Nueve
   animaciones corriendo en una página que nadie mira es batería
   tirada.

   Y ninguno depende de su animación para entenderse: con
   "menos movimiento" quedan quietos y siguen diciendo lo mismo.
   --------------------------------------------------------- */

/* --- calendario: el día barato salta de casilla --- */
.ic-vivo .ic-dia{ animation:ic-saltar 4.2s steps(1,end) infinite; }
@keyframes ic-saltar{
  0%,24%  { transform:translate(0,0) }
  25%,49% { transform:translate(12.5px,0) }
  50%,74% { transform:translate(6.25px,5px) }
  75%,100%{ transform:translate(-3.5px,5px) }
}

/* --- escudo: la palomita se dibuja --- */
.ic-vivo .ic-palomita{
  stroke-dasharray:16; animation:ic-trazar 3.4s ease-in-out infinite;
}
@keyframes ic-trazar{
  0%      { stroke-dashoffset:16 }
  35%,80% { stroke-dashoffset:0 }
  100%    { stroke-dashoffset:-16 }
}

/* --- reloj: la manecilla larga da la vuelta --- */
.ic-vivo .ic-minuto{ animation:ic-girar 3s linear infinite; }
.ic-vivo .ic-hora{ animation:ic-girar 36s linear infinite; }
.ic-minuto, .ic-hora{ transform-box:view-box; transform-origin:16px 16.5px; }
@keyframes ic-girar{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

/* --- rutas: el alfiler cae y la onda se abre --- */
.ic-cae, .ic-onda{ transform-box:view-box; transform-origin:16px 24px; }
.ic-vivo .ic-cae{ animation:ic-caer 2.8s cubic-bezier(.3,.9,.4,1) infinite; }
@keyframes ic-caer{
  0%      { transform:translateY(-9px); opacity:0 }
  18%     { transform:translateY(0); opacity:1 }
  26%     { transform:translateY(-2.5px) }
  34%,100%{ transform:translateY(0); opacity:1 }
}
.ic-vivo .ic-onda{ animation:ic-onda 2.8s ease-out infinite; }
@keyframes ic-onda{
  0%,16%  { transform:scale(.3); opacity:0 }
  22%     { opacity:.9 }
  48%,100%{ transform:scale(1.25); opacity:0 }
}

/* --- coche: las llantas giran y el piso corre --- */
.ic-llanta--a{ transform-box:view-box; transform-origin:10.3px 20.8px; }
.ic-llanta--b{ transform-box:view-box; transform-origin:21.7px 20.8px; }
.ic-vivo .ic-llanta{ animation:ic-girar 1.4s linear infinite; }
.ic-vivo .ic-piso{ animation:ic-piso 1.1s linear infinite; }
@keyframes ic-piso{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-9 } }

/* --- barras: crecen, y la de en medio se queda más baja --- */
.ic-barra{ transform-box:view-box; transform-origin:center 28px; }
.ic-vivo .ic-barra{ animation:ic-crecer 3.2s cubic-bezier(.3,.8,.35,1) infinite; }
.ic-vivo .ic-barra--b{ animation-delay:.14s; }
.ic-vivo .ic-barra--c{ animation-delay:.28s; }
@keyframes ic-crecer{
  0%      { transform:scaleY(.08) }
  30%,78% { transform:scaleY(1) }
  100%    { transform:scaleY(.08) }
}

/* --- preguntas: los tres puntos de quien escribe --- */
.ic-punto{ transform-box:view-box; }
.ic-vivo .ic-punto{ animation:ic-rebotar 1.35s ease-in-out infinite; }
.ic-vivo .ic-punto--b{ animation-delay:.16s; }
.ic-vivo .ic-punto--c{ animation-delay:.32s; }
@keyframes ic-rebotar{
  0%,60%,100%{ transform:translateY(0); opacity:.55 }
  28%        { transform:translateY(-3.4px); opacity:1 }
}

/* --- casa: se dibuja y se le prende la ventana --- */
.ic-vivo .ic-traza{ stroke-dasharray:95; animation:ic-construir 4s ease-in-out infinite; }
.ic-vivo .ic-traza--b{ animation-delay:.3s; }
@keyframes ic-construir{
  0%      { stroke-dashoffset:95 }
  40%,82% { stroke-dashoffset:0 }
  100%    { stroke-dashoffset:-95 }
}
.ic-vivo .ic-luz{ animation:ic-prender 4s ease-in-out infinite; }
@keyframes ic-prender{ 0%,45%{ opacity:0 } 58%,80%{ opacity:1 } 92%,100%{ opacity:0 } }

/* --- pasos: se encienden en orden y el hilo avanza --- */
.ic-vivo .ic-hilo{ animation:ic-hilo 3.6s ease-in-out infinite; }
@keyframes ic-hilo{
  0%      { stroke-dashoffset:20 }
  45%,82% { stroke-dashoffset:0 }
  100%    { stroke-dashoffset:20 }
}
.ic-vivo .ic-paso{ animation:ic-encender 3.6s ease-in-out infinite; }
.ic-vivo .ic-paso--b{ animation-delay:.5s; }
.ic-vivo .ic-paso--c{ animation-delay:1s; }
@keyframes ic-encender{
  0%,8%   { fill:transparent }
  22%,82% { fill:var(--estela) }
  95%,100%{ fill:transparent }
}

/* --- conversación: se turnan, como en una plática --- */
.ic-globo{ transform-box:view-box; transform-origin:16px 16px; }
.ic-vivo .ic-globo--a{ animation:ic-turno 3.2s ease-in-out infinite; }
.ic-vivo .ic-globo--b{ animation:ic-turno 3.2s ease-in-out 1.6s infinite; }
@keyframes ic-turno{
  0%,100% { opacity:.45; transform:scale(.97) }
  18%,42% { opacity:1;   transform:scale(1) }
  60%     { opacity:.45; transform:scale(.97) }
}

@media (prefers-reduced-motion: reduce){
  .sec-ico *{ animation:none !important; }
  .ic-onda{ opacity:0; }
  .ic-luz{ opacity:1; }
  .ic-paso{ fill:var(--estela); }
  .ic-traza, .ic-palomita, .ic-hilo{ stroke-dasharray:none; stroke-dashoffset:0; }
  .ic-barra{ transform:none; }
}

/* ---------------------------------------------------------
   22. La portada en dos columnas y el volante de oferta

   El titular solo ocupa 15ch, así que en pantalla ancha
   sobraba medio hero vacío con un avioncito perdido en medio.
   Ahora ese lado carga un volante con la ruta más barata del
   momento: en el mismo espacio, en vez de un adorno, va un
   precio. Es lo único de un hero que de verdad detiene a
   alguien.

   Debajo de 940px el volante pasa abajo del titular y se
   estira, porque en vertical una columna de 320px al lado de
   un h1 no cabe sin apretar los dos.
   --------------------------------------------------------- */
.portada__arriba{
  display:grid;
  grid-template-columns: minmax(0,1fr) clamp(286px, 26vw, 344px);
  gap:clamp(26px, 3.6vw, 56px);
  align-items:start;
}
.portada__dicho{ min-width:0; }
.portada__dicho h1{ margin:0; }
.portada__dicho .portada__texto{ margin-top:clamp(14px, 1.8vw, 20px); }

/* --- el volante --- */
.volante{
  position:relative; overflow:hidden;
  padding:18px 20px 17px;
  border:1px solid var(--tinta); border-radius:var(--r-lg, 8px);
  background:var(--papel);
}
/* la franja de arriba es lo único de color: marca que esto es
   una oferta sin tener que escribir la palabra "oferta" */
.volante::before{
  content:''; position:absolute; inset:0 0 auto; height:4px;
  background:var(--estela);
}

/* La cola va detrás, grande y recortada por la caja: se lee como
   papel impreso y no como un icono pegado. Aquí sí se queda
   quieta — es fondo, no es el logotipo. */
.volante__avion{
  position:absolute; top:4px; right:-44px;
  width:168px; height:168px; opacity:.09; pointer-events:none;
}
.volante__avion .cl-todo{ animation:none; transform:none; }

.volante__rotulo{
  position:relative; margin:5px 0 12px;
  font-size:.6875rem; font-weight:650; letter-spacing:.09em;
  text-transform:uppercase; color:var(--estela);
}
.volante__ruta{
  position:relative; margin:0;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.015em;
  line-height:1.35; color:var(--tinta);
}
.volante__fecha{
  position:relative; margin:4px 0 0;
  font-size:.8125rem; color:var(--humo);
}

.volante__precio{
  position:relative; display:flex; align-items:baseline; gap:9px;
  margin:16px 0 0;
}
.volante__hoy{
  font-size:clamp(1.75rem, 2.6vw, 2.125rem); font-weight:600;
  letter-spacing:-.03em; line-height:1; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.volante__antes{
  font-size:.9375rem; color:var(--niebla);
  text-decoration:line-through; font-variant-numeric:tabular-nums;
}
.volante__ahorro{
  position:relative; margin:10px 0 0;
  font-size:.75rem; font-weight:550; line-height:1.4; color:var(--estela);
}
.volante__ahorro:empty{ display:none; }

.volante .btn{ position:relative; margin-top:16px; }
.volante__nota{
  position:relative; margin:12px 0 0;
  font-size:.6875rem; line-height:1.5; color:var(--niebla);
}

@media (max-width: 940px){
  .portada__arriba{ grid-template-columns:1fr; gap:28px; }
  .volante{ max-width:420px; }
}

/* Las tres aerolíneas, bajo el subtítulo del hero */
.portada__aero{ margin-top:clamp(26px, 3.4vw, 40px); }
.portada__aero-rotulo{
  margin:0 0 12px;
  font-size:.6875rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--niebla);
}
.portada__aero-marcas{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.portada__aero-marcas .aero__logo{ display:block; }
@media (max-width: 940px){
  .portada__aero{ margin-top:24px; }
  .portada__aero-marcas{ gap:20px; }
}

/* El aviso de identificación, arriba del formulario de pasajeros */
.nota-ident{
  display:flex; gap:12px; align-items:flex-start;
  margin:0 0 22px; padding:14px 16px;
  border:1px solid var(--linea-f); border-radius:var(--r-md);
  background:var(--velo);
}
.nota-ident__ico{ flex:0 0 auto; width:20px; height:20px; color:var(--tinta); margin-top:1px; }
.nota-ident__ico svg{ width:100%; height:100%; }
.nota-ident p{ margin:0; font-size:.875rem; line-height:1.55; color:var(--humo); }

/* Los campos de facturación, dentro del bloque de extras */
.factura{ margin-top:20px; padding-top:20px; border-top:1px solid var(--linea); }
.factura__nota{
  margin:16px 0 0; font-size:.75rem; line-height:1.55; color:var(--niebla);
}

/* ---------------------------------------------------------
   23. Ritmo entre secciones

   El sitio entero era papel blanco con una línea de 1px entre
   secciones, y al bajar se leía como una sola mancha: no sabías
   dónde terminaba una cosa y empezaba otra.

   Tres recursos, ninguno nuevo en la paleta:
     · bandas alternadas de papel y velo
     · un rótulo chico que dice de qué va la sección
     · el cierre en negro macizo, que además remata la página

   Nada de sombras ni colores extra. El naranja sigue
   apareciendo una vez por sección, en la rayita del rótulo.
   --------------------------------------------------------- */
.seccion--velo{ background:var(--velo); }

/* Con el cambio de fondo la línea sobra: dos separadores
   haciendo el mismo trabajo se ven como un error. */
.seccion--velo + .seccion,
.seccion + .seccion--velo,
.seccion + .seccion--tinta{ border-top:none; }

/* --- el rótulo de sección --- */
.rotulo{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
  font-size:.6875rem; font-weight:650; letter-spacing:.12em;
  text-transform:uppercase; color:var(--niebla);
}
.rotulo::before{
  content:''; width:18px; height:2px; background:var(--estela); flex:0 0 auto;
}
/* Cuando la sección ya trae icono, el rótulo va debajo de él */
.sec-ico + .rotulo{ margin-top:-4px; }

/* --- el cierre, en negro --- */
.seccion--tinta{ background:var(--tinta); color:var(--papel); }
.seccion--tinta h2{ color:var(--papel); }
.seccion--tinta .sutil,
.seccion--tinta .dato{ color:#9A9AA4; }
.seccion--tinta .rotulo{ color:#86868F; }
.seccion--tinta .suscribir input{
  background:transparent; color:var(--papel);
  border-color:#3A3A41;
}
.seccion--tinta .suscribir input::placeholder{ color:#6E6E78; }
.seccion--tinta .suscribir input:focus{ border-color:var(--estela); }
.seccion--tinta .suscribir button{ background:var(--papel); color:var(--tinta); }
.seccion--tinta .suscribir button:hover{ background:#E5E5E9; }
.seccion--tinta .redes-linea a{ color:var(--papel); }
.seccion--tinta .redes-linea a:hover{ color:var(--estela); }

/* El reloj del apartado, arriba del resumen */
.apartado{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 18px; padding:10px 12px;
  border:1px solid var(--linea-f); border-radius:var(--r-md);
  background:var(--velo);
}
.apartado__texto{ font-size:.75rem; color:var(--humo); }
.apartado__reloj{
  font-size:.9375rem; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em; color:var(--tinta);
}
/* Los últimos dos minutos se pintan, pero sin parpadeos ni
   rojos de alarma: no se pierde nada al vencerse. */
.apartado--poco{ border-color:var(--estela); background:var(--estela-10); }
.apartado--poco .apartado__texto,
.apartado--poco .apartado__reloj{ color:var(--estela); }

/* Preferencia de asiento */
.asiento{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:16px; }
.asiento__nota{ margin:0; font-size:.8125rem; line-height:1.6; color:var(--humo); max-width:70ch; }
@media (max-width:620px){ .asiento{ grid-template-columns:1fr; } }