/* tokens.css — capa base COMÚN de materamarketing.com y robertomatera.com.
   Propuesta C «Del caos al orden», aprobada por Roberto el 26/09/2026:
   una casa, dos firmas, un solo sistema visual. Este fichero es IGUAL en los
   dos repos salvo la ruta de las fuentes: si aquí cambia un valor, en el otro
   cambia igual (016 · web/static/web/tokens.css; 019 · static/assets/css/tokens.css).
   Único origen de verdad del sitio público. Se enlaza ANTES que cualquier otra hoja.
   Sustituye a la base del 13-14/09 (Bricolage + Instrument, celeste del logo). */

@font-face{font-family:"Archivo";src:url("fonts/archivo-500.562c73adab45.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-600.7ab89eedd1b0.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-700.8574a5d7eebc.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin.938c6e8019b6.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/plexmono-400.5d6f52ed08df.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/plexmono-700.f904081c0f95.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* ── Paleta semántica ──
     Contraste: el azul claro (--c-acento) sobre blanco da 2,6 y NO vale como
     color de texto ni de enlace — solo fondo de botón, subrayado, borde o
     adorno. Si se lee, --c-primario; si se mira, --c-acento.
     El coral (--c-senal) es SOLO para el «caos»: piezas del tablero, lo que
     falla. Nunca para una acción ni para un precio. */
  --c-primario:#123A63;        /* azul tinta: enlaces, énfasis */
  --c-primario-osc:#0B2D4F;    /* marino: acciones, secciones fuertes, marca */
  --c-acento:#69A4F9;          /* azul claro: botón principal, subrayados, foco */
  --c-senal:#E8604C;           /* coral: el caos. Solo adorno y etiqueta */
  --c-tinta:#0B1F33;           /* texto */
  --c-texto-suave:#4A5B6E;
  --c-fondo:#FFFFFF;           /* fondo de página */
  --c-fondo-alt:#F3F6F9;       /* niebla: secciones alternas, cabeceras de tabla */
  --c-superficie:#FFFFFF;
  --c-borde:#D9E1EA;
  /* Tintes claros */
  --c-acento-claro:#E3EEFE;
  --c-primario-claro:#DCE6F2;
  --c-primario-osc-claro:#D9E1EA;
  --c-senal-claro:#FDE7E3;
  /* Sobre marino */
  --c-sobre-oscuro:#C6D4E4;    /* texto de cuerpo sobre --c-primario-osc */
  /* Estados */
  --c-ok:#1E9E5A; --c-error:#C43D2E; --c-aviso:#D9822B;

  /* ── Tipografía ──
     Archivo para títulos, Manrope para el texto. Plex Mono es la TERCERA y
     solo para datos: etiquetas, precios, cifras de los casos, migas. Es la
     voz de «ficha» de la propuesta C; no se usa para frases. */
  --f-disp:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-texto:"Manrope",system-ui,sans-serif;
  --f-datos:"Plex Mono",ui-monospace,monospace;

  /* ── Escala tipográfica fluida (max = maqueta a 1440; min = a 390) ── */
  --t-h1:clamp(2.3rem,1.4rem + 3.6vw,4.4rem);
  --t-h2:clamp(1.8rem,1.3rem + 1.9vw,2.9rem);
  --t-h3:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  --t-h4:clamp(1.02rem,1rem + .2vw,1.12rem);
  --t-cuerpo:clamp(1rem,.96rem + .2vw,1.08rem);
  --t-entradilla:clamp(1.05rem,1rem + .45vw,1.25rem);
  --t-small:.86rem;
  --t-cejilla:.74rem;          /* etiqueta mono en mayúsculas */

  /* ── Espaciado en escala ── */
  --e-1:4px; --e-2:8px; --e-3:16px; --e-4:24px; --e-5:32px; --e-6:48px; --e-7:64px;
  --sec-y:clamp(4rem,8vw,7rem);        /* aire vertical entre secciones */
  --aire:clamp(1.1rem,4vw,2.5rem);     /* aire lateral de página */

  /* ── Superficies ── */
  --radio:10px; --radio-chico:6px; --radio-grande:16px; --radio-pastilla:999px;
  --sombra:0 1px 2px rgba(11,31,51,.06),0 8px 24px rgba(11,31,51,.08);
  --ancho-max:1200px;
  --tactil:44px;
  --t-rapida:.2s ease;

  /* ── Breakpoints canónicos: 640 · 860 · 980, y 1200 para el menú ──
     La maqueta usaba diecinueve cortes distintos; ninguno sobrevive. Se
     escriben a mano en el @media. 1200 solo para la cabecera: con el menú de
     Matera (ocho entradas y el botón) la barra no cabe en una fila por debajo.
     Un corte nuevo inventado en una pantalla es un defecto. */
}