/* ==========================================================================
   AV Diagnostico v4 — tokens
   Direccion corregida (brief Mateo 2026-07-23 + su sistema CONSALUD):
   claro, editorial, minimalista. TEAL (logo) + BLANCO + NEGRO dominan.
   El acido #C6F135 es un SUSURRO: puntos, micro-detalles. Nunca un bloque.
   ========================================================================== */
:root {
  /* ---- Superficie ---- */
  --bg:        #FFFFFF;
  --bg-soft:   #F5F8F8;   /* seccion alterna, casi imperceptible */
  --rule:      #E4EAEA;   /* hairlines */

  /* ---- Tinta ---- */
  --ink:       #0E1A1F;   /* titulos y texto — 17.4:1 sobre blanco */
  --ink-2:     #32464C;   /* texto secundario — 9.1:1 */
  --dim:       #6A7B80;   /* labels, eyebrows — 4.6:1 */

  /* ---- Marca ---- */
  --teal:      #17B8C6;   /* color de marca. Superficies, lineas, hover, iconos */
  --teal-deep: #0E8A9A;   /* teal como TEXTO sobre claro (4.1:1, solo display grande) */
  --teal-wash: rgba(23, 184, 198, .10);

  /* ---- Acento DERIVADO DEL PRODUCTO (reemplaza al acido) ----
     No elegido en un picker: muestreado del frotis real de AV. Los nucleos
     teñidos caen en hue 273-278° con saturacion 0.80 (#7516C1 / #8518CB) y
     ocupan el 1.0% de los pixeles del campo.
     Ese 1% ES la regla de uso: el violeta es un golpe, nunca una superficie.
     Antes el acento era #C6F135, declarado como "energia" y usado solo en
     cuatro puntos de 6px — con lo cual la paleta era, de hecho, mono-acento
     (teal + neutros) y la pagina no tenia punto de vista cromatico.
     Violeta 275° y teal 186° estan a ~89°: no chocan ni se confunden. */
  --violet:      #7516C1;
  --violet-lit:  #9B36E2;              /* el mismo nucleo sobre el borde iluminado del campo */
  --violet-wash: rgba(117, 22, 193, .08);
  --mauve:       #C7A2B5;              /* eosina: tono dominante del campo (19% del area) */
  --bone:        #E0E6D4;              /* plasma del extendido: blanco CALIDO, no gris */

  --acid:      var(--violet);   /* alias: los 4 puntos de 6px ya escritos siguen andando */

  /* ---- Vidrio de la isla ---- */
  --glass:        rgba(255, 255, 255, .72);
  --glass-solid:  rgba(255, 255, 255, .92);
  --glass-line:   rgba(14, 26, 31, .08);

  /* ---- Tipografia (la anterior, que a Mateo le queda mas profesional) ----
     Fraunces: TITULO display, con italica de acento.  Inter: cuerpo/UI.
     JetBrains Mono: eyebrow/labels. */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;   /* display */
  --sans:  'Inter', system-ui, -apple-system, sans-serif;    /* cuerpo + UI */
  --mono:  'JetBrains Mono', ui-monospace, monospace;        /* eyebrow */

  /* ---- Escala fluida ----
     ARREGLO DE JERARQUIA: antes el hero quedaba MAS CHICO que los titulos de
     seccion en la mayoria de las pantallas. Medido a 1280px de ancho: hero
     55.4px contra H2 57.6px, porque --fs-h2 ya estaba en su tope (3.6rem) y
     --fs-hero todavia iba subiendo. Solo se acomodaba arriba de ~1370px.
     Ahora el hero manda en todo el rango: a 1280 queda 74.9 vs 50.9 (x1.47),
     a 1440 82.2 vs 51.2 (x1.61), a 390 38.4 vs 30.4 (x1.26).
     Al agrandarlo deja de entrar en una linea: .hero__title pasa a envolver en
     dos con max-width en ch (ver hero.css). */
  --fs-hero: clamp(2.4rem, 1rem + 4.6vw, 5.6rem);
  --fs-h2:   clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem);
  --fs-deck: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.75rem;

  /* ---- 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;
  --container: min(1360px, 92vw);

  /* ---- Forma ----
     La escala son DOS valores y nada en el medio, a proposito: 0 para todo lo
     que es contenido (tarjetas, fotos, botones, chips) y pildora para el
     herraje que flota sobre el contenido (isla de nav, WhatsApp, volver arriba).
     Saque --r-btn: 6px y --r-card: 2px: estaban declarados y NO se usaban en
     ningun lado (los botones son radius 0), asi que el sistema documentaba algo
     que el codigo no hacia. */
  --r-pill: 999px;

  /* ---- Sombra (suave, una capa) ---- */
  --shadow-island: 0 1px 1px rgba(14,26,31,.04), 0 8px 30px rgba(14,26,31,.10);

  /* ---- z ---- */
  --z-nav: 200;
}