/* ============================================================================
   SUYTEX · SISTEMA DE DISEÑO — fuente única de verdad
   Lujo minimalista · tech educativo premium
   ----------------------------------------------------------------------------
   USO TAILWIND v4 (Yobel/Halving/Talvo):
     npm i github:Suytex/suytex-design
     en tu CSS de entrada:  @import "tailwindcss"; @import "suytex-design/suytex.css";
   USO VANILLA (landings GitHub Pages, sin build):
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Suytex/suytex-design@main/suytex.css">
     usa var(--su-*) + las clases .su-*
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap');

@theme {
  --color-brand:     #0A0E27;
  --color-ink:       #060B1A;
  --color-blue:      #2563EB;
  --color-electric:  #1D4ED8;
  --color-royal:     #1E3A8A;
  --color-highlight: #93C5FD;
  --color-white:     #FFFFFF;
  --color-mist:      #94A3B8;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  --tracking-title:   0.04em;
  --tracking-wide:    0.20em;
  --tracking-caption: 0.30em;
  --tracking-max:     0.40em;

  --radius-suytex: 4px;
}

:root {
  --su-brand:     #0A0E27;
  --su-ink:       #060B1A;
  --su-blue:      #2563EB;
  --su-electric:  #1D4ED8;
  --su-royal:     #1E3A8A;
  --su-highlight: #93C5FD;
  --su-white:     #FFFFFF;
  --su-mist:      #94A3B8;

  --su-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --su-font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  --su-gradient: linear-gradient(135deg, #93C5FD 0%, #2563EB 100%);

  --su-hairline: 1px solid var(--su-blue);
  --su-border:   1px solid rgba(148, 163, 184, 0.12);
  --su-icon-stroke: 1.5px;
  --su-radius:   4px;
}

.su-caption {
  font-family: var(--su-font-body);
  font-size: 12px; line-height: 1; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.30em;
  color: var(--su-highlight);
}
.su-title {
  font-family: var(--su-font-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-title, 0.04em);
  color: var(--su-white); line-height: 1.08;
}
.su-body {
  font-family: var(--su-font-body); font-weight: 300;
  line-height: 1.75; color: var(--su-mist);
}
.su-gradient-text {
  background: var(--su-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.su-hairline { border: none; height: 1px; background: var(--su-blue); opacity: 0.9; }
.su-rule     { border: none; height: 1px; background: rgba(148, 163, 184, 0.12); }
.su-card     { background: var(--su-brand); border: var(--su-border); border-radius: var(--su-radius); }
.su-icon {
  width: 24px; height: 24px; fill: none;
  stroke: var(--su-blue); stroke-width: var(--su-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
.su-surface {
  background: var(--su-brand); color: var(--su-white);
  font-family: var(--su-font-body); font-weight: 300; line-height: 1.75;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}