/* =========================================================
   ESTAVIA — base.css
   Fichas de color, tipografía y las piezas que se repiten.

   EL SISTEMA, en una línea: papel blanco, tinta negra y un
   solo acento —el rojo del matasellos— reservado para lo
   que de verdad importa: el precio con ESTAVIA.

   Tres reglas que el resto de las hojas no deben romper:
     1. Nada se separa con cajas ni con sombras. Se separa
        con espacio y, cuando hace falta, con una raya de 1px.
     2. Todo se alinea a la izquierda. Centrar es lo que hace
        que una página parezca plantilla.
     3. Un acento. Si algo ya es rojo en pantalla, lo demás no.
   ========================================================= */

:root{
  /* --- color --- */
  --papel:   #FFFFFF;
  --tinta:   #000000;   /* titulares, botón primario, bordes con intención */
  --humo:    #6E6E78;   /* texto secundario */
  --niebla:  #9A9AA4;   /* el tono más claro que sigue siendo legible */
  --linea:   #E5E5E9;   /* divisores */
  --linea-f: #C9C9D0;   /* divisor con más presencia: campos, tablas */
  --velo:    #F5F5F6;   /* relleno apenas perceptible: celdas, estados */

  --estela:     #E8411C;   /* la tinta del matasellos. El único acento. */
  --estela-10:  #FDEDE9;
  --verde:   #0A7C3E;   /* ahorro */
  --verde-10:#EAF5EE;
  --rojo:    #B3261E;   /* precio alto */
  --rojo-10: #FBEBEA;

  /* alias que siguen usando hojas y JS viejos */
  --blanco: var(--papel);
  --azul: var(--tinta);
  --azul-hondo: var(--tinta);
  --azul-tinte: var(--velo);
  --tinta-70: var(--humo);
  --gris: var(--niebla);
  --crema: var(--velo);
  --hondo: var(--velo);
  --arena: var(--velo);
  --papel-alias: var(--papel);
  --linea-media: var(--linea-f);
  --verde-suave: var(--verde-10);
  --rojo-suave: var(--rojo-10);
  --brasa: var(--estela);
  --ambar: var(--tinta);
  --vidrio: rgba(255,255,255,.92);
  --sombra: none;
  --sombra-alta: none;

  /* --- tipografía: una sola familia, bien usada --- */
  --texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--texto);

  /* --- geometría --- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --pill: 9999px;

  --ancho: 1120px;
  --pad-x: clamp(20px, 5vw, 48px);
  --barra: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* El atributo hidden vale menos que cualquier display que le
   pongas después, así que un panel "oculto" con display:flex
   sigue tapando la pantalla y robándose los clics. Esto lo
   zanja de una vez para todo el sitio. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* Los titulares son el único lugar donde la tipografía se
   aprieta. Debajo de 2rem el tracking vuelve a cero. */
h1,h2,h3,h4{ margin:0; color:var(--tinta); font-weight:600; }
h1{ font-size:clamp(2.6rem, 6.4vw, 4.75rem); line-height:.98; letter-spacing:-.042em; }
h2{ font-size:clamp(1.75rem, 3.4vw, 2.6rem); line-height:1.06; letter-spacing:-.032em; }
h3{ font-size:1.0625rem; line-height:1.35; letter-spacing:-.012em; }
h4{ font-size:.9375rem; line-height:1.4; letter-spacing:-.008em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:min(100% - (var(--pad-x) * 2), var(--ancho)); margin-inline:auto; }
.seccion{ padding:clamp(64px, 9vw, 128px) 0; }
.centro{ text-align:center; }
.sutil{ color:var(--humo); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.num{ font-variant-numeric:tabular-nums; }

/* etiqueta pequeña; sin mayúsculas ni tracking */
.dato{ font-size:.8125rem; line-height:1.45; color:var(--humo); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:12px 22px; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:.9375rem; font-weight:600; line-height:1.4;
  letter-spacing:-.01em;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }

.btn--tinta,
.btn--brasa,
.btn--paso{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }
.btn--tinta:hover,
.btn--brasa:hover,
.btn--paso:hover{ background:#2A2A2E; border-color:#2A2A2E; }

.btn--linea{ background:transparent; color:var(--tinta); border-color:var(--linea-f); }
.btn--linea:hover{ border-color:var(--tinta); }

.btn--llano{ background:transparent; color:var(--tinta); border-color:transparent; padding:12px 12px; }
.btn--llano:hover{ background:var(--velo); }

.btn--sm{ min-height:38px; padding:8px 16px; font-size:.875rem; }
.btn--bloque{ width:100%; }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }

/* botón redondo de navegación */
.circulo{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--papel); color:var(--tinta); border:1px solid var(--linea-f); cursor:pointer;
  transition:border-color .15s ease;
}
.circulo:hover{ border-color:var(--tinta); }
.circulo:disabled{ opacity:.3; cursor:not-allowed; }
.circulo svg{ width:16px; height:16px; }

/* enlaces de texto: subrayado fino, no color */
.enlace{
  font-weight:500; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:var(--linea-f);
}
.enlace:hover{ text-decoration-color:currentColor; }

/* ---------- Campos ---------- */
.campo{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo > span,
.campo > label{ font-size:.8125rem; font-weight:500; line-height:1.3; color:var(--humo); }
.campo input,
.campo select,
.campo textarea{
  width:100%; min-height:46px; padding:11px 13px;
  border:1px solid var(--linea-f); border-radius:var(--r-md);
  background:var(--papel); color:var(--tinta);
  font-family:inherit; font-size:.9375rem; line-height:1.5;
  transition:border-color .15s ease;
}
.campo textarea{ min-height:104px; resize:vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ outline:none; border-color:var(--tinta); }
.campo--ancho{ flex:1 1 200px; }

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--pill);
  border:1px solid var(--linea-f); background:transparent; cursor:pointer;
  font-family:inherit; font-size:.875rem; font-weight:500; color:var(--humo);
  transition:border-color .15s ease, color .15s ease;
}
.chip:hover{ border-color:var(--tinta); color:var(--tinta); }
.chip.activo{ background:var(--tinta); border-color:var(--tinta); color:var(--papel); }

/* ---------- Rejillas ---------- */
.rejilla{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px, 3vw, 44px); }
.rejilla--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.rejilla--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){ .rejilla, .rejilla--4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .rejilla, .rejilla--2, .rejilla--4{ grid-template-columns:1fr; } }

/* El panel no es una tarjeta: es una raya arriba y aire. */
.panel{ background:transparent; border:none; border-top:1px solid var(--linea); border-radius:0; padding:20px 0 0; }
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width: 700px){ .dos{ grid-template-columns:1fr; } }

.opcion{
  display:block; padding:13px 15px; border:1px solid var(--linea);
  border-radius:var(--r-md); cursor:pointer; font-size:.9375rem;
  transition:border-color .15s ease;
}
.opcion:hover{ border-color:var(--linea-f); }
.opcion:has(input:checked){ border-color:var(--tinta); background:var(--velo); }
.opcion input{ margin-right:10px; accent-color:var(--tinta); }

/* ---------- Tabla ---------- */
.tabla{ width:100%; border-collapse:collapse; }
.tabla th, .tabla td{ padding:15px 14px 15px 0; text-align:left; border-bottom:1px solid var(--linea); font-size:.9375rem; }
.tabla th{ font-size:.8125rem; font-weight:500; color:var(--humo); }

.etiqueta{
  display:inline-block; padding:3px 8px; border-radius:var(--r-sm);
  font-size:.75rem; font-weight:500; background:var(--velo); color:var(--humo);
}
.etiqueta--ok{ background:var(--verde-10); color:var(--verde); }

/* ---------- Vacíos ---------- */
.vacio, .vacio--vuelos{
  text-align:left; padding:clamp(36px, 5vw, 56px) 0;
  border:none; border-top:1px solid var(--linea); border-radius:0; background:transparent;
}

/* ---------- Encabezado de sección ----------
   El icono va pegado al título, no en un rótulo aparte: así
   sirve para escanear la página en lugar de decorarla. */
.encabezado{ margin-bottom:clamp(32px, 4vw, 52px); max-width:72ch; }
.encabezado h2{ max-width:20ch; }
.encabezado p{ margin:16px 0 0; max-width:62ch; color:var(--humo); font-size:1.0625rem; line-height:1.6; }
.encabezado--centro{ text-align:left; }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }