/* web/styles/base.css — reset, base typography, .shell, headings, and the
 * line-measure rules of docs/BRAND-SYSTEM.md #11. No hex here: the non-color
 * primitives below (typography stacks, spacing/radius scale, line measure)
 * have no role system of their own the way color does (BRAND-SYSTEM.md #6
 * only forbids literal color), so components may still use them as literal
 * px alongside these tokens where the fixed --sp-* scale does not fit. */

:root{
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:92px;
  --r-sm:2px; --r-md:3px;
  --measure-lede:50ch; --measure-body:64ch; --measure-card:56ch;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-paper);color:var(--c-slate-900);
  font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.shell{max-width:1180px;margin:0 auto;padding:0 var(--sp-8)}
/* Holds the logo sprite's <defs><g id="mark">, present once per page and
 * otherwise invisible: docs/reference/landing.html used an inline
 * style="position:absolute" for this, which the no-inline-style rule
 * forbids, so it gets a class instead. width/height=0 stay as SVG
 * attributes on the element itself, not CSS. */
.sprite-defs{position:absolute}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4vw,42px);line-height:1.12}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
/* Excludes the legacy scan.html.j2 sections (:not(...) below): a bare
 * `section` selector would otherwise inject 92px of vertical padding into
 * .titular/.bloque-hallazgo/.matriz-sondeo/.lo-que-no-encontramos/.cta-doble,
 * which never had any in web/estilos.css. Same class of bug as the .board
 * table scoping above, caught by screenshotting the legacy pages before
 * closing this phase. */
section:not(.titular):not(.bloque-hallazgo):not(.matriz-sondeo):not(.lo-que-no-encontramos):not(.cta-doble){
  padding:var(--sp-24) 0}
:focus-visible{outline:2px solid var(--accent, var(--c-green-800));outline-offset:3px}

/* ============================================================
   TIPOGRAFÍA Y RITMO DE LÍNEA. docs/BRAND-SYSTEM.md #11: la frase
   manda sobre el ancho. Los bloques destacados parten por frase
   con .say; la prosa larga usa text-wrap.
   ============================================================ */
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent, var(--c-green-800));margin:0 0 var(--sp-6)}
.lede{font-size:19px;line-height:1.6;color:var(--fg-2, var(--c-slate-700));max-width:var(--measure-lede);text-wrap:pretty}
.head{max-width:58ch;margin-bottom:var(--sp-12)}
.head p{margin-top:18px;color:var(--fg-2, var(--c-slate-700));font-size:18px;max-width:var(--measure-body);text-wrap:pretty}
.say{display:block}
.say + .say{margin-top:3px}
.mono{font-family:var(--f-mono)}

/* ============================================================
   Encabezado de página en las superficies heredadas de
   web/estilos.css (pricing, methodology, bot, blog, scan.html.j2):
   web/plantillas/scan.html.j2 envuelve su <h1> en <section
   class="titular">. Las demás páginas usan un <h1> suelto, que ya
   recibe el tamaño y peso correctos del navegador (2em == 32px al
   tamaño de raíz por defecto, el mismo valor que tenía la vieja
   --fs-title) combinados con la regla h1,h2,h3 de arriba, así que no
   necesitan una regla propia. font-weight:500 aquí es deliberado:
   más ligero que el 800 por defecto de h1,h2,h3, para no cambiar
   cómo se veía esta página respecto al sistema anterior.
   ============================================================ */
.titular h1{font-size:32px;font-weight:500;margin-bottom:var(--sp-2)}