/* ============================================================================
   ConectaLabIA · tokens.css
   Sistema de diseño de la landing. Tema CLARO inspirado en la presentación
   "Conecta Lab AI OS": fondos claros azul/gris, verde esmeralda como color de
   acción y azul corporativo como acento secundario.
   Un solo lugar para cambiar el tema: todo lo demás usa estas variables.
   ========================================================================== */

:root {
  /* --- Superficies (claras, con aire, según la presentación) --- */
  /* El tono de fondo es el de las diapositivas del dossier: gris-azul algo más
     oscuro que el blanco, nunca azul oscuro ni negro (bordes medidos: #DAE4EC a
     #ECF2F6). Velo = el mismo tono con transparencia para barras que se pegan. */
  --fondo: #e5eaf1;
  --fondo-2: #d7dde7;
  --fondo-velo: rgba(229, 234, 241, 0.85);
  --fondo-velo-2: rgba(229, 234, 241, 0.98);
  --superficie: rgba(255, 255, 255, 0.82);
  --superficie-2: rgba(255, 255, 255, 0.72);
  --superficie-3: #ffffff;
  --superficie-solida: #ffffff;

  /* --- Bordes (azul pizarra suave) --- */
  --borde: rgba(20, 50, 80, 0.14);
  --borde-suave: rgba(20, 50, 80, 0.08);
  --borde-fuerte: rgba(0, 163, 104, 0.42);

  /* --- Texto (azul pizarra oscuro sobre claro) --- */
  /* Ratios de contraste sobre --fondo (#e5eaf1): texto 13,6:1 · medio 6,2:1 ·
     suave 4,8:1 (AA). Tenue queda por debajo a propósito: sólo se usa en rótulos
     decorativos en mayúsculas. */
  --texto: #15202b;
  --texto-medio: #45566a;
  --texto-suave: #566779;
  --texto-tenue: #74869a;

  /* --- Acentos de marca (verde esmeralda + azul corporativo) --- */
  --azul: #2f7c9e;
  --azul-claro: #256b8c;
  --cian: #0e9aa7;
  --violeta: #5b7ca6;
  --violeta-claro: #4a6e9e;
  --verde: #00a368;
  --ambar: #b7791f;
  --rojo: #d14343;
  --rosa: #c25e86;

  /* --- Fondos translúcidos de estado --- */
  --azul-bg: rgba(47, 124, 158, 0.1);
  --cian-bg: rgba(14, 154, 167, 0.1);
  --violeta-bg: rgba(91, 124, 166, 0.12);
  --verde-bg: rgba(0, 163, 104, 0.1);
  --ambar-bg: rgba(183, 121, 31, 0.12);

  /* --- Degradados --- */
  --degradado-marca: linear-gradient(104deg, var(--verde) 0%, #2f8b8b 50%, var(--azul) 100%);
  --degradado-texto: linear-gradient(96deg, #15202b 0%, var(--verde) 55%, var(--azul) 100%);
  --degradado-borde: linear-gradient(140deg, rgba(0, 163, 104, 0.5), rgba(47, 124, 158, 0.32), rgba(14, 154, 167, 0.42));

  /* --- Sombras y brillos (suaves, para fondo claro) --- */
  --sombra-1: 0 1px 2px rgba(16, 40, 64, 0.06);
  --sombra-2: 0 10px 30px rgba(16, 40, 64, 0.1);
  --sombra-3: 0 28px 70px rgba(16, 40, 64, 0.16);
  --brillo-azul: 0 0 0 1px rgba(0, 163, 104, 0.35), 0 12px 40px rgba(0, 163, 104, 0.2);
  --brillo-violeta: 0 0 0 1px rgba(47, 124, 158, 0.3), 0 12px 44px rgba(47, 124, 158, 0.18);

  /* --- Tipografía --- */
  /* Una sola voz: Roboto en todo el texto visible. JetBrains Mono queda relegada a
     la consola y el código del laboratorio (--fuente-tecnica), no a las etiquetas. */
  --fuente-titulo: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fuente: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fuente-mono: var(--fuente); /* alias: los rótulos visibles usan la misma Roboto */
  --fuente-tecnica: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Tipografía en px (referencia fija: 16px = texto normal). Ajusta aquí los tamaños. */
  --t-base: 16px;
  --t-hero: clamp(40px, 5.4vw, 70px);
  /* Portada: escala acotada para que el h1 quepa en 2 líneas sin desbordar. */
  --t-hero-portada: clamp(32px, 4.6vw, 52px);
  --t-h2: clamp(30px, 3.6vw, 48px);
  --t-h3: clamp(18px, 1.6vw, 23px);
  --t-cuerpo: 16px;
  --t-lead: clamp(18px, 1.7vw, 22px);
  --t-bajada: 17px;
  --t-chico: 14px;
  --t-micro: 12px;
  --t-eyebrow: 18px;
  --t-nav-marca: 16px;
  --t-riel-nodo: 15px;
  --t-btn: 14px;
  --t-btn-grande: 15px;

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

  /* --- Radios --- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pastilla: 999px;

  /* --- Movimiento --- */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.16, 1, 0.3, 1);
  --rapido: 0.18s;
  --normal: 0.34s;
  --lento: 0.7s;

  /* --- Layout --- */
  --ancho-max: 1240px;
  --ancho-lectura: 68ch;
  /* Ancho máximo del h2 de sección (unidad ch ≈ caracteres del tipo). */
  --ancho-titulo-seccion: 36ch;
  --ancho-titulo-seccion-centrada: 72ch;
  /* Espacio vertical entre bloques (padding arriba+abajo de cada .seccion). */
  --seccion-padding-block: clamp(32px, 6vw, 72px);
  --seccion-padding-block-ajustada: clamp(32px, 5vw, 64px);
  --cabecera-seccion-margin: clamp(28px, 3.5vw, 44px);
  /* Barra fija: un solo mando — sube/baja --logo-nav-alto y la nav sigue al logo. */
  --logo-nav-alto: 71px;
  --nav-logo-reserva: 7px;
  --alto-nav: calc(var(--logo-nav-alto) + var(--nav-logo-reserva));
  /* Reserva a la izquierda (≥1280px): ancho del riel + separación con el contenido. */
  --riel: 268px;

  /* --- Capas --- */
  --z-fondo: 0;
  --z-contenido: 1;
  --z-riel: 40;
  --z-nav: 50;
  --z-menu: 60;
  --z-modal: 80;
  --z-aviso: 90;
}