/* RBLN Training · tokens de references/DESIGN-RBLN-3.0-2026-10-20.md (versión 3.0). Compartido: no editar desde una sección. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Manrope (OFL, subconjunto latino, wght 200–800): sin esto los titulares solo salían en Manrope donde estaba instalada. */
@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
/* shortcut: WIDE es una fuente comercial variable (wght 124–300, el hero usa 300); licencia desktop y web sin confirmar según el DESIGN.md, confirmar antes de publicar. */
@font-face { font-family: "WIDE"; src: url("/assets/fonts/WIDE.ttf") format("truetype"); font-weight: 124 300; font-display: swap; }

:root {
  /* color */
  --rose: #FF8FD0; --rose-hover: #F973C1; --rose-pressed: #EC5DB0; --rose-400: #F27BC6;
  --rose-300: #FFA8D9; --rose-200: #FFC4E4; --rose-100: #FFDDEF; --rose-50: #FFF0F8;
  --brand: #FF007A;
  --lime: #DCFF6E; --lime-200: #E2FF99;
  --ink: #050A17; --muted: #60616C; --line: #D7D8DF; --disabled: #E4E4E9;
  --bg: #F5F6FC; --paper: #FFFFFF;
  --bg-dark: #0A0A12; --paper-dark: #1E1E29; --line-dark: #2E2E34;
  --ink-on-dark: #FFFFFF; --muted-on-dark: #A0A1A8;
  --success: #187454; --danger: #B42345;
  --glass: #FFFFFF99; --line-glass: #D9DFF5; --line-glass-hover: #C9D0EC;
  --btn-disabled-bg: #CCCCE0; --btn-disabled-text: #5F606BBE;

  /* familias */
  --font-hero: "WIDE", "Manrope", system-ui, sans-serif;
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  /* escala: tamaño / interlineado / tracking */
  --hero-size: 96px; --hero-leading: .82;
  --display-l: 96px; --display-l-leading: .92;
  --display-m: 56px; --display-m-leading: .94;
  --h1: 48px; --h1-leading: .98;
  --h2: 32px; --h2-leading: 1.02;
  --h3: 24px; --h3-leading: 1.06;
  --h4: 20px; --h4-leading: 1.10;
  --body-lg: 20px; --body: 16px; --body-sm: 14px;
  --label: 12px; --data: 14px;

  /* espaciado y radios: solo estos valores */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px; --s64: 64px;
  --r-control: 4px; --r-panel: 8px; --r-pill: 48px;

  /* grilla web 1440: márgenes 60, columna 88, medianil 24; hero padding 64 */
  --page-pad: 64px;
  --ease: cubic-bezier(.44, 0, .56, 1);
}
/* Cortes de ClearPath: tablet 810–1199, móvil ≤ 809 (columna de producto del DS: márgenes 24). */
@media (max-width: 1199px) {
  :root { --page-pad: 32px; }
}
@media (max-width: 809px) {
  :root { --hero-size: 34px; --display-l: 56px; --display-l-leading: .94; --h1: 40px; --page-pad: 24px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--body)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-dark :focus-visible, :is([data-theme="dark"]) :focus-visible { outline-color: var(--ink-on-dark); }

/* tipografía por rol */
.t-hero { font: 300 var(--hero-size)/var(--hero-leading) var(--font-hero); letter-spacing: 0; text-transform: uppercase; }
.t-display-l { font: 700 var(--display-l)/var(--display-l-leading) var(--font-heading); letter-spacing: -.04em; }
.t-display-m { font: 700 var(--display-m)/var(--display-m-leading) var(--font-heading); letter-spacing: -.04em; }
.t-h1 { font: 700 var(--h1)/var(--h1-leading) var(--font-heading); letter-spacing: -.02em; }
.t-h2 { font: 700 var(--h2)/var(--h2-leading) var(--font-heading); letter-spacing: -.02em; }
.t-h3 { font: 700 var(--h3)/var(--h3-leading) var(--font-heading); }
.t-h4 { font: 700 var(--h4)/var(--h4-leading) var(--font-heading); }
.t-body-lg { font: 400 var(--body-lg)/1.45 var(--font-body); }
.t-body-sm { font: 400 var(--body-sm)/1.45 var(--font-body); }
.t-label { font: 400 var(--label)/1.33 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; }
.t-label-col { font: 400 var(--label)/1.33 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
/* Mono vigente: solo Light 300 / 14 px (dato, métrica) o Regular 400 / 12 px (rótulo). Medium prohibido. */
.t-data, .t-metric { font: 300 var(--data)/1.4 var(--font-mono); }
/* Cifras grandes (decisión 13 de Juanma, 20/10): Geist Mono Light a tamaño display. Excepción explícita al límite de 14 px del DS 3.0. El tamaño lo pone cada sección. */
.t-figure { font-family: var(--font-mono); font-weight: 300; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-muted { color: var(--muted); }
.on-dark .t-muted { color: var(--muted-on-dark); }

/* foto: a color (DS 3.0, 20/10). shortcut: el filtro oficial WP05L («Panel») no está entre los recursos; queda pendiente y no se imita con CSS. Sin velo ni grano. */
.photo { position: relative; overflow: hidden; border-radius: var(--r-panel); }
.photo > img, .photo > video { width: 100%; height: 100%; object-fit: cover; }

/* botones: dos familias del DS 3.0, Primary · Gradiente y Secondary · Vidrio. La familia Ghost salió del sistema. */
.btn { display: inline-flex; align-items: center; gap: var(--s8); height: 44px; padding: 0 var(--s16); border-radius: var(--r-control); border: 1px solid transparent; font: 500 var(--body-sm)/1 var(--font-body); color: var(--ink); text-decoration: none; cursor: pointer; transition: border-color .2s var(--ease), filter .2s var(--ease); }
/* El gradiente cubre también el borde transparente (border-box en el atajo); si no, se repite y deja una línea arriba. */
.btn-primary { background: linear-gradient(0deg, var(--rose) 0%, var(--rose-200) 100%) border-box no-repeat; }
.btn-primary:hover { background: linear-gradient(0deg, var(--rose-hover) 0%, var(--rose-300) 100%) border-box no-repeat; }
.btn-primary:active { background: linear-gradient(0deg, var(--rose-pressed) 0%, var(--rose) 100%) border-box no-repeat; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); cursor: not-allowed; }
/* Secundario: blanco sólido con hairline line-glass, como el maestro de pen.dev (sin transparencia, Juanma 20/10). */
.btn-secondary { background: var(--paper); border-color: var(--line-glass); }
.btn-secondary:hover { border-color: var(--line-glass-hover); }
.btn-secondary:active { border-color: var(--ink); }
.btn-secondary:disabled, .btn-secondary[aria-disabled="true"] { background: var(--paper); border-color: var(--line); color: var(--muted); cursor: not-allowed; }

/* resalte: bloque rose-200 con grano detrás de una palabra, texto en tinta. Grano del DS (shader rbln-grain, u_grain 0,22,
   u_cell 2 px): blanco con alfa de 0 a 22 % en celdas de 2 px, horneado en assets/rbln-grain.png (mosaico de 128 px) y
   calibrado con Pen: solo aclara el tono. */
.highlight { background: url("/assets/rbln-grain.png") repeat, var(--rose-200); background-size: 128px, auto; color: var(--ink); padding: 0 .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.on-dark { background: var(--bg-dark); color: var(--ink-on-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}