/* =========================================================
   Formactiva · colores y tipografía
   Used across slides, UI kits, and downstream artifacts.
   ========================================================= */

/* ----- Webfonts -------------------------------------------------------- */
/* Primary face: Nunito (humanist sans, friendly + serious, closest free
   match to the wordmark on the original logo). If the brand provides the
   exact display font, drop ttf/woff2 in /fonts and update src below. */
/* Webfonts SELF-HOSTED (subset latin, woff2, en /assets/fonts): sin
   fonts.googleapis.com no hay cadena de terceros bloqueando el render.
   Familias reales en uso: Manrope (display/body) y JetBrains Mono; Plus
   Jakarta Sans y Nunito del stack son solo fallbacks y no se descargan.

   UN SOLO ARCHIVO POR FAMILIA. Las dos son fuentes VARIABLES: llevan todos los
   pesos dentro y el navegador mueve el eje wght al valor que pida el CSS. Aquí
   había nueve @font-face apuntando a nueve archivos que resultaron ser tres,
   byte a byte idénticos (mismo md5 los cinco de Manrope, mismo md5 los cuatro
   de JetBrains). Como cada @font-face es un recurso distinto, el navegador no
   los deduplicaba: la home bajaba SEIS archivos de fuente, 158 KB, de los
   cuales 103 KB eran los mismos bytes otra vez.

   Comprobado en navegador el 2026-08-18 antes de tocar nada, midiendo el mismo
   texto a distintos pesos con un único archivo cargado: Manrope pasa de 1130 a
   1258 px de ancho entre el peso 100 y el 800, y JetBrains Mono (monoespaciada,
   donde el ancho nunca cambia) engorda de 14.791 a 22.384 píxeles de tinta. Es
   decir, los pesos salen del archivo y no de una negrita sintética: unificar no
   cambia una sola letra en pantalla.

   El rango declarado es el que responde de verdad en cada una, no el nominal:
   Manrope de 200 a 800, JetBrains Mono de 400 a 800. El CSS solo pide 400, 500,
   600, 700 y 800, todos dentro. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/JetBrainsMono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ===== BRAND GRADIENT ============================================ */
  /* The signature gradient runs: warm orange → magenta → purple → cool blue.
     Sampled directly from the logo. */
  --fa-grad-orange: #F58A4B;     /* leftmost: warm, optimistic */
  --fa-grad-pink:   #E63780;     /* magenta hot-spot */
  --fa-grad-magenta:#C03B8E;
  --fa-grad-purple: #7E5AB8;     /* deep, serious */
  --fa-grad-blue:   #5C7FC7;     /* cool, calm endpoint */

  --fa-gradient: linear-gradient(
    100deg,
    var(--fa-grad-orange) 0%,
    var(--fa-grad-pink) 30%,
    var(--fa-grad-magenta) 50%,
    var(--fa-grad-purple) 75%,
    var(--fa-grad-blue) 100%
  );
  --fa-gradient-soft: linear-gradient(
    100deg,
    #FDE7D8 0%, #FAD3E1 35%, #E6D7EE 65%, #D9E1F2 100%
  );
  --fa-gradient-vertical: linear-gradient(
    180deg,
    var(--fa-grad-orange) 0%,
    var(--fa-grad-pink) 35%,
    var(--fa-grad-purple) 70%,
    var(--fa-grad-blue) 100%
  );

  /* ===== PRIMARY (Magenta: the "Activa" half) ===================== */
  --fa-primary-50:  #FDEEF5;
  --fa-primary-100: #FAD7E6;
  --fa-primary-200: #F4AECC;
  --fa-primary-300: #ED7FAF;
  --fa-primary-400: #E6558F;
  --fa-primary-500: #D63577;   /* main */
  --fa-primary-600: #B82862;
  --fa-primary-700: #931E4E;
  --fa-primary-800: #6E1639;
  --fa-primary-900: #4A0E26;

  /* ===== SECONDARY (Purple: the bridge) =========================== */
  --fa-secondary-50:  #F2EEF8;
  --fa-secondary-100: #E2D8F0;
  --fa-secondary-200: #C5B2E0;
  --fa-secondary-300: #A88BD0;
  --fa-secondary-400: #8B6BC1;
  --fa-secondary-500: #7E5AB8;  /* main */
  --fa-secondary-600: #674696;
  --fa-secondary-700: #4F3573;
  --fa-secondary-800: #382550;
  --fa-secondary-900: #221530;

  /* ===== ACCENT (Orange: energy / calls to action variant) ======== */
  --fa-accent-50:  #FEF3EA;
  --fa-accent-100: #FCE0CA;
  --fa-accent-200: #F9C195;
  --fa-accent-300: #F7A360;
  --fa-accent-400: #F58A4B;     /* main */
  --fa-accent-500: #ED6F22;
  --fa-accent-600: #C95918;
  --fa-accent-700: #9C4513;

  /* ===== CALM (Blue: the "Activa" cool endpoint, used for trust UI) === */
  --fa-calm-50:  #EEF2FA;
  --fa-calm-100: #D6DFF1;
  --fa-calm-200: #ADBFE3;
  --fa-calm-300: #859FD5;
  --fa-calm-400: #5C7FC7;       /* main */
  --fa-calm-500: #3F65B3;
  --fa-calm-600: #2F4E8C;
  --fa-calm-700: #213966;

  /* ===== NEUTRALS (slightly cool, paper-like) ====================== */
  --fa-ink:        #0F172A;     /* near-black from wordmark */
  --fa-ink-soft:   #1E293B;
  --fa-graphite:   #334155;
  --fa-slate:      #5C6B81;   /* WCAG AA: 5.42:1 sobre blanco */
  --fa-mute:       #647289;   /* WCAG AA: 4.87:1 sobre blanco (texto tenue en fondo claro) */
  --fa-mute-dark:  #A8B3C4;   /* WCAG AA: 8.4:1 sobre navy (texto tenue en fondo oscuro) */
  --fa-line:       #E2E8F0;
  --fa-line-soft:  #EEF1F6;
  --fa-paper:      #F7F8FB;
  --fa-paper-warm: #FBF7F4;     /* warm-toned background variant */
  --fa-white:      #FFFFFF;

  /* ===== SEMANTIC FOREGROUND / BACKGROUND ========================== */
  --fg1: var(--fa-ink);             /* primary text */
  --fg2: var(--fa-graphite);        /* secondary text */
  --fg3: var(--fa-slate);           /* tertiary / meta */
  --fg-mute: var(--fa-mute);
  --fg-inverse: #FFFFFF;
  --fg-brand: var(--fa-primary-600);
  --fg-link: var(--fa-secondary-600);

  --bg1: #FFFFFF;                   /* surface */
  --bg2: var(--fa-paper);           /* page */
  --bg3: var(--fa-line-soft);       /* subtle fill */
  --bg-warm: var(--fa-paper-warm);
  --bg-ink: var(--fa-ink);          /* dark surfaces */

  --border: var(--fa-line);
  --border-strong: #CBD5E1;
  --border-focus: var(--fa-primary-500);

  /* ===== SEMANTIC STATE ============================================ */
  --success: #16A472;
  --success-bg: #E6F6EE;
  --warning: #E89B22;
  --warning-bg: #FCF1DE;
  --danger: #DC3545;
  --danger-bg: #FCE7E9;
  --info: var(--fa-calm-400);
  --info-bg: var(--fa-calm-50);

  /* ===== TYPOGRAPHY (families) ===================================== */
  /* Manrope = primary face. Geometric-humanist sans with terminales suaves
     and una "a" de doble piso muy parecida al wordmark. Plus Jakarta Sans
     y Nunito quedan como fallback / alternativas. */
  --font-display: "Manrope", "Plus Jakarta Sans", "Nunito", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== TYPE SCALE (1.20 minor third, comfortable for ed-tech) ==== */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  18px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 30px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 60px;
  --text-6xl: 76px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.10em;

  /* ===== SPACING (4-pt base) ======================================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* ===== RADII ===================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl:28px;
  --radius-pill: 999px;

  /* ===== SHADOWS (soft, layered: calm not flashy) ================= */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm: 0 2px 4px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 6px 16px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 16px 32px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.05);
  --shadow-xl: 0 28px 56px rgba(15,23,42,0.14), 0 8px 16px rgba(15,23,42,0.06);
  --shadow-brand: 0 12px 28px rgba(214,53,119,0.25);
  --shadow-inner: inset 0 1px 2px rgba(15,23,42,0.06);

  /* ===== MOTION ==================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   ========================================================= */
.fa-display-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.fa-display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.fa-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.fa-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}
.fa-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.fa-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.fa-h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.fa-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fa-primary-600);
}
.fa-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.fa-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg1);
}
.fa-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.fa-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg3);
}
.fa-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--fg2);
}
.fa-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-snug);
  color: var(--fg1);
}

/* Brand text · wordmark style.
   En el logo original "form" usa un peso regular (no light) y "activa" un
   bold cercano a 700 (no extrabold). Mantenemos esa proporción. */
.fa-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
.fa-wordmark > b,
.fa-wordmark .activa {
  font-weight: 700;
}

/* Gradient text accent */
.fa-text-gradient {
  background: var(--fa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}