/* ============================================================
   STREET DREAMS FESTIVAL — Design System / Tokens
   Fuente de verdad para el rebrand. Replicable en Elementor
   (colores globales + fuentes globales + Custom CSS del Kit).
   Marca oficial: tipografia.pdf + deck.
   ============================================================ */

/* ---- Fuentes (OFL, self-hosted) ---- */
@font-face{
  font-family:"Bebas Neue"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/BebasNeue-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Lacquer"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/Lacquer-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/Montserrat-Variable.ttf") format("truetype");
}

:root{
  /* ---- Paleta oficial ---- */
  --black:#000000;
  --ink:#0a0a0a;             /* negro ligeramente elevado para superficies */
  --ink-2:#121212;           /* cards */
  --ink-3:#1a1a1a;           /* borders/hovers */
  --white:#F4F4EF;           /* blanco hueso */
  --gold:#F4C928;            /* amarillo/oro: acento principal */
  --blue:#0B7CFF;            /* azul eléctrico: acento secundario */

  --gold-soft:rgba(244,201,40,.14);
  --blue-soft:rgba(11,124,255,.14);
  --white-dim:rgba(244,244,239,.66);
  --white-faint:rgba(244,244,239,.40);
  --hairline:rgba(244,244,239,.12);

  /* ---- Tipografía ---- */
  --f-display:"Bebas Neue", Impact, sans-serif;       /* títulos */
  --f-graffiti:"Lacquer", "Bebas Neue", cursive;      /* acentos graffiti */
  --f-body:"Montserrat", system-ui, sans-serif;       /* texto */

  /* escala fluida */
  --fs-hero:clamp(3.5rem, 13vw, 12rem);
  --fs-h1:clamp(2.6rem, 7vw, 6rem);
  --fs-h2:clamp(2rem, 5vw, 4rem);
  --fs-h3:clamp(1.4rem, 3vw, 2.2rem);
  --fs-lead:clamp(1.05rem, 1.6vw, 1.4rem);
  --fs-body:clamp(1rem, 1.2vw, 1.125rem);
  --fs-small:.8rem;

  /* ---- Espaciado / layout ---- */
  --container:1240px;
  --gutter:clamp(1.25rem, 4vw, 4rem);
  --section-y:clamp(4rem, 10vw, 9rem);
  --radius:4px;              /* la marca es angulosa, casi sin redondeo */

  /* ---- Sombras / glows ---- */
  --glow-gold:0 0 36px rgba(244,201,40,.45);
  --glow-blue:0 0 36px rgba(11,124,255,.5);
  --shadow-card:0 24px 60px rgba(0,0,0,.55);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset suave ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--black); color:var(--white);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ---- Tipografía base ---- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:.92;letter-spacing:.01em;margin:0}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
.display{font-size:var(--fs-hero);line-height:.82}
.graffiti{font-family:var(--f-graffiti);transform:rotate(-1.9deg);display:inline-block}
.upper{text-transform:uppercase}
.gold{color:var(--gold)} .blue{color:var(--blue)}
.dim{color:var(--white-dim)}

/* ---- Utilidades de layout ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative;overflow:hidden}
.center{text-align:center}
.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}

/* ---- Kicker de sección (sin número, sin línea) ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  font-family:var(--f-display);letter-spacing:.24em;font-size:1rem;text-transform:uppercase;color:var(--gold)}
.eyebrow .num{display:none}              /* números de sección eliminados */
.eyebrow::before{content:"✦";color:var(--blue);font-size:.8em}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;border:none;
  font-family:var(--f-display);letter-spacing:.12em;text-transform:uppercase;
  font-size:1.15rem;padding:.85em 1.8em;border-radius:var(--radius);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
/* color del texto forzado con !important para que ninguna regla global de a:hover lo pise */
.btn-gold,.btn-gold:hover,.btn-gold:focus{background:var(--gold);color:#000 !important}
.btn-gold:hover{transform:translateY(-3px);box-shadow:var(--glow-gold)}
.btn-blue,.btn-blue:hover,.btn-blue:focus{background:var(--blue);color:#fff !important}
.btn-blue:hover{transform:translateY(-3px);box-shadow:var(--glow-blue)}
.btn-ghost{background:transparent;color:var(--white);border:2px solid var(--hairline)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold) !important;background:transparent}

/* ---- Decoración: línea de goteo / spray ---- */
.rule-gold{height:3px;width:120px;background:var(--gold);margin:1.6rem auto;border-radius:2px}

/* ---- Reveal on scroll ---- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}