/* =====================================================================
   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 }
@media (min-width:760px){ .pie-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr } }
.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 }
}