/* ==========================================================================
   VueloRadar — hoja de estilos del sitio
   ==========================================================================
   Vivía en línea en base.html: unos 60 KB repetidos en CADA página (la
   portada pesaba 123 KB de HTML). Ahora es un estático con hash en el nombre
   (CompressedManifestStaticFilesStorage, ver DEPLOY-WEB.md): el navegador y el
   borde lo guardan una vez y cada página nueva solo trae su HTML. El hash
   cambia con el contenido, así que no hay caché vieja que purgar.

   Las url() de abajo son RELATIVAS a este archivo a propósito: el storage con
   manifiesto las reescribe a su nombre con hash al correr collectstatic, y así
   la fuente que precarga base.html y la que pide esta hoja son la misma URL.

   La dirección, en una línea: el sitio tiene que leerse como criterio con
   datos propios, no como un metabuscador. Tinta verde botella sobre blanco
   roto, el amarillo de la señalética de aeropuerto como único color saturado
   (la acción y el dato del día), una sola familia tipográfica y cinco
   tamaños. Nada de sombras, bordes finos ni degradados: las superficies se
   separan por un escalón de tono.                                          */

@font-face{font-family:'Bricolage Grotesque';src:url("fonts/bricolage-grotesque.014c5c931b53.woff2") format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap}

/* --- Tokens ------------------------------------------------------------
   Dos temas diseñados, no uno invertido. Los colores de veredicto son los
   mismos en significado en los dos: verde compra, ámbar duda, rojo espera. */
:root{
  --bg:#f7f7f5; --surface:#eceeea; --surface-2:#e1e5df;
  --ink:#0d2a1c; --muted:#47574d;
  --accent:#f6e016; --accent-ink:#0d2a1c;
  --field-dark:#0d2a1c; --field-dark-ink:#f7f7f5;
  --link:#0d2a1c;
  --good:#0b6b3a; --good-soft:#d6ecdc;
  --warn:#7a4f05; --warn-soft:#f6e8c8;
  --bad:#a32b23;  --bad-soft:#f6dedb;
  --linea:#c9d0ca;

  /* Cinco tamaños y ninguno más. La auditoría encontró diecisiete. */
  --t-display:clamp(2.5rem,1.25rem + 5.2vw,6rem);
  --t-head:clamp(1.75rem,1.2rem + 2.1vw,2.75rem);
  --t-lead:clamp(1.25rem,1.1rem + .55vw,1.5rem);
  --t-body:1.0625rem;
  --t-small:.875rem;

  --margen:clamp(1rem,.5rem + 2vw,2rem);
  --entre:clamp(5rem,3rem + 7vw,10rem);   /* entre secciones */
  --radio:4px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0a1510; --surface:#11211a; --surface-2:#182c22;
    --ink:#eaf1ec; --muted:#a9bbb0;
    --accent:#f6e016; --accent-ink:#0d2a1c;
    --field-dark:#eaf1ec; --field-dark-ink:#0a1510;
    --link:#eaf1ec;
    --good:#5fd394; --good-soft:#123d27;
    --warn:#ecb453; --warn-soft:#3a2a10;
    --bad:#ff8a7e;  --bad-soft:#401a17;
    --linea:#2b4236;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:color-mix(in srgb,var(--ink) 35%,transparent) transparent}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  font-size:var(--t-body);line-height:1.55;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:84rem;margin:0 auto;padding:0 var(--margen)}

/* --- Tipografía --------------------------------------------------------
   Una familia. El contraste lo hace la escala, no el cambio de letra. */
h1,h2,h3{font-weight:600;margin:0;text-wrap:balance}
h1{font-size:var(--t-display);line-height:.95;letter-spacing:-.04em}
h2{font-size:var(--t-head);line-height:1.02;letter-spacing:-.03em;margin:0 0 1.5rem}
h3{font-size:var(--t-lead);line-height:1.2;letter-spacing:-.015em;margin:0 0 .5rem}
p,li,dd{text-wrap:pretty}
p{margin:0 0 1rem}
strong,b{font-weight:600}
.lede{font-size:var(--t-lead);line-height:1.4;max-width:40rem;margin:1.25rem 0 0}
.muted,.dim{color:var(--muted)}
.small,.tiny{font-size:var(--t-small)}
.link,.prosa a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
  transition:text-decoration-color .2s ease}
.link:hover,.prosa a:hover{text-decoration-color:currentColor}
.prosa{max-width:42rem}          /* ~70 caracteres por línea a 17 px */
/* Las páginas de texto (cómo medimos, qué es, legales, buscar) ponen sus
   párrafos directo en <main>. Con el marco a 84 rem corrían a 150 caracteres;
   se quedan en la medida de lectura sin tocar sus plantillas. */
main.wrap>p,main.wrap>ul,main.wrap>ol,main.wrap>h2,main.wrap>h3,main.wrap>dl,
main.wrap>.card,main.wrap>form,main.wrap>section>p{max-width:44rem}
.prosa ul{padding-left:1.2rem}
.prosa li+li{margin-top:.4rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Cabecera ----------------------------------------------------------
   Una barra plana: marca, tres enlaces y la acción. Antes era un cristal
   esmerilado con un solo enlace; la mejor página del sitio, cuándo comprar,
   no tenía forma de encontrarse desde arriba.                            */
.cabecera .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.5rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:600;letter-spacing:-.02em;
  min-height:44px;font-size:var(--t-body)}
.brand img{width:1.5rem;height:1.5rem;border-radius:var(--radio);display:block}
.nav{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-small);font-weight:500;white-space:nowrap}
.nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:.25em}
.nav .btn{min-height:40px;padding:.5rem 1rem;gap:0}
@media (max-width:44rem){
  .nav{gap:1rem}
  .nav .solo-ancho{display:none}
}

/* --- Migas -------------------------------------------------------------
   Al final del contenido y no encima del título: arriba eran un rótulo
   pequeño pegado al h1, y la cabecera ya lleva a las secciones. Abajo
   cumplen su trabajo, que es dar la salida hacia arriba al terminar. */
.crumbs{display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center;
  font-size:var(--t-small);color:var(--muted);margin:3rem 0 0;padding:0;list-style:none}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;
  text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.crumbs li+li::before{content:'/';margin-right:.5rem}
/* Las legales conservan las migas arriba (su texto está fechado por
   VERSION_LEGAL y no se toca por diseño): ahí el título necesita su aire. */
main>.crumbs:first-child{margin:0 0 2rem}

/* --- Secciones ---------------------------------------------------------
   Una sección es una frase con su prueba: el enunciado a la izquierda y la
   evidencia (tabla, gráfico, lista) a la derecha. En el teléfono se apilan. */
.seccion{margin-top:var(--entre)}
.par{display:grid;gap:2rem 4rem;align-items:start}
.par>*,.hoy>*,.grupos>*{min-width:0}
@media (min-width:60rem){
  .par{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .par-iguales{grid-template-columns:1fr 1fr}
  /* El enunciado se queda quieto mientras su prueba pasa al lado. Es el
     único movimiento grande del sitio y no cuesta JS: sticky y nada más. */
  .fijo{position:sticky;top:2rem}
}
.campo{background:var(--surface);padding:clamp(1.25rem,.8rem + 2vw,3rem);border-radius:var(--radio)}
.campo-2{background:var(--surface-2)}
.campo-oscuro{background:var(--field-dark);color:var(--field-dark-ink)}
.campo-amarillo{background:var(--accent);color:var(--accent-ink)}
/* Un campo que llega al borde de la pantalla: rompe el marco a propósito. */
.a-sangre{margin-inline:calc(var(--margen) * -1);border-radius:0;
  padding-inline:var(--margen)}
@media (min-width:84rem){.a-sangre{margin-inline:calc((100vw - 84rem) / -2 - var(--margen));
  padding-inline:calc((100vw - 84rem) / 2 + var(--margen))}}

/* --- Botones -----------------------------------------------------------
   Planos, de un color, esquina de 4 px en todo el sitio. El amarillo es la
   acción; no se usa para nada más que la acción y el dato del día.       */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--ink);color:var(--bg);font:inherit;font-weight:600;font-size:var(--t-body);
  padding:.75rem 1.4rem;border-radius:var(--radio);border:0;cursor:pointer;min-height:48px;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),background-color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-claro{background:var(--bg);color:var(--ink)}
.btn:active,.fab:active,.lista-enlaces a:active,.compartir:active{transform:scale(.97);transition-duration:.1s}
.row{display:flex;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap}
.acciones{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:2rem}

/* --- Veredicto ---------------------------------------------------------
   El nivel lo dicen la palabra y el fondo juntos: nunca el color solo.  */
.v{display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--radio);
  padding:.2rem .55rem;font-size:var(--t-small);font-weight:600;white-space:nowrap;line-height:1.4}
.v-excelente{background:var(--good);color:var(--bg)}
.v-bueno{background:var(--good-soft);color:var(--good)}
.v-normal{background:var(--surface-2);color:var(--ink)}
.v-alto{background:var(--warn-soft);color:var(--warn)}
.v-caro{background:var(--bad-soft);color:var(--bad)}
.v-sin_datos{background:var(--surface-2);color:var(--muted)}

/* --- Cifras ------------------------------------------------------------*/
.cifra{font-size:var(--t-display);font-weight:600;letter-spacing:-.045em;line-height:.9;
  font-variant-numeric:tabular-nums;margin:0}
.cifras{display:grid;gap:1.5rem 2rem;margin:0;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.cifras div{margin:0;display:flex;flex-direction:column-reverse;gap:.35rem}
.cifras dt{font-size:var(--t-small);color:var(--muted)}
.cifras dd{margin:0;font-size:var(--t-head);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}

/* ======================================================================
   PORTADA
   ====================================================================== */
/* La frase partida por un marco: «¿Compras hoy … o esperas?» y en medio, en
   el sitio de una palabra, el dato de hoy. El marco es el producto
   trabajando, no una ilustración: la ruta más barata del día con su curva y
   su veredicto, renderizado en el servidor como todo lo demás.          */
.escenario{padding:clamp(0rem,-1rem + 3vw,2rem) 0 0}
.frase{font-size:var(--t-display);line-height:.95;letter-spacing:-.045em}
.frase span{display:block}
.frase span+span{text-align:right}
.escenario .marco{margin:1.5rem 0}
/* En el escritorio las dos mitades van a los bordes y el marco ocupa el 30%
   del centro. El tamaño de la letra sale del ancho disponible y no de la
   ventana: cada mitad («¿Compras hoy» mide unos 6,7 em) tiene que caber en
   el 35% que le queda a su lado, o la frase se mete debajo del marco. */
@media (min-width:60rem){
  .escenario-frase{display:grid;align-items:center;
    --ancho:min(100vw - 2 * var(--margen),80rem)}
  .frase,.escenario .marco{grid-area:1/1}
  /* Rejilla de tres columnas y no space-between: con space-between cada mitad
     iba a su borde, y como «¿Compras hoy» es más larga que «o esperas?» el
     hueco quedaba desparejo (unos 70 px a un lado y 170 al otro) y la frase
     se leía como dos piezas sueltas. Así las dos mitades abrazan el marco. */
  .frase{display:grid;grid-template-columns:1fr 30% 1fr;column-gap:1.5rem;align-items:center;
    font-size:calc(var(--ancho) * .047);padding-block:2rem}
  .frase span:first-child{grid-column:1;justify-self:end}
  .frase span+span{grid-column:3;justify-self:start;text-align:left}
  .escenario .marco{justify-self:center;width:30%;margin:0}
}
.subtitulo{font-size:var(--t-lead);line-height:1.35;max-width:38rem;margin:2.5rem 0 0;font-weight:500}

.marco{display:block;background:var(--accent);color:var(--accent-ink);border-radius:var(--radio);
  padding:1.25rem 1.4rem;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
a.marco:hover{transform:translateY(-3px)}
.marco-cab{display:block;font-size:var(--t-small);font-weight:500}
.marco-ruta{display:block;font-size:var(--t-lead);font-weight:600;letter-spacing:-.02em;margin-top:.75rem}
.marco-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:.25rem}
.marco-precio{font-size:var(--t-head);font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.marco svg{width:9rem;height:2.6rem;flex:none}
.marco polyline{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.marco circle{fill:currentColor}
.marco-pie{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:center;margin-top:1rem;font-size:var(--t-small)}
.marco .v{background:var(--accent-ink);color:var(--accent)}

/* Las ciudades: dos columnas de enlaces en vez de dos nubes de chips. */
.lista-enlaces{list-style:none;padding:0;margin:0;columns:2 9rem;column-gap:1.5rem}
.lista-enlaces li{break-inside:avoid}
.lista-enlaces a{display:flex;align-items:center;min-height:44px;font-weight:500;
  text-decoration:underline;text-underline-offset:.25em;
  text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);
  transition:text-decoration-color .2s ease,transform .2s ease}
.lista-enlaces a:hover{text-decoration-color:currentColor;transform:translateX(3px)}

/* Las cinco ciudades de las que hay foto verificada. */
.postales{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:3rem}
@media (min-width:40rem){.postales{grid-template-columns:repeat(2,1fr)}
  .postales li:first-child{grid-column:1/-1}}
@media (min-width:60rem){.postales{grid-template-columns:repeat(5,1fr)}
  .postales li:first-child{grid-column:auto}}
.postales{list-style:none;padding:0}
.postales a{display:block}
.postales img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;border-radius:var(--radio);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
@media (min-width:60rem){.postales img{aspect-ratio:4/5}}
.postales a:hover img{transform:scale(1.02)}
.postales span{display:block;margin-top:.5rem;font-weight:600}

/* --- Tabla de todas las rutas -------------------------------------------
   Eran 40 filas apiladas, cuatro pantallas de teléfono. Ahora son tres grupos
   (desde Lima, hacia Lima, entre provincias) en columnas en el escritorio y
   en dos columnas por grupo en el teléfono.                              */
.grupos{display:grid;gap:3rem 2.5rem}
@media (min-width:60rem){.grupos{grid-template-columns:repeat(3,1fr)}}
.grupos h3{margin-bottom:1rem}
.routes{list-style:none;padding:0;margin:0}
.routes li+li{margin-top:.25rem}
.routes a{display:flex;align-items:center;gap:1rem;padding:.6rem .75rem;margin-inline:-.75rem;
  border-radius:var(--radio);transition:background-color .2s ease,transform .2s ease}
.routes a:hover{background:var(--surface)}
.routes .r{display:block;font-weight:600;letter-spacing:-.01em}
.routes .meta{display:block;color:var(--muted);font-size:var(--t-small)}
.routes .right{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}
.routes .amount{font-weight:600;font-variant-numeric:tabular-nums}
.routes .escala{display:block;height:4px;margin-top:.5rem;max-width:11rem;background:var(--surface-2);border-radius:2px}
.routes .escala i{display:block;height:100%;background:var(--muted);border-radius:2px}
.routes .barato .escala i{background:var(--good)}
.routes .barato .amount{color:var(--good)}
.spark{width:5.5rem;height:1.75rem;flex-shrink:0}
.spark polyline{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark.baja polyline{stroke:var(--good)}
.spark circle{fill:var(--muted)} .spark.baja circle{fill:var(--good)}
@media (max-width:40rem){
  .grupos .routes{display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1rem}
  .grupos .routes li+li{margin-top:0}
  .grupos .routes a{flex-direction:column;align-items:flex-start;gap:.15rem;padding:.5rem .5rem;margin-inline:-.5rem}
  .grupos .routes .right{margin-left:0;align-items:flex-start;text-align:left}
  .grupos .spark,.grupos .meta-larga{display:none}
}

/* ======================================================================
   FICHA DE RUTA
   ====================================================================== */
/* Los dos veredictos viven en dos campos de tono distinto y nunca se tocan.
   «La ruta hoy» (el mínimo de hoy contra la serie de mínimos diarios,
   evaluate_trend) va arriba con su gráfico. «Cada fecha de vuelo» (cada
   precio contra la distribución de 30 días, evaluate) va abajo con la tabla
   y el calendario, que son exactamente los precios que juzga.            */
.hoy{display:grid;gap:2rem 3rem;margin-top:2.5rem}
@media (min-width:60rem){.hoy{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.hoy-cab{font-size:var(--t-lead);font-weight:600;letter-spacing:-.015em;margin:0 0 1rem}
.price{font-size:var(--t-display);font-weight:600;letter-spacing:-.05em;line-height:.9;
  font-variant-numeric:tabular-nums;margin:.25rem 0 1rem}
.price small{display:block;font-size:var(--t-small);letter-spacing:0;font-weight:500;margin-bottom:.5rem}
.stats{display:grid;gap:1rem 2rem;margin:1.75rem 0 0;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.stat span{display:block;font-size:var(--t-small);color:var(--muted)}
.stat b{display:block;font-size:var(--t-lead);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.campo .chart,.campo .cal,.campo .scroll{background:var(--bg)}
.hoy figure h3{margin-bottom:1rem}
.fechas-resumen{margin-top:1.5rem}

/* --- Gráfico -----------------------------------------------------------*/
.chart{background:var(--bg);border-radius:var(--radio);padding:1rem .75rem .5rem;overflow:hidden}
.chart svg{display:block;width:100%;height:auto}
.chart .area{fill:var(--ink);opacity:.06}
.chart .line{fill:none;stroke:var(--ink);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--ink)}
.chart .banda{fill:var(--good);opacity:.12}
.chart .ref{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.chart .ref-txt{fill:var(--ink);font-size:12px;font-family:inherit;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.chart .min-dot{fill:var(--good);stroke:var(--bg);stroke-width:2}
.nota-grafico{font-size:var(--t-small);color:var(--muted);margin:.75rem 0 0;max-width:42rem}

/* --- Calendario en grilla ----------------------------------------------*/
.cal{background:var(--bg);border-radius:var(--radio);padding:1rem}
.cal-mes{font-size:var(--t-small);font-weight:600;margin:0 0 .5rem}
.cal-mes:not(:first-of-type){margin-top:1rem}
.cal-cab,.cal-fila{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.cal-cab{margin-bottom:.35rem}
.cal-cab span{text-align:center;font-size:12px;color:var(--muted)}
.cal-fila+.cal-fila{margin-top:.3rem}
.dia{border-radius:var(--radio);padding:.4rem .15rem;text-align:center;min-height:3.1rem;
  display:flex;flex-direction:column;justify-content:center;gap:.05rem}
.dia.vacio{background:transparent}
.dia b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1}
.dia span{font-size:12px;font-variant-numeric:tabular-nums}
.dia-excelente{background:var(--good);color:var(--bg)}
.dia-bueno{background:var(--good-soft);color:var(--good)}
.dia-normal{background:var(--surface);color:var(--ink)}
.dia-alto{background:var(--warn-soft);color:var(--warn)}
.dia-caro{background:var(--bad-soft);color:var(--bad)}
.dia-sin_datos{background:var(--surface);color:var(--muted)}
.leyenda{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:1rem 0 0;font-size:var(--t-small)}
.leyenda i{display:inline-block;width:.8rem;height:.8rem;border-radius:2px;margin-right:.35rem;vertical-align:-1px}

/* --- Tablas ------------------------------------------------------------
   Las tablas de verdad conservan sus líneas: ahí sí ordenan.              */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--bg);border-radius:var(--radio)}
table{width:100%;border-collapse:collapse;font-size:var(--t-body)}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--linea)}
tr:last-child td{border-bottom:none}
th{font-weight:600;font-size:var(--t-small);color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Cuatro columnas de cifras (viaje completo): con el relleno de un rem por
   lado, en 375 px Lima quedaba 37 px más ancha que la pantalla. */
table.compacta th,table.compacta td{padding:.75rem .45rem}
table.compacta th:first-child,table.compacta td:first-child{padding-left:1rem}
table.compacta th:last-child,table.compacta td:last-child{padding-right:1rem}
@media (max-width:40rem){th,td{padding:.7rem .55rem}}
tbody tr{transition:background-color .2s ease}
tbody tr:hover{background:var(--surface)}

/* --- Hallazgos ---------------------------------------------------------
   Cada uno es una pregunta y su respuesta medida, no una tarjeta con icono. */
.hallazgos{display:grid;gap:1rem;margin:0}
@media (min-width:44rem) and (max-width:59.99rem){.hallazgos{grid-template-columns:repeat(2,1fr)}}
.hallazgo{background:var(--surface);border-radius:var(--radio);padding:1.5rem}
.hallazgo h3{font-size:var(--t-body);font-weight:600;margin:0 0 .75rem}
.titular{font-size:var(--t-lead);line-height:1.2;letter-spacing:-.015em;margin:0 0 .5rem;font-weight:500}
.titular b{font-weight:700}
.hallazgo .sub{font-size:var(--t-small);margin:0 0 1.25rem}

.barras,.barras-pie{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.3rem}
.barras{align-items:end;height:6.5rem}
.barra{display:block;align-self:end;border-radius:2px 2px 0 0;background:var(--surface-2);
  transform-origin:50% 100%;animation:crecer .85s cubic-bezier(.16,1,.3,1) backwards}
.campo .barra,.hallazgo .barra{background:color-mix(in srgb,var(--ink) 18%,transparent)}
.barra.mejor,.campo .barra.mejor,.hallazgo .barra.mejor{background:var(--good)}
@keyframes crecer{from{transform:scaleY(.02)}to{transform:scaleY(1)}}
.barras-pie{margin-top:.45rem;font-size:12px;color:var(--muted);text-align:center;line-height:1.3}
.barras-pie span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barras-pie b{display:block;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.barras-pie .mejor b{color:var(--good)}

.cuotas{list-style:none;padding:0;margin:0}
.cuotas li+li{margin-top:.75rem}
.cuota-cab{display:flex;justify-content:space-between;font-size:var(--t-small);margin-bottom:.3rem}
.cuota-cab b{font-variant-numeric:tabular-nums}
.cuota-riel{height:.5rem;border-radius:2px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.cuota-riel i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;
  animation:extender 1s cubic-bezier(.16,1,.3,1) backwards}
.cuotas li:first-child .cuota-riel i{background:var(--good)}
@keyframes extender{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- Lectura de la ruta ------------------------------------------------
   Prosa, no tarjetas. El titular lleva el color del sentido (bueno, malo);
   el párrafo va siempre en tinta plena.                                   */
.lectura{display:grid;gap:2rem;margin:0 0 3rem;max-width:42rem}
.observacion .titular{font-weight:600;margin:0 0 .5rem}
.observacion p{margin:0}
.observacion-quieto .titular,.observacion-momento-bueno .titular{color:var(--good)}
.observacion-momento-malo .titular{color:var(--bad)}

/* --- La escala de veredictos ---------------------------------------------*/
.escala{margin:0;padding:0}
.escala>div{display:grid;grid-template-columns:10rem 1fr;gap:.35rem 1rem;align-items:center;padding:.6rem 0}
.escala dt,.escala dd{margin:0}
@media (max-width:34rem){.escala>div{grid-template-columns:1fr}}

/* --- Llamado a la acción -----------------------------------------------
   Un campo oscuro con la pregunta a lo ancho y las dos salidas debajo.   */
.cta{margin-top:var(--entre);padding-block:clamp(3rem,2rem + 5vw,7rem);
  background:var(--field-dark);color:var(--field-dark-ink);
  margin-inline:calc(var(--margen) * -1);padding-inline:var(--margen)}
@media (min-width:84rem){.cta{margin-inline:calc((100vw - 84rem) / -2 - var(--margen));
  padding-inline:calc((100vw - 84rem) / 2 + var(--margen))}}
.cta h2,.cta h3{font-size:var(--t-head);line-height:1.02;letter-spacing:-.03em;margin:0 0 1rem;max-width:22ch}
.cta p{max-width:36rem}
/* En el escritorio la pregunta a la izquierda y las salidas a la derecha: en
   una sola columna media pantalla oscura quedaba vacía. */
@media (min-width:60rem){
  .cta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4rem;align-items:start}
  .cta>h2,.cta>h3{grid-row:1 / span 4}
  .cta>:not(h2):not(h3){grid-column:2}
  .cta .acciones{margin-top:1rem}
}
.cta .btn{background:var(--accent);color:var(--accent-ink)}
.cta .btn-claro{background:var(--field-dark-ink);color:var(--field-dark)}
.on-accent{color:inherit;text-decoration:underline;text-underline-offset:.2em}

/* --- Compartir ---------------------------------------------------------*/
.compartir{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;margin-top:1.5rem;
  background:var(--surface);border-radius:var(--radio);padding:.55rem 1rem;font-size:var(--t-small);
  font-weight:600;transition:background-color .2s ease,transform .2s ease}
.compartir:hover{background:var(--surface-2);transform:translateY(-1px)}
.compartir svg{width:1.1rem;height:1.1rem;fill:currentColor;flex-shrink:0}

/* --- Foto de la ciudad -------------------------------------------------*/
.foto{position:relative;margin:0;border-radius:var(--radio);overflow:hidden;line-height:0}
.foto img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
@media (max-width:34rem){.foto img{aspect-ratio:2/1}}
.foto-alta img{aspect-ratio:4/3}
/* El crédito, sobre un velo neutro para que se lea en cualquier foto. */
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .75rem;line-height:1.4;
  font-size:13px;color:#fff;background:rgba(0,0,0,.6);text-align:right} /* .6 y no .5: sobre una foto clara el crédito quedaba en ~3,9:1 */
.foto figcaption a{text-decoration:underline;text-underline-offset:2px}

/* Sin foto verificada, la etiqueta de equipaje: el código del aeropuerto en
   grande, que es lo que de verdad identifica el destino. Mejor eso que la
   plaza equivocada. */
.etiqueta-iata{background:var(--accent);color:var(--accent-ink);border-radius:var(--radio);
  padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;min-height:16rem}
.etiqueta-iata b{font-size:clamp(5rem,3rem + 8vw,10rem);font-weight:700;letter-spacing:-.05em;line-height:.85}
.etiqueta-iata span{font-size:var(--t-small);font-weight:500;margin-top:1.5rem}

/* --- Formularios -------------------------------------------------------*/
.card{background:var(--surface);border-radius:var(--radio);padding:clamp(1.25rem,.8rem + 1.5vw,2rem)}
.card-hero{margin-top:2rem}
.card h3{margin-top:0}
.nota{background:var(--warn-soft)}
.aviso{background:var(--bad-soft)}
.aviso p{color:var(--bad);margin:0}
.sunken{background:var(--surface-2)}
.field{display:block;margin-bottom:1rem}
.field>label,.field-inline>label,.etiqueta-campo{display:block;font-size:var(--t-small);font-weight:600;margin-bottom:.4rem}
/* La hoja de reclamaciones usa controles sin clase: la plantilla es un texto
   legal versionado (VERSION_LEGAL) y un cambio de marcado no es una versión
   nueva, así que se alcanzan desde aquí. */
#hoja-reclamo input,#hoja-reclamo textarea,
.input,.select,select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--linea);
  border-radius:var(--radio);padding:.8rem 1rem;width:100%;min-height:48px;
  transition:border-color .2s ease,box-shadow .2s ease}
.select,select{width:auto;padding:.6rem .8rem;min-height:44px}
#hoja-reclamo input:focus,#hoja-reclamo textarea:focus,
.input:focus,.select:focus,select:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 70%,transparent)} /* taste-skill-ignore: anillo de foco, no sombra en reposo */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.75rem 0 0;list-style:none}
.chips a{display:inline-flex;align-items:center;min-height:44px;background:var(--surface);
  border-radius:var(--radio);padding:.4rem .85rem;font-size:var(--t-small);font-weight:500;
  transition:background-color .2s ease,transform .2s ease}
.chips a:hover{background:var(--surface-2);transform:translateY(-1px)}

/* --- Utilidades --------------------------------------------------------*/
.stack>*+*{margin-top:1rem}
.stack-sm>*+*{margin-top:.5rem}
.row-end{align-items:flex-end}
.push{margin-left:auto}
.mt-0{margin-top:0} .mt-1{margin-top:.85rem} .mt-2{margin-top:1.5rem} .mt-3{margin-top:2.5rem} .mt-4{margin-top:3.5rem}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:.85rem} .mb-2{margin-bottom:1.5rem}
.flat{margin:0}
.pt-hero{padding-top:clamp(1.5rem,1rem + 3vw,4rem)}
/* Aire entre la cabecera y el título, ahora que las migas bajaron al final. */
main.wrap{padding-top:clamp(1.5rem,1rem + 2.5vw,3.5rem)}
.col-verdict{width:9.5rem}
.price-row{display:flex;align-items:flex-end;gap:1.25rem;flex-wrap:wrap}
.pie-dato{font-size:var(--t-small);color:var(--muted);margin-top:4rem}

/* --- Publicidad: sus reglas viven en _ad.html, que solo se pinta donde hay
   anuncio. Aquí no hace falta nada. ---------------------------------------*/

/* --- Pie ---------------------------------------------------------------
   Un cierre, no un mapa del sitio: el campo amarillo con el bot como línea
   grande, que es el canal por el que el sitio sigue hablando con quien se va.
   El crédito del constructor vive aquí, a la vista y sin tapar nada.     */
/* `.wrap` es una CLASE y `footer` un ELEMENTO: la clase gana en especificidad
   y anulaba el margen y el padding superiores del pie. El selector lleva las
   dos y repite el `auto` horizontal. Ver CLAUDE.md. */
footer.pie{margin-top:var(--entre);background:var(--accent);color:var(--accent-ink);
  padding:clamp(2.5rem,2rem + 3vw,5rem) 0 2rem}
.pie .wrap{display:grid;gap:3rem}
.pie-grande{font-size:clamp(2.25rem,1rem + 6vw,7rem);font-weight:600;letter-spacing:-.045em;line-height:.95;
  display:inline-block;word-break:break-word;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
a.pie-grande:hover{transform:translateX(6px)}
.pie-intro{font-size:var(--t-lead);max-width:36rem;margin:0 0 1.25rem;font-weight:500}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:44rem){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
.foot-brand p{max-width:30rem}
.foot-promise{font-weight:700}
.foot-h{font-size:var(--t-body);font-weight:700;margin:0 0 .5rem}
.foot-list{list-style:none;padding:0;margin:0}
.foot-list a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;
  text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.foot-list a:hover{text-decoration-color:currentColor}
.foot-bar{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-size:var(--t-small)}
/* El distintivo del Libro: el consumidor peruano lo busca CON LA VISTA, es el
   sello que dice que el sitio cumple la Ley 29571. Un bloque de tinta sobre
   el amarillo, sin icono. */
.pie-libro{display:inline-flex;flex-direction:column;background:var(--accent-ink);color:var(--accent);
  border-radius:var(--radio);padding:.6rem 1rem;line-height:1.2;transition:transform .2s ease}
.pie-libro:hover{transform:translateY(-2px)}
.pie-libro .arriba{font-size:var(--t-small)}
.pie-libro .abajo-txt{font-weight:700}
/* Espacio para el botón flotante al bot en TODOS los anchos, no solo en el
   teléfono: a 1440 px tapaba el 75% del enlace al Libro de Reclamaciones,
   que es el que la norma exige tener a mano (auditoría del 2026-10-30). */
footer.pie{padding-bottom:5.5rem}
@media (max-width:44rem){footer.pie{padding-bottom:6rem}}

/* --- Botón flotante al bot ---------------------------------------------
   La única conversión del embudo. Es un ENLACE, no un widget de chat. Va en
   tinta plena sobre el fondo: el contraste lo separa, no una sombra.                    */
.fab{position:fixed;z-index:30;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:var(--bg);
  padding:.8rem 1.15rem;border-radius:var(--radio);font-weight:600;font-size:var(--t-small);
  transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.fab:hover{transform:translateY(-2px)}
.fab svg{width:1.25rem;height:1.25rem;flex-shrink:0;fill:currentColor}
@media (max-width:30rem){
  .fab{padding:.9rem;gap:0}
  .fab svg{width:1.4rem;height:1.4rem}
  .fab b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

/* --- Foco, selección, saltar ------------------------------------------*/
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 5px var(--ink);border-radius:2px} /* taste-skill-ignore: anillo de foco de dos tonos, legible sobre el amarillo */
::selection{background:var(--accent);color:var(--accent-ink)}
.saltar{position:absolute;left:1rem;top:-4rem;z-index:40;background:var(--accent);color:var(--accent-ink);
  padding:.6rem 1rem;border-radius:var(--radio);font-weight:600;transition:top .15s ease}
.saltar:focus{top:1rem}

/* --- Movimiento --------------------------------------------------------
   Sin opacidad en `rise` a propósito: el hero del precio lleva .rise, y un
   elemento que arranca en opacity:0 no cuenta como LCP hasta que aparece.
   El movimiento se conserva; lo que se quita es el estado invisible.    */
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.rise{animation:rise .7s cubic-bezier(.16,1,.3,1) backwards}
.d1{animation-delay:.05s} .d2{animation-delay:.13s} .d3{animation-delay:.21s}
.d4{animation-delay:.29s} .d5{animation-delay:.37s}
.chart .line{stroke-dasharray:var(--len);animation:draw 1.6s cubic-bezier(.4,0,.2,1) .3s backwards}

/* Entrada por scroll sin JS donde el navegador la entiende; donde no, el
   suplente de base.html pone .reveal-js y .visto. Sin JS no queda nada
   invisible. */
/* Arranca a .25 de opacidad y no en cero: con la entrada atada al scroll, todo lo
   que está más abajo de la pantalla queda en su primer fotograma, y en cero
   eso es contenido invisible para quien salta con la barra, para un lector de
   capturas o para un buscador que pinta la página. La misma lección que el
   LCP del precio: el movimiento se queda, el estado invisible no. */
@keyframes entrar{from{opacity:.25;transform:translateY(28px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:entrar .8s cubic-bezier(.16,1,.3,1) both;
      animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@media (prefers-reduced-motion:no-preference){
  .reveal-js{opacity:.25;transform:translateY(28px)}
  .reveal-js.visto{animation:entrar .8s cubic-bezier(.16,1,.3,1) both}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ==========================================================================
   Distintivo de constructor — "hecho por"
   ==========================================================================
   Componente portable (prefijo sb-, variables propias, !important en todo
   porque se pega en sitios ajenos). En este sitio NO va fijo en la esquina:
   en la portada a 390 px pisaba el chip «Andahuaylas», y un crédito nunca
   puede tapar contenido. Vive en el pie con .sb-en-pie, a la vista.
   El punto verde es un acento de marca y NADA MAS: no pulsa ni dice "en
   línea", porque no hay nada midiendo ninguna disponibilidad.            */
.sb-credito{
  --sb-tinta:#0f172a; --sb-tenue:rgba(15,23,42,.62); --sb-punto:#22c55e;
  position:fixed !important; right:1rem !important; bottom:1rem !important; z-index:29 !important;
  display:inline-flex !important; align-items:center !important; gap:.5rem !important;
  box-sizing:border-box !important; margin:0 !important; padding:.35rem .6rem !important;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-size:1rem !important; font-style:normal !important; font-weight:400 !important;
  line-height:1.15 !important; letter-spacing:normal !important; text-align:left !important;
  text-transform:none !important; text-decoration:none !important; white-space:nowrap !important;
  direction:ltr !important; color:var(--sb-tinta) !important;
}
.sb-credito:focus-visible{outline:2px solid var(--sb-tinta) !important;outline-offset:2px !important}
.sb-credito .sb-marca{display:block !important;height:1.5rem !important;width:auto !important;max-width:none !important;
  min-width:0 !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;flex:none !important}
.sb-credito .sb-texto{display:flex !important;flex-direction:column !important;gap:.1rem !important;min-width:0 !important}
.sb-credito .sb-etiqueta{font-size:13px !important;font-weight:500 !important;line-height:1.1 !important;
  color:var(--sb-tenue) !important;text-transform:none !important;letter-spacing:normal !important}
.sb-credito .sb-nombre{font-size:14px !important;font-weight:600 !important;line-height:1.15 !important;color:var(--sb-tinta) !important}
.sb-credito .sb-punto{flex:none !important;width:.4rem !important;height:.4rem !important;border-radius:50% !important;
  background:var(--sb-punto) !important}
/* En el pie: estático, sin fondo propio, sobre el amarillo. Gana por
   especificidad (dos clases contra una) con el mismo !important. */
.sb-credito.sb-en-pie{position:static !important;padding:0 !important;min-height:44px !important;
  --sb-tinta:#0d2a1c; --sb-tenue:rgba(13,42,28,.72)}
@media print{.sb-credito{display:none !important}}
.lista-ancha{columns:4 9rem}

/* --- Cuándo comprar ------------------------------------------------------
   La respuesta de la página en el campo amarillo, a tamaño de titular. */
.frase-campo{font-size:clamp(1.5rem,.8rem + 2.2vw,2.25rem);line-height:1.12;letter-spacing:-.025em;
  font-weight:600;max-width:34ch;margin:0 0 1.25rem}
.frase-campo b{font-weight:700}
.barras-alta{height:11rem}
.campo.nota{background:var(--warn-soft)}

/* El ejemplo dentro de los campos: sin regla, el gris del navegador quedaba
   en 4,3:1 en claro y 4,0:1 en oscuro, por debajo de 4,5:1. */
.input::placeholder,textarea::placeholder,#hoja-reclamo input::placeholder{color:var(--muted);opacity:1}