/* ============================================================
   WOXANT.ai — tokens del sistema de diseño
   SOLO variables. Ningún selector con estilos acá.
   ============================================================ */

:root {
  /* ---- Base fría profunda ---------------------------------- */
  --wox-navy:        #071B34;   /* base oscura: barra de anuncio, footer, títulos */
  --wox-navy-mid:    #0D2B52;   /* escalón intermedio de gradientes */
  --wox-navy-soft:   #14406F;   /* escalón final del gradiente de industrias */
  --wox-blue:        #2B6CB8;   /* azul medio, bordes, paso de gradiente */

  /* ---- ACENTO — el que manda ------------------------------- */
  --wox-cyan:        #00D1FF;
  --wox-cyan-deep:   #0091C7;   /* variante oscura, para texto de acento sobre claro */
  --wox-cyan-glow:   #5AE4FF;   /* solo para glow/pulse */

  /* ---- Señal puntual, NO decorativo ------------------------ */
  --wox-green:       #2FD16B;

  /* ---- Superficies ----------------------------------------- */
  --wox-bg:          #F6F8FB;   /* fondo base — NO blanco puro, es clave */
  --wox-surface:     #FFFFFF;
  --wox-surface-alt: #F0F3F8;   /* bandas alternas */
  --wox-border:      #E8EDF3;
  --wox-surface-mut: #F9FAFB;   /* banda gris de testimonios y blog */

  /* ---- Colores de estado (columnas Antes/Después) ---------- */
  --wox-danger-bg:     #FEF2F2;
  --wox-danger-border: #FEE2E2;
  --wox-danger-text:   #7F1D1D;
  --wox-danger-icon:   #DC2626;
  --wox-ok-bg:         #ECFDF5;
  --wox-ok-border:     #D1FAE5;
  --wox-ok-text:       #064E3B;
  --wox-ok-icon:       #0F8A45;

  /* ---- Texto ----------------------------------------------- */
  --wox-text:        #071B34;
  --wox-text-muted:  #55637A;
  --wox-text-soft:   #8494AC;

  /* ---- Gradientes firma ------------------------------------ */
  --wox-grad-hero: linear-gradient(to bottom right, #071B34, #0D2B52, #14406F);
  --wox-grad-cta:  linear-gradient(to right, #071B34, #0091C7);
  --wox-grad-full: linear-gradient(to bottom right, #071B34, #2B6CB8, #00D1FF);

  /* ---- Geometría — copiada de la referencia, da el "look" --- */
  --wox-radius-card: 16px;
  --wox-radius-btn:  12px;
  --wox-radius-pill: 9999px;

  --wox-shadow-lg:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --wox-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  --wox-announce-h: 44px;
  --wox-header-h:   72px;

  /* ---- Tipografía ------------------------------------------ */
  --wox-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wox-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica (valores de escritorio; en móvil se reducen
     con clamp() en base.css). Tracking -0.025em en todos los títulos. */
  --wox-fs-h1:        60px;
  --wox-fs-h2:        48px;
  --wox-fs-h2-sec:    36px;
  --wox-fs-h3:        30px;
  --wox-fs-h3-card:   20px;
  --wox-fs-h3-sm:     18px;
  --wox-fs-body:      16px;
  --wox-fs-sec:       14px;
  --wox-fs-micro:     12px;
  --wox-tracking:     -0.025em;

  /* ---- Curvas y duraciones (paleta.md §11) ----------------- */
  --wox-ease:          cubic-bezier(.4, 0, .2, 1);
  --wox-t-fast:        .15s;   /* hover, color */
  --wox-t-comp:        .3s;    /* componentes, header, tarjetas */
  --wox-t-industry:    .7s;    /* cambio de industria */
  --wox-t-reveal:      800ms;  /* scroll-reveal */
  --wox-marquee-dur:   15s;

  /* ---- Layout ---------------------------------------------- */
  --wox-container-pad: 2rem;   /* 32px */
  --wox-section-pad:   80px;   /* py-20 estándar de la referencia */

  /* Desplazamiento superior real = anuncio + header.
     JS lo pone en 0px para el anuncio cuando se cierra la barra. */
  --wox-offset-top: calc(var(--wox-announce-h) + var(--wox-header-h));
}