/* =========================================================
   ENPODI · Sistema de diseño
   main.css — variables, reset, tipografía, utilidades base
   ========================================================= */

/* ---------- Tipografías ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&display=swap');

/* ---------- Mokoto (tipografía del logo ENPODI) ---------- */
/* Licencia: Freepik Company Fonts License vía suscripción Premium */
@font-face {
  font-family: 'Mokoto';
  src: url('/assets/fonts/mokoto/mokoto-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mokoto Glitch';
  src: url('/assets/fonts/mokoto/mokoto-glitch-1.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mokoto Outline';
  src: url('/assets/fonts/mokoto/mokoto-outline.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables del ecosistema ---------- */
:root {
  /* Marca madre */
  --enpodi-bg: #070410;
  --enpodi-bg-alt: #0d0820;
  --enpodi-surface: #15102a;
  --enpodi-border: rgba(255, 255, 255, 0.08);
  --enpodi-border-strong: rgba(255, 255, 255, 0.16);
  --enpodi-text: #f5f3ff;
  --enpodi-text-soft: rgba(245, 243, 255, 0.7);
  --enpodi-text-mute: rgba(245, 243, 255, 0.45);
  --enpodi-purple: #5a16e2;
  --enpodi-purple-glow: #7d3aff;
  --enpodi-purple-soft: rgba(90, 22, 226, 0.15);

  /* Colores de acento por submarca */
  --academy-color: #a3ff12;
  --academy-glow: rgba(163, 255, 18, 0.2);
  --hub-color: #00d4ff;
  --hub-glow: rgba(0, 212, 255, 0.2);
  --suite-color: #ffb800;
  --suite-glow: rgba(255, 184, 0, 0.2);
  --talents-color: #ff5c8a;
  --talents-glow: rgba(255, 92, 138, 0.2);

  /* Tipografías */
  --font-display: 'Geist', -apple-system, sans-serif;
  --font-body: 'Geist', -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;
  --font-brand: 'Mokoto', sans-serif;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Radios */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;

  /* Transiciones */
  --t-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  /* Anchos */
  --container: 1200px;
  --container-narrow: 920px;
}

/* ---------- Reset moderno ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--enpodi-text);
  background: var(--enpodi-bg);
  overflow-x: hidden;
  font-weight: 400;
  letter-spacing: -0.01em;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; }
h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 500; }
p  { color: var(--enpodi-text-soft); }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0; }

/* ---------- Background atmosférico global ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(90, 22, 226, 0.15), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(125, 58, 255, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Grano sutil */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ---------- Layout utilitario ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-md); position: relative; z-index: 2; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-md); }

.section { padding: var(--space-3xl) 0; position: relative; z-index: 2; }
.section-sm { padding: var(--space-2xl) 0; }

/* Ritmo vertical reducido en mobile: las secciones globales pasan de 144/96 a 96/64 px verticales. */
@media (max-width: 768px) {
  .section { padding: var(--space-2xl) 0; }
  .section-sm { padding: var(--space-xl) 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--enpodi-text-mute);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: currentColor;
  display: inline-block;
}

.lead {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.55;
  color: var(--enpodi-text-soft);
  max-width: 640px;
  font-weight: 300;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: all var(--t-fast);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.btn-primary {
  background: var(--enpodi-purple);
  color: var(--enpodi-text);
  box-shadow: 0 0 0 0 var(--enpodi-purple-glow), 0 8px 32px -8px var(--enpodi-purple);
}
.btn-primary:hover {
  background: var(--enpodi-purple-glow);
  box-shadow: 0 0 0 4px var(--enpodi-purple-soft), 0 12px 40px -8px var(--enpodi-purple);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--enpodi-text);
  border: 1px solid var(--enpodi-border-strong);
}
.btn-ghost:hover {
  background: var(--enpodi-surface);
  border-color: var(--enpodi-text-mute);
}
.btn-arrow::after {
  content: '→';
  transition: transform var(--t-fast);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* Botones de acento por submarca */
.btn-suite {
  background: var(--suite-color);
  color: #2d1c00;
  box-shadow: 0 0 0 0 var(--suite-glow), 0 8px 32px -8px var(--suite-color);
}
.btn-suite:hover { box-shadow: 0 0 0 4px var(--suite-glow), 0 12px 40px -8px var(--suite-color); transform: translateY(-1px); }

.btn-academy {
  background: var(--academy-color);
  color: #1a2a00;
}
.btn-academy:hover { box-shadow: 0 0 0 4px var(--academy-glow); transform: translateY(-1px); }

.btn-hub {
  background: var(--hub-color);
  color: #002430;
}
.btn-hub:hover { box-shadow: 0 0 0 4px var(--hub-glow); transform: translateY(-1px); }

.btn-talents {
  background: var(--talents-color);
  color: #2d0a16;
}
.btn-talents:hover { box-shadow: 0 0 0 4px var(--talents-glow); transform: translateY(-1px); }

/* ---------- Selección ---------- */
::selection { background: var(--enpodi-purple); color: white; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--enpodi-bg); }
::-webkit-scrollbar-thumb { background: var(--enpodi-surface); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--enpodi-purple); }

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Helpers ---------- */
.text-center { text-align: center; }
.text-soft { color: var(--enpodi-text-soft); }
.text-mute { color: var(--enpodi-text-mute); }
.text-suite { color: var(--suite-color); }
.text-hub { color: var(--hub-color); }
.text-academy { color: var(--academy-color); }
.text-talents { color: var(--talents-color); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.brand,
.brand-academy,
.brand-hub,
.brand-suite,
.brand-talents {
  font-family: var(--font-brand), 'Geist', sans-serif;
  font-weight: 400;
  font-size: 0.85em;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg,
    var(--brand-from, var(--enpodi-purple-glow)),
    var(--brand-to, var(--enpodi-purple)));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  top: 0.04em;
}
.brand-academy { --brand-from: var(--academy-color); --brand-to: #7acc0e; }
.brand-hub     { --brand-from: var(--hub-color);     --brand-to: #0099cc; }
.brand-suite   { --brand-from: var(--suite-color);   --brand-to: #cc9300; }
.brand-talents { --brand-from: var(--talents-color); --brand-to: #cc4d70; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--enpodi-border-strong), transparent);
  margin: var(--space-xl) 0;
}