/* ============================================================================
   DEVELOOP STUDIO · variables.css
   Sistema de diseño "Navy Zafiro" — tokens globales.
   Estética seria/corporativa: base navy profunda + acento azul zafiro SÓLIDO.
   Edita aquí los colores, tipografías, radios y espaciados de TODO el sitio.
   ============================================================================ */

:root {
  /* -------- COLOR · Base teal-navy (estilo intelligenta.studio) -------- */
  --bg:            #0A1A22;   /* fondo base (teal-navy profundo) */
  --bg-2:          #0B212B;   /* bandas/secciones alternas */
  --surface:       #11262F;   /* cards (tinte teal) */
  --surface-2:     #16303A;   /* cards elevadas, inputs */
  --surface-3:     #1F3D47;   /* hover de superficies */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(60, 180, 215, 0.22);  /* borde con tinte azure-teal */

  /* -------- COLOR · Texto -------- */
  --text:        #EAF1F5;     /* titulares / principal (blanco frío) */
  --text-muted:  #9DB0BC;     /* secundario */
  --text-dim:    #61788A;     /* terciario / eyebrows */

  /* -------- COLOR · Marca (azure #009FE3 + teal, sólido) -------- */
  --accent:      #009FE3;     /* acento principal — azure cian (intelligenta) */
  --accent-2:    #0B82BE;     /* azure más profundo (botones/sombra) */
  --iris:        #1FB8B5;     /* teal/cian secundario (detalles/IA) */
  --accent-soft: rgba(0, 159, 227, 0.12);   /* fondos suaves de acento */
  --iris-soft:   rgba(31, 184, 181, 0.14);

  /* Gradientes monocromáticos (mismo tono, sutiles — NUNCA multicolor) */
  --grad-brand:  linear-gradient(120deg, #3DBDF2 0%, #009FE3 55%, #0B82BE 100%);
  --grad-warm:   linear-gradient(120deg, #3DBDF2 0%, #0B82BE 100%);
  --grad-iris:   linear-gradient(135deg, #1FB8B5 0%, #009FE3 100%);

  /* -------- COLOR · WhatsApp (NO modificar: reconocimiento de canal) -------- */
  --wa:    #25D366;
  --wa-600: #1EBE5D;

  /* -------- COLOR · Estados -------- */
  --ok:    #34D399;
  --error: #FB7185;

  /* -------- TIPOGRAFÍA -------- */
  --font-display: "Clash Display", "Space Grotesk", system-ui, sans-serif;
  --font-sans:    "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala fluida */
  --fs-h1:   clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-h2:   clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h3:   clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9rem;
  --fs-xs:   0.78rem;

  /* -------- ESPACIADO -------- */
  --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;

  /* Padding vertical de sección (compacto pero con aire) */
  --section-y: clamp(3.25rem, 2rem + 4.5vw, 6rem);

  /* -------- LAYOUT -------- */
  --container:     1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --header-h: 76px;

  /* -------- RADIOS -------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* -------- SOMBRAS / GLOW -------- */
  --shadow-sm:    0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 28px 64px rgba(0, 0, 0, 0.55);
  --glow-accent:  0 0 48px rgba(0, 159, 227, 0.28);
  --glow-iris:    0 0 48px rgba(31, 184, 181, 0.28);

  /* -------- MOVIMIENTO -------- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutExpo suave */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s;
  --t-mid:  0.32s;
  --t-slow: 0.6s;

  --z-header: 100;
  --z-wa:     90;
  --z-modal:  200;
}