/* ============================================================
   HOME — Break Box (casa madre)
   The whole site here is the chooser: two full pages live behind
   it (Studio / Live), so this page stays deliberately minimal —
   nav, the two-card picker, a way out to Contacto, footer. Nothing
   else. Background is light (off-white), unlike Studio/Live's dark
   pages, so the nav is themed for contrast against a light hero.
   ============================================================ */
body.home{ background:var(--off-white); }

.home .bb-nav{ color:var(--bb-navy); }
.home .bb-nav__cta{ color:var(--bb-navy); }
.home .bb-nav__cta:hover{ background:var(--bb-navy); color:var(--white); }
.home .bb-nav.is-scrolled{ background:rgba(247,247,251,.82); }

/* ---------- PILLARS (Studio / Live split) — this IS the page ---------- */
.pillars{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  background:var(--off-white); padding:140px var(--gutter) 100px;
}
.pillars__head{ max-width:var(--container); margin:0 auto 64px; }
.pillars__head .eyebrow{ color:var(--bb-purple); margin-bottom:18px; }
.pillars__head h2{ font-size:clamp(30px,4.4vw,54px); color:var(--bb-navy); max-width:760px; }

.pillars__grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
@media (max-width:900px){ .pillars__grid{ grid-template-columns:1fr; } }

.pillar-card{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  min-height:560px; display:flex; flex-direction:column; justify-content:space-between;
  padding:44px; isolation:isolate;
  transition:transform .5s var(--ease-out);
}
.pillar-card:hover{ transform:translateY(-8px); }

.pillar-card--studio{
  background:linear-gradient(155deg,#171d3a 0%, var(--bb-navy) 55%, #2b2270 100%);
  color:var(--bb-pale);
}
.pillar-card--live{
  background:linear-gradient(155deg,var(--live-indigo) 0%, var(--live-violet) 55%, #7a5cf0 100%);
  color:var(--white);
}
.pillar-card__tag{
  font-family:var(--font-display); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.16em; opacity:.65;
}
.pillar-card h3{ font-size:clamp(30px,3.4vw,44px); margin-top:18px; }
.pillar-card p{ margin-top:16px; max-width:400px; line-height:1.6; opacity:.85; font-size:15.5px; }
.pillar-card__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:auto; padding-top:36px;
  font-family:var(--font-display); font-weight:800; font-size:14px;
  text-transform:uppercase; letter-spacing:.02em;
}
.pillar-card__cta svg{ transition:transform .35s var(--ease-out); }
.pillar-card:hover .pillar-card__cta svg{ transform:translateX(6px); }

.pillar-card__deco{
  position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
}
.pillar-card--studio .pillar-card__deco{
  background:
    linear-gradient(120deg,transparent 40%,rgba(87,79,244,.35) 100%);
}
.pillar-card--live .pillar-card__deco{
  background-image:
    radial-gradient(circle at 85% 12%, rgba(207,245,4,.55), transparent 40%),
    radial-gradient(circle at 8% 90%, rgba(143,204,242,.5), transparent 45%);
}
.pillar-card--studio .pillar-shape{
  position:absolute; right:-30px; bottom:-30px; width:220px; opacity:.5;
}
.pillar-card--live .pillar-shape{
  position:absolute; right:10px; top:20px; width:150px;
  animation:spinSlow 14s linear infinite;
}
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

/* ---------- Contact way-out, for anyone unsure which side they need ---------- */
.pillars__help{
  max-width:var(--container); margin:40px auto 0; text-align:center;
  font-size:15px; color:#5a5f80;
}
.pillars__help a{ color:var(--bb-purple); font-weight:700; text-decoration:underline; text-underline-offset:3px; }