/* ============================================================
   sdigital · tokens congelados — Fase 2 aprobada (06-10-2026)
   Única fuente de verdad del diseño. Cambios: solo con la
   aprobación del operador (Abrahan). Ver recon/guia-estilo.md
   Base tipográfica: Manrope (self-host). Logo: Metropia.
   ============================================================ */
:root{
  --ink:#0F172A;   /* navy de marca · texto principal */
  --ink2:#3B4A63;  /* texto secundario */
  --mut:#5B6B85;   /* texto atenuado · AA verificado (5.40:1 sobre blanco) */
  --line:#E7EDF5;  /* bordes y divisores */
  --soft:#F4F7FB;  /* fondos suaves, chips */
  --glow:#DCE6F5;  /* degradado de cabecera y cierre */
  --wa:#25D366;    /* WhatsApp (uso puntual) */
}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}

/* — Base (extraída del mockup aprobado) — */
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.7 'Manrope',system-ui,"Segoe UI",sans-serif;font-weight:400;color:var(--ink);background:#fff}
a{color:var(--ink)}
html{scroll-behavior:smooth;scroll-padding-top:96px}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}

/* — Titulares (Manrope; Metropia queda solo para el logotipo) — */
h1,h2,h3,.num{font-family:'Manrope',system-ui,sans-serif;letter-spacing:-.01em}
h1,h2{font-weight:500}
h3{font-weight:700}
strong{font-weight:800}
.num{font-weight:600}

/* — Tamaños aprobados (contexto por sección) — */
.hero h1{font-size:56px;line-height:1.1;max-width:820px}
section > .wrap > .sec-head h2, .sec-head h2{font-size:36px}
.band h2{font-size:32px;line-height:1.2}
.card h3{font-size:22px}
.step h3{font-size:20px}
.final h2{font-size:42px}

/* — Componentes base — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;border-radius:999px;padding:12px 26px;font-size:13px;font-weight:700;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;transition:transform .15s ease, box-shadow .15s ease;box-shadow:0 8px 20px rgba(15,23,42,.16)}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.22)}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.chip{background:var(--soft);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--ink2)}
section{padding:104px 0}

/* — Móvil (≤820px) — */
@media(max-width:820px){
  .hero h1{font-size:37px}
  .hero p{font-size:16.5px}
  .final h2{font-size:32px}
  section{padding:72px 0}
}