:root{
  --bg: #0B0B0C;
  --bg-card: #17171A;
  --bg-card-hover: #1D1D21;
  --white: #F5F5F3;
  --grey: #9A9AA0;
  --pink: #FF1B6D;
  --orange: #FF7A1A;
  --yellow: #FFC300;
  --line: rgba(245,245,243,0.1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Baloo 2',sans-serif; font-weight:800;}
.mono{font-family:'Space Mono',monospace;}
a{color:inherit; text-decoration:none;}

.grad-text{
  background:linear-gradient(90deg, var(--pink), var(--orange) 55%, var(--yellow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.grad-bg{
  background:linear-gradient(90deg, var(--pink), var(--orange) 55%, var(--yellow));
}
.grad-line{
  height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--pink), var(--orange) 55%, var(--yellow));
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
}
.header-inner img.logo-img{
  height:40px;
  width:auto;
  display:block;
}
nav{display:flex; align-items:center; gap:30px;}
.nav-links{display:flex; gap:34px;}
nav a.link{
  font-weight:600; font-size:0.92rem; color:var(--grey);
  transition:color .2s;
  position:relative;
  padding-bottom:4px;
}
nav a.link:hover{color:var(--white);}
nav a.link.active{color:var(--white);}
nav a.link.active::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--pink), var(--orange) 55%, var(--yellow));
}
.nav-cta{
  color:var(--bg);
  padding:11px 24px; border-radius:100px;
  font-weight:700; font-size:0.88rem;
  box-shadow:0 4px 18px rgba(255,122,26,0.25);
  transition:filter .15s, transform .15s;
}
.nav-cta:hover{filter:brightness(1.1); transform:translateY(-1px);}

/* ---------- MENÚ MÓVIL (hamburguesa, sin JS) ---------- */
.nav-toggle{display:none;}
.nav-toggle-btn{
  display:none;
  align-items:center; gap:9px;
  cursor:pointer;
  position:relative; z-index:60;
}
.nav-toggle-icon{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:24px; height:18px;
  flex-shrink:0;
}
.nav-toggle-icon span{
  width:100%; height:2px; border-radius:2px;
  background:var(--white);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle-text{
  font-family:'Space Mono',monospace; font-size:0.78rem; font-weight:700;
  letter-spacing:0.5px; color:var(--white);
}
.nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-icon span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-icon span:nth-child(2){opacity:0;}
.nav-toggle:checked ~ .nav-toggle-btn .nav-toggle-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-backdrop{display:none;}

@media (max-width:720px){
  .nav-toggle-btn{display:flex;}

  nav{
    position:fixed; top:0; right:-85%;
    width:78%; max-width:320px; height:100vh;
    background:var(--bg-card);
    border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start;
    padding:100px 30px 30px;
    gap:0;
    z-index:56;
    transition:right .3s ease;
    overflow-y:auto;
  }
  .nav-links{
    display:flex; flex-direction:column; gap:26px;
    width:100%;
  }
  nav a.link{font-size:1rem;}
  .nav-cta{
    margin-top:32px;
    width:100%;
    text-align:center;
  }

  .nav-toggle:checked ~ nav{right:0;}
  .nav-toggle:checked ~ .nav-backdrop{
    display:block;
    position:fixed; inset:0;
    background:rgba(0,0,0,0.55);
    z-index:55;
  }
}

/* ---------- LOGO CENTRAL (hero) ---------- */
.main-brand-logo{
  display:block;
  width:min(320px, 70vw);
  height:auto;
  margin:0 auto 28px;
  object-fit:contain;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:90px 24px 80px;
  text-align:center;
  overflow:hidden;
  background-image:url('imagentelon.jpg');
  background-size:cover;
  background-position:center top;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(11,11,12,0.75) 0%,
    rgba(11,11,12,0.55) 35%,
    rgba(11,11,12,0.65) 65%,
    rgba(11,11,12,0.85) 100%
  );
  z-index:0;
}
.glow{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:0.35; z-index:0;
}
.glow-1{width:420px; height:420px; background:var(--pink); top:-160px; left:-100px;}
.glow-2{width:480px; height:480px; background:var(--orange); bottom:-220px; right:-140px;}
.hero-inner{position:relative; z-index:1; max-width:780px; margin:0 auto;}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Space Mono',monospace; font-size:0.78rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--yellow);
  border:1px solid rgba(255,195,0,0.35);
  padding:7px 16px; border-radius:100px;
  margin-bottom:26px;
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4rem);
  line-height:1.06;
  margin-bottom:22px;
}
.hero p{
  font-size:1.1rem; color:var(--grey); max-width:520px; margin:0 auto 36px;
  line-height:1.6;
}
.hero-btn{
  display:inline-block;
  color:var(--bg);
  font-weight:700; font-size:1rem;
  padding:16px 36px; border-radius:100px;
  transition:transform .15s, filter .15s;
}
.hero-btn:hover{transform:translateY(-2px); filter:brightness(1.08);}

/* ---------- SECTIONS ---------- */
.section{max-width:1200px; margin:0 auto; padding:60px 24px;}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:36px; flex-wrap:wrap; gap:16px;
}
.section-head h2{font-size:clamp(1.8rem,4vw,2.4rem);}
.section-head .tag{
  font-family:'Space Mono',monospace;
  font-size:0.78rem; font-weight:700; color:var(--yellow);
  border:1px solid rgba(255,195,0,0.35); padding:6px 12px; border-radius:100px;
}

/* ---------- EVENT CARDS ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:24px;
}
.ticket{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:16px;
  position:relative;
  overflow:hidden;
  transition:transform .2s, border-color .2s, background .2s;
  display:flex; flex-direction:column;
}
.ticket:hover{
  transform:translateY(-5px);
  background:var(--bg-card-hover);
  border-color:rgba(255,122,26,0.4);
}
.ticket-img{
  aspect-ratio: 3/4; width:100%;
  background-size:cover; background-position:center;
  position:relative;
}
.ticket-cat{
  position:absolute; top:12px; left:12px;
  color:var(--bg);
  font-weight:700; font-size:0.7rem;
  padding:5px 11px; border-radius:100px; text-transform:uppercase; letter-spacing:0.5px;
}
.ticket-body{
  padding:18px 18px 20px;
  flex:1;
  display:flex; flex-direction:column;
  gap:10px;
}
.ticket-title{font-size:1.05rem; font-weight:700; line-height:1.3;}
.ticket-footer{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px dashed var(--line);
}
.price{font-family:'Space Mono',monospace; font-weight:700; font-size:1rem;}
.price span{font-size:0.65rem; color:var(--grey); display:block; font-family:'Inter',sans-serif;}
.buy-btn{
  color:var(--bg);
  font-weight:700; font-size:0.85rem;
  padding:9px 18px; border-radius:100px;
  transition:filter .15s;
}
.buy-btn:hover{filter:brightness(1.1);}

/* ---------- FOOTER ---------- */
footer{padding:54px 24px 30px;}
.footer-inner{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
  padding-bottom:30px; border-bottom:1px solid var(--line);
}
.footer-col h4{font-size:0.8rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; font-weight:700;}
.footer-col a, .footer-col p{display:block; font-size:0.9rem; color:var(--grey); margin-bottom:8px;}
.footer-bottom{
  max-width:1200px; margin:20px auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:0.8rem; color:var(--grey);
  font-family:'Space Mono',monospace;
}

/* ---------- DETAIL PAGE (obra individual) ---------- */
.detail{
  max-width:1200px; margin:0 auto; padding:50px 24px 90px;
}
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--grey); font-weight:600; font-size:0.9rem;
  margin-bottom:30px;
  transition:color .15s;
}
.back-link:hover{color:var(--white);}
.detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:50px;
  align-items:start;
}
@media(max-width:820px){
  .detail-grid{grid-template-columns:1fr;}
}
.detail-poster{
  width:100%; border-radius:16px; overflow:hidden;
  border:1px solid var(--line);
}
.detail-poster img{width:100%; height:100%; object-fit:cover; display:block;}
.detail-title{
  font-size:clamp(2rem, 4.5vw, 3rem);
  line-height:1.05;
  margin-bottom:20px;
}
.detail-desc{
  color:var(--grey); font-size:1.05rem; line-height:1.65; margin-bottom:26px;
}
.detail-meta{
  display:flex; flex-direction:column; gap:12px;
  padding:20px 0; margin-bottom:26px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.detail-meta div{
  display:flex; align-items:flex-start; gap:10px;
  font-size:0.95rem; color:var(--white);
  line-height:1.5;
}
.detail-meta span.grey{color:var(--grey);}

.buy-box{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
}
.buy-box h3{font-size:1.15rem; margin-bottom:16px; font-family:'Baloo 2',sans-serif; font-weight:700;}
.buy-box label{
  display:block; font-size:0.8rem; color:var(--grey); font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;
}
.buy-box input,
.buy-box select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--white);
  font-family:'Inter',sans-serif; font-size:0.95rem;
  padding:12px 14px; border-radius:10px;
  margin-bottom:20px;
  appearance:none;
}
.buy-box .buy-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.buy-box .price{font-size:1.3rem;}
.buy-box .buy-btn{padding:13px 26px; font-size:0.92rem;}

/* ---------- SELECTOR DE FUNCIONES (tarjetas) ---------- */
.funciones-wrap{
  margin-bottom:20px;
}
.funciones-label{
  display:block; font-size:0.8rem; color:var(--grey); font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px;
}
.funciones-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(84px,1fr));
  gap:10px;
}
.funcion-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 6px 10px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, transform .15s, background .15s;
}
.funcion-card:hover{
  border-color:rgba(255,122,26,0.5);
  transform:translateY(-2px);
}
.funcion-card.selected{
  background:rgba(255,122,26,0.08);
  border-color:transparent;
  position:relative;
}
.funcion-card.selected::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  padding:1.5px;
  background:linear-gradient(90deg, var(--pink), var(--orange) 55%, var(--yellow));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.funcion-dia{
  font-size:0.68rem; font-weight:700; letter-spacing:0.5px;
  color:var(--grey); text-transform:uppercase;
}
.funcion-card.selected .funcion-dia{color:var(--white);}
.funcion-num{
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:1.4rem; line-height:1.2; margin:2px 0;
}
.funcion-mes{
  font-size:0.62rem; color:var(--grey); text-transform:uppercase;
}
.funcion-hora{
  font-size:0.72rem; font-weight:700; margin-top:4px;
}
.funcion-card.selected .funcion-hora{
  background:linear-gradient(90deg, var(--pink), var(--orange) 55%, var(--yellow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.funcion-card:not(.selected) .funcion-hora{color:var(--yellow);}

/* ---------- BOTÓN FLOTANTE WHATSAPP ---------- */
.whatsapp-float{
  position:fixed;
  bottom:24px; right:24px;
  width:60px; height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
  z-index:1000;
  transition:transform .2s;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:32px; height:32px;}

@media (max-width:640px){
  .whatsapp-float{width:52px; height:52px; bottom:18px; right:18px;}
  .whatsapp-float svg{width:28px; height:28px;}
}