/* ==========================================================================
   PIEL · cancelarantecedentespenales.es · v1 · 27/10/2026
   Dirección «Semáforo»: página blanca de día, carcasa de señal en grafito,
   un solo color de acción («luz verde») y las tres luces solo cuando
   significan algo. Titulares en Barlow Semi Condensed (rotulación) y texto
   en Lexend (hecha para leer con facilidad; el cero sin tachar, que importa
   en «0 €» y en las fechas). Aprobada por el titular el 27/10/2026.

   Contraste comprobado (WCAG 2.2 AA): texto 16,3:1 · texto suave 7,3:1 ·
   enlace y botón 6,6:1 · borde de campo 3,7:1 · foco 5,3:1 · texto del pie
   8,0:1 · luces sobre la carcasa: verde 7,8:1, ámbar 9,1:1, roja 5,1:1.
   Fuentes con licencia SIL Open Font License 1.1 (Fontsource 5.3.0),
   servidas desde la propia web.
   ========================================================================== */

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fuentes/barlow-semi-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fuentes/barlow-semi-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("../fuentes/lexend-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url("../fuentes/lexend-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color · superficies: blanco de día, sin cremas; las secciones se
     separan con filetes finos, no con bandas grises */
  --color-fondo: #ffffff;
  --color-superficie: #ffffff;
  --color-superficie-alt: #eceef0;
  --color-texto: #15181c;
  --color-texto-suave: #4b525a;
  --color-linea: #dadde1;
  --color-linea-campo: #7e868f;

  /* Color · marca: luz verde (avanzar) */
  --color-marca: #0a6b3d;
  --color-marca-intensa: #07552f;
  --color-sobre-marca: #ffffff;
  --color-marca-tenue: #e5f3eb;
  --color-foco: #1d5fd1;

  /* Color · carcasa de señal (cabezal del semáforo y pie) */
  --color-banda: #1b1f24;
  --color-sobre-banda: #eef0f2;
  --color-sobre-banda-suave: #aeb5be;

  /* Color · estados */
  --color-ok: #0a6b3d;
  --color-ok-tenue: #e5f3eb;
  --color-aviso: #8a5300;
  --color-aviso-tenue: #fdf1dd;
  --color-error: #b42318;
  --color-error-tenue: #fdecea;

  /* Color · luces del semáforo */
  --color-luz-apagada: #3c434c;
  --color-luz-verde: #1fcb74;
  --color-luz-ambar: #ffb020;
  --color-luz-roja: #ff4d4f;
  --tam-luz: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);

  /* Tipografía: titular de portada grande, en dos líneas en escritorio */
  --titulo-portada: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --fuente-titulos: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --fuente-texto: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-fuerte: 600;
  --peso-titulos: 700;
  --tracking-titulos: -0.008em;
  --interlineado: 1.6;

  /* Forma: carcasas redondeadas, luces redondas */
  --radio-s: 6px;
  --radio-m: 12px;
  --radio-l: 20px;
  --radio-boton: 12px;
  --radio-campo: 10px;
  --sombra-1: 0 1px 2px rgb(21 24 28 / 0.06), 0 1px 3px rgb(21 24 28 / 0.05);
  --sombra-2: 0 2px 4px rgb(21 24 28 / 0.07), 0 14px 24px -14px rgb(21 24 28 / 0.3);
}