/* ============================================================
   MolGon Systems — Design Tokens v1.0
   Manual de identidad de marca, sección 09.1
   Importar antes que cualquier otra hoja de estilos.
   ============================================================ */

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

:root {
  /* ---------- Marca ---------- */
  --mg-cian: #3FBFEF;
  --mg-purpura: #A233B4;
  --mg-cian-neon: #22E4F5;
  --mg-magenta-neon: #E22FD8;
  --mg-rosa-cortex: #E8A0B8;
  --mg-cian-profundo: #1B7FA8;      /* texto/enlaces sobre fondo claro */
  --mg-purpura-profundo: #7A1E96;   /* texto/botones sobre fondo claro */
  --mg-gradiente: linear-gradient(90deg, #3FBFEF 0%, #A233B4 100%);

  /* ---------- Neutros (dark-first) ---------- */
  --mg-nocturno: #0B0812;
  --mg-carbon: #141020;
  --mg-superficie: #1C1730;
  --mg-gris: #8C87A8;
  --mg-niebla: #E8E9F2;
  --mg-tinta: #1A1526;
  --mg-blanco: #FFFFFF;
  --mg-borde: rgba(255, 255, 255, .09);
  --mg-borde-fuerte: rgba(255, 255, 255, .16);

  /* ---------- Semánticos ---------- */
  --mg-ok: #2FD69A;
  --mg-alerta: #FFB020;
  --mg-error: #FF4D6A;

  /* ---------- Tipografía ---------- */
  --mg-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --mg-texto: 'Inter', system-ui, -apple-system, sans-serif;
  --mg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --mg-t-display: 64px;  --mg-lh-display: 1.02;
  --mg-t-h1: 44px;       --mg-lh-h1: 1.10;
  --mg-t-h2: 32px;       --mg-lh-h2: 1.15;
  --mg-t-h3: 24px;       --mg-lh-h3: 1.25;
  --mg-t-lead: 18px;     --mg-lh-lead: 1.60;
  --mg-t-body: 16px;     --mg-lh-body: 1.65;
  --mg-t-small: 14px;    --mg-lh-small: 1.55;
  --mg-t-label: 11px;    --mg-ls-label: .22em;

  /* ---------- Espaciado (escala de 4 px) ---------- */
  --mg-1: 4px;   --mg-2: 8px;   --mg-3: 12px;  --mg-4: 16px;
  --mg-6: 24px;  --mg-8: 32px;  --mg-12: 48px; --mg-16: 64px; --mg-20: 80px;
  --mg-seccion: clamp(80px, 10vw, 140px);

  /* ---------- Radios ---------- */
  --mg-r-sm: 10px;   /* botones, inputs */
  --mg-r-md: 16px;   /* tarjetas */
  --mg-r-lg: 24px;   /* secciones, modales */
  --mg-r-full: 999px;

  /* ---------- Elevación por luz ---------- */
  --mg-glow-cian: 0 0 0 4px rgba(34, 228, 245, .15), 0 0 24px rgba(34, 228, 245, .45);
  --mg-glow-purpura: 0 0 0 4px rgba(162, 51, 180, .15), 0 0 24px rgba(162, 51, 180, .45);

  /* ---------- Movimiento ---------- */
  --mg-rapido: 150ms cubic-bezier(.4, 0, .2, 1);
  --mg-base: 280ms cubic-bezier(.4, 0, .2, 1);
  --mg-lento: 600ms cubic-bezier(.16, 1, .3, 1);

  /* ---------- Layout ---------- */
  --mg-ancho: 1200px;
  --mg-ancho-texto: 70ch;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--mg-nocturno);
  color: var(--mg-niebla);
  font-family: var(--mg-texto);
  font-size: var(--mg-t-body);
  line-height: var(--mg-lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--mg-display); font-weight: 600; }
h1 { font-size: var(--mg-t-h1); line-height: var(--mg-lh-h1); letter-spacing: -.02em; }
h2 { font-size: var(--mg-t-h2); line-height: var(--mg-lh-h2); letter-spacing: -.02em; }
h3 { font-size: var(--mg-t-h3); line-height: var(--mg-lh-h3); }

.mg-display {
  font-family: var(--mg-display); font-weight: 700;
  font-size: clamp(40px, 7vw, var(--mg-t-display));
  line-height: var(--mg-lh-display); letter-spacing: -.035em;
}
.mg-gradiente-texto {
  background: var(--mg-gradiente);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mg-label {
  font-family: var(--mg-mono); font-size: var(--mg-t-label);
  letter-spacing: var(--mg-ls-label); text-transform: uppercase;
  color: var(--mg-cian);
}

/* ============================================================
   COMPONENTES
   ============================================================ */
.mg-btn {
  font-family: var(--mg-display); font-weight: 600; font-size: 15px;
  min-height: 44px; padding: 13px 26px; border-radius: var(--mg-r-sm);
  border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: box-shadow var(--mg-rapido), transform var(--mg-rapido),
              background var(--mg-rapido), border-color var(--mg-rapido);
}
.mg-btn:focus-visible { outline: 2px solid var(--mg-cian-neon); outline-offset: 2px; }

.mg-btn--primario { background: var(--mg-gradiente); color: var(--mg-nocturno); }
.mg-btn--primario:hover { box-shadow: var(--mg-glow-cian); transform: translateY(-1px); }

.mg-btn--secundario {
  background: transparent; color: var(--mg-niebla);
  border: 1px solid var(--mg-borde-fuerte);
}
.mg-btn--secundario:hover { border-color: var(--mg-cian); background: rgba(63, 191, 239, .08); }

.mg-btn--terciario { background: transparent; color: var(--mg-cian); padding: 12px 4px; }
.mg-btn--terciario:hover { color: var(--mg-cian-neon); }

.mg-card {
  background: rgba(255, 255, 255, .032);
  border: 1px solid var(--mg-borde);
  border-radius: var(--mg-r-md);
  padding: var(--mg-6);
  transition: transform var(--mg-base), border-color var(--mg-base);
}
.mg-card:hover { transform: translateY(-4px); border-color: rgba(63, 191, 239, .45); }
.mg-card--destacada { border-top: 3px solid transparent; border-image: var(--mg-gradiente) 1; }

.mg-input {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--mg-superficie); color: var(--mg-niebla);
  border: 1px solid var(--mg-borde); border-radius: var(--mg-r-sm);
  font-family: var(--mg-texto); font-size: var(--mg-t-body);
  transition: border-color var(--mg-rapido), box-shadow var(--mg-rapido);
}
.mg-input:focus { outline: none; border-color: var(--mg-cian); box-shadow: var(--mg-glow-cian); }
.mg-input::placeholder { color: var(--mg-gris); }

.mg-input-label {
  display: block; margin-bottom: var(--mg-2);
  font-family: var(--mg-mono); font-size: var(--mg-t-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--mg-gris);
}
.mg-input-error { margin-top: var(--mg-2); font-size: var(--mg-t-small); color: var(--mg-error); }

.mg-pill {
  display: inline-block; padding: 4px 10px; border-radius: var(--mg-r-full);
  font-family: var(--mg-mono); font-size: var(--mg-t-label);
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--mg-borde-fuerte); color: var(--mg-gris);
}

.mg-seccion { padding-block: var(--mg-seccion); }
.mg-contenedor { max-width: var(--mg-ancho); margin-inline: auto; padding-inline: var(--mg-6); }
.mg-prosa { max-width: var(--mg-ancho-texto); }

/* ============================================================
   TEMA CLARO — usar Cian Profundo / Púrpura Profundo para texto.
   El cian de marca NUNCA se usa como texto sobre blanco (2.12:1).
   ============================================================ */
.mg-tema-claro {
  background: var(--mg-blanco);
  color: var(--mg-tinta);
  --mg-borde: rgba(26, 21, 38, .10);
  --mg-borde-fuerte: rgba(26, 21, 38, .18);
  --mg-gris: #5B5675;
}
.mg-tema-claro a { color: var(--mg-cian-profundo); }
.mg-tema-claro .mg-btn--primario { background: var(--mg-purpura-profundo); color: #fff; }
.mg-tema-claro .mg-card { background: #FAFAFC; }

/* ============================================================
   ACCESIBILIDAD — obligatorio
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}