/* ════════════════════════════════════════════════════════════════════════
   sip-system.css — el sistema de diseño de SIP para la web.
   Extraído de _design-ref.html (dirección aprobada). Nada fuera de esta lista.

     15 colores   (10 de lib/constants/app_colors.dart + 5 tonos derivados
                   que la referencia aprueba: bg-deep, surface-2, border-soft,
                   t3 y el hover del botón primario)
     8 tamaños    --f0..--f7 (~1.4x)
     10 espacios  --s1..--s10 (base 8px)
     3 radios     --rb --rc --rp
     1 filo       --rim (en oscuro: filo, no sombra) + su variante cian
     3 botones    .btn-1 .btn-2 .btn-3

   Los canales --*-rgb no son colores nuevos: son los mismos tokens en
   componentes, para poder escribir rgba(var(--cy-rgb),.24) sin literales.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  /* ground */
  --bg:#0f172a; --bg-deep:#0A1220;
  --surface:#1e293b; --surface-2:#243449;
  --border:#334155; --border-soft:#26364c;
  /* text */
  --t1:#f1f5f9; --t2:#cbd5e1; --t3:#8698ae;
  /* accent */
  --cy:#38BDF8; --cy-deep:#009DD2; --cy-hover:#5BCBFA;
  /* semantic */
  --ok:#34D399; --warn:#FBBF24; --bad:#F87171;
  /* canales (mismos colores, para alphas sin literales) */
  --cy-rgb:56,189,248; --ok-rgb:52,211,153;
  --bg-rgb:15,23,42; --surface-rgb:30,41,59; --white-rgb:255,255,255;
  /* radii — 3, como la app */
  --rb:12px; --rc:20px; --rp:999px;
  /* type scale — 8 pasos, ~1.4x */
  --f0:12px; --f1:14px; --f2:16px; --f3:20px;
  --f4:28px; --f5:40px; --f6:64px; --f7:96px;
  /* space scale — 8px base */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:96px; --s9:128px; --s10:160px;
  /* rim — en oscuro se usa filo, no sombra */
  --rim:inset 0 1px 0 rgba(var(--white-rgb),.06);
  --rim-cy:inset 0 1px 0 rgba(var(--cy-rgb),.22);
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--t1);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--f2); line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
h1,h2,h3{font-family:Archivo,Inter,sans-serif;line-height:1.06;text-wrap:balance;letter-spacing:-.028em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px;border-radius:var(--rb)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}

/* eyebrow — el instrumento */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--f0); letter-spacing:.18em; text-transform:uppercase;
  color:var(--cy); display:flex; align-items:center; gap:var(--s2);
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--cy);flex:none}
.eyebrow .emo{font-size:var(--f1)}

/* ── BOTONES — 3, no 8 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:0 var(--s4);border-radius:var(--rb);
  font-size:var(--f1);font-weight:600;font-family:Inter,system-ui,sans-serif;
  border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap;
}
.btn-1{background:var(--cy);color:var(--bg-deep);box-shadow:var(--rim)}
.btn-1:hover{background:var(--cy-hover)}
.btn-2{background:var(--surface);color:var(--t1);border-color:var(--border);box-shadow:var(--rim)}
.btn-2:hover{background:var(--surface-2)}
.btn-3{background:none;color:var(--t2);padding:0}
.btn-3:hover{color:var(--cy)}

/* Insignias oficiales de las tiendas (06-10-2026). Guías: App Store ≥ 40 px de
   alto en pantalla, Google Play ≥ 28 px y del mismo tamaño o mayor que las
   otras; espacio libre ≥ 1/4 del alto (48 px → 12 px) por cada lado: el hueco
   entre las dos es de 16 px. Sin recolorear ni deformar (alto fijo, ancho
   automático). Si no caben lado a lado, una sobre otra. */
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:12px 0}
.store-badges .store-badge{display:block;min-height:0;line-height:0;padding:0;border-radius:8px}
.store-badges .store-badge:focus-visible{outline:2px solid var(--cy);outline-offset:4px}
.store-badges .store-badge img{display:block;height:48px;width:auto;max-width:none}
.hero .store-badges{margin:var(--s5,24px) 0 var(--s3,12px)}
.foot .store-badges{margin-top:var(--s4,16px)}
.foot-tm{margin-top:var(--s3,12px);color:var(--t3);font-size:11px;line-height:1.5;max-width:90ch}