/* =========================================================
   Millennium Music Distribution — base.css
   Tokens, reset, tipografía y utilidades
   ========================================================= */

:root{
  /* Superficies */
  --bg-dark:      #07080d;
  --bg-dark-2:    #0b0d13;
  --bg-navy:      #080e1c;
  --paper:        #f4f5f8;
  --white:        #ffffff;

  /* Tinta */
  --ink:          #0b0d12;
  --ink-2:        #2b3140;
  --muted:        #6b7280;
  --muted-2:      #98a0ae;
  --line:         #e7e9ef;
  --line-dark:    rgba(255,255,255,.10);

  /* Acentos */
  --blue:         #2b7fff;
  --blue-600:     #1668f0;
  --blue-soft:    #eaf1ff;
  --red:          #e5252f;
  --red-600:      #c81620;
  --red-soft:     #ffeceD;
  --green:        #16a34a;

  /* Forma */
  --r-sm:  10px;
  --r:     14px;
  --r-lg:  20px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* Sombras */
  --sh-xs: 0 1px 2px rgba(11,13,18,.05);
  --sh-sm: 0 2px 10px rgba(11,13,18,.06);
  --sh-md: 0 10px 30px rgba(11,13,18,.08);
  --sh-lg: 0 26px 70px rgba(11,13,18,.14);
  --sh-glow-red: 0 12px 30px rgba(229,37,47,.32);
  --sh-glow-blue: 0 12px 30px rgba(43,127,255,.30);

  /* Layout */
  --container: 1180px;
  --gutter: 24px;
  --header-h: 74px;

  /* Motion */
  --ease: cubic-bezier(.22,.68,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .7s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:6px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
  font-size:14px; font-weight:600;
}
.skip-link:focus{ left:0; }

/* ---------------- Layout ---------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ position:relative; padding:88px 0; }
.section.pt-0{ padding-top:0; }
.section--white{ background:var(--white); }
.section--paper{ background:var(--paper); }
.section--dark{ background:var(--bg-dark); color:#fff; }
.section--navy{ background:var(--bg-navy); color:#fff; }

/* ---------------- Tipografía ---------------- */
.section-title{
  font-size:clamp(28px, 3.1vw, 42px);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--ink);
}
.section-title.center{ text-align:center; }
.section-title.light{ color:#fff; }

.t-blue{ color:var(--blue); }
.t-red{ color:var(--red); }
.t-white{ color:#fff; }
.t-ink{ color:var(--ink); }

/* ---------------- Reveal / animaciones ---------------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .72s var(--ease-out), transform .72s var(--ease-out);
  transition-delay:var(--d,0s);
}
[data-reveal].is-visible{
  opacity:1;
  transform:none;
}

@keyframes floaty{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(0,-12px,0); }
}
@keyframes glowDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.85; }
  50%    { transform:translate3d(0,-24px,0) scale(1.06); opacity:1; }
}
@keyframes eqPulse{
  0%,100%{ transform:scaleY(.35); }
  50%    { transform:scaleY(1); }
}
@keyframes dashIn{
  from{ stroke-dashoffset:var(--len,600); }
  to  { stroke-dashoffset:0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}