/* ============================================================
   BREAK BOX LIVE — energetic / youthful / bold
   ============================================================ */
body.live{ background:var(--live-indigo); color:#fff; }
.live .bb-nav{ color:#fff; }
.live .bb-nav.is-scrolled{ background:rgba(76,69,175,.75); }
.live .bb-nav__cta{ color:#fff; }
.live .bb-nav__cta:hover{ background:var(--live-lime); color:var(--live-indigo); border-color:var(--live-lime); }

.lv-section{ padding:130px var(--gutter); position:relative; overflow:hidden; }
.lv-inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:2; }

/* ---------- HERO ---------- */
.lv-hero{
  --kicker-accent: var(--live-lime);
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; padding:140px var(--gutter) 60px;
  background:
    radial-gradient(circle at 85% 10%, rgba(207,245,4,.35), transparent 45%),
    radial-gradient(circle at 5% 90%, rgba(143,204,242,.4), transparent 45%),
    linear-gradient(160deg,var(--live-indigo), var(--live-violet) 60%, #7a5cf0);
}
.lv-hero__label{ color:var(--live-lime); margin-bottom:24px; }
.lv-hero h1{
  font-size:clamp(44px,9vw,120px); color:#fff; max-width:1200px;
  letter-spacing:-.02em;
}
.lv-hero h1 .bb-kicker__line2{ font-weight:900; }
.lv-hero__sub{
  margin-top:28px; max-width:560px; font-size:clamp(16px,1.6vw,19px);
  line-height:1.6; color:rgba(255,255,255,.85);
}
.lv-hero__ctas{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }

.lv-hero__blob{
  position:absolute; border-radius:50%; filter:blur(2px);
}
.blob-1{ width:260px; height:260px; top:8%; right:8%; background:radial-gradient(circle,var(--live-lime),transparent 70%); animation:floaty 7s ease-in-out infinite; }
.blob-2{ width:180px; height:180px; bottom:12%; right:26%; background:radial-gradient(circle,var(--live-sky),transparent 70%); animation:floaty 9s ease-in-out infinite reverse; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-26px) scale(1.06); } }

.lv-hero__star{ position:absolute; animation:spin 16s linear infinite; opacity:.9; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- MARQUEE TICKER ---------- */
.lv-ticker{
  background:var(--live-lime); color:var(--live-indigo); padding:18px 0;
  overflow:hidden; transform:rotate(-1.4deg); position:relative; z-index:3;
  width:112vw; margin-left:-6vw; margin-top:-46px;
}
.lv-ticker__track{ display:flex; gap:40px; width:max-content; animation:marqueeFast 20s linear infinite; }
.lv-ticker__track span{
  font-family:var(--font-display); font-weight:900; font-size:20px;
  text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
  display:flex; align-items:center; gap:14px;
}
.lv-ticker__track span::after{ content:'✦'; opacity:.6; }
@keyframes marqueeFast{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- PRÓXIMOS SHOWS (tickets) ---------- */
/* Deliberately its own section, ahead of the services grid — right
   now ticket sales for upcoming shows are the priority, not the
   production-services pitch, so it shouldn't blend into that grid. */
.lv-shows{ background:var(--live-indigo); padding-top:80px; }
.shows-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px; }
@media (max-width:900px){ .shows-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .shows-grid{ grid-template-columns:1fr; } }
.show-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-m); padding:28px; display:flex; flex-direction:column; gap:6px;
  transition:transform .4s var(--ease-out), background .4s, border-color .4s;
}
.show-card:hover{ transform:translateY(-8px) rotate(-1deg); background:rgba(255,255,255,.1); border-color:var(--live-lime); }
.show-card__date{
  font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--live-lime);
}
.show-card h3{ font-size:22px; color:#fff; margin-top:4px; }
.show-card__venue{ font-size:14px; color:rgba(255,255,255,.65); }
.show-card__cta{ margin-top:20px; padding-top:18px; border-top:1px dashed rgba(255,255,255,.25); }
.show-card .btn[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ---------- QUE HACEMOS ---------- */
.lv-formats{ background:var(--live-indigo); padding-top:110px; }
.lv-formats__head{ max-width:640px; margin-bottom:60px; }
.lv-formats__head .eyebrow{ color:var(--live-lime); margin-bottom:16px; }
.lv-formats__head h2{ font-size:clamp(30px,4.6vw,54px); color:#fff; }

.fmt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .fmt-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fmt-grid{ grid-template-columns:1fr; } }

.fmt-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-m); padding:32px 26px; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .4s var(--ease-out), background .4s, border-color .4s;
}
.fmt-card:hover{
  transform:translateY(-8px) rotate(-1deg);
  background:rgba(255,255,255,.1); border-color:var(--live-lime);
}
.fmt-card__icon{ font-size:30px; }
.fmt-card h3{ font-size:20px; color:#fff; margin-top:18px; }
.fmt-card p{ margin-top:10px; font-size:14px; color:rgba(255,255,255,.72); line-height:1.55; }

/* ---------- GALERIA / SHOWS ---------- */
.lv-gallery{ background:#3f398f; }
/* Horizontal gallery: native draggable row on touch/narrow screens,
   pinned scroll-driven translateX on desktop via live.js (mirrors the
   Studio Box Breakers gallery, just with Live's bouncier card style). */
.gal-viewport{
  margin-top:50px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; scrollbar-width:none;
}
.gal-viewport::-webkit-scrollbar{ display:none; }
.gal-grid{ display:flex; gap:16px; width:max-content; }
@media (min-width:821px){ .gal-viewport{ overflow:hidden; } }
.gal-item{
  flex:0 0 min(70vw,220px); height:320px; scroll-snap-align:start;
  border-radius:var(--radius-m); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.55);
  transition:transform .35s var(--ease-out);
}
.gal-item:hover{ transform:scale(1.03); }
.gal-item.big{ flex-basis:min(88vw,460px); }
.gal-item:nth-child(1){ background:linear-gradient(150deg,#cff504,#8fccf2); color:#20255a; }
.gal-item:nth-child(2){ background:linear-gradient(150deg,#6e4ef6,#4c45af); }
.gal-item:nth-child(3){ background:linear-gradient(150deg,#8fccf2,#6e4ef6); }
.gal-item:nth-child(4){ background:linear-gradient(150deg,#4c45af,#cff504); color:#20255a; }
.gal-item:nth-child(5){ background:linear-gradient(150deg,#7a5cf0,#8fccf2); }
.gal-item:nth-child(6){ background:linear-gradient(150deg,#cff504,#6e4ef6); }
.lv-gallery__note{ margin-top:26px; font-size:13.5px; color:rgba(255,255,255,.6); max-width:480px; }

/* ---------- TESTIMONIALS (Live theme override) ---------- */
.lv-testimonials{ background:var(--live-indigo); }
.lv-testimonials .testi-card{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.lv-testimonials .testi-card p{ color:rgba(255,255,255,.88); }
.lv-testimonials .testi-card__name{ color:#fff; }
.lv-testimonials .testi-card__role{ color:rgba(255,255,255,.6); }

/* ---------- POR QUE ---------- */
.lv-why{ background:var(--live-indigo); }
.why-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:50px; }
@media (max-width:700px){ .why-list{ grid-template-columns:1fr; } }
.why-item{
  display:flex; gap:16px; align-items:flex-start; padding:22px;
  background:rgba(255,255,255,.05); border-radius:var(--radius-m);
}
.why-item .dot{
  width:38px; height:38px; border-radius:50%; background:var(--live-lime); color:var(--live-indigo);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:900;
  flex:none;
}
.why-item h4{ color:#fff; font-size:17px; }
.why-item p{ margin-top:6px; font-size:14px; color:rgba(255,255,255,.7); line-height:1.5; }

/* ---------- CTA ---------- */
.lv-cta{
  background:linear-gradient(155deg,#7a5cf0,var(--live-violet) 55%,var(--live-indigo));
  text-align:center;
}
.lv-cta h2{ font-size:clamp(32px,6vw,72px); color:#fff; font-weight:900; }
.lv-cta h2 .amp{ color:var(--live-lime); }
.lv-cta p{ margin-top:18px; color:rgba(255,255,255,.85); font-size:17px; }
.lv-cta__ctas{ margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* Footer theme override for Live */
.live .bb-footer{ background:#171449; }