/* G2b · tokens. Marca: Instrument Sans + azul profundo. Producto: Geist Sans, «Clara compacta» (D-019). */
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/InstrumentSans.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/GeistSans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Marca */
  --azul: #1E3A8A;
  --azul-hondo: #172E70;     /* escenario: zona lejos de la luz */
  --azul-luz: #2A4BA6;       /* escenario: zona de la luz */
  --azul-noche: #0F1C45;     /* marco de la videollamada */
  --cian: #06B6D4;           /* solo lo que hace Nora */
  --cian-profundo: #0E7490;  /* cian legible sobre claro */
  --cian-claro: #A5F3FC;     /* cian legible sobre azul en texto pequeño */
  --tinta: #0F172A;
  --gris: #64748B;
  --gris-oscuro: #475569;
  --lienzo: #F8FAFC;
  --blanco: #FFFFFF;
  --sobre-azul: #DCE6FF;     /* texto secundario sobre azul (≥ 7:1) */
  --linea-azul: rgba(220, 230, 255, .18);

  /* Producto (Clara compacta, muestra 10G) */
  --app-azul: #213D87;
  --app-azul-hover: #172F72;
  --app-texto: #152033;
  --app-mutado: #596779;
  --app-linea: #DCE4ED;
  --app-suave: #EDF3F8;
  --app-fondo: #F8FAFC;
  --app-hoy-texto: #7B4816;
  --app-hoy-fondo: #FFF5DF;
  --hubspot-texto: #9B3B20; --hubspot-fondo: #FFF0E9; --hubspot-borde: #F1C7B4;
  --pipedrive-texto: #146C43; --pipedrive-fondo: #EDF8F1; --pipedrive-borde: #BEDFCB;
  --ok-texto: #24634F; --ok-fondo: #ECF7F2;
  --error-texto: #8D321C; --error-fondo: #FFF5F0; --error-borde: #F0CDBE;

  /* Tipografía */
  --f-marca: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --f-app: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  /* Escala de marca (razón ≈ 1,25; hero fluido) */
  --t-hero: clamp(2.6rem, 1.1rem + 4.6vw, 5.4rem);
  --t-h2: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  --t-h3: clamp(1.35rem, 1.1rem + .7vw, 1.75rem);
  --t-apoyo: clamp(1.06rem, 1rem + .3vw, 1.3rem);
  --t-cuerpo: 1rem;
  --t-chico: .875rem;

  /* Espacio (base 8) */
  --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-5: 3rem; --e-6: 4rem; --e-7: 6rem; --e-8: 8rem;
  --bloque: clamp(4.5rem, 2.5rem + 5.5vw, 7.5rem);
  --ancho: 1240px;
  --margen: clamp(1.25rem, .6rem + 3vw, 3rem);

  /* Radios por jerarquía */
  --r-ventana: 14px;   /* ventanas de producto */
  --r-control: 8px;    /* botones y campos del producto */
  --r-chip: 5px;
  --r-cta: 999px;      /* CTA de marca */

  /* Elevación: dos niveles, distintos según el fondo */
  --sombra-ventana: 0 1px 2px rgba(15, 23, 42, .06), 0 18px 48px -12px rgba(15, 23, 42, .22);
  --sombra-ventana-azul: 0 2px 4px rgba(6, 14, 40, .25), 0 40px 80px -24px rgba(6, 14, 40, .65);
  --sombra-flotante: 0 1px 2px rgba(15, 23, 42, .08), 0 8px 20px -6px rgba(15, 23, 42, .18);

  --foco: 0 0 0 3px var(--blanco), 0 0 0 5px var(--azul);
}