/* =====================================================================
   Marca del cliente · único archivo con colores y letras.
   Cambiar este archivo (junto con theme.json, logo.svg y simbolo.svg)
   cambia todo el sitio sin tocar una plantilla.
   ===================================================================== */

@font-face{font-family:'Titillium Web';src:url('fuentes/titillium-web-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Titillium Web';src:url('fuentes/titillium-web-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fuentes/lato-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lato';src:url('fuentes/lato-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Paleta de la marca */
  --azul:#115774;      /* títulos, enlaces, botón principal */
  --rojo:#A7341A;      /* familia Auditoría, botón de cotizar y errores de formulario (0.12) */
  --verde:#2F8F8B;     /* solo piezas gráficas y fondos; no texto chico sobre blanco */
  --amarillo:#F3B950;  /* solo piezas gráficas; nunca texto ni fondo de texto blanco */
  --oscuro:#0B2F42;    /* pie y bandas oscuras */
  --tinta:#22323b;     /* texto corrido */

  /* Neutros (medidos: ver qa/REPORTE) */
  --blanco:#ffffff;
  --gris:#4d5d66;           /* texto secundario sobre blanco y sobre --fondo-suave */
  --linea:#d3dce0;          /* filetes y bordes */
  --gris-pieza:#A9B7BF;     /* piezas apagadas del símbolo en miniatura (íconos de situaciones y normas). 0.15: antes #D5DDE2
                               (1,4:1 sobre blanco, casi invisible); ahora 2,1:1 sobre blanco y 1,9:1 sobre --fondo-suave, todavía gris */
  --fondo-suave:#f2f6f7;    /* superficies alternas */
  --sobre-oscuro:#ffffff;   /* texto sobre --oscuro */
  --sobre-oscuro-suave:#b7c8d1;
  --sombra:rgba(11,47,66,.10);

  /* Colores de las familias de formación: uno por pieza del símbolo (acento 1 a 4, en el orden de simbolo.svg).
     Van como formas, bordes y bloques; nunca como texto chico (verde y amarillo no alcanzan contraste sobre blanco). */
  --fam-1:var(--rojo);
  --fam-2:var(--verde);
  --fam-3:var(--amarillo);
  --fam-4:var(--azul);
  /* 0.10 · El azul de la marca sobre las bandas oscuras (paso 4, momento 4, la pieza 4 de la Q armada sobre oscuro): el mismo
     matiz y la misma croma que --azul (OKLCH 0,43 → 0,60), aclarado solo hasta leerse como pieza (3,6:1 sobre --oscuro, lo
     mismo que el verde). Reemplaza al celeste #5E9FBE de la 0.9, que no era de la marca. Solo piezas. */
  --azul-sobre-oscuro:#4A89A8;
  /* 0.15 · El rojo de la marca sobre las bandas oscuras (la pieza 1 en la situación elegida y en el paso 1): el mismo matiz que
     --rojo, aclarado solo hasta leerse como pieza (3,6:1 sobre --oscuro, lo mismo que el azul y el verde; el rojo tal cual da
     2,1:1). Color derivado: lo aprueba Marcos (PENDIENTES.md). Solo piezas. */
  --rojo-sobre-oscuro:#D9583A;
  /* 0.10 · Regla de color, una sola: el color identifica a las familias de cursos (y a las piezas cuando el símbolo se arma).
     Todo otro detalle gráfico (bordes, viñetas, íconos de situaciones y normas) va en un solo color, el azul. */
  --c-detalle:var(--azul);
  --c-detalle-oscuro:var(--azul-sobre-oscuro);
  --c-situacion:var(--c-detalle);
  /* El hueco de una pieza que todavía no llegó, sobre fondo oscuro (cinco pasos) */
  --pieza-hueco-oscuro:rgba(255,255,255,.3); /* 0.12: antes .16; la Q apagada casi no se veía y la pieza parecía sola */

  /* Papeles: las plantillas solo usan estos nombres */
  --c-fondo:var(--blanco);
  --c-texto:var(--tinta);
  --c-texto-suave:var(--gris);
  --c-titulo:var(--azul);
  --c-enlace:var(--azul);
  /* 0.12 · El color solo identifica familias de cursos: el acento y las etiquetas (filete del menú, fechas del blog, chevrones,
     notas) pasan al azul. El rojo queda para el botón de cotizar y para los errores de los formularios (--c-error: es la
     convención que espera quien llena un formulario, y siempre va con texto). */
  --c-acento:var(--azul);
  --c-etiqueta:var(--azul);
  --c-error:var(--rojo);
  --c-boton:var(--azul);
  --c-boton-texto:var(--blanco);
  --c-cotizar:var(--rojo);
  --c-cotizar-texto:var(--blanco);
  --c-banda:var(--oscuro);
  --c-banda-texto:var(--sobre-oscuro);
  --c-banda-suave:var(--sobre-oscuro-suave);
  --c-banda-linea:rgba(183,200,209,.25); /* filete sobre las bandas oscuras */
  --c-banda-rgb:11 47 66; /* --oscuro en canales, para los velos translúcidos sobre fotos: rgb(var(--c-banda-rgb) / .9) */
  --c-pie:var(--oscuro);
  /* Foco de teclado: contorno de 2 px, separado del elemento. 0.12: en azul (el turquesa es de una familia): 8,1:1 sobre
     blanco; sobre --oscuro, el azul para oscuro (3,6:1). */
  --c-foco:var(--azul);
  --c-foco-oscuro:var(--azul-sobre-oscuro);
  --foco-ancho:2px;
  --foco-separacion:3px;
  /* Selección de texto: el azul de la marca, translúcido (0.12: antes el amarillo, que es de una familia) */
  --c-seleccion:rgba(17,87,116,.2);
  --c-logo-sobre-oscuro:var(--sobre-oscuro);

  /* Letras */
  --letra-titulos:'Titillium Web',system-ui,-apple-system,'Segoe UI',sans-serif;
  --letra-texto:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Monoespaciada del sistema (sin archivos de letra): solo para identificadores de registro (la línea de control del
     documento, la dirección pedida en la 404, la dirección al imprimir y el código de verificación de la muestra del campus) */
  --letra-mono:ui-monospace,'SFMono-Regular','Cascadia Mono','Segoe UI Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --peso-titulos:700;
  --peso-titulos-suave:600;

  /* Forma */
  --radio:3px;
  --ancho:1312px;
  --ancho-texto:44rem;
  --margen:clamp(24px,4.4vw,56px); /* 0.15: 24 px como mínimo en el celular (el tema lo garantiza además: --aw-margen) */
}