/* ============================================================================
   SYNESYS — Sistema de marca (brand tokens)
   Fuente única de verdad visual. Todo componente depende de estas variables.
   Color (actualizado por ComentariosRev §2/§4/§11, retro Jorge/Synesys): los
   DEGRADADOS de marca son ahora el lenguaje principal de fondos; los colores
   SÓLIDOS se reservan a botones/CTA/bloques de apoyo. Todos los degradados se
   construyen SOLO con los 3 colores del Brandbook. Tipografía Montserrat.
   (Supersede la regla previa "solo sólidos, sin degradados" de la minuta 19-jun.)
   ========================================================================== */

/* ---------- Tipografía oficial (Brandbook diap. 15) ---------- */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
/* Tipografía secundaria dinámica del paquete gráfico (display) */
@font-face {
  font-family: 'Parabolica';
  src: url('../fonts/Parabolica-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Parabolica';
  src: url('../fonts/Parabolica-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Color (Brandbook diap. 11 y 12) — SÓLIDOS ---------- */
  --synesys-blue:    #0000FF;   /* Azul principal  RGB 0,0,255   */
  --synesys-magenta: #FC00FF;   /* Magenta acento  RGB 252,0,255 */
  --synesys-orange:  #FF4600;   /* Naranja muestreado del logo oficial — PENDIENTE confirmar hex con cliente (punto 9.6) */
  --synesys-black:   #000000;
  --synesys-white:   #FFFFFF;
  --synesys-ink:     #0A0A12;   /* negro de apoyo controlado (texto) */
  --synesys-navy:    #08081F;   /* azul muy oscuro derivado del azul de marca — fondo del footer (evita negro puro) */

  /* Rojo institucional de OLE Interactive (#EA0047, tomado de su propio sitio).
     Es color de la marca que firma, NO de la paleta Synesys: se usa solo en la
     etiqueta "Powered by" y nada más (Ajuste 06, 31-ago). */
  --ole-red:         #EA0047;

  /* Roles semánticos */
  --bg:           var(--synesys-white);
  --fg:           var(--synesys-ink);
  --brand:        var(--synesys-blue);
  --accent:       var(--synesys-magenta);

  /* ---------- Degradados de marca (ComentariosRev §2/§4/§11) ----------
     Lenguaje principal de fondos. Construidos SOLO con los 3 colores de marca.
     Los sólidos quedan para botones/CTA/apoyos. Sobre cualquier degradado con
     texto de cuerpo, superponer --grad-scrim (utilidad .tint) para legibilidad. */
  --grad-angle:  120deg;
  --grad-brand:  linear-gradient(var(--grad-angle), var(--synesys-blue) 0%, var(--synesys-magenta) 55%, var(--synesys-orange) 100%);
  --grad-bm:     linear-gradient(var(--grad-angle), var(--synesys-blue), var(--synesys-magenta));
  --grad-mo:     linear-gradient(var(--grad-angle), var(--synesys-magenta), var(--synesys-orange));
  --grad-bo:     linear-gradient(var(--grad-angle), var(--synesys-blue), var(--synesys-orange));
  --grad-dark:   linear-gradient(160deg, var(--synesys-navy) 0%, #12005c 55%, var(--synesys-ink) 100%);
  /* Naranja institucional con degradado ligero (3.md): limpio y moderno, legible en blanco */
  --grad-orange: linear-gradient(155deg, #FF5A1F 0%, #F24200 52%, #CC3300 100%);
  --grad-scrim:  linear-gradient(180deg, rgba(8,8,31,.55), rgba(8,8,31,.30));
  /* Velo de marca semitransparente para tintar fotos del Media Kit conservando legibilidad */
  --grad-veil:   linear-gradient(125deg, rgba(0,0,255,.72) 0%, rgba(252,0,255,.5) 52%, rgba(255,70,0,.55) 100%);

  /* ---------- Tipografía ---------- */
  --font-main:    'Montserrat', Arial, Helvetica, sans-serif;
  --font-display: 'Parabolica', 'Montserrat', Arial, sans-serif;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-bold:  700;
  --fw-black: 900;

  /* Escala tipográfica fluida */
  --fs-mega:  clamp(2.75rem, 7vw, 6rem);
  --fs-h1:    clamp(2.2rem, 5vw, 4rem);
  --fs-h2:    clamp(1.8rem, 3.6vw, 3rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:  clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  /* ---------- Espaciado / layout ---------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --maxw: 1240px;
  --gutter: clamp(1rem, 4vw, 3rem);

  /* Margen de seguridad del logo (Brandbook diap. 6, basado en altura "S") */
  --logo-safe: clamp(16px, 3vw, 32px);
  --logo-min:  178px;            /* tamaño mínimo digital (diap. 7) */

  --radius: 4px;                 /* bordes limpios, sin ornamento */
  --header-h: 76px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}