/*
 * Fichas de diseño de la web publica: piel clara del dossier comercial (fase 2, spec §3.1).
 * UNA sola paleta, sin bloques de tema. test/piel.test.js recalcula desde aqui cada contraste AA:
 * si cambias un color, esa prueba dice que par deja de llegar.
 */
:root {
  /* Marca */
  --rojo: #D01C25; /* rojo de pantalla del producto */
  --rojo-hondo: #9E1822; /* final de los degradados rojos: botones, cierre, tarjeta del menu */
  --granate: #A8232F; /* texto del boton blanco */
  --oro: #B8903F; /* SOLO decoracion: 2,84:1 sobre --fondo, no apto para texto */
  --oro-texto: #7F6024; /* antetitulos dorados: 5,59:1 sobre --fondo */
  --oro-sobre-rojo: #FCE9C6; /* antetitulo sobre rojo y remate del titular de la franja: 4,54:1 sobre --rojo */

  /* Superficies */
  --fondo: #FAFAFB; /* seccion clara */
  --blanco: #FFFFFF; /* seccion blanca y tarjetas */
  /* El color de LA seccion en la que estas. base.css lo reescribe por seccion (las pares van en
     blanco); aqui vive su valor por defecto, para lo que quede fuera de una seccion. Lo usa lo que
     necesita fundirse con su fondo, como el anillo que abre el margen de la calculadora sobre la
     foto: si eso deduce el color a ojo, se equivoca de seccion y deja un marco a la vista. */
  --fondo-seccion: var(--fondo);
  --fondo-2: var(--blanco);
  --superficie: var(--blanco);
  --superficie-solida: var(--blanco);
  --fila-par: #F4F4F7;
  --pie-fondo: #F1F1F4;
  --halo: #FBE3E5; /* halo del centro del diagrama, decorativo */

  /*
   * El sesgo de los dos bordes en diagonal de la franja de clientes (2026-09-18). Con tope, o en
   * una pantalla muy ancha se comeria el texto: el relleno vertical de la banda (92 px) tiene que
   * ser siempre mayor que esto.
   *
   * La banda nacio OSCURA ese mismo dia, con dos fichas propias (`--franja-fondo` #1B2029 y
   * `--franja-tinta` #CBD0D9). El titular la vio y pidio el rojo corporativo, asi que las dos
   * fichas se retiraron: la banda usa ahora el MISMO degradado y los MISMOS colores de texto que
   * el cierre rojo (`--rojo` -> `--rojo-hondo`, con `--sobre-rojo` y `--oro-sobre-rojo`), que ya
   * estaban medidos. Una ficha que solo usa una regla es una ficha que sobra.
   */
  --franja-sesgo: min(3vw, 64px);

  /* Tinta */
  --tinta: #1F232C;
  --tinta-2: #5F6573;
  --apagado: #656B78;
  --rojo-texto: var(--rojo); /* 5,20:1 sobre --fondo y 5,42:1 sobre blanco */
  --ok: #1B7A43;
  --sobre-rojo: #FFFFFF;
  --placa-logo: #FFFFFF;

  /* Lineas y sombras */
  --linea: #E6E6EC;
  --linea-fuerte: #D5D5DD;
  --sombra: 0 18px 50px rgba(31, 35, 44, .12);
  --sombra-suave: 0 6px 18px rgba(31, 35, 44, .06);

  /* Insignias de estado de modulo (spec §4.1) */
  --insignia-incluido-tinta: #276A40;
  --insignia-incluido-fondo: #E8F3EC;
  --insignia-anade-tinta: #9E1C27;
  --insignia-anade-fondo: #FBEBEC;
  --insignia-aparte-tinta: #3E4454;
  --insignia-aparte-fondo: #ECEDF2;
  --insignia-pronto-tinta: #6E521D;
  --insignia-pronto-fondo: #F6EEDC;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", var(--sans);

  --angulo: 0deg; /* giro de cada radio del diagrama; lo pisa el style de cada radio */
  /* Paso del desfile de clientes: una copia de la lista. Lo pisa el style de la pista, que sabe
     cuantas copias ha puesto (100 / copias); este valor es el de las tres copias del minimo. */
  --desfile-paso: -33.3333%;
  --alto-cabecera: 81px;
  --estado-animacion: running;
}

@media (max-width: 860px) {
  html:not(.js) {
    --alto-cabecera: 123px;
  }
}