:root{
  --bg:#0a0a0a; --panel:#161616; --panel2:#1f1f1f; --line:#2b2b2b;
  --txt:#f5f3ef; --muted:#a5a29b;
  --rojo:#e8281e; --rojo-oscuro:#a31610; --amarillo:#ffd400;
  --ancho:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:"Barlow Condensed",system-ui,sans-serif;
  font-size:18px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
/* Textura de ruido sutil sobre el fondo */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:"Anton",sans-serif; font-weight:400; line-height:.98; text-transform:uppercase; margin:0}
em{font-style:normal; color:var(--rojo)}
.contenedor{max-width:var(--ancho); margin:0 auto; padding:0 20px}
.tabular{font-variant-numeric:tabular-nums}

/* Accesibilidad: foco visible amarillo */
:focus-visible{outline:3px solid var(--amarillo); outline-offset:2px; border-radius:4px}

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:14px 28px; border:0; border-radius:10px;
  font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:19px;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:transform .12s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-rojo{background:var(--rojo); color:#fff}
.btn-rojo:hover{background:var(--rojo-oscuro)}
.btn-amarillo{background:var(--amarillo); color:#0a0a0a}
.btn-gigante{font-size:24px; padding:20px 44px; min-height:60px}
.btn-linea{background:transparent; color:var(--txt); border:2px solid var(--line)}
.btn-linea:hover{border-color:var(--amarillo)}

/* Rayo amarillo de los títulos */
.rayo{display:inline-block; vertical-align:-4px; margin-right:6px}

/* Etiqueta / kicker */
.kicker{
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:14px; color:var(--amarillo); margin:0 0 12px;
}

/* Secciones */
section{padding:72px 0}
.titulo-seccion{font-size:clamp(34px,6vw,60px); margin-bottom:8px}
.sub-seccion{color:var(--muted); max-width:640px; margin:0 0 36px}

/* Temas de sección */
.tema-rojo{background:linear-gradient(180deg,#1a0605,#0a0a0a); }
.tema-claro{background:#f5f3ef; color:#161616}
.tema-claro .titulo-seccion, .tema-claro h3{color:#161616}
.tema-claro em{color:var(--rojo)}
.tema-claro .sub-seccion{color:#5a564f}
.tema-claro .kicker{color:var(--rojo-oscuro)}

/* ---------- NAV STICKY ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(10,10,10,.9);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:20px; height:60px}
.nav-logo{height:34px; width:auto}
.nav-links{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav-links a{
  text-decoration:none; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:15px; color:var(--muted);
}
.nav-links a:hover{color:var(--txt)}
.nav-cta{margin-left:8px}
@media(max-width:860px){ .nav-links a:not(.nav-cta){display:none} }

/* ---------- HERO ---------- */
.hero{
  position:relative; padding:96px 0 80px; text-align:center;
  background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(163,22,16,.35),rgba(10,10,10,.92)),
             url("https://static.ptocdn.net/especiales/jts127_santiago-rocks-2026/img/fondo-hero.jpg") center/cover no-repeat;
}
/* El logo carga solo el hero (sin título escrito): un poco más grande. */
.hero-logo{width:min(460px,84vw); margin:0 auto 26px; height:auto; filter:drop-shadow(0 4px 22px rgba(0,0,0,.55))}
/* h1 solo para buscadores y lectores de pantalla (no se ve). */
.oculto-visual{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* Cartel del hero con billing oficial: nivel 1 grande, nivel 2 chico,
   todo en blanco hueso con rayos amarillos separando (como el afiche). */
.hero-lineup{ max-width:1020px; margin:20px auto 0; }
.hero-lineup .hl{
  font-family:"Anton",sans-serif; text-transform:uppercase; color:#f5f3ef;
  line-height:1.35; letter-spacing:.5px; text-shadow:0 1px 8px rgba(0,0,0,.8);
  font-weight:400;
}
.hero-lineup .hl1{font-size:clamp(26px,4.6vw,46px)}
.hero-lineup .hl2{font-size:clamp(19px,3.3vw,33px)}
.hl-bolt{display:inline-block; width:.45em; height:.62em; margin:0 .3em; vertical-align:-2px}
.hero-lineup .sep{color:var(--rojo); padding:0 8px}
.hero-fecha{
  font-family:"Anton",sans-serif; font-size:clamp(40px,9vw,86px);
  margin:28px 0 6px; color:var(--amarillo); text-transform:uppercase;
}
.hero-venue{font-size:clamp(18px,3vw,26px); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--txt)}
.hero-puertas{color:var(--muted); font-size:16px; letter-spacing:.06em; text-transform:uppercase; margin-top:4px}

/* Contador regresivo */
.contador{display:flex; justify-content:center; gap:14px; margin:34px 0}
.cbox{
  background:rgba(0,0,0,.55); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; min-width:82px;
}
.cbox b{display:block; font-family:"Anton",sans-serif; font-size:clamp(30px,6vw,46px); color:var(--txt); line-height:1}
.cbox span{display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.hero-cta{margin-top:12px}

/* ---------- ENTRADAS (LA ESTRELLA) ---------- */
.entradas-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px;
}
@media(max-width:900px){ .entradas-grid{grid-template-columns:1fr; max-width:460px; margin-inline:auto} }

/* Tarjeta tipo ticket con perforación */
.ticket{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:28px 26px 26px; display:flex; flex-direction:column;
}
.ticket.destacado{border-color:var(--rojo); box-shadow:0 0 0 1px var(--rojo), 0 18px 40px rgba(232,40,30,.18)}
.ticket .badge-top{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--rojo); color:#fff; font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 14px; border-radius:20px; white-space:nowrap;
}
.ticket h3{font-size:30px; margin-bottom:4px}
.ticket .tagline{color:var(--amarillo); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:15px; margin-bottom:12px}
.ticket .desc{color:var(--muted); font-size:16px; margin-bottom:18px; flex:1}

/* Perforación de ticket */
.ticket .perfo{position:relative; height:1px; background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px); margin:6px 0 16px}
.ticket .perfo::before,.ticket .perfo::after{
  content:""; position:absolute; top:50%; width:20px; height:20px; border-radius:50%;
  background:var(--bg); transform:translateY(-50%);
}
.ticket .perfo::before{left:-36px}
.ticket .perfo::after{right:-36px}

/* Mini tabla de fases */
.fases{width:100%; border-collapse:collapse; margin-bottom:8px}
.fases th{text-align:left; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 0 8px}
.fases th.num{text-align:right}
.fases td{padding:7px 0; border-top:1px solid var(--line); font-size:15px}
.fases td.num{text-align:right; font-weight:700}
.fases tr.mejor td{color:var(--amarillo)}
.fases .etiqueta-mejor{display:inline-block; background:rgba(255,212,0,.14); color:var(--amarillo); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:6px; margin-left:8px; vertical-align:middle}
.ticket .btn{width:100%; margin-top:14px}

.entradas-urgencia{
  margin-top:26px; text-align:center; color:var(--amarillo);
  font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:16px;
}
.entradas-nota{margin-top:8px; text-align:center; color:var(--muted); font-size:14px; max-width:720px; margin-inline:auto}

/* ---------- LINE-UP ---------- */
.lineup-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:900px){ .lineup-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .lineup-grid{grid-template-columns:1fr} }
.banda{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.banda img{width:100%; height:220px; object-fit:cover}
.banda .banda-txt{padding:16px 18px 20px}
.banda h3{font-size:23px; margin-bottom:2px}
.banda .genero{color:var(--amarillo); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:13px; margin-bottom:8px}
.banda .hora{color:var(--muted); font-size:14px; margin-bottom:6px}
.banda .bio{color:var(--muted); font-size:15px}

/* ---- Artista sorpresa (banda con ocultarHasta): tarjeta misterio con
        cinta diagonal de anuncio arriba. Se revela sola llegada la fecha. */
.banda.sorpresa{position:relative}
.banda.sorpresa .sorpresa-foto{
  height:220px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#202020,#101010); border-bottom:2px solid var(--rojo);
  font-family:"Anton",sans-serif; font-size:96px; color:var(--rojo);
  text-shadow:0 0 34px rgba(232,40,30,.35);
}
.banda.sorpresa .cinta{
  position:absolute; top:26px; right:-46px; transform:rotate(35deg);
  background:var(--amarillo); color:#1a1400; padding:7px 52px;
  font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:14px;
  letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* ---------- EXPERIENCIA ---------- */
.exp-fila{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; margin-bottom:40px}
.exp-fila:nth-child(even) .exp-img{order:2}
.exp-fila img{width:100%; height:300px; object-fit:cover; border-radius:14px}
.exp-fila h3{font-size:clamp(26px,4vw,38px); margin-bottom:10px}
.exp-fila p{font-size:18px; color:#5a564f}
@media(max-width:760px){ .exp-fila{grid-template-columns:1fr; gap:16px; margin-bottom:32px} .exp-fila:nth-child(even) .exp-img{order:0} .exp-fila img{height:220px} }

/* ---------- MAPA ---------- */
.mapa-wrap{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px}
/* El mapa es PNG transparente: sobre fondo negro (pedido Jorge 14-07). */
.mapa-wrap img{width:100%; height:auto; border-radius:10px; background:#0a0a0a}

/* ---------- EDICIONES ANTERIORES (aftermovies YouTube) ---------- */
.ediciones-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media(max-width:760px){ .ediciones-grid{grid-template-columns:1fr} }
.edicion{position:relative}
.edicion .anio{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--amarillo); color:#1a1400; font-family:"Anton",sans-serif;
  font-size:20px; letter-spacing:1px; padding:4px 14px; border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.edicion .ed-video{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#000;
}
.edicion .ed-video img{width:100%; height:100%; object-fit:cover; display:block}
.edicion .ed-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.play-btn{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.35); border:0; cursor:pointer; width:100%;
}
.play-btn .circulo{
  width:84px; height:84px; border-radius:50%; background:var(--rojo);
  display:flex; align-items:center; justify-content:center;
}
.play-btn svg{width:34px; height:34px; fill:#fff; margin-left:5px}

/* ---------- INFO + FAQ ---------- */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px}
@media(max-width:760px){ .info-grid{grid-template-columns:1fr; gap:28px} }
.info-item{margin-bottom:20px}
.info-item h3{font-size:22px; margin-bottom:6px; color:#161616}
.info-item p{color:#5a564f; margin:0}
.acordeon{border-top:1px solid #ddd9d1}
.acordeon details{border-bottom:1px solid #ddd9d1}
.acordeon summary{
  list-style:none; cursor:pointer; padding:16px 0; font-weight:700;
  font-size:19px; display:flex; justify-content:space-between; align-items:center; color:#161616;
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+"; font-family:"Anton",sans-serif; color:var(--rojo); font-size:26px; line-height:1}
.acordeon details[open] summary::after{content:"–"}
.acordeon .respuesta{padding:0 0 18px; color:#5a564f}

/* ---------- CTA FINAL ---------- */
.cta-final{text-align:center; background:linear-gradient(180deg,#1a0605,#0a0a0a); padding:80px 0}
.cta-final h2{font-size:clamp(34px,7vw,68px); margin-bottom:14px}
.cta-final p{color:var(--muted); margin:0 0 28px; font-size:19px}

/* ---------- FOOTER ---------- */
.footer{background:#0a0a0a; border-top:1px solid var(--line); padding:56px 0 40px}
.footer-grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start}
.redes{display:flex; gap:14px; flex-wrap:wrap}
.red{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:14px;
  border:1px solid var(--line); padding:10px 14px; border-radius:10px; min-height:44px;
}
.red:hover{color:var(--txt); border-color:var(--amarillo)}
.red svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2}
/* Tarjeta Spotify */
.spotify-card{
  display:inline-flex; align-items:center; gap:14px; text-decoration:none;
  background:#1DB954; color:#0a0a0a; padding:12px 20px; border-radius:12px; min-height:44px;
}
.spotify-card .pl-icon svg{width:34px; height:34px}
.spotify-card .pl-titulo{display:block; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.spotify-card .pl-sub{display:block; font-size:13px; opacity:.8}
.footer-legal{color:var(--muted); font-size:14px; margin-top:36px; text-align:center}

/* ---------- BARRA STICKY INFERIOR (móvil) ---------- */
.sticky-buy{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(10,10,10,.95); border-top:1px solid var(--line);
  padding:12px 16px; transform:translateY(120%); transition:transform .3s ease;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.sticky-buy.visible{transform:translateY(0)}
.sticky-buy .sb-txt{font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:15px}
.sticky-buy .sb-txt small{display:block; color:var(--muted); font-weight:400; letter-spacing:0; text-transform:none}
.sticky-buy .btn{padding:12px 20px; font-size:16px}
@media(min-width:900px){ .sticky-buy{display:none} }   /* solo móvil */

/* Reduce motion: sin animaciones de transform/scroll */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
  .btn:hover{transform:none}
  .sticky-buy{transition:none}
}

#days,
#hours,
#minutes,
#seconds {
    font-size: 25px;
    color: #fff;
    display: block;
    font-weight: bold;
    background-color: rgba(0,0,0,.4);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 65px;
    min-height: 60px;
    padding: 1rem;
    margin: 2px;
    border: solid 2px #ccc;
    text-align: center;
    border-radius: 15px;
}
@media screen and (min-width: 768px) {
    #days,
    #hours,
    #minutes,
    #seconds {
        font-size: 38px;
        min-width: 100px;
        min-height: 100px;
        padding: 2rem;
        margin: 0px 20px;
    }
}
@media screen and (min-width: 1024px) {
    #days,
    #hours,
    #minutes,
    #seconds {
        font-size: 48px;
        min-width: 100px;
        min-height: 70px;
        padding: 2rem;
        margin: 0px 20px;
    }
}
.dato_cta {
    color: #f4feff;
    font-size: 1rem;
    text-transform: uppercase;
}
.separador {
    font-size: 58px;
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 0px 0.5rem;
}
@media screen and (min-width: 1024px) {
    .separador {
        font-size: 88px;
    }
    .dato_cta {
        font-size: 1.5rem;
    }
} 
.state{
  text-align: center;
  font-size: 12px;
}