/* ============================================================
   BONO BUS · DESIGN TOKENS
   Variables CSS alineadas al ecosistema Estrella Roja / eBus.
   Listas para portar a Angular 20 + Bootstrap 5 (override de :root).
   ============================================================ */
:root{
  /* ---- Marca / UI ---- */
  --bb-blue-700:#005AB2;   /* azul UI dominante (estrellaroja / ebus) */
  --bb-blue-600:#1976d2;   /* azul secundario / acentos */
  --bb-blue-500:#2f8ae8;   /* azul claro / links sobre claro */
  --bb-blue-100:#e7f1fb;   /* fondo azul tenue */
  --bb-navy-900:#0a1c33;   /* hero oscuro base */
  --bb-navy-800:#0b1f3a;
  --bb-navy-700:#15355f;   /* hero gradiente */

  --bb-red:#d62a34;        /* rojo de marca / acción — SOLO CTA + sello */
  --bb-red-700:#b81f29;    /* rojo hover/active */
  --bb-red-100:#fdecec;

  /* ---- Neutros ---- */
  --bb-ink:#15243b;        /* texto sobre claro (titulares) */
  --bb-text:#1a1a1a;       /* cuerpo */
  --bb-muted:#5b6573;      /* texto secundario (AA sobre blanco) */
  --bb-faint:#8a93a3;      /* terciario */
  --bb-line:#e7eaef;       /* bordes / divisores */
  --bb-bg:#f6f7f9;         /* fondo página */
  --bb-bg-2:#f2f2f2;
  --bb-surface:#ffffff;    /* superficies / tarjetas */

  /* sobre fondo oscuro (hero) — verificados AA */
  --bb-on-dark:#ffffff;
  --bb-on-dark-2:#cfe0f5;  /* secundario sobre navy (AA: ~7:1) */
  --bb-on-dark-3:#9fc0ec;  /* eyebrow/acento (AA grande) */
  --bb-mint:#3ddc97;       /* señal "ahorro/positivo" sobre oscuro */

  /* ---- Acentos por servicio ---- */
  --svc-directo:#005AB2;   /* DIRECTO / DIRECTO TTP · Super Rápidos */
  --svc-ebus:#16a06e;      /* EBUS · verde premium */
  --svc-aeropuerto:#0e86c7;/* AEROPUERTO · cyan */
  --svc-pullman:#1a2e5a;   /* PULLMAN · navy primera clase */
  --svc-intermedio:#6b4fa0;/* INTERMEDIO / PISTA · violeta */

  /* señales de estado */
  --bb-ok:#16a06e;
  --bb-ok-bg:#e8f6ef;
  --bb-warn:#d62a34;
  --bb-warn-bg:#fdecec;

  /* ---- Tipografía ---- */
  --bb-font-head:'Raleway',system-ui,sans-serif;  /* titulares 800–900 */
  --bb-font-body:'Nunito',system-ui,sans-serif;   /* cuerpo + precios */
  --bb-fw-body:600; --bb-fw-strong:800; --bb-fw-black:900;

  /* escala tipográfica (mobile base) */
  --fs-display:33px; --fs-h1:27px; --fs-h2:21px; --fs-h3:17px;
  --fs-body:15px; --fs-sm:13px; --fs-xs:11px;
  --lh-tight:1.04; --lh-snug:1.25; --lh-body:1.5;

  /* ---- Espaciado (grid 4px) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;

  /* ---- Radios ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:26px; --r-pill:999px;

  /* ---- Sombras ---- */
  --sh-1:0 2px 8px -4px rgba(11,31,58,.18);
  --sh-2:0 12px 28px -16px rgba(11,31,58,.34);
  --sh-3:0 22px 46px -20px rgba(11,31,58,.46);
  --sh-red:0 12px 26px -10px rgba(214,42,52,.55);
  --sh-blue:0 14px 30px -14px rgba(0,90,178,.45);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.22s;

  /* layout */
  --maxw:1180px;
  --gutter:20px;
}

@media (min-width:960px){
  :root{
    --fs-display:64px; --fs-h1:44px; --fs-h2:32px; --fs-h3:20px;
    --fs-body:17px; --fs-sm:14px;
    --gutter:40px;
  }
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bb-bg); color:var(--bb-text);
  font-family:var(--bb-font-body); font-weight:var(--bb-fw-body);
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--bb-font-head);margin:0;color:var(--bb-ink);letter-spacing:-.02em;}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:var(--bb-font-body);cursor:pointer;}
:focus-visible{outline:3px solid var(--bb-blue-500);outline-offset:2px;border-radius:6px;}
.bb-tnum{font-variant-numeric:tabular-nums;}