:root{
  --negro:#08080A;
  --negro-2:#0E0C0E;
  --panel:#171417;
  --rojo:#E0140A;
  --rojo-claro:#FF4B3D;
  --rojo-oscuro:#5A0F0F;
  --ambar:#FFA000;
  --ambar-claro:#FFC266;
  --blanco:#F6F5F3;
  --gris:#A6A2A6;
  --linea:#3A1414;
  --display:'Poppins',sans-serif; /* titulares negros e itálicos, como "BARRA LIBRE" / "OCTUBRE" en el afiche */
  --neon:'Anton',sans-serif;
  --cursiva:'Alex Brush',cursive; /* firma fina y con swash, como "Sobredosis" en el afiche (Sacramento era más redondeada) */
  --kicker:'Poppins',sans-serif; /* kickers itálicos medios, como "LANZAMIENTO" / "INVITADO ESPECIAL" en el afiche */
  --cond:'Oswald',sans-serif; /* solo para botones y controles de UI: no aparecen en el afiche, se mantiene la condensada recta */
  --body:'Roboto',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--body);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}

/* ---------- Utilidades ---------- */
.contenedor{width:min(1320px,94%);margin:0 auto}
.eyebrow{
  font-family:var(--kicker);
  font-style:italic;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--ambar);
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--linea)}
.titulo{
  font-family:var(--display);
  font-style:italic;
  font-weight:800;
  font-size:clamp(2.3rem,5.6vw,3.9rem);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-.005em;
  margin:.6rem 0 1rem;
}
.seccion{padding:5.5rem 0}
.btn{
  display:inline-block;
  font-family:var(--cond);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:1rem 2.4rem;
  border:1px solid var(--rojo);
  color:var(--blanco);
  background:var(--rojo);
  border-radius:999px;
  transition:all .25s ease;
}
.btn:hover{background:var(--rojo-claro);border-color:var(--rojo-claro);box-shadow:0 0 28px rgba(224,20,10,.55);transform:translateY(-2px)}
.btn.fantasma{background:transparent;color:var(--blanco);border-color:var(--linea)}
.btn.fantasma:hover{border-color:var(--rojo);color:var(--rojo-claro);box-shadow:none}

/* ---------- Botón flotante de compra ---------- */
.fab-comprar{
  display:inline-block;
  position:fixed;
  left:50%;bottom:18px;transform:translateX(-50%);
  z-index:300;
  font-family:var(--cond);font-weight:700;font-size:1rem;
  letter-spacing:.15em;text-transform:uppercase;
  background:var(--rojo);color:var(--blanco);
  padding:.95rem 2.2rem;
  border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.6), 0 0 30px rgba(224,20,10,.45);
  white-space:nowrap;
  animation:pulso 2.4s ease-in-out infinite;
  transition:opacity .3s ease,transform .3s ease,background .25s ease;
}
.fab-comprar:hover{background:var(--rojo-claro);transform:translateX(-50%) translateY(-2px)}
.fab-comprar:active{transform:translateX(-50%) scale(.97)}
@keyframes pulso{
  0%,100%{box-shadow:0 6px 24px rgba(0,0,0,.6), 0 0 20px rgba(224,20,10,.4)}
  50%{box-shadow:0 6px 24px rgba(0,0,0,.6), 0 0 42px rgba(224,20,10,.65)}
}
@media (prefers-reduced-motion:reduce){.fab-comprar{animation:none;transition:none}}
body{padding-bottom:90px}

/* Oculto mientras el CTA propio del hero está a la vista, para no duplicarse
   ni taparlo (ver IntersectionObserver en js/main.js; sin JS queda visible). */
.fab-comprar.fab-oculto{opacity:0;pointer-events:none}

/* En mobile deja de ser una píldora flotante (tapa títulos/tarjetas al hacer
   scroll) y pasa a ser una barra angosta fija al borde, como un dock de compra. */
@media (max-width:640px){
  .fab-comprar{
    left:0;right:0;bottom:0;transform:none;
    width:100%;border-radius:0;
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.9rem 1rem calc(.9rem + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -6px 24px rgba(0,0,0,.55);
    animation:none;
  }
  .fab-comprar:hover{transform:none}
  .fab-comprar:active{transform:scale(.98)}
  .fab-comprar.fab-oculto{transform:translateY(100%)}
  body{padding-bottom:60px}
}

/* ---------- Tiras de película (decorativas, solo pantallas grandes) ---------- */
.pelicula{
  position:fixed;top:0;height:100vh;width:24px;z-index:5;pointer-events:none;
  background:
    repeating-linear-gradient(180deg, transparent 0 24px, rgba(255,150,60,.14) 24px 26px, transparent 26px 50px),
    #000;
  border-left:1px solid var(--linea);border-right:1px solid var(--linea);
  display:none;
}
.pelicula.izq{left:0}
.pelicula.der{right:0}
.pelicula span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  writing-mode:vertical-rl;
  font-family:var(--cond);letter-spacing:.4em;font-size:.6rem;font-weight:600;
  color:var(--ambar);text-transform:uppercase;white-space:nowrap;opacity:.75;
}
@media (min-width:1360px){.pelicula{display:block}}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
  padding:7rem 0 3.5rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(224,20,10,.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(224,20,10,.1), transparent 65%),
    var(--negro);
  overflow:hidden;
  text-align:center;
}
@media (max-width:768px){
  .hero{min-height:auto;padding:5.5rem 0 2.5rem}
}
.badge-25{
  position:absolute;top:1.6rem;right:1.6rem;
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--cond);font-weight:700;font-size:2rem;letter-spacing:.06em;
  border:3px solid var(--ambar);color:var(--blanco);
  padding:.7rem 1.4rem;border-radius:10px;background:rgba(23,20,23,.85);
  box-shadow:0 0 30px rgba(255,160,0,.4);
}
.badge-25 img{height:1.9rem;width:auto;display:block}
.hero-eyebrow{
  font-family:var(--kicker);font-style:italic;font-weight:500;font-size:.8rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gris);
}
.hero-logo{
  font-family:var(--neon);
  font-size:clamp(4rem,20vw,13rem);
  line-height:.88;
}
.hero-logo-img{position:relative;display:inline-block;max-width:100%}
.hero-logo-img img{
  display:block;height:1em;width:auto;max-width:100%;
  filter:
    drop-shadow(0 0 10px rgba(224,20,10,.85))
    drop-shadow(0 0 26px rgba(224,20,10,.55))
    drop-shadow(0 0 60px rgba(255,150,60,.35));
}
.hero-logo sup{
  position:absolute;top:.02em;right:-.5em;
  font-family:var(--cond);font-size:.28em;
  color:#150505;-webkit-text-stroke:1px var(--rojo);
  text-shadow:
    0 0 6px rgba(224,20,10,.9),
    0 0 16px rgba(224,20,10,.75),
    0 0 34px rgba(224,20,10,.55),
    0 0 70px rgba(255,150,60,.4);
}
.hero-sub-marca{
  font-family:var(--kicker);font-style:italic;font-weight:600;font-size:clamp(1.3rem,3.6vw,2.2rem);
  letter-spacing:.25em;text-transform:uppercase;color:var(--blanco);
  margin-top:.3rem;
}
.hero-promo{
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .9rem;
  margin-top:1.1rem;padding:.6rem 1.4rem;
  border:1px solid rgba(255,160,0,.55);border-radius:999px;
  background:rgba(255,160,0,.07);
  box-shadow:0 0 24px rgba(255,160,0,.14);
}
.hero-promo .promo-kicker{
  font-family:var(--kicker);font-style:italic;font-weight:600;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ambar);
}
.hero-promo .promo-linea{
  font-family:var(--display);font-style:italic;font-weight:800;
  font-size:clamp(.92rem,2.1vw,1.15rem);letter-spacing:.03em;text-transform:uppercase;
  color:var(--blanco);
}
.hero-promo .promo-linea b{
  font-family:var(--cond);font-weight:700;font-style:normal;
  letter-spacing:.14em;color:var(--ambar);
  border:1px dashed rgba(255,160,0,.7);border-radius:6px;
  padding:.05em .45em;margin-left:.15em;white-space:nowrap;
}
@media (max-width:520px){
  .hero-promo{border-radius:14px;padding:.7rem 1.1rem;gap:.35rem}
}
.hero-sub{
  margin:0 auto;max-width:54rem;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  color:var(--gris);font-weight:300;
}
.hero-sub strong{color:var(--blanco);font-weight:500}
.hero-datos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.4rem;
}
.hero-datos .dato{font-family:var(--kicker);font-style:italic;text-transform:uppercase;letter-spacing:.05em}
.hero-datos .dato small{display:block;color:var(--ambar);font-size:.65rem;letter-spacing:.18em;margin-bottom:.15rem;font-weight:500}
.hero-datos .dato b{font-size:.95rem;font-weight:700}
.hero-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}

/* ---------- Cuenta regresiva ---------- */
.countdown{
  background:linear-gradient(90deg,rgba(224,20,10,.08),rgba(90,15,15,.14));
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  padding:2rem 0;
}
.countdown-grid{display:flex;justify-content:center;gap:clamp(1.2rem,6vw,4rem);flex-wrap:wrap;text-align:center}
.cd-item .num{
  font-family:var(--display);
  font-style:italic;font-weight:800;
  font-size:clamp(2.4rem,6vw,4.3rem);
  color:var(--blanco);
  text-shadow:0 0 20px rgba(224,20,10,.45);
  line-height:1;
}
.cd-item .lbl{font-family:var(--kicker);font-style:italic;font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--ambar);margin-top:.4rem}

/* ---------- Lineup (polaroids) ---------- */
.lineup{background:var(--negro-2)}
.lineup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;margin-top:3rem;align-items:stretch}
.lineup-grid .item{display:flex;flex-direction:column}
.polaroid{
  background:#EFECE6;
  padding:18px 18px 26px;
  box-shadow:0 20px 45px rgba(0,0,0,.55);
  transform:rotate(-2.5deg);
  transition:transform .3s ease;
}
.lineup-grid .item:nth-child(2) .polaroid{transform:rotate(2deg)}
.lineup-grid .item:nth-child(3) .polaroid{transform:rotate(-1.4deg)}
.polaroid:hover{transform:rotate(0deg) translateY(-6px)}
.polaroid .foto{
  aspect-ratio:774/468;width:100%;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.polaroid .foto-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%, #2c2c30, #0a0a0c 72%);
}
.polaroid .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.polaroid .foto .icono{font-size:3.4rem;opacity:.5;filter:grayscale(1) contrast(1.2)}
.polaroid .cursiva{font-family:var(--cursiva);font-size:clamp(2.1rem,3.6vw,2.8rem);color:#161314;text-align:center;margin-top:1rem;line-height:1}
.polaroid .caption{font-family:var(--kicker);font-style:italic;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;text-align:center;color:#4a4548;margin-top:.3rem}

.artista{
  flex:1;
  margin-top:1.4rem;
  background:var(--panel);
  border:1px solid var(--linea);
  padding:1.6rem 1.5rem;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.artista:hover{border-color:var(--ambar);box-shadow:0 12px 40px rgba(255,160,0,.14)}
.artista .rol{font-family:var(--kicker);font-style:italic;font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.artista h3{font-family:var(--display);font-style:italic;font-weight:800;font-size:clamp(1.7rem,2.4vw,2.2rem);text-transform:uppercase;margin:.4rem 0 .6rem;line-height:1;letter-spacing:-.005em;color:var(--ambar)}
.artista p{color:var(--gris);font-size:.92rem;font-weight:300}
.artista .ig{
  display:inline-block;margin-top:.9rem;
  font-family:var(--cond);font-weight:500;font-size:.82rem;letter-spacing:.1em;color:var(--ambar);
  border-bottom:1px solid var(--linea);
}
.artista .ig:hover{color:var(--blanco);border-color:var(--blanco)}

/* ---------- Barra libre (cinta de papel) ---------- */
.barra-libre-wrap{padding:1.4rem 0 0;text-align:center}
.barra-libre{
  display:inline-block;max-width:100%;width:100%;
  background:
    url('../img/img_barra_libre.png') center/cover no-repeat,
    linear-gradient(155deg,#1d191b,#0b0a0b);
  border:1px solid var(--linea);
  padding:2.8rem clamp(1.6rem,6vw,4rem);
  transform:rotate(-1.2deg);
  clip-path:polygon(1.5% 10%, 6% 0, 95% 4%, 100% 12%, 98.5% 90%, 94% 100%, 5% 96%, 0 86%);
  box-shadow:0 22px 55px rgba(0,0,0,.6);
}
.barra-libre .l1{
  font-family:var(--display);font-style:italic;font-weight:800;font-size:clamp(2rem,6.6vw,4.2rem);
  text-transform:uppercase;letter-spacing:-.005em;color:var(--blanco);
}
.barra-libre .l1 b{color:var(--blanco)}
.barra-libre .l1 .flecha{color:var(--ambar)}
.barra-libre .l2{
  font-family:var(--kicker);font-style:italic;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-top:.8rem;font-size:1.1rem;
}

/* ---------- Detalles del evento ---------- */
.detalles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2.5rem}
.detalle{
  border:1px solid var(--linea);
  border-bottom:3px solid var(--linea);
  background:linear-gradient(180deg,rgba(224,20,10,.05),transparent);
  padding:1.8rem 1.5rem;text-align:center;
}
.detalle .icono{font-size:1.8rem;margin-bottom:.8rem;filter:drop-shadow(0 0 10px rgba(224,20,10,.5))}
.detalle h4{font-family:var(--kicker);font-style:italic;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:var(--ambar);margin-bottom:.4rem}
.detalle p{font-size:1.02rem;font-weight:400}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Aparición al hacer scroll (ver IntersectionObserver en js/main.js) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.reveal-visible{opacity:1;transform:none}
.lineup-grid .item.reveal:nth-child(2){transition-delay:.1s}
.lineup-grid .item.reveal:nth-child(3){transition-delay:.2s}
.detalles-grid .detalle.reveal:nth-child(2){transition-delay:.08s}
.detalles-grid .detalle.reveal:nth-child(3){transition-delay:.16s}
.detalles-grid .detalle.reveal:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Entradas ---------- */
/* ---------- Lugar ---------- */
.lugar-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.5rem;align-items:stretch}
.lugar-info{
  background:var(--panel);border:1px solid var(--linea);border-left:4px solid var(--ambar);
  padding:2.4rem;display:flex;flex-direction:column;justify-content:center;gap:1rem;
}
.lugar-info h3{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.1rem;text-transform:uppercase;letter-spacing:-.005em}
.lugar-info p{color:var(--gris);font-weight:300}
.lugar-info p strong{color:var(--blanco);font-weight:500}
.lugar-mapa{border:1px solid var(--linea);min-height:340px}
.lugar-mapa iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(1) invert(.9) contrast(.95)}

/* ---------- Sponsors ---------- */
.sponsors{background:var(--negro-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:3rem 0;text-align:center}
.sponsors .eyebrow{justify-content:center;margin-bottom:1.8rem}
.sponsors-categorias{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2.6rem 4rem}
.sponsors-grupo{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.sponsors-grupo-label{font-family:var(--kicker);font-style:italic;font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ambar)}
.sponsors-fila{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.2rem}
.marca{display:flex;flex-direction:column;align-items:center;gap:.15rem;opacity:.85;transition:opacity .2s}
.marca:hover{opacity:1}
.marca img{height:32px;width:auto;max-width:173px;object-fit:contain}
.marca.destacada{opacity:1}
.marca.destacada img{height:44px}
.marca-icono img{height:51px}

/* ---------- Footer ---------- */
footer{padding:2.5rem 0;background:var(--negro)}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.footer-grid p{color:var(--gris);font-size:.88rem;font-weight:300}
.btn-wsp{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--cond);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;
  background:#25D366;color:#062b16;padding:.75rem 1.5rem;border-radius:999px;
  transition:transform .2s,box-shadow .2s;
}
.btn-wsp:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(37,211,102,.4)}
.btn-wsp svg{flex-shrink:0}
.compartir{display:inline-flex;align-items:center;gap:.7rem}
.compartir-label{font-family:var(--cond);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.icono-compartir{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  transition:transform .2s,box-shadow .2s;
}
.icono-compartir svg{flex-shrink:0}
.icono-compartir.wa{background:#25D366;color:#062b16}
.icono-compartir.wa:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(37,211,102,.45)}
.icono-compartir.fb{background:#1877F2;color:#0a1f4d}
.icono-compartir.fb:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(24,119,242,.45)}
.icono-compartir.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.icono-compartir.ig:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(220,39,67,.45)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .lineup-grid,.detalles-grid{grid-template-columns:1fr}
  .lugar-grid{grid-template-columns:1fr}
}
@media (min-width:601px) and (max-width:900px){
  .detalles-grid{grid-template-columns:repeat(2,1fr)}
  .lineup-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .seccion{padding:4rem 0}
  .badge-25{position:static;display:inline-flex;margin:0 auto 1rem}
  .hero{padding-top:2.5rem;gap:1.5rem}
}
@media (max-width:520px){
  .hero-botones .btn{width:100%;text-align:center}
  .hero{gap:1.25rem}
  .hero-datos{gap:.9rem 1.6rem}
}