/* ==========================================================================
   latinx.bio — tokens de diseño
   Actualizado el 11 ago 2026 con la elección del cliente:
   **Paleta C · Cal** + **tipografía 2 · IBM Plex Serif + IBM Plex Sans**.
   Textual suyo: "me gusta mucho la combinación de C-Cal con 2-Plex Serif".

   Este es el único archivo del proyecto donde se escribe un color, una fuente
   o un tamaño con valor literal. Si aparece un `#` o un `px` suelto en
   cualquier otro archivo, es un error que se corrige, no una excepción.
   ========================================================================== */

:root {
  /* --- Color · Paleta C · Cal -------------------------------------------
     Blanco de cal y verde botella. Alto contraste, mínima, editorial: es la
     más cercana a la referencia que dio el cliente (896studio.mx) y la más
     lejana al verde de software que descartó.
     Contrastes WCAG 2.1 verificados, no estimados: texto 16.59:1 ·
     texto suave 7.51:1 · acento 5.18:1 · borde de control 3.29:1 ·
     invertido 15.17:1 · error 10.68:1.
     Los grises comparten el matiz del acento: un gris perfectamente neutro
     junto a un verde saturado se ve como plantilla. */
  --color-fondo:          #FBFBF9;
  --color-superficie:     #F0F2EE;
  --color-texto:          #0B1F16;
  --color-texto-suave:    #455650;
  --color-acento:         #0A7A50;
  --color-acento-hover:   #065C3C;
  --color-borde:          #DDE2DA;  /* filetes decorativos */
  --color-borde-control:  #828E87;  /* bordes de campos y botones: ≥3:1 */
  --color-inv-fondo:      #0B1F16;
  --color-inv-texto:      #EDF2EE;
  --color-inv-acento:     #3FBF87;
  --color-error:          #6E1F2E;  /* vino, no rojo de semáforo: el cliente
                                       vetó verde+rojo. El error nunca se
                                       comunica solo con color. */

  /* --- Tipografía --------------------------------------------------------
     Una sola superfamilia: IBM Plex Serif para títulos, IBM Plex Sans para
     cuerpo y datos. Comparten esqueleto, así que el sistema se lee como uno
     solo. Plex nació para documentación técnica: aguanta bloques largos en
     pantalla chica y tiene el español completo. Las dos gratuitas. */
  --fuente-display: "IBM Plex Serif", Georgia, serif;
  --fuente-cuerpo:  "IBM Plex Sans", system-ui, sans-serif;
  --display-variacion: normal;

  /* Escala de razón 1.25, fluida con clamp() en lugar de tres breakpoints. */
  --texto-xs:   0.75rem;
  --texto-sm:   0.875rem;
  --texto-base: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --texto-lg:   clamp(1.33rem,  1.26rem + 0.32vw, 1.48rem);
  --texto-xl:   clamp(1.66rem,  1.54rem + 0.55vw, 1.85rem);
  --texto-2xl:  clamp(2.07rem,  1.85rem + 1vw,    2.32rem);
  --texto-3xl:  clamp(2.59rem,  2.15rem + 2vw,    3.05rem);
  --texto-4xl:  clamp(3.24rem,  2.40rem + 3.8vw,  4.50rem);

  /* Tamaño de la frase alternante de la portada. Va aparte de la escala
     porque tiene una restricción que los demás textos no tienen: sus dos
     renglones no pueden partirse —si se parten, el bloque cambia de alto y la
     página salta— así que el tamaño se ata al ancho de la pantalla para que
     «Ciencia que compartimos» quepa entero a 360px. */
  --texto-palabras: min(var(--texto-2xl), 6.4vw);

  --altura-linea-cuerpo: 1.65;
  --altura-linea-titulo: 1.1;
  --tracking-etiqueta: 0.08em;

  /* --- Espaciado · base 4px, todo espacio es múltiplo -------------------- */
  --espacio-1: 4px;   --espacio-2: 8px;   --espacio-3: 12px;
  --espacio-4: 16px;  --espacio-6: 24px;  --espacio-8: 32px;
  --espacio-12: 48px; --espacio-16: 64px; --espacio-24: 96px;

  /* --- Layout ------------------------------------------------------------ */
  --ancho-contenido: 68rem;
  --ancho-texto: 65ch;   /* ~65 caracteres por renglón */
  --radio: 2px;
  --toque-minimo: 44px;  /* área de toque mínima en botones y links de menú */
  --foto-equipo: 148px;  /* diámetro del retrato circular, tipo 896studio.mx */

  /* --- Breakpoints (referencia; CSS no los consume como variables) --------
     360px  — piso obligatorio, el sitio tiene que funcionar aquí
     720px  — la ficha de sesión pasa a dos columnas
     1200px — ancho máximo de contenido */
}

/* Marcador de dato faltante — intencionalmente feo. No borrar.
   Tiene que ser imposible publicar el sitio sin verlo. */
.falta {
  background: #FFE900;
  color: #000;
  padding: 0 .3em;
  border: 1px dashed #000;
  font-family: monospace;
  font-size: .9em;
  overflow-wrap: anywhere;  /* un marcador largo nunca ensancha la página */
}

/* Copy redactado por nosotros que el cliente todavía no aprueba. */
[data-borrador] {
  border-left: 3px solid #FF7A00;
  padding-left: .8em;
}