/* =====================================================================
   Reward Seats — sistema de diseño «AVIANCA»

   Escaneado de avianca.com/es el 2026-08-22 y traducido a este producto:
   papel blanco, tinta casi negra, rojo Avianca de acento, verde petróleo
   para los enlaces, Red Hat Display en todo y píldoras por todas partes.

   Los valores no están inventados: salen del propio sistema de tokens de
   avianca.com (--brand-primary, --illustrations-red-primary, --text-link-default,
   --price-indicator-*, --border-radius-*, --spacing-*). Las tres tintas de
   precio son literalmente las que Avianca usa en su calendario de tarifas,
   que es justo para lo que las usamos aquí.

   OJO: Reward Seats no es Avianca ni está afiliado a LifeMiles. Compartimos
   el idioma visual, no la marca: ni el logotipo, ni el pájaro, ni el nombre.
   ===================================================================== */

/* ---------------------------------------------------------------
   1 · TOKENS
   --------------------------------------------------------------- */
:root{
  color-scheme: light;

  /* Superficies — papel blanco, como ellos */
  --bg:         #FFFFFF;   /* la página y la zona de resultados */
  --surface:    #FFFFFF;   /* barras y tarjetas */
  --surface-2:  #FAFAFA;   /* encabezado de tabla, zonas hundidas, hover de fila */
  --surface-3:  #F0F0F0;   /* elevado, seleccionado, fichas */

  /* Líneas */
  --line:       #E6E6E6;
  --line-2:     #D9D9D9;   /* su --border-stroke-default */
  --line-3:     #B6B6B6;   /* su --border-stroke-dark */

  /* Texto */
  --ink:        #1B1B1B;   /* su --brand-primary: casi negro, no negro */
  --ink-2:      #3D3D3D;
  --ink-3:      #5A5A5A;   /* su --text-normal-secondary */
  --ink-4:      #A6A6A6;   /* deshabilitado */
  --on-ink:     #FFFFFF;

  /* Marca — el rojo Avianca, con cuentagotas */
  --accent:     #D90000;   /* su --illustrations-red-primary */
  --accent-hi:  #FF1C1C;
  --accent-lo:  #9C2028;   /* su --illustrations-red-darker */
  --accent-bg:  #FFF5F5;   /* su --red-50 */
  --on-accent:  #FFFFFF;

  /* Enlaces — verde petróleo, el segundo color de su sistema */
  --link:       #177F8C;   /* su --text-link-default */
  --link-hi:    #0E4C54;   /* su --text-link-active */
  --link-bg:    #DAF1F4;   /* su --alert-informative-bg */

  /* Señales de precio — SUS tintas de calendario de tarifas, tal cual */
  --cheap:      #0B7A45;
  --cheap-bg:   #DFF3EA;
  --cheap-line: #B8E6D4;   /* su --price-indicator-low */
  --cheap-fill: #B8E6D4;
  --mid:        #8A6404;   /* su --alert-caution-text */
  --mid-bg:     #FFF7E2;
  --mid-line:   #FFECB7;   /* su --price-indicator-medium */
  --mid-fill:   #FFECB7;
  --dear:       #C20000;   /* su --icon-accent-negative */
  --dear-bg:    #FFEFEC;
  --dear-line:  #FFC3B6;   /* su --price-indicator-high */
  --dear-fill:  #FFC3B6;

  /* Estado del sistema */
  --ok:         #1EA93C;   /* su --green-primary */
  --warn:       #EF5B06;   /* su --icon-accent-warning */
  --warn-bg:    #FFF3E0;
  --down:       #C20000;

  /* Forma — su escala de radios, píldora incluida */
  --r-xs: 4px;             /* --border-radius-small */
  --r:    12px;            /* --border-radius-medium */
  --r-md: 16px;            /* --border-radius-large */
  --r-lg: 24px;
  --r-xl: 32px;            /* --border-radius-x-large: la píldora de sus botones */
  --r-full: 9999px;

  /* Sombras — su --effect-shadow-light (#5a5a5a33) con sus desenfoques */
  --shadow-1: 0 2px 6px rgba(90,90,90,.14);
  --shadow-2: 0 2px 20px rgba(90,90,90,.20);
  --shadow-3: 0 24px 60px -20px rgba(27,27,27,.30);
  --ring: 0 0 0 3px rgba(29,155,240,.40);   /* su --border-stroke-focus */

  /* Tipografía — Red Hat Display es LA letra de Avianca */
  --font:  "Red Hat Display", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:  "Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Medidas */
  --nav-h: 68px;           /* ellos usan 76; 68 en una herramienta con barras fijas */
  --maxw:  1400px;
  --pad:   16px;           /* --spacing-medium */
}

/* ---------------------------------------------------------------
   2 · BASE
   --------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.015em; line-height:1.12; text-wrap:balance }
h1{ font-size:clamp(24px,3vw,32px) }
h2{ font-size:20px }
h3{ font-size:16.5px }
p{ margin:0 0 12px }
a{ color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--link-hi) }
button{ font:inherit; color:inherit; cursor:pointer }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-xs) }
::selection{ background:var(--accent); color:var(--on-accent) }

/* Esqueleto de aplicación: barras fijas y UNA sola región que hace scroll.
   Es lo que permite que el encabezado de la tabla quede pegado sin taparse
   con nada, y que el pie de resultados esté siempre a la vista. */
body.app{ height:100dvh; display:flex; flex-direction:column; overflow:hidden }
body.app > .bar{ flex:none }
.results{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; background:var(--bg) }

/* utilidades mínimas */
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.muted{ color:var(--ink-3) }
.right{ text-align:right }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.row{ display:flex; align-items:center; gap:8px }
.spacer{ flex:1 }

/* ---------------------------------------------------------------
   3 · ETIQUETA DE SECCIÓN (el "eyebrow" del tablero)
   --------------------------------------------------------------- */
.label{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3);
}
/* En la portada el ojillo va en rojo: es el único sitio donde la marca habla. */
.hero .label{ color:var(--accent) }

/* ---------------------------------------------------------------
   4 · NAVEGACIÓN
   --------------------------------------------------------------- */
.nav{
  height:var(--nav-h);
  display:flex; align-items:center; gap:26px;
  padding:0 clamp(16px,3vw,32px);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:17px; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.brand:hover{ color:var(--ink) }
/* El símbolo: cuadro rojo con esquinas de píldora. Es NUESTRA marca,
   no la de nadie más — solo comparte el idioma. */
.brand-mark{
  width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent);
  font-weight:800; font-size:12.5px; letter-spacing:-.02em;
}
.nav-links{ display:flex; align-items:center; gap:4px }
.nav-links a{
  padding:9px 14px; border-radius:var(--r-full);
  font-size:14.5px; font-weight:500; color:var(--ink); text-decoration:none;
  transition:background .14s ease;
}
.nav-links a:hover{ background:var(--surface-3) }
/* La página en la que estás se marca con el rojo, no con un gris más. */
.nav-links a[aria-current="page"]{
  color:var(--ink); font-weight:700; background:var(--accent-bg);
  box-shadow:inset 0 0 0 1px #FFD6D6;
}

/* ---------------------------------------------------------------
   5 · BOTONES
   --------------------------------------------------------------- */
/* Todo botón es una píldora, como en avianca.com. El principal es tinta
   casi negra (su "Buscar"), no rojo: el rojo se guarda para la marca. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 20px;
  border:1.5px solid var(--ink); border-radius:var(--r-full);
  background:var(--surface); color:var(--ink);
  font-size:14.5px; font-weight:600; white-space:nowrap; text-decoration:none;
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover{ background:var(--surface-3); color:var(--ink) }
.btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); font-weight:700 }
.btn-primary:hover{ background:#3D3D3D; border-color:#3D3D3D; color:var(--on-ink) }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-3); font-weight:600 }
.btn-ghost:hover{ background:var(--surface-3); color:var(--ink) }
/* El de contorno es el "secundario" suyo: sin relleno, borde fino. */
.btn-outline{ background:transparent; border-color:var(--line-3); color:var(--ink) }
.btn-outline:hover{ background:var(--surface-3); border-color:var(--ink) }
/* Y el rojo, para el único sitio donde el acento manda de verdad. */
.btn-red{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700 }
.btn-red:hover{ background:var(--accent-lo); border-color:var(--accent-lo); color:var(--on-accent) }
.btn-sm{ height:34px; padding:0 15px; font-size:13.5px }
.btn-lg{ height:50px; padding:0 28px; font-size:16px }
.btn[disabled]{ opacity:.4; cursor:not-allowed }

.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border:1.5px solid var(--line-2); border-radius:var(--r-full);
  background:var(--surface); color:var(--ink-3);
}
.icon-btn:hover{ background:var(--surface-3); color:var(--ink); border-color:var(--line-3) }

/* ---------------------------------------------------------------
   6 · CAMPOS
   --------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.field > label{ font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--ink-3) }
/* Campo alto y redondo, con la etiqueta encima: el patrón de su buscador. */
.control{
  display:flex; align-items:center; gap:8px;
  min-height:48px; padding:0 16px;
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r);
  color:var(--ink); font-size:15px;
}
.control:hover{ border-color:var(--line-3) }
.control:focus-within{ border-color:var(--ink); box-shadow:var(--ring) }
.control input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--ink); font:inherit; padding:9px 0;
}
.control input::placeholder{ color:var(--ink-4) }
.control .code{ font-family:var(--mono); font-weight:600; letter-spacing:.02em }
.control .hint{ color:var(--ink-3); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ficha de aeropuerto dentro de un campo (para búsquedas de varios) */
.token{
  display:inline-flex; align-items:center; gap:6px;
  max-width:100%; min-width:0; overflow:hidden;
  height:26px; padding:0 6px 0 10px; border-radius:var(--r-full);
  background:var(--surface-3); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  white-space:nowrap; text-overflow:ellipsis;
}
.token button{ flex:none }
.token button{ border:0; background:none; color:var(--ink-3); line-height:1; padding:0 2px }
.token button:hover{ color:var(--dear) }

/* Rejilla de la barra de búsqueda (Buscar y Explorar comparten estas reglas) */
.search-grid{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  padding:16px clamp(16px,3vw,24px);
}
.search-grid > .field{ flex:1 1 190px }
.search-grid > .field-fechas{ flex:1 1 210px }
.search-grid > .field-pax{ flex:0 0 110px }
.search-grid > .icon-btn{ margin-bottom:1px }
.filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:0 clamp(16px,3vw,24px) 16px;
}

/* ---------------------------------------------------------------
   7 · CHIPS (filtros)
   --------------------------------------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 16px; border-radius:var(--r-full);
  border:1.5px solid var(--line-2); background:var(--surface);
  color:var(--ink); font-size:14px; font-weight:500; white-space:nowrap;
  transition:background .14s ease, border-color .14s ease;
}
.chip:hover{ border-color:var(--line-3); background:var(--surface-2) }
/* Filtro puesto = píldora en tinta. Es el contraste más limpio sobre papel. */
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); font-weight:600 }
.chip-caret::after{ content:"▾"; color:var(--ink-3); font-size:11px }
.chip[aria-pressed="true"] .chip-caret::after{ color:var(--on-ink) }
.chip-visa{ border-color:var(--dear-line); color:var(--dear); background:var(--dear-bg); font-weight:600 }
.chip-visa[aria-pressed="true"]{ background:var(--dear); border-color:var(--dear); color:#fff }
.chip[disabled]{ opacity:.45; cursor:not-allowed }

/* ---------------------------------------------------------------
   8 · INSIGNIAS
   --------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 10px; border-radius:var(--r-full);
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid transparent;
}
.badge-free{ background:var(--surface-3); color:var(--ink-2); border-color:var(--line-2) }
.badge-pro { background:var(--accent); color:var(--on-accent) }
.badge-cheap{ background:var(--cheap-bg); color:var(--cheap); border-color:var(--cheap-line) }
.badge-mid  { background:var(--mid-bg);   color:var(--mid);   border-color:var(--mid-line) }
.badge-dear { background:var(--dear-bg);  color:var(--dear);  border-color:var(--dear-line) }
.badge-soon { background:transparent; color:var(--ink-3); border-color:var(--line-2) }

.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; flex:none }
.dot-ok{ background:var(--ok) } .dot-warn{ background:var(--warn) } .dot-down{ background:var(--down) }

/* ---------------------------------------------------------------
   9 · TARJETA / PANEL
   --------------------------------------------------------------- */
/* Tarjeta blanca, esquina grande y sombra suave: su pieza más reconocible. */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
}
.card-pad{ padding:20px 22px }

/* ---------------------------------------------------------------
   10 · TABLA DE RESULTADOS — el corazón del producto
   --------------------------------------------------------------- */
.table-wrap{ background:var(--bg) }
table.rs{ width:100%; border-collapse:collapse; min-width:840px }
table.rs thead th{
  position:sticky; top:0; z-index:20;
  text-align:left; white-space:nowrap;
  font-size:12.5px; font-weight:700; letter-spacing:0;
  color:var(--ink-3);
  padding:13px clamp(16px,3vw,24px);
  background:var(--surface-2);
  border-bottom:1px solid var(--line-2);
  box-shadow:0 1px 0 var(--line-2);
}
table.rs thead th.right{ text-align:right }
table.rs tbody td{
  padding:14px clamp(16px,3vw,24px);
  border-bottom:1px solid var(--line);
  font-size:14.5px; color:var(--ink-2); vertical-align:middle; white-space:nowrap;
}
table.rs tbody tr{ cursor:pointer }
table.rs tbody tr:hover td{ background:var(--surface-2) }
/* La fila abierta se tiñe del verde petróleo de sus avisos informativos. */
table.rs tbody tr[aria-selected="true"] td{ background:var(--link-bg) }
table.rs tbody tr:last-child td{ border-bottom:0 }
table.rs td.right{ text-align:right }

.cell-date{ font-family:var(--mono); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-.01em }
.cell-date small{ display:block; font-family:var(--font); font-weight:400; font-size:12px; color:var(--ink-3); letter-spacing:0 }
.cell-time{ font-family:var(--mono); font-size:14px; color:var(--ink) }
.cell-time sup{ font-size:10px; color:var(--ink-3); font-weight:700 }
.cell-flights{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3) }
.cell-stops{ font-size:13.5px }
.cell-stops.direct{ color:var(--cheap); font-weight:600 }

.price{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-weight:700; font-size:17px; letter-spacing:-.02em; line-height:1.15;
}
.price small{
  display:block; font-family:var(--font); font-weight:400; font-size:11.5px;
  letter-spacing:0; color:var(--ink-3); margin-top:2px;
}
.p-cheap{ color:var(--cheap) } .p-mid{ color:var(--mid) } .p-dear{ color:var(--dear) }
.tax{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3) }
.go{ color:var(--link); font-size:13.5px; font-weight:700; white-space:nowrap }

/* ---------------------------------------------------------------
   11 · CALENDARIO (una vista más, no la pantalla)
   --------------------------------------------------------------- */
.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:clamp(16px,3vw,24px) }
.cal-head{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:0 clamp(16px,3vw,24px) }
.cal-head span{ font-size:11.5px; font-weight:700; color:var(--ink-3); text-align:center; padding-bottom:4px }
.day{
  min-height:84px; border-radius:var(--r); border:1.5px solid var(--line);
  background:var(--surface); padding:10px 11px;
  display:flex; flex-direction:column; gap:4px; text-align:left;
  transition:transform .12s ease, box-shadow .12s ease;
}
.day:hover{ border-color:var(--line-3); transform:translateY(-1px); box-shadow:var(--shadow-1) }
.day .d{ font-family:var(--mono); font-size:12px; color:var(--ink-3); font-weight:700 }
.day .m{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; font-size:16px; letter-spacing:-.02em }
.day .f{ font-size:11px; color:var(--ink-3); margin-top:auto }
.day-empty{ background:transparent; border-color:transparent; pointer-events:none }
.day-none{ background:var(--surface-2); border-color:var(--line); color:var(--ink-4) }
/* Relleno pleno con las tintas de precio de Avianca — es exactamente
   para esto que existen en su sistema. */
.day-cheap{ border-color:var(--cheap-line); background:var(--cheap-fill) } .day-cheap .m{ color:#085C34 } .day-cheap .d,.day-cheap .f{ color:#2B6B4E }
.day-mid  { border-color:var(--mid-line);   background:var(--mid-fill) }   .day-mid .m{ color:#7A5803 }   .day-mid .d,.day-mid .f{ color:#7A6428 }
.day-dear { border-color:var(--dear-line);  background:var(--dear-fill) }  .day-dear .m{ color:#A81010 }  .day-dear .d,.day-dear .f{ color:#8A4034 }

/* ---------------------------------------------------------------
   12 · PESTAÑAS DE VISTA
   --------------------------------------------------------------- */
.views{
  display:flex; align-items:center; gap:6px;
  padding:10px clamp(16px,3vw,24px);
  background:var(--surface); border-bottom:1px solid var(--line); overflow-x:auto;
}
.view-tab{
  border:0; white-space:nowrap; border-radius:var(--r-full);
  font-size:14.5px; font-weight:600; letter-spacing:0;
  color:var(--ink-3); padding:9px 18px; background:transparent;
  transition:background .14s ease, color .14s ease;
}
.view-tab:hover{ color:var(--ink); background:var(--surface-3) }
.view-tab[aria-selected="true"]{ color:var(--on-ink); background:var(--ink); font-weight:700 }

/* ---------------------------------------------------------------
   13 · PIE DE RESULTADOS (donde se captura la alerta)
   --------------------------------------------------------------- */
.results-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  padding:12px clamp(16px,3vw,24px);
  background:var(--surface);
  border-top:1px solid var(--line-2);
  font-size:13.5px; color:var(--ink-3);
}
.results-foot b{ color:var(--ink); font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600 }

/* ---------------------------------------------------------------
   14 · PANEL DE DETALLE (se desliza desde la derecha)
   --------------------------------------------------------------- */
.scrim{
  position:fixed; inset:0; z-index:80; background:rgba(27,27,27,.60);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.scrim[data-open]{ opacity:1; pointer-events:auto }
.panel{
  position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(480px,100%);
  background:var(--surface); border-left:1px solid var(--line-2);
  box-shadow:var(--shadow-3);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column;
}
.panel[data-open]{ transform:none }
.panel-head{ display:flex; align-items:center; gap:12px; padding:14px var(--pad); border-bottom:1px solid var(--line) }
.panel-body{ padding:var(--pad); overflow-y:auto; flex:1 }
.panel-foot{ padding:var(--pad); border-top:1px solid var(--line); background:var(--surface-2) }

/* línea de tiempo de tramos */
.leg{ display:grid; grid-template-columns:16px 1fr; gap:12px; position:relative }
.leg + .leg{ margin-top:2px }
.leg-rail{ display:flex; flex-direction:column; align-items:center; padding-top:5px }
.leg-rail i{ width:10px; height:10px; border-radius:50%; border:2.5px solid var(--accent); background:var(--surface); flex:none }
.leg-rail span{ flex:1; width:1px; background:var(--line-2); margin:3px 0 }
.leg-body{ padding-bottom:16px }
.leg-time{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--ink) }
.leg-air{ font-size:13px; color:var(--ink-2) }
.leg-meta{ font-size:12px; color:var(--ink-3); font-family:var(--mono) }
.layover{
  display:inline-block;
  margin:0 0 16px 28px; padding:5px 12px; border-radius:var(--r-full);
  background:var(--surface-3); border:0;
  font-size:12.5px; font-weight:500; color:var(--ink-3);
}

/* filas de datos clave */
.kv{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px dashed var(--line) }
.kv:last-child{ border-bottom:0 }
.kv dt{ font-size:12.5px; color:var(--ink-3) }
.kv dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink); font-family:var(--mono); font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------
   15 · ESTADOS (vacío, cargando, muro de 60 días)
   --------------------------------------------------------------- */
.empty{ padding:56px var(--pad); text-align:center; color:var(--ink-3) }
.empty h3{ color:var(--ink); margin-bottom:6px }
.empty p{ max-width:42ch; margin:0 auto 16px }

.skel{ background:linear-gradient(90deg,var(--surface) 25%,var(--surface-3) 50%,var(--surface) 75%);
  background-size:200% 100%; animation:shimmer 1.3s linear infinite; border-radius:var(--r-xs) }
@keyframes shimmer{ to{ background-position:-200% 0 } }

.wall{
  margin:var(--pad); padding:22px 24px;
  border:1px solid #BEE5EB; border-radius:var(--r-md); background:var(--link-bg);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
}
.wall b{ display:block; color:var(--ink); font-size:15px; margin-bottom:2px }
.wall p{ margin:0; color:var(--ink-2); font-size:13.5px; max-width:52ch }

/* aviso de frescura — la pieza de honestidad */
.freshness{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-3); font-family:var(--mono);
}

/* ---------------------------------------------------------------
   16 · LEYENDA
   --------------------------------------------------------------- */
.legend{ display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px var(--pad); font-size:12px; color:var(--ink-3); border-top:1px solid var(--line) }
.legend span{ display:inline-flex; align-items:center; gap:6px }

/* ---------------------------------------------------------------
   17 · RESPONSIVO
   --------------------------------------------------------------- */
.day .short{ display:none }

@media (max-width:1080px){ .nav-demo{ display:none } }

@media (max-width:860px){
  :root{ --pad:14px; --nav-h:58px }
  .nav-links{ display:none }
  /* En un teléfono la barra tiene que caber: la marca se queda en el símbolo. */
  .nav{ gap:10px; padding:0 var(--pad) }
  .brand{ font-size:0 }                 /* oculta el texto, deja el cuadro "RS" */
  .brand-mark{ width:28px; height:28px; font-size:12px }
  .nav .badge{ font-size:9px; padding:0 7px }

  /* La búsqueda no puede comerse la pantalla: dos columnas y campos más bajos.
     Con flex en vez de grid, funciona igual aunque la pantalla tenga
     más o menos campos (Buscar tiene botón de intercambiar, Explorar no). */
  .search-grid{ display:flex; flex-wrap:wrap; gap:9px; padding:12px var(--pad) }
  .search-grid > .field{ flex:1 1 calc(50% - 5px); min-width:0 }
  .search-grid > .field-fechas{ flex:1 1 100% }
  .search-grid > .field-pax{ flex:0 0 92px }
  .search-grid > .btn-buscar{ flex:1 1 120px }
  .search-grid > .icon-btn{ display:none }   /* intercambiar: no cabe y los campos ya están apilados */
  .field > label{ font-size:10.5px }
  .control{ min-height:44px; padding:0 12px; font-size:14.5px }
  .btn{ height:40px; font-size:14px }
  .btn-sm{ height:34px; font-size:13px }
  .btn-lg{ height:46px; font-size:15px; width:100% }

  /* Filtros: una sola fila que se desliza, en vez de tres que apilan */
  .filters{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; padding-bottom:10px }
  .filters::-webkit-scrollbar{ display:none }
  .filters .spacer{ display:none }
  .chip{ height:34px; padding:0 14px; font-size:13.5px }

  .views{ padding:8px var(--pad); gap:4px }
  .view-tab{ font-size:13.5px; padding:8px 14px }
  .views .freshness{ display:none }   /* ya está en el pie; aquí solo estorba */

  /* Calendario: cifra corta y celdas que sí caben */
  .cal, .cal-head{ gap:5px; padding-left:var(--pad); padding-right:var(--pad) }
  .day{ min-height:62px; padding:7px 8px; gap:2px; border-radius:var(--r-xs) }
  .day .d{ font-size:11px }
  .day .m{ font-size:13.5px; letter-spacing:-.03em }
  .day .f{ font-size:10px }
  .day .full{ display:none }
  .day .short{ display:inline }
  .cal-head span{ font-size:10.5px }

  table.rs thead th, table.rs tbody td{ padding-left:var(--pad); padding-right:var(--pad) }
  .results-foot{ font-size:12.5px; padding:9px var(--pad); gap:6px 12px }
  .results-foot .freshness{ font-size:11.5px }
  .results-foot .btn{ height:36px; font-size:13px }
  .panel{ width:100% }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

/* ---------------------------------------------------------------
   18 · EXPLORAR — descubrimiento por región
   La pantalla que engancha: no se busca una ruta, se descubre a dónde ir.
   --------------------------------------------------------------- */

/* Franja de hallazgos destacados: lo que abre el apetito */
.deals{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;
  padding:clamp(16px,3vw,24px); background:var(--surface-2); border-bottom:1px solid var(--line);
}
.deal{
  position:relative; text-align:left; text-decoration:none; display:block;
  border:1.5px solid var(--cheap-line); border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--cheap-bg), var(--surface) 70%);
  padding:16px 18px; overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease;
}
.deal:hover{ border-color:var(--cheap); transform:translateY(-2px); box-shadow:var(--shadow-2) }
.deal .deal-tag{
  font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--cheap); display:block; margin-bottom:6px;
}
.deal .deal-route{ display:block; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.2 }
.deal .deal-sub{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:2px }
.deal .deal-price{
  display:block;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600;
  font-size:21px; letter-spacing:-.03em; color:var(--cheap); margin-top:9px;
}
.deal .deal-price span{ display:block; margin-top:2px; font-family:var(--font); font-size:11px; font-weight:400; color:var(--ink-3); letter-spacing:0 }

/* Barra de orden y agrupación */
.sortbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px clamp(16px,3vw,24px); background:var(--surface); border-bottom:1px solid var(--line);
}
.sortbar .label{ margin-right:2px }

/* Rejilla de destinos */
.grid-dest{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:12px; padding:clamp(16px,3vw,24px);
}
.dest{
  text-align:left; display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); padding:16px 18px;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.dest:hover{ border-color:var(--line-3); transform:translateY(-2px); box-shadow:var(--shadow-2) }
.dest-top{ display:flex; align-items:baseline; gap:8px }
.dest-city{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.15 }
.dest-code{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:auto; letter-spacing:.04em }
.dest-region{ font-size:11px; color:var(--ink-3); letter-spacing:.02em }
.dest-price{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600;
  font-size:23px; letter-spacing:-.03em; line-height:1.15; margin-top:9px;
}
.dest-price span{ font-family:var(--font); font-size:11px; font-weight:400; color:var(--ink-3); letter-spacing:0; margin-left:5px }
.dest-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin-top:8px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:11.5px; color:var(--ink-3);
}
.dest-meta b{ color:var(--ink-2); font-weight:600 }
.dest-from{ font-size:12px; color:var(--ink-2); margin-top:6px }
.dest-from b{ color:var(--ink); font-weight:600 }

/* Insignia de descuento — “esto está por debajo de lo normal” */
.off{
  display:inline-flex; align-items:center; height:21px; padding:0 9px; border-radius:var(--r-full);
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.02em;
  background:var(--cheap-bg); color:var(--cheap); border:1px solid var(--cheap-line);
}
.off-mid{ background:var(--mid-bg); color:var(--mid); border-color:var(--mid-line) }
.off-none{ background:var(--surface-3); color:var(--ink-3); border-color:var(--line-2) }

@media (max-width:860px){
  .deals{ grid-template-columns:1fr; gap:8px; padding:10px var(--pad) }
  .deal{ padding:11px 13px }
  .deal .deal-price{ font-size:19px; margin-top:6px }
  .grid-dest{ grid-template-columns:1fr; gap:8px }
  .dest-price{ font-size:21px }
  .sortbar{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
  .sortbar::-webkit-scrollbar{ display:none }
}

/* ---------------------------------------------------------------
   19 · AVISO DE VISTA PREVIA
   Solo para la maqueta publicada. Deja claro que los datos están
   congelados y que esto no es el producto en vivo.
   --------------------------------------------------------------- */
.preview{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  padding:9px clamp(16px,3vw,24px);
  background:var(--warn-bg); border-bottom:1px solid #F6CB91;
  font-size:13px; color:var(--ink-2);
}
.preview b{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--warn);
  padding:3px 10px; border-radius:var(--r-full);
}
.preview a{ color:var(--link); font-weight:700; margin-left:auto; white-space:nowrap }
@media (max-width:860px){ .preview{ font-size:11.5px; padding:7px var(--pad) } .preview a{ margin-left:0 } }

/* ---------------------------------------------------------------
   20 · AUTOCOMPLETADO DE AEROPUERTOS
   Acepta código (MDE), nombre de ciudad (Medellín) y códigos de
   grupo (EUR, CO, SAM…) — el equivalente a los multi-city de seats.aero.
   --------------------------------------------------------------- */
.control{ position:relative; flex-wrap:wrap }
.ac-menu{
  position:absolute; z-index:200; top:calc(100% + 6px); left:-1px; right:-1px;
  max-height:340px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-md);
  box-shadow:var(--shadow-3); padding:6px;
}
.ac-menu[hidden]{ display:none }
.ac-grupo{
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 10px 5px;
}
.ac-opt{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border:0; border-radius:var(--r); background:none;
  text-align:left; color:var(--ink-2); font-size:14.5px;
}
.ac-opt:hover, .ac-opt[aria-selected="true"]{ background:var(--surface-3); color:var(--ink) }
.ac-opt .cod{
  font-family:var(--mono); font-weight:600; font-size:12px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-xs);
  padding:2px 6px; min-width:44px; text-align:center; flex:none;
}
.ac-opt .nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ac-opt .reg{ font-size:11px; color:var(--ink-3); flex:none }
.ac-opt .pill{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:1px 6px; border-radius:100px; flex:none;
  background:var(--cheap-bg); color:var(--cheap); border:1px solid var(--cheap-line);
}
.ac-opt .pill-visa{ background:var(--dear-bg); color:var(--dear); border-color:var(--dear-line) }
.ac-vacio{ padding:14px 12px; font-size:13px; color:var(--ink-3) }

/* ---------------------------------------------------------------
   21 · ESTADOS: cargando, vacío, error
   --------------------------------------------------------------- */
.skel-tabla{ padding:var(--pad); display:flex; flex-direction:column; gap:9px }
.skel-fila{ height:38px; border-radius:var(--r) }
.skel-fila:nth-child(2){ opacity:.82 } .skel-fila:nth-child(3){ opacity:.66 }
.skel-fila:nth-child(4){ opacity:.5 }  .skel-fila:nth-child(5){ opacity:.34 }
.skel-fila:nth-child(6){ opacity:.2 }

.aviso{
  margin:var(--pad); padding:20px 22px; border-radius:var(--r-md);
  border:1px solid var(--dear-line); background:var(--dear-bg);
}
.aviso b{ display:block; color:var(--ink); font-size:15px; margin-bottom:4px }
.aviso p{ margin:0; color:var(--ink-2); font-size:13.5px; max-width:56ch }
.aviso .btn{ margin-top:12px }

/* ---------------------------------------------------------------
   22 · TARJETAS DE RESULTADO EN MÓVIL
   Una tabla de 7 columnas no cabe en un teléfono. Debajo de 860 px
   la misma información se apila en tarjetas.
   --------------------------------------------------------------- */
.rcards{ display:none }
@media (max-width:860px){
  .table-wrap{ display:none }
  .rcards{ display:flex; flex-direction:column; gap:8px; padding:var(--pad) }
  .rcard{
    display:block; width:100%; text-align:left;
    border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
    padding:14px 16px; box-shadow:var(--shadow-1);
  }
  .rcard:hover{ border-color:var(--line-3) }
  .rcard-top{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px }
  .rcard-fecha{ font-family:var(--mono); font-weight:600; font-size:14.5px; color:var(--ink) }
  .rcard-dia{ font-size:11.5px; color:var(--ink-3) }
  .rcard-precio{
    margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums;
    font-weight:600; font-size:19px; letter-spacing:-.02em;
  }
  .rcard-linea{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; font-size:12.5px; color:var(--ink-2) }
  .rcard-linea .mono{ font-size:12px; color:var(--ink-3) }
  .rcard-sub{ font-size:11.5px; color:var(--ink-3); margin-top:5px }
}

/* ---------------------------------------------------------------
   23 · BUSCADOR PLEGABLE EN MÓVIL
   Colapsado muestra un resumen de una línea; se abre al tocarlo.
   --------------------------------------------------------------- */
.resumen-busqueda{ display:none }
@media (max-width:860px){
  .resumen-busqueda{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:11px var(--pad); background:var(--surface);
    border:0; border-bottom:1px solid var(--line); text-align:left;
  }
  .resumen-busqueda .rb-ruta{ font-family:var(--mono); font-weight:600; font-size:14px; color:var(--ink) }
  .resumen-busqueda .rb-det{ font-size:12px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .resumen-busqueda .rb-abrir{ margin-left:auto; font-size:13px; font-weight:700; color:var(--link); flex:none }
  .plegable[data-cerrado] .search-grid,
  .plegable[data-cerrado] .filters{ display:none }
}

/* ---------------------------------------------------------------
   24 · PORTADA
   El buscador es el héroe. Nada de ilustraciones: los datos venden solos.
   --------------------------------------------------------------- */
.portada{ max-width:1248px; margin:0 auto; padding:0 clamp(16px,4vw,32px) }

.hero{ padding:clamp(44px,7vw,88px) 0 clamp(28px,4vw,44px); text-align:center }
.hero h1{
  font-size:clamp(34px,6.2vw,62px); font-weight:800; line-height:1.02; letter-spacing:-.03em;
  margin:14px 0 18px; text-wrap:balance;
}
/* La palabra que importa, en rojo. Un solo golpe de color por página. */
.hero h1 em{ font-style:normal; color:var(--accent) }
.hero-sub{ font-size:clamp(17px,2.1vw,20px); color:var(--ink-3); max-width:54ch; margin:0 auto 32px }
/* La barra de búsqueda flotando sobre el papel: su pieza central. */
.hero-form{
  text-align:left; max-width:980px; margin:0 auto; padding-bottom:4px;
  border:0; border-radius:var(--r-md); box-shadow:var(--shadow-2);
}
.hero-form .search-grid{ padding:20px }
.hero-tip{ font-size:13.5px; color:var(--ink-3); padding:0 20px 18px; margin:0 }
.hero-tip code{
  font-family:var(--mono); font-size:12.5px; font-weight:700; color:var(--ink);
  background:var(--surface-3); border-radius:var(--r-xs); padding:2px 6px;
}

.seccion{ padding:clamp(38px,5vw,64px) 0; border-top:1px solid var(--line) }
.seccion > h2{ font-size:clamp(23px,3vw,34px); font-weight:800; letter-spacing:-.025em; margin:8px 0 22px; max-width:24ch }
.seccion-head{ display:flex; align-items:flex-end; gap:16px; margin-bottom:20px; flex-wrap:wrap }
.seccion-head h2{ font-size:clamp(23px,3vw,34px); font-weight:800; letter-spacing:-.025em; margin:8px 0 0 }
.seccion-head .btn{ margin-left:auto }

.cols{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:760px){ .cols{ grid-template-columns:repeat(3,1fr) } }
.col{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:22px 24px; box-shadow:var(--shadow-1) }
.col > b{ display:block; font-size:16.5px; font-weight:700; color:var(--ink); margin-bottom:8px }
.col p b{ color:var(--ink) }
.col p{ margin:0; font-size:15px; color:var(--ink-3); line-height:1.6 }

.pasos{ list-style:none; padding:0; margin:0; counter-reset:p; display:grid; gap:14px; max-width:70ch }
.pasos li{ counter-increment:p; position:relative; padding-left:52px; color:var(--ink-3); font-size:16px }
.pasos li b{ color:var(--ink) }
.pasos li::before{
  content:counter(p); position:absolute; left:0; top:-2px;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:14px; font-weight:700;
  background:var(--accent); color:var(--on-accent); border:0;
}

.cierre{ text-align:center }
.cierre h2{ margin-left:auto; margin-right:auto }
.cierre p{ color:var(--ink-3); font-size:17px; max-width:54ch; margin:0 auto 26px }

.pie{ border-top:1px solid var(--line); padding:36px 0 48px; margin-top:20px }
.pie-grid{ display:grid; grid-template-columns:1fr; gap:24px }
/* El pie tiene 4 columnas en unas páginas y 5 en otras (Guías). Con `grid` habría
   que fijar el número; en flex se acomodan solas. OJO: `repeat(auto-fit,…)` NO sirve
   aquí — mezclarlo con `1.6fr` es inválido y el navegador tira la regla entera. */
@media (min-width:760px){
  .pie-grid{ display:flex; flex-wrap:wrap; gap:28px 44px }
  .pie-grid > div{ flex:0 1 130px }
  .pie-grid > div:first-child{ flex:1 1 300px }
}
.pie-grid > div{ display:flex; flex-direction:column; gap:7px }
.pie-grid b{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600 }
.pie-grid a:not(.brand){ font-size:14.5px; color:var(--ink-3); text-decoration:none }
.pie-grid a:not(.brand):hover{ color:var(--link) }
.pie-fin{ margin:28px 0 0; font-size:12px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:18px }

/* ---------------------------------------------------------------
   25 · PLANES
   --------------------------------------------------------------- */
.planes{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start }
@media (min-width:900px){ .planes{ grid-template-columns:repeat(3,1fr) } }
.plan{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); padding:28px 26px; display:flex; flex-direction:column; gap:2px;
  box-shadow:var(--shadow-1);
}
.plan-destacado{ border:2px solid var(--accent); box-shadow:var(--shadow-2) }
.plan-cinta{
  position:absolute; top:-11px; left:22px; right:22px; text-align:center;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); border-radius:100px; padding:3px 10px;
}
.plan-precio{
  font-family:var(--mono); font-weight:700; font-size:38px; letter-spacing:-.04em;
  color:var(--ink); margin:12px 0 2px; line-height:1.05;
}
.plan-precio span{ display:block; font-family:var(--font); font-size:12.5px; font-weight:400; color:var(--ink-3); letter-spacing:0; margin-top:4px }
.plan-para{ font-size:14.5px; color:var(--ink-3); margin:8px 0 18px; min-height:2.6em }
.plan-lista{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:9px; flex:1 }
.plan-lista li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-3); line-height:1.5 }
.plan-lista li b{ color:var(--ink) }
.plan-lista li::before{ position:absolute; left:0; top:0; font-weight:700 }
.plan-lista .si::before{ content:"✓"; color:var(--cheap) }
.plan-lista .no::before{ content:"—"; color:var(--ink-4) }
.plan-lista .no{ color:var(--ink-4) }
.plan-lista .pronto::before{ content:"◷"; color:var(--warn) }
.plan-lista .pronto{ color:var(--warn) }
.plan-nota{ font-size:11.5px; color:var(--ink-3); text-align:center; margin:10px 0 0 }
td.yes{ color:var(--cheap); font-weight:600 }
td.no{ color:var(--ink-4) }

/* ---------------------------------------------------------------
   26 · ENTRAR / CREAR CUENTA
   --------------------------------------------------------------- */
.acceso{ max-width:420px; margin:0 auto; padding:clamp(36px,8vw,80px) var(--pad) 60px }
.acceso h1{ font-size:30px; font-weight:800; letter-spacing:-.025em; margin-bottom:6px }
.acceso .control input{ width:100% }

/* ---------------------------------------------------------------
   27 · PÁGINAS DE TEXTO (legal, ayuda)
   --------------------------------------------------------------- */
.legal{ padding:20px 0 40px; max-width:70ch }
.legal p{ font-size:16px; color:var(--ink-3); line-height:1.7; margin:0 0 16px }
.legal-h2{
  font-size:clamp(19px,2.6vw,24px); letter-spacing:-.022em; color:var(--ink);
  margin:38px 0 12px; padding-top:20px; border-top:1px solid var(--line);
}
.legal-h2:first-child{ border-top:0; padding-top:0; margin-top:0 }
.legal-h3{ font-size:16px; color:var(--ink); margin:26px 0 8px }
.lista-legal{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:9px }
.lista-legal li{ position:relative; padding-left:24px; font-size:15.5px; color:var(--ink-3); line-height:1.6 }
.lista-legal li::before{ content:"·"; position:absolute; left:8px; top:-2px; color:var(--accent); font-size:20px; font-weight:700 }

/* ---------------------------------------------------------------
   28 · LOGOS DE AEROLÍNEA
   Los logos son de sus dueños y vienen pensados para fondo blanco.
   Por eso van sobre una placa clara: sobre el carbón, un logo azul
   marino (Lufthansa, United) sería invisible.
   --------------------------------------------------------------- */
.av{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none; vertical-align:middle;
  background:var(--surface); border:1px solid var(--line-2); border-radius:7px;
  overflow:hidden; padding:2px;
}
.av img{ width:100%; height:100%; object-fit:contain; display:block }
.av + .av{ margin-left:4px }
.av-lg{ width:34px; height:34px; border-radius:7px; padding:3px }

/* Respaldo si falta el archivo: el código sobre el color de la marca */
.av-cod{
  display:grid; place-items:center; width:100%; height:100%;
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:-.02em;
  background:var(--surface-3); color:var(--ink-2); border-radius:3px;
}

/* Logo ancho con el nombre — para cabeceras */
.av-w{
  display:inline-flex; align-items:center; padding:6px 10px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  height:34px; flex:none;
}
.av-w img{ height:100%; width:auto; max-width:120px; object-fit:contain; display:block }

/* Grupo de logos en una celda de tabla */
.av-grupo{ display:inline-flex; align-items:center; vertical-align:middle }
.celda-av{ display:flex; align-items:center; gap:8px }
.celda-av .cell-flights{ white-space:nowrap }

@media (max-width:860px){
  .av{ width:22px; height:22px }
  .av-lg{ width:30px; height:30px }
}

/* ---------------------------------------------------------------
   29 · EXPLORAR v2 — de tablero a conversación
   El problema del Explorar viejo, medido: 14 controles antes de ver
   nada, 9 datos por tarjeta, 37 tarjetas, 52 números a la vez.
   Aquí la pantalla hace UNA pregunta y da UNA respuesta; el resto
   se revela cuando se pide.
   --------------------------------------------------------------- */

/* La pregunta, escrita como una frase en vez de ocho filtros sueltos */
.frase{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:18px clamp(16px,3vw,24px);
  background:var(--surface); border-bottom:1px solid var(--line);
  font-size:clamp(17px,2.2vw,21px); font-weight:500; color:var(--ink-3);
}
.frase b{ color:var(--ink); font-weight:700 }
/* Un control que parece texto hasta que lo tocas */
.dato{
  display:inline-flex; align-items:center; gap:6px;
  border:0; background:var(--surface-3); color:var(--ink);
  font:inherit; font-weight:700; border-radius:var(--r-full);
  padding:5px 14px; cursor:pointer; transition:background .14s ease;
}
.dato:hover{ background:#E4E4E4 }
.dato::after{ content:"▾"; font-size:.62em; color:var(--ink-3); font-weight:400 }
.dato-input{
  width:6.5ch; border:0; background:none; font:inherit; font-family:var(--mono);
  font-weight:700; color:var(--ink); text-align:right; padding:0; outline:none;
}
.dato-num{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--accent-bg); box-shadow:inset 0 0 0 1.5px #FFD0D0;
}
.dato-num::after{ content:none }
.dato-num:focus-within{ box-shadow:inset 0 0 0 1.5px var(--accent) }

/* La respuesta: una sola cifra grande y una línea de contexto */
.respuesta{ padding:clamp(24px,4vw,38px) clamp(16px,3vw,24px) 6px }
.respuesta h2{
  font-size:clamp(24px,4vw,40px); font-weight:800; letter-spacing:-.03em;
  margin:0 0 8px; max-width:22ch;
}
.respuesta h2 em{ font-style:normal; color:var(--cheap) }
.respuesta h2 .nada{ color:var(--ink-3) }
.respuesta p{ margin:0; font-size:16px; color:var(--ink-3); max-width:56ch }
.respuesta p b{ color:var(--ink) }

/* Barra de cuánto de tu presupuesto se lleva un destino */
.barra{ display:block; height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:10px }
.barra i{ display:block; height:100%; border-radius:99px; background:var(--cheap) }
.barra.casi i{ background:var(--mid) }
.barra.fuera i{ background:var(--line-3) }

/* Colecciones: tres entradas con sentido, en vez de una tira de "ofertas" */
.colecciones{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px;
  padding:18px clamp(16px,3vw,24px) 4px;
}
.colec{
  display:block; text-align:left; text-decoration:none; cursor:pointer;
  border:1.5px solid var(--line-2); border-radius:var(--r-md);
  background:var(--surface); padding:16px 18px;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.colec:hover{ border-color:var(--ink); box-shadow:var(--shadow-2); transform:translateY(-2px) }
.colec[aria-pressed="true"]{ border-color:var(--ink); background:var(--surface-2) }
.colec-tag{
  display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
}
.colec-tit{ display:block; font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em }
.colec-sub{ display:block; font-size:13.5px; color:var(--ink-3); margin-top:4px }
.colec-sub b{ color:var(--ink); font-weight:700 }

/* Región como sección plegable: 6 destinos de Europa, no 37 de todo */
.region{ border-top:1px solid var(--line) }
.region-cab{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:16px clamp(16px,3vw,24px); background:none; border:0; text-align:left;
}
.region-cab:hover{ background:var(--surface-2) }
.region-cab h3{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0 }
.region-cab .cuantos{ font-size:14px; color:var(--ink-3); font-family:var(--mono) }
.region-cab .abre{ margin-left:auto; color:var(--ink-3); font-size:13px; transition:transform .16s ease }
.region[data-cerrada] .abre{ transform:rotate(-90deg) }
.region[data-cerrada] .region-cuerpo{ display:none }
.region-cuerpo{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px; padding:0 clamp(16px,3vw,24px) 22px;
}

/* Tarjeta de TRES datos. Lo demás aparece al pasar por encima. */
.sitio{
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  padding:16px 18px; transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.sitio:hover{ border-color:var(--ink); box-shadow:var(--shadow-2); transform:translateY(-2px) }
.sitio > span{ display:block }
.sitio-ciudad{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.15 }
.sitio-pais{ font-size:12.5px; color:var(--ink-3); margin-top:1px }
.sitio-precio{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:26px; letter-spacing:-.03em; line-height:1.1; margin-top:12px; color:var(--cheap);
}
.sitio-precio small{ display:inline }
.sitio-precio small{ font-family:var(--font); font-size:12px; font-weight:500; color:var(--ink-3); letter-spacing:0; margin-left:6px }
.sitio.casi .sitio-precio{ color:var(--mid) }
.sitio.fuera{ background:var(--surface-2) }
.sitio.fuera .sitio-ciudad{ color:var(--ink-3) }
.sitio.fuera .sitio-precio{ color:var(--ink-3) }
.sitio-ctx{ font-size:12.5px; color:var(--ink-3); margin-top:8px }
/* El cuarto dato y siguientes: aparecen al pasar el cursor o con teclado.
   El hueco se reserva SIEMPRE aunque estén ocultos — si no, al pasar el cursor
   la tarjeta crece y empuja toda la fila, que es justo lo que no debe pasar. */
.sitio-mas{
  height:32px; overflow:hidden; opacity:0; margin-top:10px;
  transition:opacity .18s ease;
  font-size:12.5px; line-height:1.3; color:var(--ink-3);
}
.sitio:hover .sitio-mas, .sitio:focus-visible .sitio-mas{ opacity:1 }
.sitio-falta{
  display:inline-block !important; margin-top:10px; padding:3px 10px; border-radius:var(--r-full);
  background:var(--warn-bg); color:#8A4A06; font-size:12px; font-weight:700;
}

/* Nota al pie de una suposición: si se muestra una cifra estimada, se dice de dónde sale */
.supuesto{
  padding:14px clamp(16px,3vw,24px) 26px; font-size:12.5px; color:var(--ink-3);
  border-top:1px solid var(--line); max-width:70ch;
}
.supuesto button{ border:0; background:none; color:var(--link); font:inherit; font-weight:700; cursor:pointer; padding:0 }

@media (max-width:860px){
  .frase{ font-size:16px; padding:14px var(--pad); gap:6px }
  .dato{ padding:4px 11px }
  .respuesta{ padding:20px var(--pad) 4px }
  /* Tres tarjetas apiladas se comían la pantalla entera antes del primer destino.
     En el teléfono son una tira que se desliza, y sin la explicación larga. */
  .colecciones{
    display:flex; gap:9px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:14px var(--pad) 4px; scrollbar-width:none;
  }
  .colecciones::-webkit-scrollbar{ display:none }
  .colec{ flex:0 0 78%; scroll-snap-align:start; padding:13px 15px }
  .colec-tit{ font-size:15.5px }
  .colec-exp{ display:none }
  .region-cuerpo{ grid-template-columns:1fr; padding:0 var(--pad) 16px }
  .region-cab{ padding:14px var(--pad) }
  /* En un teléfono no hay "pasar el cursor": el cuarto dato se muestra siempre */
  .sitio-mas{ height:auto; opacity:1; margin-top:10px }
}

/* ---------------------------------------------------------------
   30 · CUPO EN OTROS PROGRAMAS DE MILLAS
   El mismo asiento puede costar la mitad emitido por Aeroplan. Va arriba
   de los resultados, discreto: es un dato de apoyo, no la respuesta.
   --------------------------------------------------------------- */
.otros-prog{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  margin:var(--pad) var(--pad) 0; padding:12px 16px;
  border:1px solid #BEE5EB; border-radius:var(--r); background:var(--link-bg);
  font-size:13.5px; color:var(--ink-2);
}
.otro-prog{ display:inline-flex; align-items:center; gap:7px }
.otro-prog b{ color:var(--ink); font-weight:700 }
.otro-prog .num{ font-family:var(--mono); font-weight:700; color:var(--ink) }
.otro-mejor{
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:var(--r-full);
  background:var(--cheap-fill); color:#085C34;
}
.otro-nota{ font-size:12.5px; margin-left:auto }
@media (max-width:860px){ .otro-nota{ margin-left:0; flex-basis:100% } }

/* ---------------------------------------------------------------
   31 · PORTADA v2 — la estructura de flightpoints.com

   Escaneada de flightpoints.com el 2026-08-22. De ellos tomamos el ESQUELETO
   (franja de héroe → buscador flotante que la pisa → vitrina → blog → FAQ),
   no la piel: ellos van en azul eléctrico, nosotros en azul noche con el rojo
   de la casa de acento. Todo va con prefijo `fp-` para no pisar la portada
   vieja, que siguen usando precios/faq/legal.
   --------------------------------------------------------------- */
:root{
  --noche:      #101B33;   /* la franja del héroe */
  --noche-2:    #16233D;   /* tarjetas sobre la franja */
  --noche-3:    #1E2E4D;   /* elevado / hover */
  --noche-line: #2A3A5C;
  --noche-ink:  #FFFFFF;
  --noche-ink2: #A8B6D1;   /* texto secundario sobre oscuro */
  --noche-ink3: #6E7F9F;
}

/* ============ 31.1 · FRANJA DEL HÉROE ============ */
.fp-hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 50% -10%, #1D3057 0%, transparent 60%),
    linear-gradient(180deg, #101B33 0%, #0D1730 100%);
  color:var(--noche-ink);
  padding:clamp(40px,7vw,84px) var(--pad) 0;
  text-align:center;
  overflow:hidden;
}
/* Rejilla tenue de fondo: da textura sin robar atención. */
.fp-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(80% 60% at 50% 0%, #000 0%, transparent 75%);
}
.fp-hero > *{ position:relative }

.fp-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:var(--r-full);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  font-size:13px; font-weight:600; color:#DCE5F5;
  backdrop-filter:blur(6px);
}
.fp-badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent-hi);
  box-shadow:0 0 0 3px rgba(255,28,28,.22);
}
.fp-hero h1{
  margin:20px auto 0; max-width:16ch;
  font-size:clamp(32px,5.4vw,60px); font-weight:900; letter-spacing:-.03em; line-height:1.04;
}
.fp-hero h1 em{
  font-style:normal; position:relative; white-space:nowrap;
  background:linear-gradient(180deg,#FF5C5C,#D90000);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fp-hero-sub{
  margin:18px auto 0; max-width:62ch;
  font-size:clamp(15px,1.5vw,17.5px); line-height:1.6; color:var(--noche-ink2);
}
/* Fila de confianza: logos de programa + un dato duro. */
.fp-trust{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin-top:24px; font-size:13px; color:var(--noche-ink2);
}
.fp-trust .av{ background:rgba(255,255,255,.92) }
.fp-trust-sep{ width:1px; height:18px; background:rgba(255,255,255,.2) }
.fp-trust b{ color:#fff; font-weight:700 }

/* ============ 31.2 · BUSCADOR FLOTANTE (pisa la franja) ============ */
.fp-buscador{
  max-width:1080px; margin:clamp(28px,4vw,44px) auto 0;
  background:var(--surface); color:var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--shadow-3);
  padding:14px; text-align:left;
  position:relative; z-index:2;
}
/* Cabecera: pestañas a la izquierda, interruptores a la derecha. */
.fp-bus-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 4px 12px }
.fp-tabs{ display:inline-flex; gap:4px; padding:3px; background:var(--surface-3); border-radius:var(--r-full) }
.fp-tab{
  border:0; background:none; padding:7px 18px; border-radius:var(--r-full);
  font-size:13.5px; font-weight:700; color:var(--ink-3);
}
.fp-tab[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1) }

/* El interruptor de verdad (búsqueda en vivo). */
.fp-switch{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--ink-3); cursor:pointer;
  user-select:none;
}
.fp-switch input{ position:absolute; opacity:0; width:0; height:0 }
.fp-switch .via{
  width:38px; height:21px; border-radius:var(--r-full);
  background:var(--line-2); position:relative; transition:background .16s ease;
  flex:none;
}
.fp-switch .via::after{
  content:""; position:absolute; top:2px; left:2px; width:17px; height:17px;
  border-radius:50%; background:#fff; box-shadow:var(--shadow-1);
  transition:transform .16s ease;
}
.fp-switch input:checked + .via{ background:var(--accent) }
.fp-switch input:checked + .via::after{ transform:translateX(17px) }
.fp-switch input:focus-visible + .via{ box-shadow:var(--ring) }
.fp-switch input:disabled + .via{ opacity:.45 }
.fp-switch:has(input:checked){ color:var(--ink) }
.fp-switch:has(input:disabled){ cursor:not-allowed }

/* La rejilla de campos: origen ⇄ destino | ida | vuelta | cabina | buscar */
.fp-campos{
  display:grid; gap:8px;
  grid-template-columns:1.35fr auto 1.35fr 1fr 1fr .9fr auto;
  align-items:end;
}
.fp-campo{
  display:flex; flex-direction:column; gap:5px;
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:9px 12px; background:var(--surface); min-width:0;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.fp-campo:focus-within{ border-color:var(--ink-4); box-shadow:var(--ring) }
.fp-campo > label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3);
}
.fp-campo .control{ border:0; padding:0; min-height:26px; background:none }
.fp-campo input[type="date"],
.fp-campo select{
  border:0; background:none; font:inherit; color:inherit; width:100%;
  padding:0; min-height:26px; font-weight:600;
}
.fp-campo input[type="date"]{ font-family:var(--mono); font-size:14px }
.fp-campo input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.55 }
.fp-campo.vacio{ background:var(--surface-2) }
.fp-swap{
  width:38px; height:38px; margin-bottom:9px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--surface);
  display:grid; place-items:center; font-size:15px; color:var(--ink-2); flex:none;
}
.fp-swap:hover{ background:var(--surface-3); color:var(--ink) }
.fp-buscar{
  height:60px; padding:0 30px; border:0; border-radius:var(--r-md);
  background:var(--accent); color:var(--on-accent);
  font-size:15.5px; font-weight:800; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.fp-buscar:hover{ background:var(--accent-hi) }
.fp-buscar:active{ transform:translateY(1px) }

/* Pista bajo el buscador */
.fp-pista{
  margin:11px 4px 2px; font-size:12.5px; color:var(--ink-3);
}
.fp-pista code{
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  background:var(--surface-3); padding:2px 7px; border-radius:var(--r-xs); color:var(--ink-2);
}

/* ============ 31.3 · TRES VENTAJAS (bajo el buscador, aún en la franja) ============ */
.fp-ventajas{
  display:flex; justify-content:center; gap:10px 34px; flex-wrap:wrap;
  max-width:1080px; margin:26px auto 0; padding-bottom:clamp(34px,5vw,54px);
  font-size:13.5px; color:var(--noche-ink2);
}
.fp-ventaja{ display:inline-flex; align-items:center; gap:9px }
.fp-ventaja svg{ flex:none; color:#4ADE80 }
.fp-ventaja b{ color:#fff; font-weight:700 }

/* ============ 31.4 · VITRINA OSCURA — el carrusel de premios ============
   Sigue la franja del héroe sin costura: mismo azul noche, así el ojo lee
   «cabecera» como un solo bloque. Las tarjetas van en riel horizontal con
   ajuste por tarjeta, que es como se lee un carrusel con el dedo. */
.fp-vitrina{
  background:linear-gradient(180deg,#0D1730 0%, #0B1428 100%);
  color:var(--noche-ink);
  padding:clamp(34px,5vw,56px) 0 clamp(40px,6vw,64px);
  border-bottom:1px solid #060C1A;
}
.fp-vit-head{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(16px,4vw,40px);
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
}
.fp-vit-head .label{ color:var(--accent-hi) }
.fp-vit-head h2{
  font-size:clamp(21px,2.6vw,30px); font-weight:900; letter-spacing:-.025em; color:#fff;
}
.fp-vit-head p{ margin:6px 0 0; font-size:13.5px; color:var(--noche-ink2); max-width:58ch }
.fp-vit-head .spacer{ flex:1 }
.fp-vit-nav{ display:flex; gap:8px }
.fp-vit-nav button{
  width:40px; height:40px; border-radius:50%; flex:none;
  border:1px solid var(--noche-line); background:var(--noche-2); color:#fff;
  display:grid; place-items:center; font-size:16px;
}
.fp-vit-nav button:hover:not(:disabled){ background:var(--noche-3); border-color:#3B4E77 }
.fp-vit-nav button:disabled{ opacity:.3; cursor:default }

.fp-riel{
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:20px clamp(16px,4vw,40px) 4px;
  max-width:var(--maxw); margin:0 auto;
}
.fp-riel::-webkit-scrollbar{ display:none }

.fp-oferta{
  flex:0 0 clamp(290px,27vw,340px); scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--noche-2); border:1px solid var(--noche-line);
  border-radius:var(--r-md); text-decoration:none; color:inherit;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.fp-oferta:hover{
  transform:translateY(-3px); background:var(--noche-3); border-color:#3B4E77; color:inherit;
}
/* Cabecera: fecha a la izquierda, cabina a la derecha */
.fp-of-head{
  display:flex; align-items:center; gap:10px;
  padding:11px 15px; border-bottom:1px solid var(--noche-line);
  font-size:12.5px; color:var(--noche-ink2);
}
.fp-of-head .spacer{ flex:1 }
.fp-of-cab{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:#DCE5F5 }
.fp-of-cab svg{ opacity:.75 }

.fp-of-cuerpo{ padding:15px 15px 13px; flex:1 }
.fp-of-ruta{
  display:flex; align-items:center; gap:10px;
  font-size:17.5px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.2;
}
.fp-of-ruta .av{ background:#fff; flex:none }
.fp-of-ruta span{ min-width:0; overflow:hidden; text-overflow:ellipsis }
.fp-of-sub{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:7px; font-size:12.5px; color:var(--noche-ink3);
}
.fp-of-sub .cod{ font-family:var(--mono); font-weight:700; color:var(--noche-ink2) }
.fp-of-sub .punto{ opacity:.5 }

/* Pie: programa a la izquierda, precio grande a la derecha */
.fp-of-pie{
  display:flex; align-items:flex-end; gap:12px;
  padding:12px 15px; border-top:1px solid var(--noche-line);
  background:rgba(0,0,0,.16); border-radius:0 0 var(--r-md) var(--r-md);
}
.fp-of-prog{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:5px 10px; border-radius:var(--r-full);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); color:#DCE5F5;
}
.fp-of-pie .spacer{ flex:1 }
.fp-of-precio{ text-align:right; line-height:1.15 }
.fp-of-precio b{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:21px; font-weight:700; color:#fff; letter-spacing:-.02em;
}
.fp-of-precio b .flecha{ font-size:12px; color:var(--noche-ink3) }
.fp-of-precio small{ display:block; margin-top:2px; font-size:11.5px; color:var(--noche-ink3) }
.fp-of-ganga{
  position:absolute; top:11px; right:15px;
  font-size:10.5px; font-weight:800; letter-spacing:.04em;
  padding:3px 8px; border-radius:var(--r-full);
  background:var(--accent); color:#fff;
}

/* Estados del riel */
.fp-riel .skel-of{
  flex:0 0 clamp(290px,27vw,340px); height:186px; border-radius:var(--r-md);
  background:linear-gradient(90deg,#16233D 25%,#1E2E4D 37%,#16233D 63%);
  background-size:200% 100%; animation:shimmer 1.3s linear infinite;
}
.fp-vit-vacio{
  max-width:var(--maxw); margin:0 auto; padding:22px clamp(16px,4vw,40px);
  color:var(--noche-ink2); font-size:14px;
}

/* ============ 31.5 · SECCIONES CLARAS ============ */
.fp-seccion{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(44px,6vw,76px) clamp(16px,4vw,40px);
}
.fp-seccion-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:26px }
.fp-seccion-head .spacer{ flex:1 }
.fp-seccion h2{
  font-size:clamp(22px,2.8vw,34px); font-weight:900; letter-spacing:-.03em; line-height:1.1;
}
.fp-seccion h2 + p{ margin:10px 0 0; color:var(--ink-3); font-size:15px; max-width:62ch }
.fp-centro{ text-align:center }
.fp-centro h2 + p{ margin-inline:auto }

/* Tarjetas de «por qué nosotros» */
.fp-rejilla{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.fp-tarjeta{
  border:1px solid var(--line); border-radius:var(--r-md); padding:22px;
  background:var(--surface); transition:box-shadow .16s ease, transform .16s ease;
}
.fp-tarjeta:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px) }
.fp-tarjeta .ico{
  width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--accent-bg); color:var(--accent); margin-bottom:14px;
}
.fp-tarjeta h3{ font-size:16.5px; font-weight:800; letter-spacing:-.015em }
.fp-tarjeta p{ margin:8px 0 0; font-size:13.5px; color:var(--ink-3); line-height:1.6 }

/* ============ 31.6 · BLOG ============ */
.fp-blog{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) }
.fp-post{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); text-decoration:none; color:inherit;
  transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.fp-post:hover{ box-shadow:var(--shadow-2); transform:translateY(-3px); border-color:var(--line-2); color:inherit }
/* Portada dibujada con CSS: sin imágenes que pesen ni que haya que licenciar. */
.fp-post-tapa{
  height:130px; position:relative; flex:none;
  background:linear-gradient(135deg,#101B33 0%,#26365C 100%);
  display:grid; place-items:center; overflow:hidden;
}
.fp-post-tapa::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.fp-post-tapa .glifo{ position:relative; font-size:44px; line-height:1; filter:saturate(1.1) }
.fp-post-cuerpo{ padding:16px 17px 18px; display:flex; flex-direction:column; flex:1 }
.fp-post-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px }
.fp-post-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-full); background:var(--surface-3); color:var(--ink-3);
}
.fp-post-tag.es-guia{ background:var(--link-bg); color:var(--link-hi) }
.fp-post h3{ font-size:16px; font-weight:800; letter-spacing:-.02em; line-height:1.3 }
.fp-post p{ margin:9px 0 0; font-size:13.5px; color:var(--ink-3); line-height:1.6 }
.fp-post-pie{
  display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px;
  font-size:12.5px; color:var(--ink-3);
}
.fp-post-pie .spacer{ flex:1 }
.fp-post-pie .leer{ font-weight:700; color:var(--link) }

/* ============ 31.7 · PREGUNTAS FRECUENTES (acordeón) ============ */
.fp-faq{ max-width:820px; margin:0 auto }
.fp-faq details{
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  margin-bottom:9px; overflow:hidden;
}
.fp-faq details[open]{ border-color:var(--line-2); box-shadow:var(--shadow-1) }
.fp-faq summary{
  padding:16px 18px; font-size:15px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:12px; list-style:none;
}
.fp-faq summary::-webkit-details-marker{ display:none }
.fp-faq summary::after{
  content:"+"; margin-left:auto; font-size:19px; font-weight:600; color:var(--ink-3);
  transition:transform .16s ease; flex:none;
}
.fp-faq details[open] summary::after{ transform:rotate(45deg) }
.fp-faq summary:hover{ background:var(--surface-2) }
.fp-faq .fp-faq-cuerpo{
  padding:0 18px 17px; font-size:14px; color:var(--ink-3); line-height:1.65;
}
.fp-faq .fp-faq-cuerpo p{ margin:0 0 10px }
.fp-faq .fp-faq-cuerpo p:last-child{ margin:0 }

/* ============ 31.8 · LLAMADA FINAL ============ */
.fp-cierre{
  background:linear-gradient(135deg,#101B33 0%,#1D3057 100%);
  color:#fff; text-align:center;
  padding:clamp(44px,6vw,72px) var(--pad);
}
.fp-cierre h2{ font-size:clamp(23px,3vw,36px); font-weight:900; letter-spacing:-.03em; color:#fff }
.fp-cierre p{ margin:14px auto 24px; max-width:58ch; color:var(--noche-ink2); font-size:15px }
.fp-cierre .btn-primary{ background:var(--accent) }
.fp-cierre .btn-primary:hover{ background:var(--accent-hi) }
.fp-cierre .btn-fantasma{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
}
.fp-cierre .btn-fantasma:hover{ background:rgba(255,255,255,.15); color:#fff }

/* ============ 31.9 · RESPONSIVO ============ */
@media (max-width:1080px){
  .fp-campos{ grid-template-columns:1fr auto 1fr; }
  .fp-campos .fp-campo-fecha{ grid-column:span 1 }
  .fp-swap{ grid-row:1 }
  .fp-campo-cabina{ grid-column:1 / 2 }
  .fp-buscar{ grid-column:1 / -1; width:100%; justify-content:center; height:54px }
}
@media (max-width:720px){
  .fp-campos{ grid-template-columns:1fr }
  .fp-swap{
    grid-row:auto; margin:-3px auto; width:34px; height:34px;
    transform:rotate(90deg);
  }
  .fp-hero{ padding-top:32px }
  .fp-buscador{ padding:12px; border-radius:var(--r-md) }
  .fp-bus-head{ padding-bottom:10px }
  .fp-ventajas{ flex-direction:column; align-items:flex-start; text-align:left; padding-inline:6px }
  .fp-oferta{ flex-basis:82vw }
  .fp-vit-nav{ display:none }   /* con el dedo se arrastra: los botones sobran */
}

/* ---------------------------------------------------------------
   32 · CUERPO DE UNA GUÍA
   Medida de lectura corta (~68 caracteres) y jerarquía marcada: son
   textos largos que se leen de arriba abajo, no se escanean.
   --------------------------------------------------------------- */
/* 768 − 2×24 = 720 px de texto, el mismo ancho que el titular del héroe de arriba:
   así el borde izquierdo del título y el del primer párrafo caen en la misma línea. */
.fp-articulo{ max-width:768px; margin:0 auto; padding:clamp(32px,5vw,56px) 24px }
.fp-articulo > :first-child{ margin-top:0 }
.fp-articulo p{ font-size:16.5px; line-height:1.75; color:var(--ink-2); margin:0 0 18px }
.fp-articulo h3{
  font-size:clamp(19px,2.4vw,23px); font-weight:800; letter-spacing:-.022em; color:var(--ink);
  margin:38px 0 14px; padding-top:22px; border-top:1px solid var(--line);
}
.fp-articulo h3:first-child{ border-top:0; padding-top:0; margin-top:0 }
.fp-articulo b{ color:var(--ink); font-weight:700 }
.fp-articulo em{ font-style:italic }
.fp-articulo ul{ list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:11px }
.fp-articulo ul li{ position:relative; padding-left:24px; font-size:16px; line-height:1.65; color:var(--ink-2) }
.fp-articulo ul li::before{
  content:""; position:absolute; left:6px; top:10px; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
}
.fp-articulo ol.pasos{ margin:0 0 18px }
.fp-articulo .aviso{ font-size:15px }
.fp-articulo .aviso p{ font-size:15px; margin:6px 0 0; line-height:1.65 }
.fp-articulo .muted{ font-size:13.5px; color:var(--ink-3) }

/* ---------------------------------------------------------------
   33 · LA PORTADA v2 VA A SANGRE
   `.portada` encajona todo a 1248px, que es lo correcto en las páginas de
   texto pero mata las franjas de color de la portada nueva. Aquí cada
   sección se encarga de su propio ancho y el pie recupera su caja.
   --------------------------------------------------------------- */
.fp-pagina{ overflow-x:hidden }        /* red de seguridad: nada asoma de lado */
.fp-pagina > .pie{
  max-width:var(--maxw); margin:0 auto;
  padding:36px clamp(16px,4vw,40px) 48px;
}

/* ---------------------------------------------------------------
   34 · PÁGINA DE RESULTADOS — cabecera al estilo flightpoints

   El buscador es EL MISMO de la portada (`.fp-campos`), solo que más
   apretado y pegado arriba: quien busca desde la portada y aterriza aquí
   reconoce los mismos campos en el mismo orden.
   --------------------------------------------------------------- */
.fp-resbar{
  border-radius:0; border-left:0; border-right:0; border-top:0;
  padding:10px clamp(12px,2vw,18px) 0;
}
.fp-resbar-head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:2px 2px 10px;
}
.fp-volver{
  width:34px; height:34px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); background:var(--surface);
  display:grid; place-items:center; font-size:16px; color:var(--ink-2);
  text-decoration:none;
}
.fp-volver:hover{ background:var(--surface-3); color:var(--ink) }
.fp-resbar-titulo{ font-size:15px; font-weight:800; letter-spacing:-.02em }
.fp-resbar-head .spacer{ flex:1 }

/* Variante apretada de la rejilla: mismas columnas, menos aire. */
.fp-campos-res{ gap:7px; padding-bottom:10px }
.fp-campos-res .fp-campo{ padding:7px 11px; border-radius:var(--r) }
.fp-campos-res .fp-campo > label{ font-size:10px }
.fp-campos-res .fp-campo .control{ min-height:24px }
.fp-campos-res .fp-buscar{ height:54px; padding:0 26px; border-radius:var(--r) }
.fp-campos-res .fp-swap{ margin-bottom:7px; width:34px; height:34px }
.fp-campo-mes select{
  border:0; background:none; font:inherit; color:inherit; width:100%;
  min-height:24px; font-weight:600; font-family:var(--mono); font-size:13.5px;
}

/* Aviso al encender «en vivo» mientras el motor en vivo no existe. */
.fp-vivo-nota{
  flex-basis:100%; font-size:12px; color:var(--mid);
  background:var(--mid-bg); border:1px solid var(--mid-line);
  border-radius:var(--r-xs); padding:6px 10px; margin-top:6px;
}

@media (max-width:1080px){
  .fp-campos-res .fp-buscar{ height:46px }
}
@media (max-width:720px){
  .fp-resbar-titulo{ font-size:14px }
  .fp-campos-res .fp-swap{ transform:rotate(90deg) }
}