/* Ruta 5 v2 — tokens unificados (design system) */
@font-face{font-family:"Biblioteca Sans";src:url("../fonts/BibliotecaSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Biblioteca Sans";src:url("../fonts/BibliotecaSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Biblioteca Sans";src:url("../fonts/BibliotecaSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Biblioteca";src:url("../fonts/Biblioteca-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Biblioteca";src:url("../fonts/Biblioteca-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;}

/* ==== colors.css ==== */
/* ==========================================================================
   Ruta 5 — Color tokens
   System rule: 50 · 20 · 20 · 10
   Azul ancla (50%) / Rojo activa (20%) / Blanco respira (20%) / Familia (10%)
   Azul + Blanco are always the frame. Red is the only accent that may sit
   next to any secondary. Secondaries are used one-per-piece, never two together.
   ========================================================================== */

:root {
  /* ---- Primary palette (R5/01–03) ---- */
  --r5-azul:        #28437D;   /* R5/01 — Azul Profundo · institutional anchor, backgrounds */
  --r5-rojo:        #CF3B35;   /* R5/02 — Rojo Intenso · the single accent (CTA, sellos) */
  --r5-blanco:      #FFFFFF;   /* R5/03 — Blanco · air, editorial breathing room */
  --r5-ink:         #161616;   /* logo "ink" black — positive logo, hairlines on light */

  /* ---- Secondary "family" palette (R5/04–09) — one per product, never paired ---- */
  --r5-celeste:     #9BCCD0;   /* R5/04 — Celeste Frío · FRÍO family */
  --r5-amarillo:    #F1BC48;   /* R5/05 — Amarillo Mote · MOTE family (porotos c/ mazamorra) */
  --r5-verde:       #285634;   /* R5/06 — Verde Olivo · LEGUMBRE family (lentejas c/ avena) */
  --r5-rosa:        #DAB3B5;   /* R5/07 — Rosa Tibio · TIBIO family (garbanzos c/ arroz) */
  --r5-burdeo:      #7A2A2D;   /* R5/08 — Burdeo Profundo · INTENSO */
  --r5-cacao:       #6B4423;   /* R5/09 — Cacao Tostado · GRANO */

  /* ---- Tints used for soft surfaces (derived, never used as brand color) ---- */
  --r5-azul-95:     #f3f5f9;   /* faint azul wash for section backgrounds on light */
  --r5-crema:       #F7F3EC;   /* warm off-white "crema" — editorial paper substrate */
  --r5-dorado:      #F2DCB6;   /* deep warm crema — manifiesto/proceso sections, tonal editorial backgrounds */
  --r5-azul-deep:   #1E3460;   /* pressed/active state of azul */
  --r5-rojo-deep:   #B12F2A;   /* pressed/active state of rojo */
  --r5-line:        #E3E0D8;   /* hairline divider on crema/white */
  --r5-line-onnavy: rgba(255,255,255,0.18); /* hairline divider on navy */

  /* ---- Semantic aliases ---- */
  --bg-page:         var(--r5-crema);
  --bg-page-navy:    var(--r5-azul);
  --surface-card:    var(--r5-blanco);
  --surface-sunken:  var(--r5-azul-95);

  --text-primary:    var(--r5-azul);    /* default editorial text color on light */
  --text-on-navy:    var(--r5-blanco);
  --text-muted:      #5A6A8C;           /* muted azul-grey */
  --text-ink:        var(--r5-ink);

  --accent:          var(--r5-rojo);
  --accent-press:    var(--r5-rojo-deep);

  --border-hairline: var(--r5-line);
  --border-strong:   var(--r5-azul);

  --focus-ring:      var(--r5-rojo);
}

/* ==== typography.css ==== */
/* ==========================================================================
   Ruta 5 — Typography tokens
   Three families in strict hierarchy:
     · Biblioteca Sans      — voice principal: titulares, UI, navegación, body
     · Biblioteca (Italic)  — "Nacional" editorial accents, emotional subtitles
     · JetBrains Mono       — captions técnicos, SKU, fichas, sellos editoriales
   The sans-bold + serif-italic mix is the heart of the system.
   Scale follows the manual jerarquía. Baseline grid = 8px.
   ========================================================================== */

:root {
  /* ---- Families ---- */
  --font-sans:    "Biblioteca Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Biblioteca Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-editorial: "Biblioteca", "Iowan Old Style", Georgia, serif; /* use italic */
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-support: "Helvetica Neue", Helvetica, Arial, sans-serif; /* long legal/B2B body */

  /* ---- Weights ---- */
  --fw-regular: 400;   /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-black: 800;     /* @kind font */

  /* ---- Type scale (px / line-height / tracking) from the manual ---- */
  /* Display — Biblioteca Sans Bold 128/120 -3.5% */
  --type-display-size: 7.5rem;       /* 120px (responsive ceiling; manual ref 128) */
  --type-display-line: 0.94;
  --type-display-track: -0.035em;

  /* H1 — Biblioteca Sans Bold 68/72 -3% */
  --type-h1-size: 4.25rem;           /* 68px */
  --type-h1-line: 1.06;
  --type-h1-track: -0.03em;

  /* H2 */
  --type-h2-size: 2.75rem;           /* 44px */
  --type-h2-line: 1.1;
  --type-h2-track: -0.02em;

  /* H3 */
  --type-h3-size: 1.75rem;           /* 28px */
  --type-h3-line: 1.18;
  --type-h3-track: -0.01em;

  /* Subtitle — Biblioteca Nacional Italic 40/48 */
  --type-subtitle-size: 2.5rem;      /* 40px */
  --type-subtitle-line: 1.2;
  --type-subtitle-track: 0;

  /* Body — Biblioteca Sans Regular 22/34 */
  --type-body-size: 1.375rem;        /* 22px */
  --type-body-line: 1.55;
  --type-body-track: 0;

  /* Body small */
  --type-bodysm-size: 1rem;          /* 16px */
  --type-bodysm-line: 1.5;

  /* Caption / ficha — JetBrains Mono 13/20 +16% tracking, UPPERCASE */
  --type-caption-size: 0.8125rem;    /* 13px */
  --type-caption-line: 1.54;
  --type-caption-track: 0.16em;

  /* Mono micro label */
  --type-micro-size: 0.6875rem;      /* 11px */
  --type-micro-track: 0.18em;
}

/* ==== spacing.css ==== */
/* ==========================================================================
   Ruta 5 — Spacing, grid, radii, lines & motion
   Baseline grid = 8px. Everything spaces in multiples of 8.
   12-column grid, 16px gutter (collapses to 6 / 4 on small formats),
   60px margins at 1080p (or 8% of the side).
   The system avoids heavy borders, gradients, glows and drop shadows:
   thin hairlines and lots of air do the structural work instead.
   ========================================================================== */

:root {
  /* ---- 8px baseline spacing scale ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8  — base unit */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 — gutter */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 3.75rem;   /* 60 — page margin @1080p */
  --space-9: 5rem;      /* 80 */
  --space-10: 7.5rem;   /* 120 */

  /* ---- Grid ---- */
  --grid-cols: 12;            /* @kind other */
  --grid-gutter: 1rem;        /* 16px */
  --grid-margin: 3.75rem;     /* 60px */
  --grid-maxw: 1280px;        /* content max width for web */

  /* ---- Radii — intentionally tight. The brand is editorial, not rounded.
     Most blocks are square; mono "cápsulas" are the one rounded element. ---- */
  --radius-0: 0;          /* color blocks, photo frames, labels */
  --radius-sm: 2px;       /* inputs, cards — barely there */
  --radius-pill: 999px;   /* mono capsule claims / sellos only */

  /* ---- Hairlines (never heavy borders) ---- */
  --line-w: 1px;
  --line-w-strong: 1.5px;

  /* ---- The one allowed shadow: a flat, low editorial lift for floating UI
     (menus, toasts). No glows, no colored shadows on brand surfaces. ---- */
  --shadow-flat: 0 1px 0 rgba(22,22,22,0.04);
  --shadow-pop: 0 12px 32px -12px rgba(30,52,96,0.28);

  /* ---- Motion — quiet and analog. Short fades & slides, no bounce. ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.2, 0.0, 0.0, 1);       /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;       /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}

/* ==== base.css ==== */
/* ==========================================================================
   Ruta 5 — Base layer
   Element defaults + a few editorial utility classes built on the tokens.
   Loaded last so it can consume every token.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings default to the display/sans voice ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--r5-rojo); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Editorial type utilities — the named hierarchy from the manual
   ========================================================================== */
.r5-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  letter-spacing: var(--type-display-track);
}
.r5-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  letter-spacing: var(--type-h1-track);
}
.r5-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  letter-spacing: var(--type-h2-track);
}
.r5-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  letter-spacing: var(--type-h3-track);
}
/* The heart of the system: serif italic accent set inside a sans headline */
.r5-editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
}
.r5-accent-italic {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--accent);
}
.r5-body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.r5-body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-bodysm-size);
  line-height: var(--type-bodysm-line);
}
/* Mono caption / editorial stamp — UPPERCASE, open tracking */
.r5-caption {
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  letter-spacing: var(--type-caption-track);
  text-transform: uppercase;
}
.r5-micro {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
}

/* ---- Hairline divider ---- */
.r5-rule {
  border: 0;
  border-top: var(--line-w) solid var(--border-hairline);
  margin: 0;
}

/* ---- 12-col grid helper ---- */
.r5-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
}