/* =========================================================
   00 · BASE
   Variables, reset, botón y utilidades.
   Fuente, colores y medidas globales se cambian SOLO aquí.
   (El color de cada letra vive en js/00-data.js)
   ========================================================= */
:root{
  --bg:#000;
  --panel-bg:#0e0e0e;
  --line:rgba(255,255,255,.08);
  --text:#f4f4f5;
  --muted:rgba(244,244,245,.55);
  --accent:#9b7bff;

  --font:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-letters:'Fredoka','Baloo 2',system-ui,sans-serif;
  --pad:clamp(20px,3vw,40px);
  --panel-w:clamp(380px,31vw,500px);   /* ancho del panel lateral (escritorio) */
  --sheet-h:58svh;                      /* alto del panel inferior (móvil) */
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:760px){:root{--panel-w:0px}}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#000}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.noscript{position:fixed;inset:0;display:grid;place-items:center;padding:32px;text-align:center;background:var(--bg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;
  border-radius:999px;font-weight:500;white-space:nowrap;
  transition:background .3s,transform .4s var(--ease);
}
.btn--primary{background:var(--text);color:#000}
.btn--primary:hover{background:#fff;transform:translateY(-2px)}

/* ---------- menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
  }
}