/* SoporteInfo.net — Shared Theme Stylesheet */
/* Import Google Fonts once */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Tailwind v4 @theme block — custom design tokens for static build */
@theme {
  --color-surface: #041329;
  --color-surface-container-low: #0d1c32;
  --color-surface-container: #112036;
  --color-surface-container-high: #1c2a41;
  --color-surface-container-highest: #27354c;
  --color-surface-container-lowest: #010e24;
  --color-on-surface: #d6e3ff;
  --color-on-surface-variant: #bacac3;
  --color-secondary: #aeecff;
  --color-secondary-container: #00d9ff;
  --color-primary: #ffffff;
  --color-primary-container: #5ffbd6;
  --color-outline-variant: #3c4a45;
  --color-outline: #85948e;
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-background: #041329;
  --color-surface-variant: #27354c;
  --color-cyan: #64ffda;
  --color-blue: #00d9ff;
  --color-purple: #b026ff;
  --color-magenta: #ff00ff;
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;
}

/* CSS Custom Properties */
:root {
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --color-surface: #041329;
  --color-surface-low: #0d1c32;
  --color-surface-container: #112036;
  --color-surface-high: #1c2a41;
  --color-surface-highest: #27354c;
  --color-surface-lowest: #010e24;
  --color-on-surface: #d6e3ff;
  --color-on-surface-variant: #bacac3;
  --color-secondary: #aeecff;
  --color-secondary-container: #00d9ff;
  --color-primary: #ffffff;
  --color-primary-container: #5ffbd6;
  --color-outline-variant: #3c4a45;
  --color-outline: #85948e;
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-background: #041329;
  --color-surface-variant: #27354c;
  --color-cyan: #64ffda;
  --color-blue: #00d9ff;
  --color-purple: #b026ff;
  --color-magenta: #ff00ff;
}

/* Shared mobile menu — usado por nav.js en todas las paginas */
#mobileMenu{display:none}
#mobileMenu.open{display:flex}

/* Nav glitch effect — Ley 21.663 */
.glitch-link{position:relative}
.glitch-link:hover{animation:glitch-skew .3s ease-in-out}
@keyframes glitch-skew{0%{transform:skew(0deg)}25%{transform:skew(2deg)}50%{transform:skew(-2deg)}75%{transform:skew(1deg)}100%{transform:skew(0deg)}}
.glitch-link::before,.glitch-link::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}
.glitch-link:hover::before{opacity:.8;color:#ff00ff;animation:glitch-clip1 .3s infinite}
.glitch-link:hover::after{opacity:.8;color:#00d9ff;animation:glitch-clip2 .3s infinite .1s}
@keyframes glitch-clip1{0%,100%{clip-path:inset(40% 0 60% 0);transform:translate(-2px,0)}50%{clip-path:inset(60% 0 30% 0);transform:translate(2px,0)}}
@keyframes glitch-clip2{0%,100%{clip-path:inset(30% 0 50% 0);transform:translate(2px,0)}50%{clip-path:inset(70% 0 20% 0);transform:translate(-2px,0)}}

/* ─────────────────────────────────────────────────
   FONT INHERITANCE — cubre TODAS las páginas
   sin depender de clases Tailwind.
   Reglas directas sobre elementos + clases de apoyo.
───────────────────────────────────────────────── */

/* Body: Inter para todo el texto base */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-on-surface);
  background-color: var(--color-surface);
}

html.light body {
  color: #1a2332;
  background-color: #f0f4f8;
}

/* Utilidades semánticas no compiladas por Tailwind */
.text-on-surface         { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.bg-surface              { background-color: var(--color-surface); }
.bg-surface-container-low    { background-color: var(--color-surface-container-low, #0d1c32); }
.bg-surface-container        { background-color: var(--color-surface-container); }
.bg-surface-container-high   { background-color: var(--color-surface-container-high); }
.bg-surface-container-highest{ background-color: var(--color-surface-container-highest); }
.border-outline-variant  { border-color: var(--color-outline-variant); }

/* Headlines: Space Grotesk en todos los títulos, siempre */
h1, h2, h3, h4, h5, h6,
.font-headline {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Monospace: JetBrains Mono en código y elementos mono */
code, pre, kbd, samp,
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Clases de apoyo (usadas en body, nav, párrafos) */
.font-body  { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.font-label { font-family: 'Inter', system-ui, sans-serif; }

/* Garantizar que nav, footer, botones hereden correctamente */
nav, footer, button, a, p, span, li, td, th {
  font-family: inherit;
}

/* ─────────────────────────────────────────────────
   COLOR TOKENS — usables como var(--color-cyan) etc.
   en cualquier página futura sin necesidad de Tailwind
───────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────
   UTILIDADES COMPARTIDAS — aplican en todas las páginas
───────────────────────────────────────────────── */

/* Gradient text (cyan → blue → purple) */
.gradient-text {
  background: linear-gradient(135deg, #64ffda 0%, #00d9ff 50%, #b026ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dot grid background pattern */
.dot-grid {
  background-image: radial-gradient(rgba(100,255,218,0.15) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Section divider line */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,255,218,.2), transparent);
}