/* Paleta 7 · "Azules" (monocroma). Reparto propuesto por Claude, con el más claro de fondo (petición de Jesús)
   60 % dominante:  #F3F8FD  → fondo de la página, cabecera y pie
   30 % secundario: #223A5E  → franjas en diagonal de "Qué hago" y "¿Hablamos?", con texto claro
   10 % acento:     #4D79A8  → logo (símbolo e "io"), botones (degradado desde #355982), números de los pasos y la animación
   Apoyo: #355982 (texto secundario y lo destacado) · #D0E1F7 (subrayado de lo destacado) · #9FC0E3 (texto secundario en las franjas) · #6E9ECC (tachones)
   Contrastes WCAG AA: #223A5E sobre fondo 10,7:1 · #355982 sobre fondo 6,8:1 · blanco sobre #4D79A8 4,55:1 · blanco sobre #355982 7,2:1 ·
   fondo sobre franja 10,7:1 · #9FC0E3 sobre franja 6,1:1 · #355982 sobre #D0E1F7 5,4:1
   Ojo: #4D79A8 sobre el fondo da 4,26:1: vale para gráficos y texto grande, nunca para texto normal. */
:root {
  --c60: #f3f8fd;
  --c60-oscuro: #d0e1f7;
  --c30: #223a5e;
  --c30-medio: #355982;
  --c10: #4d79a8;
  --sobre-c10: #ffffff;
  --claro: #223a5e;
  --superficie: #ffffff;
  --tinta: #f3f8fd;          /* texto principal DENTRO de las franjas (oscuras) */
  --tinta-suave: #9fc0e3;    /* texto secundario dentro de las franjas */
  --sobre-c60: #223a5e;
  --sobre-c60-suave: #355982;
  --linea-c60: rgba(34, 58, 94, 0.12);
  --linea-claro: rgba(243, 248, 253, 0.16);

  --logo-simbolo: #4d79a8;  /* símbolo y "io" en azul medio, sin placa (gráfico y texto grande: 4,26:1, mínimo 3:1) */
  --logo-io: #4d79a8;
  --destacado: #355982;
  --marcado-fondo: linear-gradient(transparent 58%, #d0e1f7 58%);
  --grafico: #4d79a8;
  --tachado: #6e9ecc;
  --foco-claro: #9fc0e3;
  --boton-fondo: linear-gradient(120deg, #355982 0%, #4d79a8 100%);
  --texto-boton: #ffffff;
  --boton-banda-fondo: #f3f8fd;
  --boton-banda-texto: #223a5e;
  --boton-banda-hover: #d0e1f7;
  --hover-banda: #9fc0e3;
  --correo: #ffffff;
  --correo-linea: #6e9ecc;
}