/* Hoja de estilos EXCLUSIVA de la portada.
 *
 * Las dos portadas están escritas a mano y no pasan por layout.py, así que sus
 * reglas propias —.hero, .box, .finder, .wait, .board, .strip, .moment— viven
 * aquí y en ningún otro sitio. En cada construcción, portadas_meta.py compone la
 * hoja final como ESTE archivo + la hoja compartida de layout.py, en ese orden:
 * lo compartido va al final y por tanto manda sobre las copias viejas que este
 * archivo pudiera tener.
 *
 * Se rescató de public/assets/css/ac.07eb37cfd5e4.css, que era el único sitio
 * donde existía: el <link> de la portada apuntaba a un hash fijo, nadie lo
 * regeneraba, y al cambiar ese enlace por el de una página interna el hero
 * desapareció entero — no había fuente de la que reconstruirlo.
 */

/* ══════════════════════════════════════════════════════════════
   TOKENS · variante ASUR, medida en las superficies planas de su
   web. El sistema manda sobre el hex:
     azul   = autoridad      amarillo = acción y estado activo
     turquesa = apoyo        crema    = fondo
   El amarillo NUNCA decora.  Ver _design/PALETA-DEFINITIVA.md
   ══════════════════════════════════════════════════════════════ */
:root{
  --navy-900:#01305F; --navy:#02458D; --navy-600:#2955A2;
  --blue-300:#53A2CF; --blue-100:#A9C8EC; --blue-50:#E7F0FA;
  --teal:#008C9B; --teal-700:#00707B;
  --amber:#FECF42; --amber-600:#F0BE22; --amber-ink:#3D2E00;
  --cream:#FDF8F5; --cream-2:#F5F0EF; --cream-3:#EBE4E0; --line:#E4DCD8;
  --ink:#16202B; --ink-2:#41505E; --ink-3:#7F7977;
  --ok:#12704A; --ok-bg:#E2F4EA; --warn:#8A5A00; --warn-bg:#FBF0D8;
  --f:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fx:'Archivo Expanded','Archivo',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --max:1260px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--navy-600);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--navy);color:#fff;padding:12px 18px}
.mono{font-family:var(--fm)}
.eyebrow{font-family:var(--fm);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--teal);display:block}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-bottom:26px}
.sec-h h2{font-family:var(--fx);font-size:clamp(1.45rem,3vw,2.05rem);font-weight:700;
  color:var(--navy);margin-top:11px}
.sec-h p{margin:11px 0 0;color:var(--ink-2);max-width:var(--medida);font-size:16.5px}
.more{font-weight:600;font-size:15.5px;color:var(--teal-700);display:inline-flex;align-items:center;
  gap:7px;white-space:nowrap;min-height:44px;padding:10px 0}
.more:hover{text-decoration:underline}
section{padding:58px 0}

/* ══════════ BARRA DE DATOS VIVOS ══════════ */
.top{background:var(--navy-900);color:#B9CFDD;font-size:13px}
.top .wrap{display:flex;align-items:center;gap:22px;height:38px;overflow-x:auto;scrollbar-width:none}
.top .wrap::-webkit-scrollbar{display:none}
.top b{color:#fff;font-weight:600}
.top .live{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none}
.top .live i{width:6px;height:6px;background:#3FCF8E;border-radius:50%;display:block;flex:none;
  box-shadow:0 0 0 0 rgba(63,207,142,.7);animation:pulso 2.6s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 7px rgba(63,207,142,0)}100%{box-shadow:0 0 0 0 rgba(63,207,142,0)}}
.top span{white-space:nowrap;flex:none}
.top .lang{margin-left:auto;display:flex;gap:2px;flex:none}
.top .lang a{color:#B9CFDD;font-weight:600;min-height:44px;min-width:44px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 12px}
.top .lang a[aria-current]{background:rgba(255,255,255,.14);color:#fff}

/* ══════════ CABECERA ══════════ */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd{display:flex;align-items:center;gap:16px;height:68px;min-width:0}
.mark{display:flex;align-items:center;gap:11px;flex:none;min-height:44px;color:var(--ink)}
.mark .sq{width:38px;height:38px;background:var(--navy);display:grid;place-items:center;flex:none}
.mark .nm{font-family:var(--fx);font-size:15px;font-weight:700;line-height:1.1;display:block;
  white-space:nowrap;letter-spacing:-.012em}
.mark .sub{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);
  text-transform:uppercase;margin-top:3px;display:block}
.main{display:none;list-style:none;margin:0;padding:0}
@media(min-width:1120px){
  .main{display:flex;min-width:0}
  .main a{display:flex;align-items:center;height:68px;padding:0 11px;font-size:14.5px;
    font-weight:500;color:var(--ink-2);white-space:nowrap;border-bottom:3px solid transparent}
  .main a:hover{color:var(--navy);border-bottom-color:var(--blue-300)}
  .main a[aria-current]{color:var(--navy);border-bottom-color:var(--amber);font-weight:600}
}
.hd .act{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f);
  font-weight:700;font-size:14.5px;padding:12px 19px;border:0;cursor:pointer;white-space:nowrap;
  min-height:44px;transition:background .15s ease}
.btn-a{background:var(--amber);color:var(--amber-ink)}   /* ACCIÓN */
.btn-a:hover{background:var(--amber-600)}
.btn-o{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-o:hover{background:var(--cream-2)}
.burger{display:grid;place-items:center;width:46px;height:46px;background:#fff;
  border:1px solid var(--line);cursor:pointer}
@media(min-width:1120px){.burger{display:none}}
/* Bajo 1120px la barra inferior fija ya ofrece el CTA: en la cabecera sobra
   y hacía desbordar el header 98px en 375px. */
@media(max-width:1119px){.hd .act .btn-o,.hd .act .btn-a{display:none}}
@media(max-width:560px){.mark .sub{display:none}.mark .nm{font-size:13.5px;white-space:normal;max-width:20ch}}

/* ══════════ HERO ══════════ */
/* El recorte vive en la FOTO, no en el hero. Estaba en .hero para contener la
   imagen de fondo, y de paso cortaba 19px del desplegable del buscador, que nace
   dentro del hero y tiene que poder salirse de el. Acotarlo a .ph contiene la
   foto igual y libera el desplegable. */
.hero{position:relative;background:var(--navy);color:#fff}
/* La foto arrancaba en el 44%. El bloque de migracion paso de tres cifras sueltas
   a tres columnas con su detalle, y en 600px la tercera —Terminal 4— caia a un
   segundo renglon y descuadraba los separadores. */
.hero .ph{position:absolute;inset:0 0 0 53%;overflow:hidden}
.hero .ph img{width:100%;height:100%;object-fit:cover}
.hero .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(94deg,var(--navy) 0%,rgba(2,69,141,.78) 14%,rgba(2,69,141,.14) 46%,rgba(2,69,141,0) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:52px;padding-bottom:48px}
.hero .col{max-width:720px}
.hero .eyebrow{color:var(--amber)}
.hero h1{font-family:var(--fx);font-size:clamp(2rem,4.6vw,3.15rem);font-weight:700;margin-top:15px;
  letter-spacing:-.024em}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lede{margin:16px 0 0;color:#C3D9E6;font-size:17px;max-width:46ch}
.box{margin-top:26px;background:rgba(1,48,95,.80);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16);padding:22px}
.finder label{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;margin-bottom:8px;color:var(--blue-100)}
.finder .row{display:flex}
.finder input{flex:1;min-width:0;height:56px;border:0;padding:0 18px;font-family:var(--f);
  font-size:16px;color:var(--ink);background:#fff}
.finder .go{width:56px;height:56px;background:var(--teal);color:#fff;border:0;display:grid;
  place-items:center;cursor:pointer}
.finder .go:hover{background:var(--teal-700)}
.finder .quick{display:flex;gap:20px;margin-top:12px;font-size:14.5px;font-weight:600}
.finder .quick a{color:#fff;display:inline-flex;align-items:center;gap:7px;min-height:44px}
.sep{height:1px;background:rgba(255,255,255,.16);margin:20px 0}
.wait .lb{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;margin:0 0 10px;color:var(--blue-100)}
/* Tres columnas fijas, no flex con envoltura: son SIEMPRE las tres terminales
   con vuelos comerciales, y si una se cae de linea el bloque deja de leerse como
   una comparacion entre ellas, que es justo para lo que existe. */
.wait .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.wait .c{padding-right:18px;border-right:1px solid rgba(169,200,236,.4);min-width:0}
.wait .c+.c{padding-left:18px}
.wait .c:last-child{border-right:0;padding-right:0}
@media(max-width:560px){
  .wait .cols{grid-template-columns:1fr;gap:14px}
  .wait .c{border-right:0;padding:0 0 14px;border-bottom:1px solid rgba(169,200,236,.25)}
  .wait .c+.c{padding-left:0}
  .wait .c:last-child{border-bottom:0;padding-bottom:0}
}
.wait .c:last-child{border-right:0;margin-right:0;padding-right:0}
.wait .t{font-size:12.5px;font-weight:500;color:var(--blue-100)}
.wait .v{font-family:var(--fm);font-size:23px;font-weight:600;line-height:1.1;margin-top:1px;color:#fff}
.wait .v.ok{color:#6EE7B7}
.wait .v small{font-size:12.5px;font-weight:500}
.wait .bar{display:flex;gap:2px;margin-top:7px}
.wait .bar i{width:15px;height:4px;background:currentColor;opacity:.26;display:block}
.wait .bar i.on{opacity:1}
.moment{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.moment .lb{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--blue-100)}
.moment .pills{display:flex;flex-wrap:wrap;gap:6px}
.moment .pills a{padding:11px 16px;border-radius:999px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;
  min-height:44px;display:inline-flex;align-items:center}
.moment .pills a[aria-current]{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.rule{height:4px;background:var(--amber)}

/* ══════════ FRANJA DE ACCESOS ══════════ */
.strip{background:#fff;border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(6,1fr);padding:0}
.strip a{padding:22px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;
  border-right:1px solid var(--line);text-align:center;color:var(--ink-2);min-height:44px}
.strip a:last-child{border-right:0}
.strip a:hover{background:var(--cream-2);color:var(--navy)}
.strip svg{color:var(--teal)}
.strip b{font-family:var(--fm);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600}
@media(max-width:820px){.strip .wrap{grid-template-columns:repeat(3,1fr)}
  .strip a:nth-child(3n){border-right:0}
  .strip a:nth-child(-n+3){border-bottom:1px solid var(--line)}}

/* ══════════ TABLERO DE VUELOS ══════════ */
.board-sec{background:var(--cream-2);border-bottom:1px solid var(--line)}
.board{background:#fff;border:1px solid var(--line)}
.board-top{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{appearance:none;background:transparent;border:0;font-family:var(--f);font-weight:700;
  font-size:15.5px;color:var(--ink-2);padding:15px 22px;cursor:pointer;min-height:52px;
  border-bottom:3px solid transparent;margin-bottom:-1px}
.tab[aria-selected=true]{color:var(--navy);border-bottom-color:var(--amber)}
.tab:not([aria-selected=true]):hover{background:var(--cream-2)}
.board-top .upd{margin-left:auto;display:flex;align-items:center;gap:7px;font-family:var(--fm);
  font-size:12px;color:var(--ink-3);padding:0 18px;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:15.5px}
thead th{text-align:left;font-family:var(--fm);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:12px 16px;
  background:var(--cream);border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:13px 16px;border-bottom:1px solid var(--cream-3);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--cream)}
.t-time{font-family:var(--fm);font-size:16.5px;font-weight:600;white-space:nowrap;line-height:1.2}
.t-time s{display:block;color:var(--ink-3);font-size:13.5px;text-decoration-thickness:1.5px}
.t-time .nw{display:block;color:var(--warn)}
.t-city{font-weight:600;display:block}
.t-air{color:var(--ink-3);font-size:13.5px;display:block;margin-top:1px}
.t-code{font-family:var(--fm);font-size:14px;color:var(--ink-2);font-weight:500;white-space:nowrap}
.chip-t{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 11px;background:var(--blue-50);color:var(--navy);font-family:var(--fm);font-weight:600;
  font-size:14px;border:1px solid #CFE0F2}
.chip-t:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-weight:600;
  font-size:12.5px;letter-spacing:.04em;padding:6px 11px;white-space:nowrap}
.st i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-ok{background:var(--ok-bg);color:var(--ok)}
.st-air{background:var(--blue-50);color:var(--navy)}
.st-del{background:var(--warn-bg);color:var(--warn)}
.board-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;
  background:var(--cream);border-top:1px solid var(--line);flex-wrap:wrap}
.board-foot small{color:var(--ink-3);font-size:13px}
.demo{background:var(--warn-bg);color:var(--warn);border:1px solid #EBD6A8;font-family:var(--fm);
  font-size:12px;font-weight:600;padding:6px 11px}
@media(max-width:760px){
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 13px;
    grid-template-areas:"t c m" "f s s";padding:15px 16px;border-bottom:1px solid var(--cream-3);
    align-items:start}
  tbody tr:last-child{border-bottom:0}
  tbody td{padding:0;border:0}
  tbody td:nth-child(1){grid-area:t}
  tbody td:nth-child(2){grid-area:c;min-width:0}
  tbody td:nth-child(3){grid-area:f;align-self:center}
  tbody td:nth-child(4){grid-area:m;justify-self:end}
  tbody td:nth-child(5){grid-area:s;justify-self:end;align-self:center}
  .t-city{overflow-wrap:break-word;line-height:1.25}
  .chip-t{min-width:40px;min-height:40px}
}

/* ══════════ CÓMO SALIR + CONVERSIÓN ══════════ */
.exit{background:var(--navy);color:#fff}
.exit .eyebrow{color:var(--amber)}
.exit h2{font-family:var(--fx);font-size:clamp(1.45rem,3vw,2.05rem);font-weight:700;color:#fff;
  margin-top:11px}
.exit .lede{color:#C3D9E6;max-width:var(--medida);margin:14px 0 0;font-size:17px}
.opts{display:grid;gap:1px;background:rgba(255,255,255,.18);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));margin:30px 0 0}
.opt{background:var(--navy);padding:22px;display:flex;flex-direction:column}
.opt h3{font-family:var(--f);font-size:18px;font-weight:700;color:#fff}
/* El título es un enlace y en reposo NO se distingue de uno: hereda color,
   tamaño y peso. Sólo se anuncia al pasar el ratón y al recibir el foco, que es
   donde tiene que hacerlo — un enlace invisible al teclado no existe. */
/* El área táctil sube a 44 px con padding, y el margen negativo lo devuelve a
   su sitio: en pantalla no se mueve un píxel, pero el dedo tiene dónde caer. Sin
   esto el enlace medía 20 px de alto, que en un móvil es una apuesta. */
.opt h3 a{color:inherit;text-decoration:none;display:inline-block;
  padding:12px 0;margin:-12px 0}
.opt h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.opt h3 a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.opt .p{font-size:14.5px;color:#B7D0E0;margin:9px 0 0;line-height:1.5;flex:1}
.opt .n{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.opt .n b{font-family:var(--fm);font-size:24px;font-weight:600;color:#fff;white-space:nowrap}
.opt .n span{font-size:13px;color:#A9C8EC}
.opt.hi{background:var(--cream)}
.opt.hi h3{color:var(--navy)}.opt.hi .p{color:var(--ink-2)}
.opt.hi .n{border-top-color:var(--line)}
.opt.hi .n b{color:var(--ink)}.opt.hi .n span{color:var(--ink-3)}
.opt .tag{align-self:flex-start;background:var(--amber);color:var(--amber-ink);font-family:var(--fm);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;
  margin-bottom:12px}
.bookbox{margin-top:30px;background:var(--cream);color:var(--ink)}
.bookbox-h{padding:22px 24px 0}
.bookbox-h h3{font-family:var(--fx);font-size:20px;font-weight:700;color:var(--navy)}
.bookbox-h p{margin:7px 0 0;color:var(--ink-2);font-size:15px}
form.bb{display:grid;gap:12px;padding:18px 24px 22px;grid-template-columns:1fr}
@media(min-width:800px){form.bb{grid-template-columns:1.4fr 1fr .85fr auto;align-items:end}}
.fld label{display:block;font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.fld select,.fld input{width:100%;height:54px;padding:0 14px;font-family:var(--f);font-size:16px;
  color:var(--ink);background:#fff;border:1.5px solid var(--line)}
.fld select:focus,.fld input:focus{border-color:var(--navy);outline:0;
  box-shadow:0 0 0 3px rgba(2,69,141,.16)}
form.bb .btn-a{height:54px;padding:0 26px;font-size:16px;width:100%}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;padding:0 24px 22px;color:var(--ink-2);font-size:14px}
.trust span{display:flex;align-items:center;gap:8px}
.trust svg{color:var(--ok);flex:none}

/* ══════════ REJILLAS ══════════ */
.grid{display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border:1px solid var(--line)}
.card{background:#fff;padding:22px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.card:hover{background:var(--cream)}
.card svg{color:var(--teal);margin-bottom:10px}
.card b{font-size:16.5px;font-weight:700;color:var(--navy)}
.card small{color:var(--ink-2);font-size:14.5px;line-height:1.45}
.card .kpi{margin-top:10px;font-family:var(--fm);font-size:12px;font-weight:600;color:var(--ink-3);
  letter-spacing:.03em}
@media(min-width:1000px){#servicios .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){#antes .grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1099px) and (min-width:620px){#antes .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:999px) and (min-width:620px){#servicios .grid{grid-template-columns:repeat(2,1fr)}}

/* ══════════ TERMINALES ══════════ */
.terms{display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:1px solid var(--line)}
.tcard{background:#fff;display:flex;flex-direction:column;color:var(--ink)}
.tcard:hover .th{background:var(--navy-600)}
.th{background:var(--navy);color:#fff;padding:15px 18px;display:flex;align-items:baseline;gap:10px;
  transition:background .15s ease}
.th b{font-family:var(--fm);font-size:25px;font-weight:600;line-height:1}
.th span{font-size:12.5px;color:var(--blue-100);font-weight:500}
.tb{padding:16px 18px 18px;flex:1}
.tb p{margin:0 0 12px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.airl{display:flex;flex-wrap:wrap;gap:5px}
.airl span{background:var(--cream-2);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--fm);font-size:11.5px;font-weight:500;padding:5px 9px}
.tcard.soon .th{background:var(--cream-3);color:var(--ink)}
.tcard.soon .th span{color:var(--ink-3)}
.tcard.soon:hover .th{background:var(--line)}

/* ══════════ ANTES DE VIAJAR ══════════ */
.before{background:var(--cream-2);border-block:1px solid var(--line)}
.before .card svg{color:var(--warn)}
.note{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--amber);padding:18px 20px;margin-top:22px}
.note svg{flex:none;color:var(--warn);margin-top:2px}
.note p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55}
.note b{color:var(--ink)}

/* ══════════ DESTINO ══════════ */
.dest{display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border:1px solid var(--line)}
.dcard{position:relative;isolation:isolate;min-height:290px;display:flex;flex-direction:column;
  justify-content:flex-end;color:#fff;padding:20px;overflow:hidden}
.dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .5s ease}
.dcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(1,26,48,.90) 0%,rgba(1,26,48,.34) 54%,rgba(1,26,48,.10) 100%)}
.dcard:hover img{transform:scale(1.05)}
.dcard b{font-family:var(--fx);font-size:21px;font-weight:700;line-height:1.12}
.dcard small{color:#D3E3EF;font-size:14px;margin-top:6px;line-height:1.4}
.dtime{position:absolute;top:0;left:0;background:rgba(1,26,48,.82);color:#fff;
  font-family:var(--fm);font-size:12px;font-weight:600;padding:7px 12px;
  border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
@media(min-width:900px){.dest{grid-template-columns:repeat(3,1fr)}}

/* ══════════ NOVEDADES ══════════ */
.news{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.news a{display:grid;gap:4px 18px;padding:18px 20px;background:#fff;color:var(--ink);min-height:44px}
@media(min-width:720px){.news a{grid-template-columns:130px 1fr;align-items:baseline}}
.news a:hover{background:var(--cream)}
.news time{font-family:var(--fm);color:var(--ink-3);font-size:13px;font-weight:500}
.news b{font-size:16.5px;font-weight:600;color:var(--navy)}
.news p{margin:5px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.45;grid-column:1/-1}
@media(min-width:720px){.news p{grid-column:2}}

/* ══════════ PIE ══════════ */
footer{background:var(--navy-900);color:#A9C0CE;padding:0 0 26px;font-size:15px}
.fbrand{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:34px 0 30px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:38px}
.fbrand .fm{display:flex;align-items:center;gap:12px;color:#fff}
.fbrand .fm .sq{width:42px;height:42px;background:#fff;display:grid;place-items:center;flex:none}
.fbrand .fm .nm{font-family:var(--fx);font-size:16px;font-weight:700;line-height:1.1;display:block;
  letter-spacing:-.012em;color:#fff}
.fbrand .fm .sub{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8FA9BC;margin-top:4px;display:block}
.social{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.social .lb{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8FA9BC;margin-right:6px;font-weight:600}
.social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);
  color:#C3D5E2;transition:background .15s ease,color .15s ease,border-color .15s ease}
.social a:hover{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.fgrid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14)}
footer h4{color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 14px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer li a{color:#A9C0CE;display:inline-block;padding:7px 0;min-height:32px}
footer li a:hover{color:#fff;text-decoration:underline}
.disc{margin-top:24px;display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);padding:17px 19px}
.disc p{margin:0;font-size:14px;line-height:1.55;color:#9BB0BF}
.disc b{color:#fff}
.fbot{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;margin-top:22px;
  font-family:var(--fm);font-size:12.5px;color:#7E95A6}

/* ══════════ BARRA MÓVIL ══════════ */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;
  background:var(--navy);color:#fff;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 22px rgba(1,26,48,.3)}
.mbar .mt{flex:1;min-width:0}
.mbar .mt b{display:block;font-size:14.5px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar .mt small{display:block;color:var(--blue-100);font-size:12.5px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar .btn-a{flex:none;padding:12px 18px}
@media(min-width:1120px){.mbar{display:none}}
@media(max-width:1119px){body{padding-bottom:78px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .dcard:hover img{transform:none}}

/* ── detalle y aviso de la fila de migración ──
   El bloque pasó de tres cifras fijas a una estimación calculada. Necesita dos
   piezas que antes no existían: de qué vuelos sale el número, y que es
   aproximado. Sin la segunda, un rango se lee como una medición. */
.wait .det{font-size:11.5px;line-height:1.35;color:#8FB3D8;margin-top:6px;max-width:24ch}
.wait-nota{font-size:11.5px;line-height:1.45;color:#8FB3D8;margin:14px 0 0;max-width:var(--medida)}
@media(max-width:640px){.wait .det{max-width:none}}

/* La antigüedad del cálculo, dentro del propio rótulo: en minúscula y sin
   espaciado, para que se lea como una nota y no compita con el título. */
.wait .lb-act{text-transform:none;letter-spacing:0;font-weight:400;color:#8FB3D8}

/* ==COMPARTIDO== hoja de layout.py, al final para que mande */

/* Tipografia servida desde el propio dominio.
 *
 * Antes venia de fonts.googleapis.com: dos conexiones nuevas (DNS + TCP + TLS)
 * y una hoja de estilos de otro origen que BLOQUEA el pintado. En movil con red
 * lenta eso retrasaba el primer pintado varios segundos, y cuando la letra
 * llegaba tarde el texto cambiaba de metrica y empujaba toda la pagina hacia
 * abajo: el salto de maquetacion que hundia la nota.
 *
 * Se arregla en tres piezas y las tres hacen falta:
 *   1. el archivo vive aqui, asi que viaja por la conexion ya abierta;
 *   2. una sola fuente variable cubre los pesos 400 a 700 (antes, cuatro archivos);
 *   3. el respaldo del sistema lleva las metricas de Archivo ajustadas, de modo
 *      que el intercambio no mueve NADA. Sin el punto 3 el salto seguiria ahi.
 *
 * Los porcentajes salen de comparar las tablas de la fuente con las del respaldo
 * (metodo de next/font); estan calculados, no estimados a ojo.
 */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/font/archivo-var.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/font/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/font/plexmono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/font/plexmono-600.woff2) format('woff2')}

/* Respaldos con las metricas de la fuente real. Mientras Archivo viaja, el texto
 * se pinta con la letra del sistema pero ocupando lo mismo; al llegar la buena,
 * cambia el dibujo y no la posicion. */
/* Estos porcentajes se MIDIERON renderizando la portada con la fuente real y sin
 * ella, y buscando el valor que deja la pagina identica al pixel (mismo top de
 * .box, mismo alto de h1, mismo alto de documento). No salen de la tabla OS/2:
 * el xAvgCharWidth de una fuente variable se publica para su peso por defecto
 * —600 en Archivo— y el sitio escribe en 400, asi que el calculo teorico daba
 * 119.62% y desplazaba la pagina. Se mide, no se deduce. */
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:102%;ascent-override:86.08%;descent-override:20.59%;line-gap-override:0%}
@font-face{font-family:'Archivo Fallback Robo';src:local('Roboto');
  size-adjust:104%;ascent-override:84.42%;descent-override:20.19%;line-gap-override:0%}
/* El ajuste de una monoespaciada se calcula contra OTRA monoespaciada. Aqui
 * estuvo 135.93%, que era el numero de Arial: inflaba las etiquetas un 36% y al
 * llegar Plex Mono encogian de golpe y empujaban la caja del buscador. Ese fue
 * el salto que midio Lighthouse (0.179, culpando a plexmono-*.woff2).
 * Plex Mono avanza 0.6000 em; Menlo 0.6021 y Courier New / Roboto Mono 0.6001:
 * ajustado asi, el respaldo ocupa lo mismo y el intercambio no mueve nada. */
@font-face{font-family:'Plex Mono Fallback';src:local('Menlo');
  size-adjust:99.66%;ascent-override:102.85%;descent-override:27.59%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Fallback 2';src:local('Roboto Mono'),local('Courier New');
  size-adjust:99.98%;ascent-override:102.52%;descent-override:27.50%;line-gap-override:0%}

:root{
  --navy-900:#01305F; --navy:#02458D; --navy-600:#2955A2;
  --blue-300:#53A2CF; --blue-100:#A9C8EC; --blue-50:#E7F0FA;
  --teal:#008C9B; --teal-700:#00707B;
  --amber:#FECF42; --amber-600:#F0BE22; --amber-ink:#3D2E00;
  --cream:#FDF8F5; --cream-2:#F5F0EF; --cream-3:#EBE4E0; --line:#E4DCD8;
  --ink:#16202B; --ink-2:#41505E; --ink-3:#7F7977;
  --ok:#12704A; --ok-bg:#E2F4EA; --warn:#8A5A00; --warn-bg:#FBF0D8;
  --stop:#A32D14; --stop-bg:#FBEBE6;
  --f:'Archivo','Archivo Fallback','Archivo Fallback Robo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* --fx pedia 'Archivo Expanded', que NO existe en Google Fonts: la peticion
     salia en las 456 paginas y nunca llegaba nada, asi que todos los titulos ya
     se venian dibujando con Archivo. Se nombra lo que de verdad se usa. */
  --fx:'Archivo','Archivo Fallback','Archivo Fallback Robo',sans-serif;
  --fm:'IBM Plex Mono','Plex Mono Fallback','Plex Mono Fallback 2',ui-monospace,'SF Mono',Menlo,monospace;
  --max:1260px;
  /* Medida del texto. La columna de contenido mide 910px (1260 - 32*2 de padding
     - 230 del indice - 56 del hueco). Con la regla clasica de 70ch el parrafo se
     cortaba a 661-727px y dejaba 250px muertos a la derecha, mientras la tabla de
     al lado si llegaba al borde: el texto se leia desalineado y la pagina crecia
     una linea de cada tres sin necesidad. Se fija en px y no en ch para que el
     parrafo, el callout (15.5px) y el paso numerado terminen en el MISMO borde
     derecho; con ch cada tamano de letra cortaba en un sitio distinto. */
  --medida:min(920px,100%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--navy-600);text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.018em;text-wrap:balance}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:820px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--navy);color:#fff;padding:12px 18px}
.eyebrow{font-family:var(--fm);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--teal);display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f);
  font-weight:700;font-size:14.5px;padding:12px 19px;border:0;cursor:pointer;white-space:nowrap;
  min-height:44px;transition:background .15s ease}
.btn-a{background:var(--amber);color:var(--amber-ink)}
.btn-a:hover{background:var(--amber-600)}
.btn-o{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-o:hover{background:var(--cream-2)}

/* ══ barra de datos vivos ══ */
.top{background:var(--navy-900);color:#B9CFDD;font-size:13px}
.top .wrap{display:flex;align-items:center;gap:22px;height:38px;overflow-x:auto;scrollbar-width:none}
.top .wrap::-webkit-scrollbar{display:none}
.top b{color:#fff;font-weight:600}
.top .live{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none}
.top .live i{width:6px;height:6px;background:#3FCF8E;border-radius:50%;display:block;flex:none;
  box-shadow:0 0 0 0 rgba(63,207,142,.7);animation:pulso 2.6s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 7px rgba(63,207,142,0)}100%{box-shadow:0 0 0 0 rgba(63,207,142,0)}}
.top span{white-space:nowrap;flex:none}
@media(max-width:640px){.top .op{display:none}}
@media(max-width:430px){
  /* A 375 px no caben hora, clima, cambio y conmutador: sumaban 402 px en una
     barra de 375 y el conmutador sticky se montaba encima del texto. Se queda
     la hora local, que es el dato por el que se mira esta barra, y el
     conmutador, que es un control. El clima tiene menos que decir. */
  .top .fx,.top .cl{display:none}
  .top .wrap{gap:14px}
}
/* La barra de datos vivos hace scroll horizontal en movil. Sin fijar el
   conmutador, EN/ES quedaba desplazado fuera de pantalla: un control que el
   visitante necesita no puede depender de que descubra que la barra rueda.
   Se ancla a la derecha y el fondo evita que el texto pase por debajo. */
.top .lang{margin-left:auto;display:flex;gap:2px;flex:none;
  position:sticky;right:0;background:var(--navy-900);
  box-shadow:-12px 0 12px -6px var(--navy-900)}
.top .lang a{color:#B9CFDD;font-weight:600;min-height:44px;min-width:44px;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;padding:0 11px}
.top .lang .bd{display:block;flex:none;border:1px solid rgba(255,255,255,.35);border-radius:1px}
/* A 380px las dos banderas mas su texto no caben junto al reloj. Se queda la
   bandera, que es el elemento que se reconoce de un vistazo, y el codigo pasa a
   ser el nombre accesible del enlace. */
@media(max-width:380px){.top .lang a span{position:absolute;left:-9999px}
  .top .lang a{padding:0 9px;min-width:40px}}
.top .lang a[aria-current]{background:rgba(255,255,255,.14);color:#fff}

/* ══ cabecera ══ */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd{display:flex;align-items:center;gap:16px;height:68px;min-width:0}
.mark{display:flex;align-items:center;gap:11px;flex:none;min-height:44px;color:var(--ink)}
.mark .sq{width:38px;height:38px;background:var(--navy);display:grid;place-items:center;flex:none}
.mark .nm{font-family:var(--fx);font-size:15px;font-weight:700;line-height:1.1;display:block;
  white-space:nowrap;letter-spacing:-.012em}
.mark .sub{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);
  text-transform:uppercase;margin-top:3px;display:block}
.main{display:none;list-style:none;margin:0;padding:0}
@media(min-width:1120px){
  .main{display:flex;min-width:0}
  .main a{display:flex;align-items:center;height:68px;padding:0 11px;font-size:14.5px;
    font-weight:500;color:var(--ink-2);white-space:nowrap;border-bottom:3px solid transparent}
  .main a:hover{color:var(--navy);border-bottom-color:var(--blue-300)}
  .main a[aria-current]{color:var(--navy);border-bottom-color:var(--amber);font-weight:600}
}
.hd .act{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.burger{display:grid;place-items:center;width:46px;height:46px;background:#fff;
  border:1px solid var(--line);cursor:pointer}
@media(min-width:1120px){.burger{display:none}}
@media(max-width:1119px){.hd .act .btn-o,.hd .act .btn-a{display:none}}
@media(max-width:560px){.mark .sub{display:none}.mark .nm{font-size:13.5px;white-space:normal;max-width:20ch}}

/* ── panel de navegación móvil ── */
.panel{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:68px;z-index:49;
  box-shadow:0 14px 26px -16px rgba(1,26,48,.4)}
.panel[hidden]{display:none}
.panel ul{list-style:none;margin:0;padding:0}
.panel li{border-bottom:1px solid var(--cream-3)}
.panel a{display:flex;align-items:center;min-height:56px;padding:0 32px;font-size:17px;
  font-weight:600;color:var(--ink)}
.panel a[aria-current]{color:var(--navy);box-shadow:inset 4px 0 0 var(--amber)}
.panel-act{display:flex;gap:10px;padding:16px 32px 20px;flex-wrap:wrap}
.panel-act .btn{flex:1;min-width:150px}
@media(min-width:1120px){.panel{display:none}}
.burger .ic-cerrar{display:none}
.burger[aria-expanded="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.burger[aria-expanded="true"] .ic-abrir{display:none}
.burger[aria-expanded="true"] .ic-cerrar{display:block}

/* ══ cabecera de página interior ══ */
.phead{background:var(--navy);color:#fff;padding:0 0 40px}
.crumbs{font-family:var(--fm);font-size:12px;letter-spacing:.06em;color:var(--blue-100);
  padding:10px 0 0;display:flex;gap:9px;flex-wrap:wrap;align-items:center;min-height:44px}
.crumbs a{color:var(--blue-100);display:inline-flex;align-items:center;min-height:32px;padding:6px 0}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{color:#6E93BC}
/* El h1 tenia max-width:20ch. El titulo mas largo del sitio son 38 caracteres
   —«Customs, cash and the red-green button»— asi que el tope partia en dos casi
   todos los titulares dejando 834px vacios a su derecha, dentro de un hero que
   mide 1196. El limite util del hero es el hero: a 3.5rem, 1196px son unos 35
   caracteres, que es medida de titular, no de parrafo. Se quita el tope y manda
   text-wrap:balance, que reparte solo cuando de verdad hacen falta dos lineas. */
.phead h1{font-family:var(--fx);font-size:clamp(1.85rem,4.2vw,2.9rem);font-weight:700;
  margin-top:20px;letter-spacing:-.024em}
/* El subtítulo del hero NO lleva tope: el h1 de al lado usa los 1196 px del
   contenedor y un tope de 1040 dejaba 156 px muertos a su derecha, empujando la
   última palabra a una segunda línea con la fila medio vacía. Es un subtítulo de
   una o dos líneas, no prosa: la medida de lectura aquí no aplica. */
.phead .lede{margin:16px 0 0;color:#C3D9E6;font-size:18px}
.phead .stamp{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);padding:9px 14px;
  font-family:var(--fm);font-size:12px;letter-spacing:.05em;color:#DCE9F2}
.phead .stamp svg{color:#6EE7B7;flex:none}
.rule{height:4px;background:var(--amber)}

/* ══ cuerpo ══ */
main{padding:0 0 60px}
/* min-width:0 en el grid y sus hijos: sin esto, una tabla ancha dentro de .scroll
   arrastra toda la columna y desborda el móvil 177px. */
.body{display:grid;gap:44px;padding-top:44px;min-width:0}
.body>*{min-width:0}
@media(min-width:1060px){.body{grid-template-columns:230px 1fr;gap:56px}}
.toc{align-self:start}
@media(min-width:1060px){.toc{position:sticky;top:88px}}
.toc h2{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-left:2px solid var(--line)}
.toc a{display:block;padding:9px 0 9px 14px;font-size:14.5px;color:var(--ink-2);min-height:44px}
.toc a::before{content:counter(t,decimal-leading-zero) " ";font-family:var(--fm);font-size:11px;
  color:var(--ink-3);margin-right:7px}
.toc li:hover{border-left-color:var(--teal)}
.toc a:hover{color:var(--navy)}
/* En las landings de venta el índice deja de ser una columna. Con tres columnas
   —índice 230 + texto + reserva 340— al texto le quedaban 524 px en una pantalla
   de 1280, y las tablas de esta página (13 destinos, comparativa de 5 columnas)
   tenían que desplazarse horizontalmente en un escritorio grande. Pasa a una
   tira horizontal encima: se conserva el índice y el texto gana 285 px. */
@media(min-width:1060px){
  .body:has(.venta){grid-template-columns:1fr;gap:0}
  .body:has(.venta) .toc{position:static;padding-bottom:26px;
    border-bottom:1px solid var(--line)}
  .body:has(.venta) .toc ol{display:flex;flex-wrap:wrap;gap:2px 26px}
  .body:has(.venta) .toc li{border-left:0;border-bottom:2px solid transparent}
  .body:has(.venta) .toc li:hover{border-left:0;border-bottom-color:var(--teal)}
  .body:has(.venta) .toc a{padding:6px 0;min-height:34px}
}
/* El aire entre secciones. Iba con el selector de HIJO directo, así que en las
   landings de venta —donde las secciones cuelgan de .col-a y no de .content— no
   se aplicaba ninguno: el h2 de cada sección salía pegado al recuadro o a la
   tabla de la anterior. Se añade .col-a, que es el otro sitio donde vive una
   sección; sigue sin ser un selector de descendencia para que un <section>
   anidado dentro de otra no herede el doble de separación. */
.content>section,.col-a>section{padding:0 0 46px}
/* Y un margen superior propio en el h2, que es lo que hace que la separación no
   dependa de que el elemento anterior tenga su padding: dentro de una misma
   sección, un h2 tras una tabla se pegaba igual. */
.content section>h2:not(:first-child){margin-top:34px}
.content h2{font-family:var(--fx);font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:700;
  color:var(--navy);scroll-margin-top:92px}
.content h3{font-family:var(--f);font-size:1.12rem;font-weight:700;margin-top:26px;color:var(--ink)}
.content p{margin:14px 0 0;max-width:var(--medida)}
.content ul,.content ol{margin:14px 0 0;padding-left:22px;max-width:var(--medida)}
.content li{margin-bottom:9px}
.content li::marker{color:var(--teal)}
.content a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* El texto importado usa a veces la URL entera como texto del enlace, y una URL
   no tiene por dónde partirse: a 375 px se sale de la pantalla y arrastra la
   página entera. `break-word` la parte cuando iba a desbordar; `anywhere` NO
   sirve aquí porque además reduce el ancho mínimo intrínseco a un carácter, y
   una celda estrecha encogía el enlace a 17 px de ancho por 126 de alto. */
.content a,.col-a a{overflow-wrap:break-word}
.content .mo,.content .card,.content .mo *,.content .card *{text-decoration:none}
.lead{font-size:17.5px;color:var(--ink-2)}
/* Página sin índice lateral: la columna crece de 910 a 1196 px y el encabezado
   la ocupa entera, pero el párrafo sigue topado en la medida de lectura. Igualar
   los dos bordes es la regla; ensanchar el párrafo a 1196 no, porque a esa
   anchura la línea pasa de 130 caracteres y se pierde el renglón al saltar. */
.body.solo .content{max-width:var(--medida)}
/* ── ficha de tour ────────────────────────────────────────────────────────────
   El precio manda en la ficha: es lo primero que se busca y lo que decide. Y
   cuando NO hay precio publicable, el hueco se dice con todas las letras en vez
   de disimularlo con un «desde» que el visitante no podria reservar. */
.tprecio{border:1px solid var(--line);border-left:4px solid var(--teal);background:#fff;
  padding:16px 20px;margin:4px 0 6px;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 10px}
.tprecio-k{font-family:var(--fm);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3)}
.tprecio-v{font-family:var(--fx);font-size:30px;font-weight:700;color:var(--navy-900);
  font-variant-numeric:tabular-nums;line-height:1}
.tprecio-v small{font-size:15px;font-weight:600;color:var(--ink-2)}
.tprecio-u{font-size:14.5px;color:var(--ink-2)}
.tprecio-n{flex-basis:100%;margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.tprecio-na{border-left-color:var(--warn);display:block}
.tprecio-na b{display:block;font-family:var(--fx);font-size:18px;color:var(--navy-900)}
.tprecio-na p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);
  max-width:var(--medida)}

/* ── ficha de tour: foto principal y tira ─────────────────────────────────── */
figure.t-hero{margin:18px 0 1px}
figure.t-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  background:var(--cream-2);border:1px solid var(--line)}
.t-tira{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-top:0;grid-template-columns:repeat(2,1fr);margin:0 0 36px}
@media(min-width:760px){.t-tira{grid-template-columns:repeat(4,1fr)}}
.t-tira img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 32%;
  display:block;background:var(--cream-2)}
/* El precio, en su propia caja y sin botón hasta que la reserva esté conectada. */
.tprecio-c{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}

/* Ficha técnica: tabla de dos columnas, clave a la izquierda y dato a la derecha.
   La clave no compite con el dato, que es lo que se viene a leer. */
.tbl.ficha td:first-child{width:38%;color:var(--ink-2);font-weight:400}
.tbl.ficha td:first-child b{font-weight:600;color:var(--ink)}
.tbl.ficha small{color:var(--ink-3)}
/* El código del aeropuerto es la respuesta que trae a la gente a esta página:
   se lee de un vistazo y en la tipografía monoespaciada, que es como se escribe
   en un boleto y en un plan de vuelo. */
b.cod{font-family:var(--fm);font-size:19px;font-weight:600;letter-spacing:.06em;
  color:var(--navy)}

.galeria{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin:18px 0 34px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.galeria{grid-template-columns:repeat(3,1fr)}}
/* 4/3 y no 3/2, y el recorte anclado arriba: el operador mezcla fotos apaisadas
   y verticales en la misma galeria, y con una celda mas apaisada el recorte
   centrado le cortaba la cabeza a la gente de las verticales. */
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 32%;
  display:block;background:var(--cream-2)}

/* La respuesta al «¿me da tiempo?» en una linea, con el semaforo a la vista. */
.encaje{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0;
  font-family:var(--fm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.encaje>span{display:inline-flex;align-items:center;gap:8px}
.encaje b{font-size:14px;color:var(--navy);letter-spacing:0}

/* ══ buscador de vuelos ══ */
/* Es un <form> GET de verdad, no un input decorativo: funciona sin JavaScript,
   el resultado tiene URL propia y se puede compartir o guardar. */
.buscador{margin-top:20px;max-width:var(--medida)}
.buscador label{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:9px}
.buscador .row{display:flex;min-width:0}
.buscador input{flex:1;min-width:0;font-family:var(--f);font-size:16.5px;padding:14px 16px;
  border:1px solid var(--line);border-right:0;background:#fff;color:var(--ink);min-height:52px}
.buscador input::placeholder{color:var(--ink-3)}
.buscador input:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;z-index:1}
.buscador .go{flex:none;width:56px;min-height:52px;border:0;background:var(--navy);color:#fff;
  display:grid;place-items:center;cursor:pointer}
.buscador .go:hover{background:var(--navy-600)}

/* ── desplegable del autocompletado ── */
.ac{position:absolute;top:100%;left:0;right:0;z-index:60;margin:0;padding:0;list-style:none;
  background:#fff;border:1px solid var(--line);border-top:0;max-height:340px;overflow-y:auto;
  box-shadow:0 14px 30px -12px rgba(22,32,43,.28)}
.ac li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:11px 15px;cursor:pointer;
  border-bottom:1px solid var(--cream-3);color:var(--ink)}
.ac li:last-child{border-bottom:0}
.ac li.on,.ac li:hover{background:var(--cream-2)}
/* Sólo el hijo DIRECTO es el código de vuelo. Sin el «>», la ciudad de la ruta
   —que también es un elemento resaltado— heredaba la tipografía monoespaciada y
   el grid-row:span 2 del código, y ocupaba una fila que no le tocaba. */
.ac li>b{font-family:var(--fm);font-size:13.5px;grid-row:span 2;align-self:center;
  color:var(--navy);min-width:66px}
.ac-c{font-size:15px}
.ac-c .ac-o{font-weight:700;color:var(--navy)}
.ac-c .ac-f{color:var(--ink-3);margin:0 2px}
/* Por debajo de 480px el desplegable mide lo que el campo —unos 265px— y la
   rejilla de dos columnas dejaba a la ruta 180px: «Mexico City → Cancun» partia
   en dos renglones y el resultado se leia como dos ciudades sueltas. En vertical
   el codigo pasa a ir en linea con la ruta y la ruta dispone del ancho entero. */
@media(max-width:480px){
  .ac li{display:block}
  .ac li>b{display:inline;grid-row:auto;min-width:0;margin-right:7px}
  .ac-c{display:inline;font-size:14.5px}
  .ac-m{display:block;margin-top:3px}
}
.ac-m{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}

/* La fila a la que llega el autocompletado. Es :target y no una clase puesta por
   JavaScript para que el resaltado funcione también al abrir el enlace pegado en
   un mensaje, sin que haga falta que el guion llegue a ejecutarse. */
.brd tr:target{background:#FFF7E0;box-shadow:inset 4px 0 0 var(--amber)}
.brd tr:target td{scroll-margin-top:110px}

/* ── aviso de salida al sitio del proveedor ── */
.salida{position:fixed;inset:0;z-index:200;background:rgba(1,26,48,.72);
  display:grid;place-items:center;padding:22px;animation:sal-in .18s ease}
@keyframes sal-in{from{opacity:0}to{opacity:1}}
.salida-caja{background:#fff;max-width:460px;width:100%;padding:28px 26px 24px;
  box-shadow:0 26px 60px -20px rgba(1,26,48,.6);animation:sal-up .22s ease}
@keyframes sal-up{from{transform:translateY(10px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.salida,.salida-caja{animation:none}}
.salida-eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);font-weight:600;display:block}
.salida-caja h2{font-family:var(--fx);font-size:1.3rem;color:var(--navy);margin-top:10px;
  line-height:1.2}
.salida-caja h2 b{display:block;font-family:var(--fm);font-size:1rem;color:var(--ink);
  margin-top:5px;word-break:break-all}
.salida-caja p{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
/* La espera es una camioneta recorriendo una carretera, no una barra. Sigue
   diciendo cuánto falta —avanza a ritmo constante y llega justo cuando se
   dispara la redirección— pero encaja con lo que se está reservando.

   La duración es la MISMA constante que el temporizador del guion: si divergen,
   la camioneta llega antes o después que la salida y el gesto deja de significar
   nada. */
.salida-ruta{position:relative;margin-top:20px;height:46px;background:var(--navy-900);
  border-radius:999px;overflow:hidden}
/* Línea discontinua de carretera, centrada bajo la camioneta. */
.salida-linea{position:absolute;left:14px;right:14px;top:50%;height:2px;margin-top:7px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0 12px,transparent 12px 24px)}
/* -45% deja las ruedas apoyadas EN la linea. El centro de las ruedas del icono
   esta a 16.5/24 de su alto; con 34px son 23,4px desde arriba, y la linea cae 8px
   por debajo del centro de la pista: la camioneta tiene que subir 15,4px, que en
   un elemento de 34 son ese 45%. Con -58% flotaba tres pixeles por encima. */
.salida-van{position:absolute;top:50%;left:10px;transform:translateY(-45%);color:#fff;
  animation:sal-van 2.6s cubic-bezier(.45,.05,.3,1) forwards}
.salida-van svg{width:34px;height:34px;display:block}
/* Los faros: un haz ámbar por delante, como en un coche visto de lado. */
.salida-faro{position:absolute;left:100%;top:50%;margin-top:-3px;width:30px;height:8px;
  background:linear-gradient(90deg,rgba(254,207,66,.85),rgba(254,207,66,0));
  clip-path:polygon(0 32%,100% 0,100% 100%,0 68%)}
/* Se anima `left` y no `transform: translateX(100%)`: en una transformación el
   100% es el ancho del PROPIO elemento —34px de camioneta— así que recorría un
   palmo y se quedaba parada mientras la espera seguía corriendo. */
@keyframes sal-van{from{left:10px}to{left:calc(100% - 44px)}}
@media(prefers-reduced-motion:reduce){
  .salida-van{left:auto;right:10px;animation:none}
  .salida-faro{display:none}
}
.salida-espera{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
.salida-act{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.salida-act .btn{flex:1;min-width:132px}

/* ── mapa del aeropuerto ── */
.mapa{width:100%;height:auto;display:block;background:var(--cream-2);
  border:1px solid var(--line)}
.m-apron{fill:#EAE2DC;stroke:none}
.m-term{fill:var(--navy);stroke:var(--navy-900);stroke-width:1.4}
.m-pista{stroke:#9A9086;stroke-width:7;fill:none;stroke-linecap:round}
.m-pista-t{font-family:var(--fm);font-size:11px;font-weight:600;fill:#6B6259}
.m-term-t{font-family:var(--fx);font-size:13px;font-weight:700;fill:var(--navy);text-anchor:middle}
.m-guia{stroke:var(--navy);stroke-width:1}
.m-gate{fill:var(--amber);stroke:#8A5A08;stroke-width:.8}
.m-cred{font-family:var(--f);font-size:10px;fill:var(--ink-3)}
.mapa-leyenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13px;
  color:var(--ink-2);align-items:center}
.mapa-leyenda span{display:inline-flex;align-items:center;gap:7px}
.mapa-leyenda i{width:14px;height:14px;flex:none;display:block}
.mapa-leyenda i.t{background:var(--navy)}
.mapa-leyenda i.g{background:var(--amber);border:1px solid #8A5A08;border-radius:50%}
.mapa-leyenda i.p{background:#9A9086;height:5px;width:22px}
.mapa-leyenda i.a{background:#EAE2DC}

/* ── recorrido de la llegada ── */
.ruta{display:grid;gap:1px;margin-top:22px;background:var(--line);
  border:1px solid var(--line);grid-template-columns:1fr}
@media(min-width:720px){.ruta{grid-template-columns:repeat(5,1fr)}}
.paso{background:#fff;padding:16px 15px 17px;display:flex;flex-direction:column;gap:5px;
  align-items:flex-start;min-width:0}
.paso-n{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;color:var(--ink-3);
  font-weight:600}
.paso svg{color:var(--navy)}
.paso b{font-size:15.5px;color:var(--ink);line-height:1.2}
.paso-t{font-family:var(--fm);font-size:13px;font-weight:600;color:var(--navy-600);
  font-variant-numeric:tabular-nums}
.paso small{font-size:13px;line-height:1.45;color:var(--ink-2)}
.paso-x{display:block;margin-top:3px}
.ruta-nota{display:inline-block;font-size:11.5px;line-height:1.35;color:var(--amber-ink);
  background:#FFF3D0;border:1px solid #F0DCB4;padding:3px 7px}
.ruta-pie{margin:12px 0 0;font-family:var(--fm);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;max-width:none}

/* ══ tablero de vuelos ══ */
/* El tablero lo pinta PHP en el servidor (src/lib/Vuelos.php); estas reglas son
   el contrato visual de ese HTML. Se mantiene <table> y no una lista de divs
   porque un tablero ES una tabla: cinco datos por vuelo que se comparan en
   vertical, y un lector de pantalla necesita el encabezado de columna para
   decir «Terminal 3» y no sólo «3». */
.brd-caja{margin-top:20px;border:1px solid var(--line);background:#fff}
.brd-barra{display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:var(--cream);
  font-family:var(--fm);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600}
.brd-barra i{width:7px;height:7px;border-radius:50%;flex:none}
.brd-barra i.viva{background:#3FCF8E;box-shadow:0 0 0 3px rgba(63,207,142,.22)}
.brd-barra i.pausa{background:var(--ink-3)}
.brd{width:100%;border-collapse:collapse;font-size:15px}
.brd th{text-align:left;font-family:var(--fm);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:10px 15px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.brd td{padding:11px 15px;border-bottom:1px solid var(--line-2,#EDE8DF);vertical-align:middle}
.brd tr:last-child td{border-bottom:0}
.brd .c-hora{font-variant-numeric:tabular-nums;white-space:nowrap}
.brd .c-hora s{color:var(--ink-3);text-decoration-thickness:1px;margin-right:5px}
.brd .c-vuelo b{font-family:var(--fm);font-size:13.5px;letter-spacing:.02em;display:block}
.brd .ael{display:block;color:var(--ink-3);font-size:13px;line-height:1.3}
.brd .iata{font-family:var(--fm);font-size:11.5px;color:var(--ink-3)}
.brd .tnum{font-family:var(--fx);font-weight:700;color:var(--navy);font-size:15.5px}
.brd .tsin{color:var(--ink-3)}
.brd .c-est{text-align:right;white-space:nowrap}
.chip{display:inline-block;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;padding:4px 9px;background:var(--cream);
  color:var(--ink-2);border:1px solid var(--line)}
.chip.ok{background:#E9F7F1;color:#0B6B47;border-color:#BFE6D5}
.chip.av{background:#FDF3E0;color:#8A5A08;border-color:#F0DCB4}
.chip.no{background:var(--stop-bg);color:var(--stop);border-color:#F0CDC2}
.brd-pie{margin:0;padding:13px 15px;border-top:1px solid var(--line);background:var(--cream);
  font-size:13.5px;color:var(--ink-2);line-height:1.5;max-width:none}
.chip-t.vacia{background:none;border:0;color:var(--ink-3);padding:0}
.brd-vacio{padding:22px 18px}
.brd-vacio p{margin:0;max-width:64ch}
.brd-vacio p+p{margin-top:10px;color:var(--ink-2);font-size:15px}
/* A 640px las cinco columnas no caben sin scroll lateral, y un tablero al que hay
   que arrastrar no se consulta. Cada vuelo pasa a ocupar dos renglones: hora y
   terminal fijas a los lados, vuelo y ruta apilados en medio. */
@media(max-width:640px){
  .brd thead{position:absolute;left:-9999px}
  .brd,.brd tbody,.brd tr,.brd td{display:block}
  .brd tr{display:grid;grid-template-columns:58px 1fr auto;
    grid-template-areas:"hora vuelo term" "hora ruta est";
    gap:1px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .brd td{padding:0;border:0}
  .brd .c-hora{grid-area:hora;font-weight:700}
  .brd .c-hora s{display:block;margin:0;font-size:13px}
  .brd .c-vuelo{grid-area:vuelo}
  .brd .c-ruta{grid-area:ruta;color:var(--ink-2);font-size:14px}
  .brd .c-term{grid-area:term;text-align:right}
  .brd .c-est{grid-area:est;text-align:right}
}

/* ══ componentes de contenido ══ */
.tbl{width:100%;border-collapse:collapse;margin-top:20px;font-size:15.5px;
  border:1px solid var(--line);background:#fff}
.tbl caption{caption-side:top;text-align:left;font-family:var(--fm);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
  padding-bottom:9px}
.tbl th{text-align:left;font-family:var(--fm);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:12px 15px;
  background:var(--cream);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 15px;border-bottom:1px solid var(--cream-3);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
/* Un enlace que ocupa toda la celda es NAVEGACIÓN, no un enlace dentro de una
   frase: la excepción de WCAG para objetivos en línea no le aplica. Con el alto
   de línea se queda en 17 px, muy por debajo del mínimo. El relleno lo sube a 44
   y el margen negativo lo devuelve a su sitio, así que el objetivo crece sin que
   la tabla se mueva un píxel. Mismo patrón que las tarjetas de la portada. */
/* Un enlace que ocupa toda la celda, todo el párrafo o toda la viñeta es
   NAVEGACIÓN, no un enlace dentro de una frase: la excepción de WCAG para
   objetivos en línea no le aplica, y con el alto de línea se queda en 17 px.
   El área de pulsación se agranda con un pseudoelemento posicionado, NO con
   relleno más margen negativo: el margen negativo tira del elemento siguiente
   y acercaba el encabezado de debajo a 13 px del enlace, que es el defecto de
   «título pegado» que este mismo sitio tiene prohibido. Así el objetivo llega a
   44 px y la maquetación no se mueve ni un píxel. */
/* `:only-child` NO servía aquí: en CSS cuenta ELEMENTOS, no nodos de texto, así
   que «<p>…frase larga… <a>Documentos de entrada →</a></p>» también encajaba y
   el enlace se llevaba el margen negativo, acercando el encabezado de debajo a
   13 px. Quién es un control suelto lo decide rutas._marcar_enlaces, que sí
   distingue un <p> cuyo contenido ENTERO es el enlace, y lo marca con .mas. */
.tbl td>a:only-child,.tbl td>b>a:only-child,
.content a.mas,.col-a a.mas{display:inline-block;
  padding:13px 0;margin:-13px 0;min-height:44px;box-sizing:content-box}
/* Las pastillas y el índice en columnas ya llegan a 44 px por su cuenta. Sin
   esta excepción se les sumaba el relleno del control suelto y salían cajas de
   70 px con el texto pegado arriba y media caja vacía debajo. */
ul.rutas a.mas,ul.indice a.mas,.chips a.mas{padding:0 16px;margin:0;
  box-sizing:border-box}
ul.indice a.mas{padding:12px 0}
/* El margen negativo de arriba tira del encabezado que venga después, así que
   los encabezados del cuerpo llevan margen suficiente para absorberlo y seguir
   con sus 18 px de aire mínimo. Se sube aquí y no en cada regla suelta para que
   las dos condiciones —objetivo de 44 px y título despegado— se cumplan a la
   vez; corregir una y romper la otra fue exactamente lo que pasó. */
.content section>h3,.col-a section>h3{margin-top:36px}
.content section>h4,.col-a section>h4{margin-top:30px}
/* Los mismos encabezados dentro de una viñeta: el texto importado los mete ahí
   («<li><h3>Light clothing</h3>») y ahí la regla de la sección no llega. */
.content li>h3,.col-a li>h3,.content li>h4,.col-a li>h4{margin-top:30px}
.content li:first-child>h3,.col-a li:first-child>h3{margin-top:22px}
.tbl .num{font-family:var(--fm);font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto;margin-top:20px}
.scroll .tbl{margin-top:0;min-width:520px}

.callout{display:flex;gap:15px;align-items:flex-start;padding:18px 20px;margin-top:22px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal)}
.callout svg{flex:none;margin-top:2px;color:var(--teal)}
.callout p{margin:0;font-size:15.5px;color:var(--ink-2)}
.callout p+p{margin-top:9px}
.callout b{color:var(--ink)}
.callout.stop{background:var(--stop-bg);border-color:#EBC9BE;border-left-color:var(--stop)}
.callout.stop svg{color:var(--stop)}
.callout.warn{background:var(--warn-bg);border-color:#EBD6A8;border-left-color:var(--amber)}
.callout.warn svg{color:var(--warn)}
.callout.ok{background:var(--ok-bg);border-color:#BFE3CE;border-left-color:var(--ok)}
.callout.ok svg{color:var(--ok)}

.steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 22px 52px;margin:0;
  border-left:2px solid var(--line);margin-left:17px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-18px;top:-2px;width:34px;height:34px;
  background:var(--navy);color:#fff;font-family:var(--fm);font-size:14px;font-weight:600;
  display:grid;place-items:center}
.steps b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:5px}
.steps span{color:var(--ink-2);font-size:15.5px;display:block;max-width:var(--medida)}

.facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fact{background:#fff;padding:18px}
/* Etiqueta, cifra y descripción son <span>: sin display:block se pintaban en
   una sola línea y el margin-top no llegaba a aplicarse. */
.fact .k,.fact .v,.fact .d{display:block}
.fact .k{font-family:var(--fm);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.fact .v{font-family:var(--fm);font-size:23px;font-weight:600;color:var(--navy);margin-top:6px;
  line-height:1.15}
.fact .v small{font-size:13px;font-weight:500;color:var(--ink-3)}
.fact .d{font-size:13.5px;color:var(--ink-2);margin-top:5px;line-height:1.4}


/* == Lo que ya no opera ==
   Un dato retirado sigue siendo informacion: alguien busca "Interjet Cancun" y
   necesita que se le conteste. Se lista, pero tiene que leerse como retirado
   ANTES de leerse el nombre, o se confunde con la lista de lo que si vuela. */
.gone{margin-top:22px;border:1px solid var(--line);background:var(--cream-2)}
.gone>h3{font-family:var(--fm);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:14px 18px;margin:0;border-bottom:1px solid var(--line);font-weight:600}
.gone ul{list-style:none;margin:0;padding:0}
.gone li{padding:15px 18px;border-bottom:1px solid var(--line);display:grid;gap:5px}
.gone li:last-child{border-bottom:0}
.gone .nm{font-weight:700;color:var(--ink-2);font-size:16px}
.gone .nm s{text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:var(--ink-3)}
.gone .tag{display:inline-block;font-family:var(--fm);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;padding:3px 7px;border-radius:4px;margin-left:8px;
  vertical-align:2px;background:#EDE2DE;color:#7A3B2E}
.gone .tag.back{background:#DFEDE4;color:#1B5E33}
.gone p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.gone .now{font-size:14.5px;color:var(--ink);border-left:2px solid var(--teal);padding-left:11px}
.gone .now b{color:var(--navy)}
/* Listas en rejilla para inventarios largos (aerolineas, servicios, paises). */
/* Va dentro de .content a proposito. `.cols` es un nombre generico y la portada
   —que comparte hoja pero tiene su propio sistema— usa `.cols` para las columnas
   del bloque de tiempos de espera: sin acotar, este fondo claro se colaba en el
   hero azul y dejaba texto blanco sobre gris. Un componente de contenido no debe
   poder alcanzar al hero. */
.content .cols{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);grid-template-columns:1fr}
@media(min-width:560px){.content .cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.content .cols{grid-template-columns:repeat(3,1fr)}}
.content .cols li{background:#fff;padding:12px 15px;font-size:15.5px;color:var(--ink)}
/* Variante con logotipo. El hueco del logo mide siempre lo mismo aunque la
   compañía no tenga archivo, para que los nombres queden en columna. */
.content .cols-al li{display:flex;align-items:center;gap:12px;padding:11px 14px}
.content .cols-al .lg{flex:none;width:86px;display:flex;align-items:center;
  justify-content:flex-start}
.content .cols-al .lg .logo-al{max-width:86px;height:20px}
.content .cols-al .nb{min-width:0;overflow-wrap:anywhere}
/* Tira de logos dentro de una celda. Se envuelve: la celda de T4 lleva cinco y
   a 375 px no caben en una línea. */
.tira-lg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.tira-lg .tl-i{display:inline-flex;align-items:center;height:20px}
.tira-lg .tl-i .logo-al{height:18px;max-width:74px}
.tira-lg .tl-mas{font-family:var(--fm);font-size:12px;color:var(--ink-3)}


/* Enlace de continuacion: el que ocupa su propio parrafo ("ver la guia completa
   ->"). No es un enlace dentro de una frase, asi que la exencion de WCAG 2.5.8
   no le aplica y necesita altura propia. 17px de texto + 8 de padding = 25. */
a.mas{display:inline-block;padding-block:4px;min-height:24px}
/* En el cuerpo importado la regla de arriba la sustituye por 44 px. */

/* == Landing con reserva lateral ==
   Contenido a la izquierda y modulo de reserva a la derecha, pegado al scroll.
   En movil el modulo sube al principio: quien llega a una landing de renta ya
   viene decidido, y hacerle bajar tres pantallas para encontrar el formulario
   es tirar la conversion. */
.venta{display:grid;gap:36px;padding-top:20px;min-width:0}
.venta>*{min-width:0}
/* En movil el modulo de reserva sube por encima del indice. Quien entra a una
   landing de renta viene a ver precio; el indice de la pagina puede esperar.
   display:contents disuelve .venta en el grid de .body, y asi .col-b puede
   ordenarse contra .toc, que de otro modo no son hermanos. */
@media(max-width:1059px){
  /* Hay un .content entre .body y .venta, asi que se disuelven los dos: sin
     disolver el intermedio, .col-b se ordena contra sus hermanos de .venta y
     no contra el indice, que vive un nivel mas arriba. */
  .content:has(.venta){display:contents}
  .venta{display:contents}
  .venta .col-b{order:-1;padding-top:0}
  .venta .col-a{order:1}
}
@media(min-width:1060px){
  .venta{grid-template-columns:1fr 340px;align-items:start;gap:46px}
  .venta .col-a{grid-column:1;grid-row:1}
  .venta .col-b{grid-column:2;grid-row:1;position:sticky;top:92px}
}
.reserva{border:1px solid var(--line);background:#fff;border-radius:2px;overflow:hidden}
.reserva .cab{background:var(--navy);color:#fff;padding:17px 20px}
.reserva .cab h3{font-family:var(--fx);font-size:17px;font-weight:700;margin:0;color:#fff}
.reserva .cab p{margin:6px 0 0;font-size:13.5px;color:#C3D9E6;line-height:1.45}
.reserva .cuerpo{padding:20px}
/* Hueco del widget del agregador. Se dimensiona como el widget real para que la
   pagina no salte de altura el dia que se inserte. */
.widget{min-height:430px;border:1px dashed var(--blue-300);border-radius:6px;
  background:var(--blue-50);display:grid;place-items:center;text-align:center;padding:26px}
.widget .et{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);font-weight:600}
.widget p{margin:9px 0 0;font-size:14px;color:var(--ink-2);max-width:30ch;line-height:1.5}

/* El widget del agregador se inyecta aqui. No se le impone alto —lo fija el
   propio modulo— pero si un ancho maximo: un script de terceros no tiene por
   que respetar la columna, y en movil desbordaria la pagina entera. */
/* overflow-x, NO overflow: con "hidden" a secas el contenedor recortaba tambien
   el alto y el buscador quedaba cortado por debajo del primer campo. */
.widget-vivo{min-width:0;overflow-x:hidden;overflow-y:visible}
/* El widget trae su propio marco y su propio titulo: no lleva caja alrededor.
   Envolverlo repetia el mensaje y robaba altura sobre el fold. */
.venta .col-b>.widget-vivo{margin:0}
/* height:auto NO se aplica al iframe: el widget declara su alto en el atributo
   height y con "auto" un iframe cae a los 150 px por defecto, que recorta el
   buscador. La regla sirve para imagenes, no para iframes con alto propio. */
.widget-vivo img,.widget-vivo svg{max-width:100%;height:auto}
.widget-vivo iframe{max-width:100%;width:100%}
.widget-vivo *{max-width:100%;box-sizing:border-box}
.reserva .pie{border-top:1px solid var(--line);padding:15px 20px;background:var(--cream-2)}
.reserva .pie ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.reserva .pie li{font-size:13.5px;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start}
.reserva .pie svg{color:var(--teal);flex:none;margin-top:2px}
.faq{border:1px solid var(--line);background:#fff;margin-top:22px}
.faq details{border-bottom:1px solid var(--cream-3)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:16px;color:var(--navy);
  min-height:44px;display:flex;align-items:center;gap:12px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--fm);font-size:19px;color:var(--teal);
  font-weight:600;flex:none;width:16px}
.faq details[open] summary::before{content:"–"}
.faq details[open] summary{background:var(--cream)}
.faq .a{padding:0 20px 18px 48px;color:var(--ink-2);font-size:15.5px}
.faq .a p{margin:0}
.faq .a p+p{margin-top:10px}

.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px;
  grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.card:hover{background:var(--cream)}
.card svg{color:var(--teal);margin-bottom:8px}
.card b{font-size:16px;font-weight:700;color:var(--navy)}
.card small{color:var(--ink-2);font-size:14.5px;line-height:1.45}
.card .kpi{margin-top:9px;font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--ink-3);
  letter-spacing:.03em}

/* ══ CTA contextual · uno por página ══ */
.cta{background:var(--navy);color:#fff;padding:26px;margin-top:34px;
  display:grid;gap:20px}
@media(min-width:760px){.cta{grid-template-columns:1fr auto;align-items:center}}
.cta h3{font-family:var(--fx);font-size:19px;font-weight:700;color:#fff}
.cta p{margin:9px 0 0;color:#C3D9E6;font-size:15.5px;max-width:var(--medida)}
.cta .price{font-family:var(--fm);font-size:14px;color:var(--amber);margin-top:11px;
  display:block;font-weight:600}
.cta .btn-a{padding:15px 26px;font-size:16px}

/* ══ guías por momento ══ */
/* Cuatro guías: en tres columnas dejaban un hueco gris visible. */
.moments{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px;
  grid-template-columns:1fr}
@media(min-width:640px){.moments{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.moments{grid-template-columns:repeat(4,1fr)}}
.mo{background:#fff;padding:20px;display:flex;flex-direction:column;gap:5px;color:var(--ink)}
.mo:hover{background:var(--cream)}
.mo svg{color:var(--teal);margin-bottom:8px}
.mo b{font-size:16.5px;font-weight:700;color:var(--navy)}
.mo small{color:var(--ink-2);font-size:14.5px;line-height:1.45}
.mo[aria-current]{background:var(--blue-50)}
.mo[aria-current] b::after{content:" ·  estás aquí";font-family:var(--fm);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:600}

/* ══ pie ══ */
footer{background:var(--navy-900);color:#A9C0CE;padding:0 0 26px;font-size:15px}
/* banda superior del pie: marca en blanco + redes */
.fbrand{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:34px 0 30px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:38px}
.fbrand .fm{display:flex;align-items:center;gap:12px;color:#fff}
.fbrand .fm .sq{width:42px;height:42px;background:#fff;display:grid;place-items:center;flex:none}
.fbrand .fm .nm{font-family:var(--fx);font-size:16px;font-weight:700;line-height:1.1;display:block;
  letter-spacing:-.012em;color:#fff}
.fbrand .fm .sub{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#8FA9BC;margin-top:4px;display:block}
.social{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.social .lb{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8FA9BC;margin-right:6px;font-weight:600}
.social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);
  color:#C3D5E2;transition:background .15s ease,color .15s ease,border-color .15s ease}
.social a:hover{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}

.fgrid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14)}
footer h4{color:#fff;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 14px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
footer li a{color:#A9C0CE;display:inline-block;padding:7px 0;min-height:32px}
footer li a:hover{color:#fff;text-decoration:underline}
.disc{margin-top:24px;display:flex;gap:14px;align-items:flex-start;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);padding:17px 19px}
.disc p{margin:0;font-size:14px;line-height:1.55;color:#9BB0BF}
.fbot{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;margin-top:22px;
  font-family:var(--fm);font-size:12.5px;color:#7E95A6}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;
  background:var(--navy);color:#fff;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 22px rgba(1,26,48,.3)}
.mbar .mt{flex:1;min-width:0}
.mbar .mt b{display:block;font-size:14.5px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar .mt small{display:block;color:var(--blue-100);font-size:12.5px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar .btn-a{flex:none;padding:12px 18px}
@media(min-width:1120px){.mbar{display:none}}
body:has(.rbox) .mbar{display:none}
body:has(.rbox){padding-bottom:0}
@media(max-width:1119px){body:has(.mbar){padding-bottom:78px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}}

/* ══════════ MÓDULO DE RESERVA (landings de venta) ══════════
   Es la pieza que decide el resultado de estas páginas, así que va en la columna
   pegajosa: en escritorio sigue al visitante mientras lee, y en móvil .venta se
   disuelve y .col-b sale ANTES del texto, no debajo de él. */
.rbox{border:1px solid var(--line);background:#fff;box-shadow:0 2px 14px rgba(1,48,95,.09)}
.rbox .cab{background:var(--navy-900);color:#fff;padding:18px 20px 17px}
.rbox .cab h2{font-family:var(--fx);font-size:19px;font-weight:700;margin:0;color:#fff;
  letter-spacing:-.01em}
.rbox .cab p{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#C3D9E6}
.rbox form{display:grid;gap:13px;padding:18px 20px}
.rbox .fld label{display:block;font-family:var(--fm);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.rbox .fld select,.rbox .fld input{width:100%;height:50px;padding:0 12px;font-family:var(--f);
  font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:2px}
.rbox .fld select:focus,.rbox .fld input:focus{border-color:var(--navy);outline:0;
  box-shadow:0 0 0 3px rgba(2,69,141,.16)}
.rbox .dos{display:grid;gap:13px;grid-template-columns:1.7fr 1fr}
.rbox button{height:52px;font-size:16.5px;width:100%}
/* La nota del hotel va DENTRO del formulario y no en la letra pequeña del pie:
   la duda que frena la reserva es «mi hotel no está en esta lista», y contestarla
   después del botón es contestarla a quien ya se fue. */
.rbox .hotel{display:flex;gap:9px;align-items:flex-start;background:var(--blue-50);
  border-left:3px solid var(--navy-600);padding:11px 13px;font-size:13.5px;line-height:1.5;
  color:var(--ink-2)}
.rbox .hotel svg{color:var(--navy-600);flex:none;margin-top:2px}
/* Ancla de precio. En una columna de 311px las dos mitades no caben en la misma
   línea, y con space-between la moneda quedaba pegada al «one way» de al lado:
   se leía «$35 USDone way». Va apilado, que además pone la cifra sola. */
.rbox .desde{padding:14px 20px 2px;margin:0;font-size:13.5px;color:var(--ink-2);
  line-height:1.4}
.rbox .desde .n{display:block;font-family:var(--fx);font-size:15px;font-weight:600;
  color:var(--ink-2);margin-bottom:2px}
.rbox .desde b{font-family:var(--fx);font-size:34px;font-weight:700;color:var(--navy);
  letter-spacing:-.025em;line-height:1}
.rbox .desde .u{font-family:var(--fm);font-size:13px;font-weight:600;color:var(--ink-3);
  margin-left:5px}
.rbox .desde .q{display:block;margin-top:5px}
.rbox .gar{border-top:1px solid var(--line);background:var(--cream-2);padding:14px 20px;
  list-style:none;margin:0;display:grid;gap:9px}
.rbox .gar li{font-size:13.5px;line-height:1.45;color:var(--ink-2);display:flex;gap:9px;
  align-items:flex-start}
.rbox .gar svg{color:var(--ok);flex:none;margin-top:2px}
/* Quién presta el servicio. Se dice, y se dice en su sitio: la línea del operador
   es información que el comprador tiene derecho a tener antes de pagar, no un
   reclamo publicitario que compita con el precio. */
.rbox .op{border-top:1px solid var(--line);padding:11px 20px;font-size:12.5px;
  color:var(--ink-3);line-height:1.5}
.rbox .op b{color:var(--ink-2);font-weight:600}

/* Pie de tabla: la procedencia del dato, no un adorno. Estaba en uso desde la
   tabla de precios y nunca tuvo regla, así que se leía igual que un párrafo. */
.tbl-pie{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink-3);
  max-width:var(--medida)}
/* Lista con palomita. El icono va en ::before y no como <svg> por elemento para
   que no haya treinta y dos copias del mismo trazo en el HTML de cada página. */
ul.marca{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px;
  max-width:var(--medida)}
ul.marca li{position:relative;padding-left:30px;font-size:16px;line-height:1.55;
  color:var(--ink-2)}
ul.marca li::before{content:"";position:absolute;left:0;top:4px;width:19px;height:19px;
  background:var(--ok-bg);border-radius:50%;}
ul.marca li::after{content:"";position:absolute;left:5.5px;top:8.5px;width:8px;height:4.5px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

/* Aviso de la portada sobre Uber. Rojo contenido: es información de seguridad,
   no una alarma; si grita, el visitante lo lee como publicidad del traslado. */
.aviso-uber{margin:18px 0 0;background:var(--stop-bg);
  border-left:3px solid var(--stop);padding:13px 16px;font-size:15px;line-height:1.55;
  color:#5C2413}
.aviso-uber a{color:var(--stop);text-decoration:underline;font-weight:600}

/* Pie de fuente dentro de un recuadro. Va en línea aparte y en menor tamaño:
   la afirmación es lo que se lee, la fuente es lo que se comprueba. */
.fte{display:block;margin-top:9px;font-size:13.5px}
.fte a{display:inline-block;padding:11px 0;min-height:44px;color:inherit;
  text-decoration:underline;opacity:.85}

/* ══════════ CITAS Y FUENTES (página de Uber) ══════════ */
.cita{margin:18px 0 0;max-width:var(--medida);background:var(--cream-2);
  border-left:3px solid var(--navy-600);padding:16px 20px 14px}
.cita p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink);font-style:italic}
.cita cite{display:block;margin-top:4px;font-style:normal;font-size:13.5px;color:var(--ink-3)}
/* El enlace de la fuente medía 17 px de alto: en un móvil eso no es un objetivo
   táctil, es una apuesta. El padding lo lleva a 44 sin mover la línea base. */
.cita cite a,.fuentes a{display:inline-block;padding:13px 0;min-height:44px;
  overflow-wrap:anywhere;max-width:100%;
  color:var(--navy-600);text-decoration:underline}
.fuentes{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px;
  max-width:var(--medida)}
.fuentes li{border-top:1px solid var(--cream-3);padding-top:2px}
.fuentes li:first-child{border-top:0}
.fuentes a{font-weight:600}
/* Sin nowrap: los títulos de fuente son largos («Cancun airport rules out opening
   space for Uber and other platforms») y a 375 px se salían de la pantalla. */
.fuentes .med{font-family:var(--fm);font-size:12.5px;color:var(--ink-3)}
.fuentes li{overflow-wrap:anywhere}

/* ══════════ PRUEBA SOCIAL ══════════ */
/* La calificación va en una pastilla, no en un párrafo: es un dato, y suelto
   entre texto se leía como una frase más de relleno. */
.nota-cal{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 6px;
  background:#fff;border:1px solid var(--line);padding:11px 16px;font-size:15px;
  color:var(--ink-2)}
.nota-cal b{color:var(--ink);font-weight:700}
.estrellas{color:var(--amber-600);letter-spacing:.04em;font-size:17px;line-height:1}
/* Dos columnas, no tres. Con tres, la tarjeta medía 230 px dentro de la columna
   de venta y el texto se rompía cada tres palabras: se leía como confeti, que es
   exactamente lo que hace que una reseña no se lea. */
.opiniones{display:grid;gap:16px;grid-template-columns:1fr;margin-top:20px;
  max-width:var(--medida)}
@media(min-width:660px){.opiniones{grid-template-columns:1fr 1fr}}
.op-c{position:relative;border:1px solid var(--line);background:#fff;padding:20px 22px 18px;
  display:flex;flex-direction:column;gap:12px}
/* Las comillas de apertura, dibujadas. Marcan que lo de dentro es voz ajena sin
   gastar una línea en decirlo. */
.op-c::before{content:"\201C";position:absolute;top:6px;right:16px;font-family:var(--fx);
  font-size:56px;line-height:1;color:var(--cream-3)}
.op-c .est{color:var(--amber-600);font-size:15px;letter-spacing:.04em;line-height:1}
.op-c blockquote{margin:0;font-size:16px;line-height:1.62;color:var(--ink);position:relative;
  z-index:1}
.op-c cite{font-style:normal;margin-top:auto;padding-top:12px;border-top:1px solid var(--cream-3);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px;
  color:var(--ink-3)}
.op-c cite b{color:var(--ink);font-weight:700;font-size:15px}
/* Fotos de clientes. Son lo más real que hay en esta sección —pasajeros de verdad
   con el letrero en la mano— así que dejan de ser tiras de 96 px al pie. */
.fotos{margin:22px 0 0;max-width:var(--medida)}
.fotos .tira{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.fotos img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border:1px solid var(--line);background:var(--cream-2)}
.fotos figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}

.foto-serv{margin:22px 0 0;width:100%;max-width:440px;height:auto;background:var(--cream-2);
  border:1px solid var(--line)}

/* Logo de aerolínea en la tabla. Alto fijo y ancho libre: los logos de aerolínea
   van de un cuadrado (AA) a una palabra muy larga (Aeroméxico), y forzarles un
   ancho común deformaría unos para encajar otros. */
/* Encabezado sólo para lectores de pantalla: la columna del logo no necesita
   título visible —el logo se ve— pero una tabla con una columna sin <th> deja
   a quien navega con lector sin saber qué hay en esa celda. */
.vo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo-al{display:inline-block;height:22px;width:auto;max-width:104px;object-fit:contain;
  vertical-align:middle}
.logo-al.ini{height:22px;min-width:34px;padding:0 7px;background:var(--cream-3);color:var(--ink-3);
  font-family:var(--fm);font-size:11.5px;font-weight:600;letter-spacing:.06em;line-height:22px;
  text-align:center;border-radius:2px}
.tbl td.c-logo{width:118px;padding-top:9px;padding-bottom:9px}

/* Salidas al resto de la sección. Pastillas y no lista: son doce, y en columna
   ocuparían media pantalla al final de una página de venta. */
ul.rutas{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  max-width:var(--medida)}
ul.rutas a{display:inline-flex;align-items:center;padding:0 16px;min-height:44px;
  line-height:1.35;background:#fff;border:1px solid var(--line);color:var(--ink);
  font-size:15px;text-decoration:none}
ul.rutas a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
ul.rutas a:hover{border-color:var(--navy);color:var(--navy)}

/* ══════════ FLOTA ══════════ */
.flota{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));margin-top:18px}
.veh{background:#fff;padding:18px;display:flex;flex-direction:column;gap:7px}
.veh img{width:100%;height:118px;object-fit:contain;background:var(--cream-2);margin-bottom:4px}
.veh .cap{font-family:var(--fm);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-700)}
.veh b{font-size:16px;font-weight:700;color:var(--navy);line-height:1.3}
.veh small{font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* ── blog ─────────────────────────────────────────────────────────────────────
   Rejilla de fichas para el indice y tipografia de articulo largo. El blog trae
   1.671.660 impresiones desde el sitio anterior y su texto es de otro editor:
   parrafos largos, tablas anchas y fotos de proporcion variable. Por eso la
   imagen va con aspect-ratio fijo y object-fit, y no con alto libre: una foto
   apaisada y otra vertical en la misma fila descuadraban la rejilla entera. */
.posts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:22px}
@media(min-width:660px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{background:#fff}
.post>a{display:flex;flex-direction:column;height:100%;color:var(--ink);
  text-decoration:none}
.post>a:hover{background:var(--cream)}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  background:var(--cream-2)}
/* El hueco entre la etiqueta de tema y el titular era de 7 px: el titular se leía
   pegado a la pastilla, que es el mismo defecto que Isaac señaló en las secciones.
   Se separa el titular y se deja el resto compacto. */
.post-t{padding:19px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.post-t .chip+h3{margin-top:12px}
.post-t h3{font-size:17px;line-height:1.3;font-weight:700;color:var(--navy);margin:0}
.post>a:hover .post-t h3{text-decoration:underline;text-underline-offset:2px}
.post-t p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0}
.post-m{font-family:var(--fm);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
.post-t .post-m{margin-top:auto;padding-top:8px}
.post .chip{align-self:flex-start}
@media(min-width:1000px){
  .post-d{grid-column:span 2}
  /* Rejilla y no flex: una imagen es un elemento reemplazado y conserva su
     proporción intrínseca aunque el contenedor le diga que se estire, así que
     con flex la tarjeta destacada quedaba con la foto a media altura y medio
     panel en blanco debajo. En rejilla la celda define el alto y object-fit
     recorta, que es lo que hace falta. */
  .post-d>a{display:grid;grid-template-columns:52% 1fr;align-items:stretch}
  .post-d img{width:100%;height:100%;aspect-ratio:auto;min-height:280px;
    object-fit:cover}
  .post-d .post-t{justify-content:center;padding:24px 26px}
  .post-d .post-t h3{font-size:22px;line-height:1.24}
  .post-d .post-t p{font-size:15.5px}
  /* En la destacada la firma va pegada al texto, no empujada al fondo de la
     tarjeta: la fila mide lo que mide la tarjeta más alta de su lado, y con
     `margin-top:auto` quedaba un vacío de media tarjeta entre el resumen y la
     fecha. Se lee como un fallo de maquetación, no como aire. */
  .post-d .post-t .post-m{margin-top:6px}
}
/* Índice largo en columnas. Con doscientas entradas de longitud dispar, una
   lista de pastillas que envuelve deja escalones y huecos y no se lee como un
   índice. En columnas cada título ocupa su renglón, el ojo baja recto y caben
   tres veces más entradas en la misma pantalla. */
ul.indice{list-style:none;margin:18px 0 0;padding:0;columns:1;column-gap:44px}
@media(min-width:640px){ul.indice{columns:2}}
@media(min-width:1040px){ul.indice{columns:2}}
ul.indice li{break-inside:avoid;margin:0;border-bottom:1px solid var(--cream-3)}
ul.indice a{display:block;padding:12px 0;min-height:44px;line-height:1.42;
  font-size:15.5px;color:var(--ink);text-decoration:none}
ul.indice a:hover{color:var(--navy);text-decoration:underline;
  text-underline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips .chip{padding:9px 13px;min-height:36px;line-height:18px;text-decoration:none;
  color:var(--ink-2)}
.chips .chip b{color:var(--navy);margin-left:5px}
.chips a.chip:hover{border-color:var(--navy);color:var(--navy)}

/* Cabecera del articulo: la meta antes de la foto, para que la primera linea
   que se lee diga quien firma y de cuando es. */
.content>.post-m,.col-a>.post-m{margin:2px 0 18px;display:flex;flex-wrap:wrap;
  gap:8px;align-items:center}
figure.port{margin:0 0 30px}
figure.port img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;background:var(--cream-2);border:1px solid var(--line)}
.content figure,.col-a figure{margin:24px 0}
.content figure img,.col-a figure img{max-width:100%;height:auto;display:block;
  border:1px solid var(--line)}
.content figcaption,.col-a figcaption{margin-top:9px;font-size:13.5px;
  line-height:1.5;color:var(--ink-3)}
/* Una imagen dentro de un parrafo del texto importado. */
.content section p img,.col-a section p img{max-width:100%;height:auto}
.content blockquote,.col-a blockquote{margin:22px 0;padding:2px 0 2px 20px;
  border-left:3px solid var(--blue-100);color:var(--ink-2)}
.content section ul,.col-a section ul,.content section ol,.col-a section ol{
  margin:14px 0;padding-left:22px;max-width:var(--medida)}
.content section li,.col-a section li{margin:7px 0;line-height:1.62}