/* ============================================================
   edusoftnet — Design tokens
   Valores extraídos de fidustaging.webflow.shared.c006b4065.min.css
   Ver docs/DESIGN-TOKENS.md para la trazabilidad de cada valor.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --bg:            #ffffff;
  --surface:       #f5f5f7;   /* celdas de bento grises */
  --surface-alt:   #f2f2f2;   /* base de la celda destacada */
  --surface-sunk:  #ededf0;   /* variante para estados hover de superficie */

  --ink:           #000000;
  --ink-soft:      #333333;
  --ink-muted:     #303030;
  /* fidu usa #757575, pero solo lo aplica sobre blanco. Sobre el gris
     --surface da 4,23:1 y no llega al mínimo AA de 4,5 (FASE 27).
     #6b6b6b da 5,33:1 sobre blanco y 4,89:1 sobre gris: pasa en ambos. */
  --ink-faint:     #6b6b6b;

  --dark:          #242424;   /* botón oscuro */
  --dark-hover:    #000000;
  --hairline:      #dadada;

  --accent:        #0057cc;
  --accent-soft:   #d8e9ff;
  --accent-press:  #0050bb;

  --focus:         #0057cc;

  /* ---------- Acentos pastel ----------
     Tonos claros de apoyo. Se usan SIEMPRE como fondo con tinta
     oscura encima: como color de texto sobre blanco no llegarían
     ni de lejos al mínimo de contraste. */
  --aqua:  #9ef1f7;
  --lime:  #e1f995;
  --mint:  #a7f3c8;
  --rose:  #f7ccfd;
  --sand:  #ffe3b0;

  /* Versiones apagadas, para superficies grandes */
  --aqua-soft: #e4fbfd;
  --lime-soft: #f4fce0;
  --mint-soft: #e6fbef;
  --rose-soft: #fdf0fe;

  /* ---------- Azul de panel ----------
     El fondo celeste de las tarjetas y paneles (referencia fidu).
     Luminancia alta a proposito: --ink-faint (#6b6b6b) tiene que
     seguir pasando AA encima, igual que sobre --surface. */
  --sky:       #e3edfa;
  --sky-soft:  #eef4fd;
  --sky-line:  #cfdff5;
  --grad-sky:        linear-gradient(158deg, #dbe8f9 0%, #e7f0fc 48%, #f3f8fe 100%);
  --grad-sky-strong: linear-gradient(158deg, #cfe0f6 0%, #dfeafb 52%, #eef5fe 100%);

  /* Tinta para los rotulos en versalitas encima del celeste.
     #6b6b6b se queda en 4,34:1 sobre la parada mas oscura del degradado
     y no llega a AA; este azul grisaceo da 6,4:1 y ademas es de marca. */
  --sky-ink:   #47506b;

  /* Tintas oscuras a juego, para texto sobre el pastel correspondiente */
  --aqua-ink: #0b4f56;
  --lime-ink: #46520d;
  --mint-ink: #10502f;
  --rose-ink: #5d1668;

  /* Acento de marca edusoftnet — reservado, sin uso por defecto.
     Se decidió copiar la paleta neutra de fidu (ver docs/AUDIT.md §5). */
  --brand-red:     #ce153f;
  --brand-blue:    #264186;

  /* ---------- Degradados ----------
     Con la identidad de edusoftnet: azul #264186 y rojo #CE153F.
     El morado intermedio es la mezcla de ambos, para que el barrido
     no pase por un gris sucio. */
  --grad-text:   linear-gradient(90deg, #264186, #ce153f 25%, #264186 50%, #ce153f 75%, #264186);
  --grad-hover:  linear-gradient(120deg, #264186, #7b2f6b 50%, #ce153f);
  --grad-bento:  linear-gradient(135deg, #e4eaf7 13%, var(--surface-alt));
  --grad-conv:   linear-gradient(246deg, #dfe7f7, #f7e3e8 46%, #fbfdff);

  /* Alternativas neutras, por si se quiere bajar el tono */
  --grad-bento-soft: linear-gradient(135deg, #eef4f8 13%, var(--surface-alt));
  --grad-conv-soft:  linear-gradient(246deg, #eef4fb, #f7f7f9 46%, #fbfdff);

  /* ---------- Tipografía ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  --fs-hero:        70px;   --lh-hero:        80px;
  --fs-hero-sub:    20px;   --lh-hero-sub:    30px;
  --fs-section:     48px;   --lh-section:     54px;
  --fs-section-sub: 20px;   --lh-section-sub: 30px;
  --fs-bento:       36px;   --lh-bento:       42px;
  --fs-bento-sub:   18px;   --lh-bento-sub:   24px;
  --fs-proof:       32px;   --lh-proof:       40px;
  --fs-conv:        30px;   --lh-conv:        36px;
  --fs-body:        17px;   --lh-body:        26px;
  --fs-small:       14px;   --lh-small:       20px;
  --fs-btn:         14px;   --lh-btn:         20px;
  --fs-copyright:   12px;   --lh-copyright:   16px;

  --tracking-btn:   1px;
  --tracking-tight: -0.02em;   /* titulares grandes */

  /* ---------- Espaciado y forma ---------- */
  --radius:       20px;
  --radius-sm:    12px;
  --radius-pill:  999px;

  --gap:          20px;
  --pad-page:     20px;
  --pad-section:  40px;
  --pad-btn:      12px 25px;
  --pad-nav:      12px 40px;

  --container:    1200px;
  --container-xl: 1600px;
  --measure:      700px;   /* ancho máximo de títulos de sección */
  --measure-hero: 750px;

  /* ---------- Movimiento ---------- */
  --t-fast: .2s;
  --t-med:  .35s;
  --ease:   cubic-bezier(.4, 0, .2, 1);

  /* ---------- Elevación ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow:    0 4px 24px rgba(0, 0, 0, .06);
  --z-nav:     100;
  --z-menu:    200;
}

/* ---------- Escala móvil ---------- */
@media (max-width: 767px) {
  :root {
    --fs-hero:     40px;   --lh-hero:     45px;
    --fs-section:  30px;   --lh-section:  40px;
    --fs-bento:    28px;   --lh-bento:    34px;
    --fs-proof:    26px;   --lh-proof:    30px;
    --fs-conv:     24px;   --lh-conv:     28px;
    --pad-btn:     12px 20px;
    --pad-nav:     10px 20px;
    --pad-section: 24px;
  }
}