/* ── Tipografías de marca, autoalojadas ────────────────────────────
   No había ni un @font-face: las tres familias se declaraban en los
   tokens pero nunca se cargaban, así que el sitio salía con la
   tipografía del sistema. `swap` para que el texto sea legible desde
   el primer pintado y no haya destello invisible. */
@font-face { font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/sourcesans3-400.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/sourcesans3-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/plexmono-500.woff2") format("woff2"); }

/* Newsreader — serif de titular, instancia fija en el óptico grande (72).
   Archivo (--ff-display) es de las tipografías más repetidas en sitios
   generados por IA y plantillas de SaaS; en los titulares grandes eso se
   nota. Solo para texto de tamaño titular: a tamaños pequeños esta
   instancia se ve delgada, por eso vive aparte en --ff-titular y NO
   sustituye a --ff-display en toda la jerarquía de encabezados. */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/newsreader-600.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/newsreader-700.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:600; font-display:swap;
  src:url("../fonts/newsreader-600-italic.woff2") format("woff2"); }

/* ============================================================
   COINSSALUD — Design tokens
   Fase 6/8 · listo para importar desde el tema WordPress.
   Todo valor de marca vive aquí. Ningún componente define color propio.
   ============================================================ */

/* ── TEMA OSCURO ──────────────────────────────────────────────────
   El sitio nació claro con dos secciones oscuras (héroe, instituciones)
   y se leía partido en dos. Ahora el oscuro es la base y el claro la
   excepción, con los mismos azules que ya usaban esas secciones
   (#060D1A / #0B1B33 / #123159), así que no hay dos paletas: hay una.

   AVISO PARA QUIEN EDITE ESTO: hay tokens que se usan a la vez como
   color de TEXTO y como RELLENO, y no se pueden invertir de golpe.
   `--c-navy` seguía siendo azul oscuro de marca (fondos, .skip-link)
   mientras que como texto tenía que aclararse — por eso el texto de
   titular vive ahora en `--c-title`, aparte. Lo mismo con el verde:
   `--c-green-600` es oscuro y sirve sobre BLANCO (botón .btn--on-accent
   sobre la banda verde); para texto verde SOBRE OSCURO está
   `--c-accent-ink`, que es claro. Mezclarlos deja texto invisible. */
:root {
  /* ── Color · marca ─────────────────────────────────────── */
  /* Sigue siendo el azul de marca y sigue siendo RELLENO, no texto:
     .skip-link, :hover de WhatsApp, acento de la línea de insumos. */
  --c-navy:        #17356B;
  --c-navy-900:    #0F2A55;
  /* Antes era el azul palidísimo de fondos claros. Sobre oscuro cumple
     el mismo papel —realce sutil— pero como velo translúcido, así
     funciona encima de cualquiera de los azules de fondo. */
  --c-navy-100:    rgba(255, 255, 255, .08);
  --c-green:       #2FA84F;
  --c-green-600:   #217838;   /* 5.51:1 sobre blanco — verificado. SOLO sobre claro. */
  --c-green-100:   rgba(47, 168, 79, .16);

  /* ── Color · neutros (sesgo azul deliberado) ───────────── */
  /* Tonos de los seis segmentos de instituciones. Verde a azul: es el
     recorrido de la paleta, no seis colores sueltos. */
  --seg-1: #5BC46B;
  --seg-2: #3FBE8C;
  --seg-3: #35B4AE;
  --seg-4: #3E9FD6;
  --seg-5: #5A8AE0;
  --seg-6: #7FA3E8;

  /* Texto y superficies, ya en oscuro. `--c-title` es nuevo: separa el
     color de los titulares del azul de marca, que antes hacía los dos
     papeles y no se podía aclarar sin romper los rellenos. */
  --c-ink:         #E7EEF9;
  --c-title:       #FFFFFF;
  /* Subido de #94A8C4: con el campo de partículas detrás, las zonas más
     iluminadas dejaban este texto en 4.27:1 — por debajo del mínimo.
     Medido sobre píxeles reales del render, no estimado. Ahora el peor
     caso observado queda en 5.2:1 y sobre fondo liso da 9.7:1. */
  --c-muted:       #A8BAD2;
  --c-line:        rgba(255, 255, 255, .11);
  --c-surface:     #101E36;   /* tarjetas y cabecera: un plano por encima */
  --c-paper:       #070F1E;   /* fondo base, hermano del #060D1A del héroe */

  /* Superficie clara, reservada para lo que DEBE ir sobre claro: los
     logos de instituciones son obras oscuras sobre fondo transparente
     y encima del azul profundo desaparecerían. */
  --c-chip:        #F2F5FA;

  /* ── Color · estado (separado del acento de marca) ─────── */
  /* Aclarados: los de antes estaban calculados contra blanco y sobre el
     fondo oscuro quedaban por debajo del mínimo legible. */
  --c-success:     #5BC46B;
  --c-warning:     #E0A33A;
  --c-danger:      #FF8A7A;
  --c-info:        var(--seg-4);
  /* Fondos de aviso: translúcidos, así valen sobre cualquier plano. */
  --c-success-bg:  rgba(47, 168, 79, .16);
  --c-danger-bg:   rgba(180, 35, 24, .22);

  /* ── Acento por línea de negocio ───────────────────────── */
  --c-accent:      var(--c-green);        /* servicios administrativos — RELLENO */
  /* Relleno de BOTÓN, aparte del acento. El verde de marca (#2FA84F) con
     texto blanco da 3.07:1 y el texto del botón mide 17px — por debajo de
     los 18.66px que exige el umbral de «texto grande», así que le aplica
     4.5:1 y no llegaba. (Venía fallando desde antes del tema oscuro: el
     comentario del CSS afirmaba lo contrario sin haberlo medido.) Este
     verde da 4.79:1; el brillo del halo devuelve la viveza perdida. */
  --c-btn:         #23833D;
  --c-btn-hover:   #1E6E33;               /* 6.30:1 */
  /* Fondo de la banda de llamada. Va aparte de --c-accent porque el
     acento vivo, como plano entero y con texto encima, no da contraste
     suficiente; y va como token para que la línea de insumos siga
     cambiando de color, que es justo lo que distingue a esa página. */
  --c-band:        #12572A;               /* blanco encima: 8.67:1 */
  /* El acento cuando hace de TEXTO sobre el fondo oscuro. Antes era
     --c-green-600 (#217838), que sobre azul profundo da 1.9:1: ilegible. */
  --c-accent-ink:  #5BC46B;

  /* ── Tipografía ────────────────────────────────────────── */
  --ff-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-titular: "Newsreader", Georgia, "Times New Roman", serif;
  --ff-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-data:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: 3.05rem;
  --fs-h1:      2.44rem;
  --fs-h2:      1.95rem;
  --fs-h3:      1.56rem;
  --fs-h4:      1.25rem;
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-body:    1.6;

  --fw-reg:     400;
  --fw-med:     500;
  --fw-semi:    600;
  --fw-bold:    700;

  --ls-label:   .08em;
  --measure:    68ch;

  /* ── Espaciado ─────────────────────────────────────────── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ── Layout ────────────────────────────────────────────── */
  --wrap:        1200px;
  --wrap-narrow: 780px;
  --gutter:      24px;
  --cols:        12;

  /* ── Bordes y elevación ────────────────────────────────── */
  --r-0:  0;
  --r-1:  4px;    /* inputs, botones */
  --r-2:  8px;    /* tarjetas */
  --r-pill: 999px;
  --bw:   1px;

  /* ── Elevación ────────────────────────────────────────────
     Escala de 5 niveles, no de 2. Cada sombra tiene DOS capas:
     una de contacto (corta y marcada) y una ambiental (larga y
     difusa). Con una sola capa el objeto flota; con dos, se apoya.
     El tinte no es gris: lleva el azul de marca, porque una sombra
     gris sobre un fondo azulado se ve sucia. */
  /* Sobre oscuro una sombra tenue no se ve: hay que ir a negro real y
     apoyarse en el reflejo del borde, no en la sombra, para separar. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .30),
          0 2px 8px rgba(0, 0, 0, .22);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .34),
          0 8px 20px rgba(0, 0, 0, .28);
  --sh-3: 0 4px 10px rgba(0, 0, 0, .38),
          0 16px 38px rgba(0, 0, 0, .32);
  --sh-4: 0 8px 18px rgba(0, 0, 0, .42),
          0 28px 64px rgba(0, 0, 0, .38);
  --sh-5: 0 16px 36px rgba(0, 0, 0, .46),
          0 44px 96px rgba(0, 0, 0, .44);
  /* Halo de acento: lo que da el realce «encendido» al pasar el puntero. */
  --sh-glow: 0 0 0 1px rgba(91, 196, 107, .34),
             0 12px 36px rgba(47, 168, 79, .20);

  /* Reflejo del borde superior: es lo que convierte una caja plana
     en una superficie con material. Sobre oscuro el reflejo fuerte de
     antes (.55) se veía como una raya blanca, no como material. */
  --brillo:      inset 0 1px 0 rgba(255, 255, 255, .07);
  --brillo-osc:  inset 0 1px 0 rgba(255, 255, 255, .10);

  /* ── Motion ────────────────────────────────────────────── */
  --d-micro: 120ms;
  --d-comp:  240ms;
  --d-sect:  400ms;
  --d-hero:  900ms;
  --e-std:   cubic-bezier(.4, 0, .2, 1);
  --e-in:    cubic-bezier(0, 0, .2, 1);
  --e-out:   cubic-bezier(.4, 0, 1, 1);

  /* ── Marca (slots reservados para el logo pendiente) ───── */
  --logo-min-width: 120px;
  --logo-safe:      1em;

  /* ── Foco ──────────────────────────────────────────────── */
  /* Verde claro: el --c-green-600 de antes era casi invisible sobre el
     fondo oscuro, y el anillo de foco es lo último que puede fallar. */
  --focus-ring: 3px solid var(--c-accent-ink);
  --focus-off:  2px;
}

/* Línea de insumos: se invierte la dominancia, no la marca.
   El azul de marca (#17356B) como acento sobre fondo oscuro daba 1.4:1
   —un botón azul marino sobre azul marino—, así que la línea usa el
   azul claro que ya vive en la rampa de segmentos. */
[data-linea="insumos"] {
  --c-accent:     #2E7BC4;
  --c-accent-ink: #7FB6EA;
  --c-band:       #123F6B;                /* blanco encima: 10.77:1 */
  --c-btn:        #1F5E9E;
  --c-btn-hover:  #17497C;
}

/* ── Escala fluida en móvil ──────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --fs-display: 2.2rem;
    --fs-h1:      1.85rem;
    --fs-h2:      1.5rem;
    --fs-h3:      1.28rem;
    --gutter:     16px;
  }
}

/* ── Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Le dice al navegador que el documento es oscuro: sin esto las barras de
   desplazamiento, el autorrelleno de formularios y los desplegables
   nativos siguen saliendo en claro y cantan contra el resto. */
:root { color-scheme: dark; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

p { max-width: var(--measure); }

/* Foco visible siempre — nunca eliminar el outline sin sustituto */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-off);
}

/* Datos tabulares alineados */
.data, td.num, .metric { font-variant-numeric: tabular-nums; }

/* Etiquetas en versalitas */
.label {
  font-family: var(--ff-data);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Contenido ancho nunca desborda el body */
.scroll-x { overflow-x: auto; }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}