/* Fuentes alojadas en el propio sitio (OFL, ver /assets/fonts/OFL.txt). Sustituye el @import de Google Fonts del design system. */
@font-face{font-family:"Oswald";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/oswald-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/oswald-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/oswald-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Code Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-code-pro-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Code Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/source-code-pro-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Source Code Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-code-pro-latin-600-normal.woff2) format("woff2")}

/* colors.css (design system) */
:root{
/* Closed palette — do not add colors */
--abyss:#0A0A0F; /* dominant background */
--white:#F0F0F0; /* Signal White — text on dark */
--cyan:#00BFFF; /* Surveillance Cyan — links, hover, focus, separators, secondary CTA */
--pin:#E03E4E; /* Pin Red — PRIMARY CTA / single accent, exactly one per view */
--ember:#F2A0B5; /* Ember Rose — hero warmth only */
--parchment:#FAF7F2; /* resource sections — text must be Abyss */
/* Surface derivatives */
--panel:#101018; /* cards/panels over Abyss */
--line:rgba(0,191,255,.18); /* faint cyan hairlines */
--muted:#9a9aa6; /* secondary text on dark */
--muted-2:#6a6a76; /* tertiary labels */
/* FORBIDDEN on web: Alert Amber #F59E0B — book interior only */
/* Semantic aliases */
--bg-page:var(--abyss);
--bg-panel:var(--panel);
--bg-resource:var(--parchment);
--text-body:var(--white);
--text-muted:var(--muted);
--text-on-parchment:var(--abyss);
--text-link:var(--cyan);
--accent-primary:var(--pin);
--accent-secondary:var(--cyan);
--border-hairline:var(--line);
--focus-ring:var(--cyan);
}

/* typography.css (design system) */
:root{
--ff-head:'Oswald',system-ui,sans-serif; /* @kind font */ /* H1–H3, wordmark; weights 500/700; uppercase */
--ff-body:'Source Sans 3',system-ui,sans-serif; /* @kind font */ /* body 18px/1.6; weights 400/600 */
--ff-mono:'Source Code Pro',ui-monospace,monospace; /* @kind font */ /* labels, seals, numbers, eyebrows; 12–14px */
--h1:clamp(38px,5.4vw,66px); /* @kind font */
--h2:clamp(26px,3.4vw,40px); /* @kind font */
--h3:22px;
--body:18px;
--small:14px;
--label:12px;
--lh-body:1.6; /* @kind other */
--lh-head:1.02; /* @kind other */
--tracking-label:.12em;
--tracking-btn:.06em;
}
body{font-family:var(--ff-body);font-size:var(--body);line-height:var(--lh-body);color:var(--text-body);background:var(--bg-page)}
h1,h2,h3{font-family:var(--ff-head);line-height:var(--lh-head);text-transform:uppercase;font-weight:700;margin:0}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3);font-weight:500}
a{color:var(--cyan);text-decoration:none;transition:color .2s}
a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* spacing.css (design system) */
:root{
--gap-xs:8px;
--gap-sm:14px;
--gap-md:24px;
--gap-lg:48px;
--gap-xl:clamp(52px,8vh,92px);
--radius:2px; /* minimal radii — CCTV aesthetic, never cozy */
--wrap:1200px;
}

/* primitives.css (design system) */
/* Component primitives from the canonical design-system.css */
.btn-primary{background:var(--pin);color:var(--white);font-family:var(--ff-head);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-btn);padding:14px 26px;border-radius:var(--radius);border:0;cursor:pointer;transition:transform .2s,box-shadow .25s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 34px -12px rgba(224,62,78,.6)}
.btn-secondary{background:transparent;color:var(--cyan);border:1px solid var(--cyan);font-family:var(--ff-head);font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-btn);padding:13px 24px;border-radius:var(--radius);cursor:pointer;transition:background .2s}
.btn-secondary:hover{background:rgba(0,191,255,.08)}
.eyebrow{font-family:var(--ff-mono);font-size:var(--label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.sticker{font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:8px}
.sticker .dot{width:7px;height:7px;border-radius:50%;background:var(--pin)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}