/* ==========================================================================
   Nicole Favre — brand tokens
   Paleta oficial (Brandbook 2026): cian, verde, magenta, naranja, azul, amarillo
   ========================================================================== */
:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --silver:#c9ced4;
  --silver-dark:#8b909a;
  --gray-text:#58595c; /* gris del brandbook: texto sobre blanco en vez de negro */

  --cyan:#00cfff;
  --green:#75fa4d;
  --magenta:#eb33f7;
  --orange:#ff6636;
  --blue:#0000f5;
  --yellow:#ffff54;

  --ink:#0a0a0a;
  --bg:#ffffff;

  --bg-concierto:#ffffff;      /* blanco puro */
  --bg-footer:#fafafa;         /* casi blanco, apenas un toque de tono, cierra la página */

  /* Fuente oficial de marca: Blauer Nue (assets/fonts/BlauerNue), estandarizada
     en toda la web en sus variantes bold / regular / italic. */
  --font-display:'Blauer Nue', sans-serif;
  --font-tag:'Blauer Nue', sans-serif;
  --font-body:'Blauer Nue', sans-serif;

  --max:1180px;
  --radius:18px;
}

/* ---------- Blauer Nue (marca oficial) ---------- */
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Thin.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Thin_Italic.otf') format('opentype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-ExtraLight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-ExtraLight_Italic.otf') format('opentype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Light_Italic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Regular_Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Medium_Italic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-SemiBold_Italic.otf') format('opentype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Bold_Italic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-ExtraBold_Italic.otf') format('opentype');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Heavy.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Blauer Nue';src:url('../assets/fonts/BlauerNue/BlauerNue-Heavy_Italic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--gray-text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
svg{fill:currentColor}
.icon-star{display:inline-block;width:.7em;height:.7em;vertical-align:-.05em;margin:0 .12em;flex-shrink:0}
[hidden]{display:none!important}

/* ---------- pesos tipográficos Blauer Nue: tag = bold, display = heavy ---------- */
.eyebrow,.btn,.hype__eyebrow,.nav__links a,.hero__eyebrow,.pill,
.countdown__label,.marquee__track span,.tv-block__caption,.sticker,
.flyer-card__label,.single-feature__sub,.music__lead,.track-card__cta-inner span,
.favs__success,.vote__play{font-weight:700}
.section-title,.countdown__num,.hito h3,.flyer-card__value,.track-card h3,
.track-card__cta-inner strong,.favs__pillar h3,.vote__option-name{font-weight:900}

.eyebrow{
  font-family:var(--font-tag);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.85rem;
  color:var(--magenta);
  margin:0 0 .6rem;
}
.eyebrow--light{color:var(--yellow)}

.section-title{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:1.02;
  margin:0 0 1.2rem;
  letter-spacing:.01em;
}
.section-title--light{color:var(--white)}

.outline-text{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.9em 1.8em;
  font-family:var(--font-tag);
  font-size:1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  border:2px solid var(--ink);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn--primary{
  background:var(--ink);
  color:var(--white);
  box-shadow:4px 4px 0 var(--magenta);
}
.btn--primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--magenta)}
.btn--ghost{
  background:transparent;
  border-color:var(--white);
  color:var(--white);
}
.btn--ghost:hover{background:var(--white);color:var(--ink)}
.btn--wide{width:100%}
.btn--nav{
  background:var(--white);
  border-color:var(--blue);
  color:var(--blue);
  padding:.55em 1.3em;
  font-size:.85rem;
  box-shadow:3px 3px 0 var(--cyan);
}
.btn--merch{
  background:var(--magenta);
  color:var(--yellow);
  border-color:var(--yellow);
  box-shadow:4px 4px 0 var(--white);
}
.btn--merch:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--white)}
.btn--whatsapp{
  background:#25D366;
  color:var(--white);
  border-color:#25D366;
  box-shadow:4px 4px 0 #128c42;
  margin-top:2.2rem;
}
.btn--whatsapp:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #128c42}

/* ---------- holographic shimmer (fondos, no texto) ---------- */
@keyframes chromeShift{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

/* ==========================================================================
   HYPE POPUP — gancho de entrada con countdown
   ========================================================================== */
.hype{
  position:fixed;inset:0;
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
}
.hype[hidden]{display:none}
.hype__backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,10,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hype__card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:360px;
  background:var(--ink);
  border:2px solid rgba(255,255,255,.15);
  border-radius:24px;
  padding:2.2rem 1.75rem 1.75rem;
  text-align:center;
  color:var(--white);
  box-shadow:0 0 60px 10px rgba(0,207,255,.25), 0 20px 60px rgba(0,0,0,.6);
  opacity:0;
  transform:translateY(18px) scale(.96);
  transition:opacity .35s ease, transform .35s ease;
}
.hype.is-open .hype__card{opacity:1;transform:translateY(0) scale(1)}
.hype__close{
  position:absolute;top:.9rem;right:.9rem;
  z-index:2;
  width:32px;height:32px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  background:transparent;
  color:var(--white);
  font-size:.9rem;
  cursor:pointer;
  transition:background .2s;
}
.hype__close:hover{background:rgba(255,255,255,.15)}
.hype__eyebrow{
  font-family:var(--font-tag);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--orange);
  margin:0 0 .4rem;
}
.hype__countdown{justify-content:center;margin-bottom:1.5rem}
.hype__countdown .countdown__box{width:clamp(50px,14vw,64px)}

/* ---------- hype: variante blanco sobre blanco ---------- */
.hype__card--light{
  background:var(--white);
  border:2px solid rgba(10,10,10,.1);
  box-shadow:0 0 60px 10px rgba(10,10,10,.08), 0 20px 60px rgba(10,10,10,.18);
}
.hype__card--light .hype__close{
  border-color:rgba(10,10,10,.25);
  color:var(--gray-text);
  background:rgba(255,255,255,.85);
}
.hype__card--light .hype__close:hover{background:var(--white)}
.countdown--light .countdown__box{
  background:rgba(10,10,10,.04);
  border-color:rgba(10,10,10,.14);
}
.countdown--light .countdown__num{color:var(--orange)}
.countdown--light .countdown__label{color:var(--silver-dark)}

/* ---------- hype: variante afiche grande (el flyer es lo principal) ---------- */
.hype__card--poster{
  max-width:460px;
  padding:0;
  overflow:hidden;
}
.hype__card--poster .btn--primary{background:var(--blue);border-color:var(--blue);box-shadow:4px 4px 0 var(--orange)}
.hype__card--poster .btn--primary:hover{box-shadow:6px 6px 0 var(--orange)}
.hype__poster{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.hype__body{
  padding:1.6rem 1.75rem 1.9rem;
}
.hype__countdown--big{margin-bottom:1.4rem}
.hype__countdown--big .countdown__box{
  width:clamp(62px,17vw,76px);
  padding:1rem .3rem;
}
.hype__countdown--big .countdown__num{
  font-size:clamp(1.8rem,5.5vw,2.5rem);
}
.hype__countdown--big .countdown__label{font-size:.72rem}

/* ==========================================================================
   PHOTO-HERO — foto de Nicole + logo NF + botones (menú de jump links)
   ========================================================================== */
.photo-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;flex-direction:column;
  color:var(--white);
}
.photo-hero__bg{
  position:absolute;inset:0;
  background-image:url('../assets/nicole-hero-photo.jpg');
  background-size:cover;
  background-position:center 22%;
  will-change:transform; /* parallax: lo mueve main.js (no se usa background-attachment:fixed, falla en Safari) */
}
.photo-hero__stars{position:absolute;inset:0;pointer-events:none;z-index:1}
.photo-hero__stars .star{position:absolute;opacity:.9}
.photo-hero__stars .star svg{width:100%;height:100%}
.photo-hero__stars .s1{top:26%;left:5%;color:var(--yellow);width:34px;height:34px}
.photo-hero__stars .s2{top:16%;right:8%;color:var(--cyan);width:26px;height:26px}
.photo-hero__stars .s3{bottom:14%;left:10%;color:var(--magenta);width:30px;height:30px}
.photo-hero__stars .s4{bottom:22%;right:12%;color:var(--green);width:40px;height:40px}
.photo-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.16) 30%, rgba(255,255,255,.16) 60%, rgba(10,10,10,.4) 100%);
}
.photo-hero__top{
  position:relative;z-index:2;
  padding:1.5rem clamp(1.25rem,4vw,3rem) 0;
}
.nf-badge{
  display:block;
  height:clamp(2.25rem,6.1vw,3.25rem);
  width:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.65));
}

/* ---------- countdowns superpuestos en la foto (álbum arriba / show abajo), centrados, colores del brandbook ---------- */
.photo-hero__top{position:relative}
.photo-hero__top .hero-countdown{position:absolute;top:clamp(1.6rem,5vw,2.6rem);left:50%;transform:translateX(-50%)}
.hero-countdown{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.hero-countdown__tag{
  font-family:var(--font-tag);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--white);
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hero-countdown__row{display:flex;gap:.5rem}
.hero-countdown__box{
  display:flex;flex-direction:column;align-items:center;
  min-width:3.6rem;
  padding:.65rem .55rem;
  background:rgba(235,236,240,.75);
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(10,10,10,.25);
}
.hero-countdown__num{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.75rem;
  color:var(--white);
  text-shadow:0 1px 3px rgba(10,10,10,.35);
  line-height:1;
}
.hero-countdown__label{
  font-family:var(--font-tag);
  font-size:.62rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 1px 3px rgba(10,10,10,.35);
  margin-top:.2rem;
}
.hero-countdown__tag{font-size:.85rem}
@media (max-width:700px){
  .hero-countdown{gap:.25rem}
  .hero-countdown__row{gap:.3rem}
  .hero-countdown__box{min-width:2.5rem;padding:.4rem .35rem;border-radius:8px}
  .hero-countdown__num{font-size:1.15rem}
  .hero-countdown__label{font-size:.42rem;margin-top:.1rem}
  .hero-countdown__tag{font-size:.6rem}
  /* abajo el espacio es angosto (stickers cerca del borde) */
  .photo-hero__bottom{gap:.35rem;padding-bottom:.5rem}
  .photo-hero__scroll{display:none}
}

.photo-hero__center{
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  padding:0 1.5rem;
}
/* h1 de la página (SEO): solo envuelve el logo, sin estilos propios */
.photo-hero__title{margin:0;font-size:inherit;line-height:0}
.photo-hero__wordmark{
  width:clamp(280px,58vw,640px);
  height:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 8px 30px rgba(0,0,0,.5));
}

.photo-hero__menu{
  position:relative;z-index:3;
  flex:1;
}
.sticker-btn{
  display:inline-flex;
  align-items:center;
  padding:.5rem;
  margin:-.5rem;
  filter:drop-shadow(3px 4px 0 rgba(10,10,10,.35));
  transition:transform .2s ease, filter .2s ease;
}
.sticker-btn img{
  height:clamp(2.3rem,5.5vw,3.1rem);
  width:auto;
  display:block;
}
.sticker-btn:hover{
  transform:rotate(-2deg) scale(1.06);
  filter:drop-shadow(4px 6px 0 rgba(10,10,10,.4));
}
/* stickers alrededor de la foto (desktop) */
@media (min-width:701px){
  .photo-hero__center{position:absolute;inset:0}
  .photo-hero__menu{position:absolute;inset:0;padding:0}
  .sticker-btn--1{position:absolute;top:27%;left:23%}
  .sticker-btn--2{position:absolute;top:27%;right:23%}
  .sticker-btn--3{position:absolute;bottom:31%;left:22%}
  .sticker-btn--4{position:absolute;bottom:31%;right:22%}
  .sticker-btn--5{position:absolute;bottom:21%;left:50%;transform:translateX(-50%)}
  .sticker-btn--5:hover{transform:translateX(-50%) rotate(-2deg) scale(1.06)}
  /* los stickers ovalados (about me / show tickets) pesan visualmente menos que los rectangulares: se agrandan para igualar */
  .sticker-btn--1 img,.sticker-btn--5 img{height:clamp(2.9rem,7vw,4rem)}
  .sticker-btn--3 img{height:clamp(1.86rem,4.46vw,2.51rem)}
}
/* mobile: logo + stickers apilados en orden, pegados abajo, sin superponerse */
@media (max-width:700px){
  .photo-hero__center{position:absolute;inset:0;padding:0 1.5rem}
  .photo-hero__wordmark{width:clamp(200px,58vw,300px)}
  .photo-hero__menu{position:absolute;inset:0;padding:0}
  .sticker-btn{margin:0;padding:0;width:36vw;max-width:148px;min-width:0}
  .sticker-btn img{height:auto;width:100%;min-width:0}
  .sticker-btn--1{position:absolute;top:29%;left:5%;width:42vw;max-width:170px}
  .sticker-btn--2{position:absolute;top:29%;right:5%}
  .sticker-btn--3{position:absolute;bottom:33%;left:5%;width:29.2vw;max-width:120px}
  .sticker-btn--4{position:absolute;bottom:33%;right:5%}
  .sticker-btn--5{position:absolute;bottom:20%;left:50%;right:auto;width:42vw;max-width:170px;transform:translateX(-50%)}
}

.photo-hero__bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  padding:0 1.25rem 1.5rem;
  text-align:center;
}
.photo-hero__scroll{color:var(--white);font-size:1.3rem;animation:bounce 2s ease-in-out infinite}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.nav.is-visible{opacity:1;pointer-events:auto}
.nav__logo-img{
  height:clamp(20px,3.2vw,28px);
  width:auto;
  display:block;
}
.nav__links{display:flex;align-items:center;gap:1.6rem}
.nav__links a{
  color:var(--white);
  font-family:var(--font-tag);
  font-style:italic;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  opacity:.9;
  transition:opacity .2s;
}
.nav__links a:hover{opacity:1;color:var(--cyan)}
.nav__links .btn--nav{color:var(--blue)}
.nav__toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;border:none;cursor:pointer;padding:.4rem;
}
.nav__toggle span{width:24px;height:2px;background:var(--white);transition:.25s}

@media (max-width:860px){
  .nav{justify-content:center}
  .nav__toggle{position:absolute;right:clamp(1.25rem,4vw,3rem);top:50%;transform:translateY(-50%)}
  .nav__links{
    position:fixed;inset:0 0 0 auto;
    width:min(78vw,320px);height:100vh;
    background:var(--ink);
    flex-direction:column;
    justify-content:center;
    gap:2rem;
    transform:translateX(100%);
    transition:transform .35s ease;
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{font-size:1.1rem}
  .nav__toggle{display:flex}
  .nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.is-open span:nth-child(2){opacity:0}
  .nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- nav: variante blanca (menú fijo blanco) ---------- */
.nav--light{background:rgba(255,255,255,.85)}
.nav--light.is-visible{box-shadow:0 4px 20px rgba(10,10,10,.08)}
.nav--light .nav__logo-img{filter:drop-shadow(0 2px 6px rgba(10,10,10,.25))}
.nav--light .nav__links a{color:var(--gray-text)}
.nav--light .nav__links a:hover{color:var(--magenta)}
.nav--light .nav__toggle span{background:var(--gray-text)}
.btn--nav:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--cyan)}
@media (max-width:860px){
  .nav--light .nav__links{background:var(--white)}
  .nav--light .nav__links a{color:var(--gray-text)}
}

/* ---------- social rail ---------- */
.social-rail{
  position:fixed;right:clamp(.75rem,2vw,2rem);top:50%;
  transform:translateY(-50%);
  z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.social-rail a{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);
  background:rgba(10,10,10,.28);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border-radius:50%;
  border:2px solid var(--white);
  transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.social-rail a svg{width:20px;height:20px}
.social-rail a:hover{transform:scale(1.1)}
.social-rail a[aria-label="Instagram"]:hover{background:var(--magenta);border-color:var(--magenta)}
.social-rail a[aria-label="TikTok"]:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.social-rail a[aria-label="YouTube"]:hover{background:var(--orange);border-color:var(--orange)}
.social-rail a[aria-label="Spotify"]:hover{background:var(--green);border-color:var(--green);color:var(--ink)}
.social-rail__line{width:2px;height:60px;background:rgba(255,255,255,.5)}
@media (max-width:640px){.social-rail{display:none}}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--ink);
  color:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:7rem 1.25rem 4rem;
  overflow:hidden;
}
.hero__stars{position:absolute;inset:0;pointer-events:none}
.hero__stars .star{position:absolute;opacity:.85}
.hero__stars .star svg{width:100%;height:100%}
.star{width:46px;height:46px}
.hero__stars .s1{top:12%;left:8%;color:var(--cyan);width:38px;height:38px}
.hero__stars .s2{top:22%;right:10%;color:var(--magenta);width:60px;height:60px}
.hero__stars .s3{bottom:18%;left:14%;color:var(--yellow);width:30px;height:30px}
.hero__stars .s4{bottom:10%;right:16%;color:var(--green);width:50px;height:50px}
@keyframes spin{to{transform:rotate(360deg)}}

.hero__eyebrow{
  font-family:var(--font-tag);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--silver);
  font-size:.85rem;
  margin:0 0 1rem;
}


.cover-art{
  position:relative;
  width:clamp(160px,26vw,240px);
  margin:0 auto 2rem;
}
.cover-art img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:16px;
  animation:coverGlow 5s ease-in-out infinite;
}
@keyframes coverGlow{
  0%,100%{box-shadow:0 0 30px 2px rgba(0,207,255,.35)}
  50%{box-shadow:0 0 46px 8px rgba(0,207,255,.55)}
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-tag);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.75rem;
  padding:.4em 1em;
  border-radius:999px;
  background:var(--blue);
  color:var(--white);
  margin-bottom:.9rem;
}
.pill__star{width:10px;height:10px;color:var(--cyan)}
.pill--live{position:relative}
.pill--live::before{
  content:'';
  display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:#ff3b30;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.countdown{display:flex;gap:clamp(.6rem,2vw,1.2rem);margin-bottom:2.4rem}
.countdown__box{
  display:flex;flex-direction:column;align-items:center;
  width:clamp(58px,12vw,84px);
  padding:.8rem .3rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
}
.countdown__num{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,4vw,2.1rem);
  color:var(--yellow);
  line-height:1;
}
.countdown__label{
  font-family:var(--font-tag);
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--silver-dark);
  margin-top:.35rem;
}

.hero__scroll{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
  color:var(--silver-dark);
  font-size:1.3rem;
  animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- hero: variante blanco sobre blanco (brandbook) ---------- */
.hero--light{background:var(--bg-concierto);color:var(--gray-text);min-height:auto;padding-top:6rem;padding-bottom:3rem}
.hero--light .hero__stars .star{color:var(--ink);opacity:.12}
.hero--light .hero__eyebrow{color:var(--orange)}
.hero--light .cover-art{width:clamp(200px,38vw,320px)}
.hero--light .cover-art img{aspect-ratio:4/5;box-shadow:0 20px 50px rgba(10,10,10,.18)}

/* ---------- en vivo: dos columnas — imágenes / información ---------- */
.concierto__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(1.5rem,4vw,3rem);
  max-width:var(--max);
  width:100%;
  margin:0 auto 2rem;
}
.concierto__media{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(.5rem,1.5vw,1rem);
}
.concierto__info{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.envivo-carousel{
  display:flex;
  gap:.7rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  width:clamp(220px,28vw,400px);
  padding-bottom:.4rem;
  scrollbar-width:none;
}
.envivo-carousel::-webkit-scrollbar{display:none}
.envivo-carousel img{
  flex:0 0 auto;
  width:150px;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:14px;
  scroll-snap-align:start;
  box-shadow:0 10px 24px rgba(10,10,10,.18);
}
.hero--light .cover-art--banner{width:min(46vw,520px);margin:0}
.hero--light .cover-art--banner img{
  aspect-ratio:1800/1159;
  object-fit:contain;
  animation:none;
  box-shadow:none;
  border-radius:0;
}
@media (max-width:860px){
  .concierto__grid{grid-template-columns:1fr;gap:2rem}
  .envivo-carousel{width:clamp(220px,80vw,420px)}
  .hero--light .cover-art--banner{width:min(78vw,420px)}
}
@media (max-width:700px){
  .envivo-carousel{width:clamp(220px,88vw,420px)}
  .hero--light .cover-art--banner{width:min(92vw,440px)}
}
.hero--light .countdown__box{
  background:rgba(10,10,10,.04);
  border-color:rgba(10,10,10,.14);
}
.hero--light .countdown__num{color:var(--silver-dark)}
.hero--light .countdown__label{color:var(--silver-dark)}
.hero--light .flyer-card--light{
  background:rgba(10,10,10,.03);
  border-color:rgba(10,10,10,.14);
  backdrop-filter:none;
}
.hero--light .flyer-card__row{border-bottom-color:rgba(10,10,10,.14)}
.hero--light .flyer-card__value{color:var(--silver-dark)}
.hero--light .flyer-card__note{color:var(--silver-dark)}

/* ---------- botón comprar entradas (naranja/celeste, colores del banner del show) ---------- */
.btn--tickets{
  background:var(--orange);
  color:var(--white);
  border-color:var(--blue);
  box-shadow:4px 4px 0 var(--blue);
}
.btn--tickets:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--blue)}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green),var(--yellow),var(--orange),var(--magenta),var(--blue));
  overflow:hidden;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex;
  align-items:center;
  gap:1.4rem;
  padding:.85rem 0;
  animation:marquee 22s linear infinite;
}
.marquee__track span{
  font-family:var(--font-tag);
  letter-spacing:.08em;
  font-size:1.05rem;
  color:var(--white);
  text-transform:uppercase;
}
.marquee__track .dot{display:inline-flex;color:var(--white);width:1.6rem;height:1.6rem}
.marquee__track .dot svg{width:100%;height:100%;display:block}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ==========================================================================
   NFTV — pantalla encendida
   ========================================================================== */
.tv-block{
  background:var(--ink);
  padding:clamp(3rem,7vw,5rem) 1.25rem;
  display:flex;
  justify-content:center;
}
.tv-block__frame{
  position:relative;
  width:100%;
  max-width:820px;
  border-radius:22px;
  overflow:hidden;
  animation:tvGlow 5s ease-in-out infinite;
}
@keyframes tvGlow{
  0%,100%{box-shadow:0 0 50px 6px rgba(0,0,245,.35), 0 0 110px 20px rgba(0,207,255,.15)}
  50%{box-shadow:0 0 70px 10px rgba(0,0,245,.5), 0 0 150px 30px rgba(0,207,255,.25)}
}
.tv-block__img{
  display:block;
  width:100%;
  height:auto;
  animation:tvFlicker 6s infinite;
}
@keyframes tvFlicker{
  0%,19%,21%,23%,54%,56%,92%,100%{filter:brightness(1) saturate(1)}
  20%,22%,55%,93%{filter:brightness(1.12) saturate(1.2)}
}
.tv-block__scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.09) 0px, rgba(255,255,255,.09) 1px,
    transparent 2px, transparent 4px
  );
  background-size:100% 8px;
  animation:tvScan 7s linear infinite;
  mix-blend-mode:overlay;
  pointer-events:none;
}
@keyframes tvScan{
  0%{background-position-y:0}
  100%{background-position-y:400px}
}
.tv-block__vignette{
  position:absolute;inset:0;
  box-shadow:inset 0 0 90px 20px rgba(0,0,0,.55);
  pointer-events:none;
}
.tv-block__caption{
  position:absolute;
  left:50%;top:56%;
  transform:translate(-50%,-50%);
  width:78%;
  margin:0;
  text-align:center;
  font-family:var(--font-tag);
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:clamp(.85rem,2.6vw,1.3rem);
  color:var(--white);
  text-shadow:0 0 12px rgba(0,207,255,.85), 0 0 26px rgba(0,207,255,.5);
  transition:opacity .5s ease;
}
.tv-block__caption.is-switching{opacity:0}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{
  background:var(--white);
  color:var(--gray-text);
  padding:0 1.25rem;
}
.about__inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:860px){.about__inner{grid-template-columns:1fr}}

.about__photo{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:var(--white);
}

.about__content{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.about__sticker-card{
  display:inline-block;
  margin:0 0 1.2rem;
  transform:rotate(1deg);
}
.about__title-sticker{
  width:clamp(220px,26vw,320px);
  height:auto;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(10,10,10,.1));
}

.about__lead{font-size:1.1rem;line-height:1.6;max-width:46ch;margin:0 auto;color:var(--silver-dark)}

.tag-cloud{display:flex;flex-wrap:wrap;gap:.7rem}
.sticker{
  font-family:var(--font-tag);
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:.95rem;
  padding:.5em 1.1em;
  border-radius:999px;
  border:2px solid var(--ink);
  transform:rotate(var(--r,-2deg));
  transition:transform .2s;
}
.sticker:hover{transform:rotate(0deg) scale(1.05)}
.sticker--1{--r:-3deg;background:var(--orange);color:var(--white)}
.sticker--2{--r:2deg;background:var(--blue);color:var(--yellow)}
.sticker--3{--r:-1deg;background:var(--silver);color:var(--ink)}
.sticker--4{--r:3deg;background:var(--ink);color:var(--orange)}
.sticker--5{--r:-2deg;background:var(--green);color:var(--magenta)}
.sticker--6{--r:1deg;background:var(--magenta);color:var(--yellow)}

/* ==========================================================================
   HITOS (timeline horizontal)
   ========================================================================== */
.hitos{
  background:var(--blue);
  padding:3rem 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.hitos::-webkit-scrollbar{display:none}
.hitos__track{
  display:flex;
  gap:1.2rem;
  padding:0 1.25rem;
  width:max-content;
}
.hito{
  width:220px;
  flex:0 0 auto;
}
.hito__art{
  aspect-ratio:1/1;
  border-radius:14px;
  margin-bottom:.9rem;
  overflow:hidden;
}
.hito__art img{width:100%;height:100%;object-fit:cover}
.hito__art--face-top{object-position:center 12%}
.hito__art--left{object-position:15% center}
.hito h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1rem;
  color:var(--green);
  margin:0 0 .3rem;
}
.hito p{margin:0;color:var(--green);opacity:.75;font-size:.82rem;line-height:1.4}

/* ==========================================================================
   FLYER CARD (fecha / venue / ciudad del show, dentro del hero)
   ========================================================================== */
.flyer-card{
  position:relative;
  max-width:640px;
  width:100%;
  margin:0 auto 2rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.5rem);
  backdrop-filter:blur(6px);
}
.flyer-card__row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
  margin-bottom:1.8rem;
  padding-bottom:1.8rem;
  border-bottom:1px solid rgba(255,255,255,.2);
}
@media (max-width:560px){.flyer-card__row{grid-template-columns:1fr}}
.flyer-card__field{display:flex;flex-direction:column;gap:.3rem}
.flyer-card__label{
  font-family:var(--font-tag);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.7rem;
  color:var(--orange);
}
.flyer-card__value{font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;color:var(--white)}
.flyer-card__note{margin:1rem 0 0;font-size:.85rem;color:var(--silver)}

/* ==========================================================================
   MUSIC
   ========================================================================== */
.music{
  background:var(--white);
  text-align:center;
}
.music__sticker{width:clamp(220px,26vw,320px);height:auto;margin:0 auto 1.5rem;display:block;filter:drop-shadow(0 8px 16px rgba(10,10,10,.18))}
.music__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.25rem 2rem;
}

/* ---------- Daños Colaterales — OUT NOW (full-bleed, como en la referencia) ---------- */
.single-feature{
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  margin-bottom:4rem;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 60%, #000 100%);
}
.single-feature__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.single-feature__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(160deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.8) 100%);
  z-index:1;
}
.single-feature__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:640px;
  padding:clamp(2.5rem,6vw,4rem) 1.5rem;
  text-align:center;
  color:var(--white);
}
.single-feature__logo{
  width:clamp(260px,42vw,520px);
  height:auto;
  margin:0 auto .6rem;
  filter:drop-shadow(0 0 30px rgba(255,60,60,.45));
}
.single-feature__sub{
  font-family:var(--font-tag);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 1.6rem;
}
.single-feature .btn{max-width:360px;margin:0 auto}
.single-feature .btn--primary{background:var(--blue);border-color:var(--blue);box-shadow:4px 4px 0 #fc0101}
.single-feature .btn--primary:hover{box-shadow:6px 6px 0 #fc0101}
.single-feature__platforms{
  display:flex;gap:1.1rem;justify-content:center;margin-top:1.6rem;
}
.single-feature__platforms a{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  color:var(--white);
  transition:background .2s, border-color .2s, transform .2s;
}
.single-feature__platforms a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}
.single-feature__platforms svg{width:26px;height:26px}

/* ---------- próximo lanzamiento ---------- */
.music__lead{
  font-family:var(--font-tag);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--silver-dark);
  margin:0 0 3rem;
}
/* ---------- discografía: álbumes / singles / colaboraciones ---------- */
.disco-block{margin:0 0 3.5rem;text-align:center}
.disco-block__eyebrow{margin-bottom:.3rem;color:var(--green)}
.disco-block__title{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.2rem;
  color:var(--blue);
  margin:1.8rem 0 1rem;
  text-align:left;
}
.disco-grid{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  scrollbar-width:none;
  justify-content:flex-start;
}
.disco-grid::-webkit-scrollbar{display:none}
.disco-grid--albums{flex-wrap:wrap;overflow:visible}
.disco-card{
  flex:0 0 auto;
  width:135px;
  text-align:left;
  scroll-snap-align:start;
}
.disco-grid--albums .disco-card{width:170px}
/* en móvil los álbumes también son carrusel (como singles y collabs) */
@media (max-width:700px){
  .disco-grid--albums{flex-wrap:nowrap;overflow-x:auto}
  .disco-grid--albums .disco-card{width:150px}
}
.disco-card__art{
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:rgba(10,10,10,.03);
  box-shadow:0 8px 20px rgba(10,10,10,.12);
}
.disco-card__art img{width:100%;height:100%;object-fit:cover}
.disco-card h4{
  font-family:var(--font-display);
  font-weight:900;
  font-size:.82rem;
  line-height:1.25;
  color:var(--blue);
  margin:.6rem 0 .15rem;
}
.disco-card p{margin:0;font-size:.75rem;font-weight:700;color:#1f9e3d}

.music__grid{
  display:flex;
  gap:1.4rem;
  text-align:left;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.music__grid::-webkit-scrollbar{display:none}
.music__grid .track-card{
  flex:0 0 auto;
  width:min(78vw,320px);
  scroll-snap-align:start;
}

.track-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  padding:1.1rem;
  background:rgba(10,10,10,.03);
  transition:transform .2s ease, box-shadow .2s ease;
}
.track-card::before{
  content:'';
  position:absolute;
  top:-18%;right:-12%;
  width:65%;
  aspect-ratio:100/58.07;
  background:var(--ink);
  opacity:.05;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 58.07'%3E%3Cpath d='M100 23.22 L74.03 21.92 L77.62 0 L46.72 21.96 L19.64 22.01 L32.67 31.36 L0 57.7 L51.98 40.3 L72.08 58.07 L73.89 33.6 Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 58.07'%3E%3Cpath d='M100 23.22 L74.03 21.92 L77.62 0 L46.72 21.96 L19.64 22.01 L32.67 31.36 L0 57.7 L51.98 40.3 L72.08 58.07 L73.89 33.6 Z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  pointer-events:none;
}
.track-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(10,10,10,.16)}
.track-card__art{
  position:relative;
  aspect-ratio:16/9;
  border-radius:12px;
  margin-bottom:1rem;
  overflow:hidden;
  background-image:var(--art, none);
  background-size:cover;
  background-position:center;
  background-color:var(--blue);
}
/* estas dos miniaturas de YouTube traen más letterboxing: zoom extra para tapar el borde negro */
.track-card__art--3,
.track-card__art--4{background-size:145%}
/* fotos originales, sin efecto de color (pedido explícito) */
.track-card__star{width:34%;height:34%;color:rgba(255,255,255,.85)}
.track-card h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.1rem;
  color:var(--blue);
  margin:0 0 .2rem;
}
.track-card p{margin:0;color:#1f9e3d;font-weight:700;font-size:.85rem}

.track-card--cta{
  background:var(--blue);
  color:var(--white);
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  min-height:100%;
}
.track-card--cta:hover{box-shadow:6px 6px 0 var(--green)}
.track-card__cta-inner{text-align:center}
.track-card__cta-inner span{
  display:block;
  font-family:var(--font-tag);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.8rem;
  color:var(--cyan);
  margin-bottom:.4rem;
}
.track-card__cta-inner strong{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--green);
}

/* ---------- Spotify embed ---------- */
.spotify-embed{margin:3rem 0 0}
.spotify-embed iframe{display:block}

/* ---------- Las Favs de Nicki (galería) ---------- */
.favs-gallery__title{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,3rem);
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink);
  margin:1rem 0 1.5rem;
}
.favs-gallery{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  scrollbar-width:none;
}
.favs-gallery::-webkit-scrollbar{display:none}
.favs-gallery__item{
  flex:0 0 auto;
  width:220px;
  aspect-ratio:16/10;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  scroll-snap-align:start;
  border:2px solid var(--ink);
  transition:transform .2s;
}
.favs-gallery__item:hover{transform:translateY(-4px)}

/* ==========================================================================
   MERCH
   ========================================================================== */
.merch{
  position:relative;
  background:var(--ink);
  color:var(--white);
  text-align:center;
  padding:6rem 1.25rem;
  overflow:hidden;
}
.merch__stars{position:absolute;inset:0;pointer-events:none}
.merch__stars .star{position:absolute;color:rgba(255,255,255,.08)}
.merch__stars .s1{top:14%;left:10%;width:90px;height:90px}
.merch__stars .s2{bottom:12%;right:12%;width:130px;height:130px}
.merch__sticker{width:clamp(220px,26vw,320px);height:auto;margin:0 auto 2.5rem;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.merch .tv-block{padding:0;margin:0 auto 2.5rem;max-width:640px}

/* ==========================================================================
   FAVS / NEWSLETTER
   ========================================================================== */
.favs{
  position:relative;
  background:var(--magenta);
  color:var(--white);
  padding:6rem 1.25rem;
  text-align:center;
  overflow:hidden;
}
.favs__stars{position:absolute;inset:0;pointer-events:none}
.favs__stars .star{position:absolute;color:var(--yellow);opacity:.55}
.favs__stars .s1{top:8%;left:4%;width:90px;height:90px}
.favs__stars .s2{bottom:6%;right:6%;width:130px;height:130px}
.favs__stars .s3{top:42%;right:20%;width:46px;height:46px;opacity:.35}

.eyebrow--dark{color:var(--white)}
.favs .section-title{color:var(--yellow)}
.favs__title{display:flex;align-items:center;justify-content:center;gap:.3em}
.favs__title .icon-star{width:.8em;height:.8em;margin:0}
.favs__tagline{margin:0 0 1rem;font-size:1.1rem;color:var(--white)}

.favs__pillars{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  max-width:720px;
  margin:2rem auto 2.5rem;
  text-align:left;
}
@media (max-width:640px){.favs__pillars{grid-template-columns:1fr}}
.favs__pillar{
  position:relative;
  overflow:hidden;
  padding:1.4rem;
}
.favs__pillar::before{
  content:'';
  position:absolute;
  top:-25%;right:-20%;
  width:75%;
  aspect-ratio:100/58.07;
  background:var(--yellow);
  opacity:.4;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 58.07'%3E%3Cpath d='M100 23.22 L74.03 21.92 L77.62 0 L46.72 21.96 L19.64 22.01 L32.67 31.36 L0 57.7 L51.98 40.3 L72.08 58.07 L73.89 33.6 Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 58.07'%3E%3Cpath d='M100 23.22 L74.03 21.92 L77.62 0 L46.72 21.96 L19.64 22.01 L32.67 31.36 L0 57.7 L51.98 40.3 L72.08 58.07 L73.89 33.6 Z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  pointer-events:none;
}
.favs__pillar h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.1rem;
  color:var(--yellow);
  margin:0 0 .5rem;
}
.favs__pillar p{margin:0;font-size:.95rem;line-height:1.5}

.favs__lead{max-width:52ch;margin:0 auto 2.2rem;font-size:1.05rem;line-height:1.6}

.favs__form{
  display:flex;
  gap:.7rem;
  max-width:440px;
  margin:0 auto;
  flex-wrap:wrap;
  justify-content:center;
}
.favs__form input{
  flex:1 1 220px;
  padding:.9em 1.2em;
  border-radius:999px;
  border:2px solid var(--white);
  font-family:var(--font-body);
  font-size:1rem;
  background:var(--white);
  color:var(--magenta);
}
.favs__form input:focus{outline:3px solid var(--yellow)}
.favs .btn--primary{
  background:var(--white);
  color:var(--magenta);
  border-color:var(--white);
  box-shadow:0 8px 20px rgba(10,10,10,.18);
}
.favs .btn--primary:hover{box-shadow:0 10px 24px rgba(10,10,10,.24)}
/* loading del join + mientras responde Mailchimp */
.favs__form .btn.is-loading{position:relative;color:transparent;cursor:wait;pointer-events:none}
.favs__form .btn.is-loading::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:1.1em;height:1.1em;
  margin:-.55em 0 0 -.55em;
  border:2.5px solid var(--magenta);
  border-right-color:transparent;
  border-radius:50%;
  animation:favs-spin .7s linear infinite;
}
@keyframes favs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .favs__form .btn.is-loading::after{animation-duration:2s}
}
.favs .btn--whatsapp{border-color:transparent;box-shadow:0 8px 20px rgba(10,10,10,.18)}
.favs .btn--whatsapp:hover{box-shadow:0 10px 24px rgba(10,10,10,.24)}
.favs__success,.favs__error{
  margin-top:1.2rem;
  font-family:var(--font-tag);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ==========================================================================
   VOTACIÓN FOCUS TRACK
   ========================================================================== */
.vote{
  padding:2rem 1.25rem 4rem;
  background:var(--white);
}
.vote__card{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding:2.4rem clamp(1.25rem,4vw,3rem) 3rem;
  text-align:left;
  background:var(--white);
  border:2px solid var(--blue);
  border-radius:24px;
  box-shadow:0 20px 50px rgba(10,10,10,.1);
}
.vote__star{
  position:absolute;top:1.6rem;right:1.6rem;
  width:28px;height:28px;
  color:var(--blue);
}
.pill--vote{background:var(--green);color:var(--ink)}
.vote__title{
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  color:var(--blue);
  font-size:clamp(1.8rem,5vw,2.6rem);
  line-height:1.05;
  margin:.6rem 0 1rem;
}
.vote__lead{max-width:46ch;margin:0 0 1.8rem;line-height:1.5;color:var(--silver-dark);font-weight:700}
.vote__form{display:flex;flex-direction:column;gap:.9rem}
.vote__option{
  display:flex;align-items:center;gap:1rem;
  background:rgba(10,10,10,.03);
  border:1px solid rgba(10,10,10,.1);
  border-radius:14px;
  padding:.9rem 1.1rem;
  cursor:pointer;
}
.vote__option input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--blue)}
.vote__option-body{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.vote__option-label{
  font-family:var(--font-tag);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.65rem;
  color:var(--silver-dark);
}
.vote__option-name{
  font-family:var(--font-display);
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  font-size:1.15rem;
  color:var(--blue);
}
.vote__play{
  flex:0 0 auto;
  width:88px;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:none;border:none;padding:0;cursor:pointer;
}
.vote__play-btn{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(145deg,#f4f5f7,#c9ced4);
  box-shadow:
    0 3px 6px rgba(10,10,10,.35),
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(10,10,10,.25);
  border:1px solid rgba(10,10,10,.15);
  transition:transform .15s ease, box-shadow .15s ease;
}
.vote__play:hover .vote__play-btn{transform:scale(1.06)}
.vote__play:active .vote__play-btn{
  transform:scale(.96);
  box-shadow:
    0 1px 2px rgba(10,10,10,.3),
    inset 0 1px 2px rgba(10,10,10,.35);
}
.vote__play-icon{width:18px;height:18px;color:var(--gray-text)}
.vote__play-icon--play{margin-left:2px}
.vote__play-icon--pause{display:none}
.vote__play.is-playing .vote__play-icon--play{display:none}
.vote__play.is-playing .vote__play-icon--pause{display:block}
.vote__play-text{
  display:block;
  font-family:var(--font-tag);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.6rem;
  color:var(--silver-dark);
  white-space:nowrap;
}
.vote__play.is-playing .vote__play-text{display:none}
.vote__play-bars{
  display:none;
  align-items:flex-end;justify-content:center;
  gap:2px;
  height:14px;
}
.vote__play.is-playing .vote__play-bars{display:flex}
.vote__play-bars span{
  width:3px;
  border-radius:1px;
  animation:voteEq .8s ease-in-out infinite;
}
.vote__play-bars span:nth-child(1){background:var(--blue);animation-delay:-.7s}
.vote__play-bars span:nth-child(2){background:var(--magenta);animation-delay:-.4s}
.vote__play-bars span:nth-child(3){background:var(--green);animation-delay:-.55s}
.vote__play-bars span:nth-child(4){background:var(--orange);animation-delay:-.2s}
@keyframes voteEq{
  0%,100%{height:3px}
  50%{height:14px}
}
.vote__submit{margin-top:.6rem;background:var(--blue);border-color:var(--blue);box-shadow:4px 4px 0 var(--green)}
.vote__submit:hover{box-shadow:6px 6px 0 var(--green)}
/* estado de la votación (enviando / ya votó / mensaje) */
.vote__submit.is-loading{position:relative;color:transparent;cursor:wait;pointer-events:none}
.vote__submit.is-loading::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:1.1em;height:1.1em;
  margin:-.55em 0 0 -.55em;
  border:2.5px solid var(--green);
  border-right-color:transparent;
  border-radius:50%;
  animation:favs-spin .7s linear infinite;
}
.vote__submit:disabled{cursor:default}
.vote__form.is-voted .vote__submit{background:var(--silver);border-color:var(--silver);color:var(--ink);box-shadow:none}
.vote__form.is-voted .vote__option{cursor:default}
.vote__form.is-voted .vote__option:has(input:not(:checked)){opacity:.55}
.vote__msg{
  margin:1.2rem 0 0;
  font-family:var(--font-tag);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--blue);
}
.vote__msg--error{color:var(--magenta)}
@media (max-width:560px){
  .vote__card{padding:2rem 1.25rem 2.4rem}
  .vote__option{padding:.75rem .9rem;gap:.7rem}
  .vote__option-name{font-size:1rem}
  .vote__play-text{display:none}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  position:relative;
  background:var(--ink);
  color:var(--white);
  padding:3rem 1.25rem 2rem;
  text-align:center;
  overflow:hidden;
}
.footer__stars{position:absolute;inset:0;pointer-events:none}
.footer__stars .star{position:absolute;color:rgba(255,255,255,.15)}
.footer__stars .s1{top:12%;left:8%;width:50px;height:50px}
.footer__stars .s2{bottom:14%;right:10%;width:70px;height:70px}
.footer__top{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  align-items:center;
  justify-content:center;
  max-width:var(--max);
  margin:0 auto 1.6rem;
}
.footer__logo-img{
  height:clamp(24px,4vw,34px);
  width:auto;
  filter:drop-shadow(0 2px 6px rgba(10,10,10,.2));
}
.footer__socials{display:flex;gap:.8rem}
.footer__socials a{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  transition:background .2s;
}
.footer__socials a svg{width:14px;height:14px}
.footer__socials a:hover{background:var(--magenta)}
.footer__rule{
  font-style:italic;
  color:var(--silver-dark);
  margin:0 0 1.5rem;
}
.footer__copy{
  margin:0;
  font-size:.8rem;
  color:var(--silver-dark);
}

/* ---------- footer: variante blanca (igual que el menú de arriba) ---------- */
.footer--light{background:var(--bg-footer);color:var(--ink)}
.footer--light .footer__stars .star{color:rgba(10,10,10,.08)}
.footer--light .footer__logo-img{filter:drop-shadow(0 2px 6px rgba(10,10,10,.25))}
.footer--light .footer__socials a{border-color:rgba(10,10,10,.3);color:var(--silver-dark)}
.footer--light .footer__socials a:hover{color:var(--white)}
.footer--light .footer__socials a[aria-label="Instagram"]:hover{background:var(--magenta);border-color:var(--magenta)}
.footer--light .footer__socials a[aria-label="TikTok"]:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.footer--light .footer__socials a[aria-label="YouTube"]:hover{background:var(--orange);border-color:var(--orange)}
.footer--light .footer__socials a[aria-label="Spotify"]:hover{background:var(--green);border-color:var(--green);color:var(--ink)}
.footer--light .footer__socials a[aria-label="Apple Music"]:hover{background:var(--blue);border-color:var(--blue)}
.footer--light .footer__socials a[aria-label="Amazon Music"]:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.footer--light .footer__rule,
.footer--light .footer__copy{color:var(--silver-dark)}

/* ==========================================================================
   dark mode note: this site is intentionally high-contrast dark/white by
   brand design (hero, concert, favs sections are permanently dark/color
   regardless of OS theme — matches brandbook "cinematic pop universe")
   ========================================================================== */