/* ===============================================================
   SOLUCIONIC — Sistema de color y tipografía
   ---------------------------------------------------------------
   Studio creativo y estratégico · stands · BTL · retail
   Fuente: Solucionic Manual de marca v1 · 2026 (uploads/)
   Idea madre: "Creatividad que activa. Estrategia que conecta."
   =============================================================== */

/* Fuentes oficiales — variables TTF en fonts/ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============== PALETA PRINCIPAL ============== */
  /* Manual §3.9 — Tres colores fundacionales: azul profundo, violeta, blanco */
  --azul-profundo: #000E28;   /* Institucional · fondos amplios · logotipo positivo */
  --violeta:       #738BF1;   /* Acento puntual · punto del logo · CTAs · eyebrows. NUNCA fondo */
  --blanco:        #FFFFFF;   /* Fondo principal · respiración */

  /* ============== PALETA DE APOYO ============== */
  /* Manual §3.9 — Apoyos derivados del territorio cromático del azul profundo */
  --gris-claro:    #F4F5F8;   /* Fondos de sección o bloque */
  --gris:          #BAC0CC;   /* Líneas, marcos, textos de apoyo */
  --antracita:     #575C66;   /* Texto secundario, jerarquías menores */

  /* ============== TINTES DEL VIOLETA (auxiliares · no son del manual) ============== */
  /* Sólo para hover/press del violeta cuando se usa como acento. */
  --violeta-press: #5B73E0;   /* Press / hover sobre violeta */
  --violeta-soft:  #ECF0FE;   /* Pastilla suave, fondo de eyebrow */

  /* ============== ESTADOS (auxiliares · no son del manual) ============== */
  /* No están definidos en el manual; se eligen tonos sobrios coherentes con la paleta. */
  --estado-ok:     #2F9E6B;
  --estado-aviso:  #C98A2F;
  --estado-error:  #B23A48;

  /* ============== TIPOGRAFÍA ============== */
  /* Manual §3.10 — Plus Jakarta Sans (display/headings) + Inter (cuerpo) */
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Pesos del manual */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;     /* Plus Jakarta Sans Semibold = pesa display por defecto */
  --w-bold:    700;
  --w-black:   800;

  /* Tracking del manual (en em) */
  --tr-display:  -0.05em;   /* Plus Jakarta Sans Semibold / Tracking -50 (H1 & H2) */
  --tr-subtitle: -0.025em;  /* H3 / Tracking -25 */
  --tr-body:     0;         /* Inter Regular / Tracking 0 */
  --tr-label:    0.10em;    /* Etiquetas / Plus Jakarta Sans Regular / Tracking +100 */

  /* Escala (manual §3.10 — usa multiplicador X relativo al cuerpo).
     Cuerpo base = 16 px (X). H1 Display = 3X = 48 px. */
  --fs-display:  72px;      /* Hero · 4.5X (extiende el 3X del manual para hero) */
  --fs-h1:       48px;      /* 3X */
  --fs-h2:       36px;      /* 2.2X */
  --fs-h3:       24px;      /* 1.5X */
  --fs-body:     16px;      /* X */
  --fs-small:    14px;      /* 0.875X */
  --fs-label:    12.8px;    /* 0.8X · etiquetas */
  --fs-caption:  11px;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.55;
  --lh-loose:    1.7;

  /* ============== ESPACIADO ============== */
  /* Sistema de 8 puntos, con un 4 para detalles. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9:  128px;
  --s-10: 160px;

  /* ============== RADIOS ============== */
  /* Manual prioriza geometría limpia · esquinas sutiles, sin radios marcados. */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;     /* Tarjetas y campos por defecto */
  --r-lg:   16px;
  --r-pill: 999px;

  /* ============== ELEVACIÓN ============== */
  /* Manual §3.11 — "Sin sombras". Mantenemos un único nivel sutil para overlays. */
  --shadow-overlay: 0 12px 32px rgba(0, 14, 40, 0.16);
  --ring-focus:     0 0 0 3px rgba(115, 139, 241, 0.35);   /* Aro de foco · violeta translúcido */

  /* ============== MOTION ============== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* =================================================================
   PRIMITIVAS TIPOGRÁFICAS SEMÁNTICAS
   ================================================================= */

.sol-display {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--azul-profundo);
}

h1, .sol-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--azul-profundo);
}

h2, .sol-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  color: var(--azul-profundo);
}

h3, .sol-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-subtitle);
  color: var(--azul-profundo);
}

body, p, .sol-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-body);
  color: var(--antracita);
}

.sol-label, .eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--violeta);
}

a {
  color: var(--violeta);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--violeta-press); }

::selection { background: var(--violeta); color: var(--blanco); }