@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=JetBrains+Mono:wght@400;600&display=swap');
/* hux.mx — Base Styles (Capa 0)
   Regla: base.css define fundamentos (reset, tipografía, layout).
   No estiliza componentes específicos (van en components.css).
*/

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--hx-font-sans);
  font-size: var(--hx-font-size-md);
  line-height: var(--hx-line-height);
  color: var(--hx-color-text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(154,255,183,.10), transparent 60%),
              radial-gradient(900px 700px at 70% 0%, rgba(124,198,255,.10), transparent 55%),
              var(--hx-color-bg);
}

a{ color: inherit; }
img{ max-width: 100%; display:block; }

.hx-container{
  max-width: var(--hx-container-max);
  margin: 0 auto;
  padding: 0 var(--hx-container-pad);
}

.hx-stack{ display:flex; flex-direction:column; gap: var(--hx-space-4); }
.hx-row{ display:flex; gap: var(--hx-space-4); flex-wrap: wrap; }
.hx-grid{
  display:grid;
  gap: var(--hx-space-4);
  grid-template-columns: repeat(12, 1fr);
}
.hx-col-12{ grid-column: span 12; }
.hx-col-6{ grid-column: span 12; }
@media (min-width: 860px){
  .hx-col-6{ grid-column: span 6; }
}

.hx-muted{ color: var(--hx-color-text-muted); }
.hx-faint{ color: var(--hx-color-text-faint); }

.hx-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}


/* =========================================================
   WOW BASE ATMOSPHERE — Added by Contract
   ========================================================= */

html, body{ overflow-x: hidden; }

body{
  /* Richer background: radial + vignette */
  background:
    radial-gradient(1200px 800px at 12% 18%, rgba(154,255,183,.10), rgba(0,0,0,0) 60%),
    radial-gradient(900px 700px at 82% 22%, rgba(120,190,255,.10), rgba(0,0,0,0) 58%),
    radial-gradient(1100px 900px at 50% 120%, rgba(255,255,255,.04), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(6,10,12,1) 0%, rgba(6,9,11,1) 55%, rgba(4,7,9,1) 100%);
}

/* Subtle texture overlay (CSS-only, no images) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, rgba(0,0,0,0) 1px);
  background-size: 18px 18px;
  mix-blend-mode: overlay;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(700px 500px at 50% 0%, rgba(154,255,183,.10), rgba(0,0,0,0) 62%),
    radial-gradient(900px 700px at 50% 100%, rgba(120,190,255,.08), rgba(0,0,0,0) 60%);
  opacity: .55;
}

/* Ensure app content is above overlays/canvas */
.hx-app, main, header, footer, .hx-shell{
  position: relative;
  z-index: 1;
}

/* Typography rhythm */
h1, .hx-h1{ font-family: var(--hx-font-display, inherit); letter-spacing: .2px; }
h2, h3, .hx-h2, .hx-h3{ font-family: var(--hx-font-display, inherit); letter-spacing: .1px; }
.hx-badge, .hx-chip, code, pre{ font-family: var(--hx-font-mono, ui-monospace); }

/* Focus ring */
:focus-visible{
  outline: 2px solid rgba(154,255,183,.55);
  outline-offset: 3px;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}