:root{
  --bg: #0a0a0c;
  --surface: #141418;
  --surface-2: #1c1c22;
  --line: rgba(237,234,226,0.09);
  --text: #edeae2;
  --text-dim: #918e93;
  --text-dimmer: #7a787d;
  --accent: #e2263d;
  --accent-text: #e82a41;
  --accent-dim: #7a1522;
  --accent-2: #37d9ff;
  --stone-1: #e8e8ec;
  --stone-2: #8d8d95;
  --stone-3: #45454c;
  --radius: 3px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

::selection{ background: var(--accent); color: #fff; }

.display{
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}

.stone-text{
  background: linear-gradient(180deg, var(--stone-1) 0%, var(--stone-2) 55%, var(--stone-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6));
}

.accent-text{ color: var(--accent-text); }
.accent2-text{ color: var(--accent-2); }

a{ color: inherit; text-decoration: none; }
img, svg{ display:block; max-width:100%; }

.wrap{
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.eyebrow{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow.on-accent{ color: var(--accent-text); }
.eyebrow.on-accent2{ color: var(--accent-2); }

.eyebrow::before{
  content:'';
  width: 7px; height: 7px;
  background: currentColor;
  clip-path: polygon(50% 0%, 68% 32%, 100% 42%, 74% 62%, 80% 100%, 50% 78%, 20% 100%, 26% 62%, 0% 42%, 32% 32%);
}

/* film grain overlay */
.grain{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.05;
  mix-blend-mode: overlay;
}
.grain svg{ width:100%; height:100%; }

.vignette{
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 199;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* ---------- NAV ---------- */
header{
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding: 1rem clamp(1.25rem, 4vw, 3.5rem);
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(10,10,12,0.9), rgba(10,10,12,0));
  backdrop-filter: blur(6px);
  transition: background 0.4s var(--ease-out), border-color .4s;
  border-bottom: 1px solid transparent;
}
header.scrolled{
  background: rgba(10,10,12,0.86);
  border-bottom-color: var(--line);
}

.logo{ display:flex; align-items:center; gap:0.65rem; }
.logo-badge{
  position: relative;
  width: 42px; height: 42px;
  background: #050506;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.5);
}
.logo-badge img{ width:100%; height:100%; object-fit: cover; }
.logo-word{
  font-family:'Anton', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  line-height: 1;
}
.logo-word span{ color: var(--accent-text); }

nav.links{ display:flex; gap: 2rem; align-items:center; }
nav.links a{
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--text-dim);
  position: relative;
  padding-block: 0.3rem;
  transition: color 0.3s;
}
nav.links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--accent2-text, var(--accent-2));
  transition: right 0.35s var(--ease-out);
}
nav.links a:hover{ color: var(--text); }
nav.links a:hover::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap:1.2rem; }
.btn-live{
  display:flex; align-items:center; gap:0.5rem;
  font-size: 0.72rem; font-weight:700; letter-spacing:0.1em;
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
}
.btn-live i{
  width:7px; height:7px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(226,38,61,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(226,38,61,0.55); }
  70%{ box-shadow: 0 0 0 8px rgba(226,38,61,0); }
  100%{ box-shadow: 0 0 0 0 rgba(226,38,61,0); }
}
.btn-live{ cursor:pointer; background:none; font-family:inherit; }
.btn-live.is-playing i{ background: var(--accent-2); animation:none; }

.mobile-radio-btn{
  display:flex; align-items:center; gap:0.6rem;
  font-family:'Anton', sans-serif; font-size: 1.4rem; text-transform:uppercase;
  color: var(--text-dim); background:none; border:none; margin-top: 1rem; cursor:pointer;
}
.mobile-radio-btn i{ width:8px; height:8px; border-radius:50%; background: var(--accent); }
.mobile-radio-btn.is-playing i{ background: var(--accent-2); }

.radio-bar{
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  z-index: 60; display:flex; align-items:center; gap:0.9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 0.7rem 0.6rem 0.9rem; box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  max-width: calc(100vw - 2rem);
}
/* [hidden] tem baixa prioridade na stylesheet do navegador — sem isso,
   qualquer regra de display:flex acima ganha e o elemento aparece mesmo
   com o atributo hidden presente. */
.btn-live[hidden], .mobile-radio-btn[hidden], .radio-bar[hidden]{ display:none !important; }

/* vazio (posicao desativada/sem slot) nao ocupa espaco nenhum na pagina */
.ad-slot{ display:flex; justify-content:center; }
.ad-slot:empty{ display:none; }
.ad-slot .adsbygoogle{ width:100%; max-width:970px; }
.radio-bar button{
  width: 34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background: var(--surface-2); color: var(--text); font-size: 0.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
#radioPlayPause{ background: var(--accent); border-color: var(--accent); }
.radio-bar-info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.radio-bar-name{ font-size:0.8rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 40vw; }
.radio-bar-status{ font-size:0.68rem; color: var(--text-dim); }
#radioBarClose{ width:26px; height:26px; font-size:0.7rem; }
#radioStationToggle{ width:26px; height:26px; font-size:0.7rem; }
#radioStationToggle[hidden]{ display:none !important; }
#radioStationToggle[aria-expanded="true"]{ background: var(--accent); border-color: var(--accent); }

.radio-station-list{
  position:absolute; bottom: calc(100% + 0.6rem); left:50%; transform: translateX(-50%);
  background: var(--surface); border:1px solid var(--line); border-radius: 14px;
  padding: 0.4rem; margin:0; list-style:none;
  min-width: 220px; max-width: calc(100vw - 2rem);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.radio-station-list[hidden]{ display:none !important; }
.radio-station-list li{ display:block; }
.radio-station-list button{
  width:100%; height:auto; border-radius:8px; border:none; background:none;
  color: var(--text-dim); font-size:0.8rem; text-align:left; justify-content:flex-start;
  padding: 0.55rem 0.7rem; cursor:pointer;
}
.radio-station-list button:hover{ background: var(--surface-2); color: var(--text); }
.radio-station-list button.is-active{ color: var(--accent-2); font-weight:700; }

.burger{ display:none; width:26px; height:20px; position:relative; cursor:pointer; }
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--text); transition: all .3s var(--ease-out); }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:9px; }
.burger span:nth-child(3){ top:18px; }
.burger.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; z-index: 90;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap: 1.4rem; padding: 2rem clamp(1.25rem,4vw,3.5rem);
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease-out);
}
.mobile-menu.open{ transform: translateY(0); }
.mobile-menu a{ font-family:'Anton', sans-serif; font-size: 2.2rem; text-transform:uppercase; color: var(--text-dim); }
.mobile-menu a:hover{ color: var(--text); }

/* ---------- HERO ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top: 7rem;
  overflow:hidden;
}

.hero-bg{
  position:absolute; inset: -10% -5%;
  z-index:0;
  background:
    radial-gradient(ellipse 60% 45% at 22% 20%, rgba(226,38,61,0.16), transparent 60%),
    radial-gradient(ellipse 55% 40% at 82% 70%, rgba(55,217,255,0.10), transparent 60%),
    linear-gradient(160deg, #101013 0%, #0a0a0c 60%, #08080a 100%);
}
.hero-crack{
  position:absolute; inset:0; z-index:1;
  opacity: 0.5;
  mix-blend-mode: screen;
}
.hero-bolt{
  position:absolute; z-index:2;
  top: 8%; left: 48%;
  width: min(46vw, 620px);
  filter: drop-shadow(0 0 24px rgba(55,217,255,0.55)) drop-shadow(0 0 60px rgba(55,217,255,0.25));
  opacity: 0.9;
}

.hero-content{ position:relative; z-index:3; }

.hero-eyebrow-row{
  display:flex; align-items:center; gap: 1.2rem; flex-wrap:wrap;
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}

.hero-title{
  font-size: clamp(3.4rem, 10.5vw, 9.5rem);
  max-width: 15ch;
  overflow: hidden;
}
.hero-title .ch{ display:inline-block; white-space: pre; }

.hero-sub{
  max-width: 46ch;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--text-dim);
  font-weight: 400;
}

.hero-bottom{
  position: relative; z-index: 3;
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--line);
  display:flex; align-items:center;
  gap: 1.5rem;
}

.live-tag{
  flex-shrink:0;
  display:flex; align-items:center; gap:0.5rem;
  background: var(--accent);
  color:#fff; font-weight:800; font-size:0.72rem; letter-spacing:0.08em;
  padding: 0.7rem 1rem;
}

.marquee{
  flex:1; overflow:hidden; white-space:nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:inline-flex;
  animation: marquee 32s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation-duration: 90s; } }
.marquee-track span{
  padding: 0.85rem 2.4rem;
  font-size: 0.85rem; font-weight:600; letter-spacing:0.02em;
  color: var(--text-dim);
  border-right: 1px solid var(--line);
  display:inline-block;
}
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

.scroll-cue{
  position:absolute; right: clamp(1.25rem,4vw,3.5rem); bottom: 6.5rem; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
}
.scroll-cue span{
  writing-mode: vertical-rl;
  font-size: 0.68rem; letter-spacing:0.2em; color: var(--text-dimmer); font-weight:700;
}
.scroll-cue .line{ width:1px; height:52px; background: linear-gradient(var(--text-dimmer), transparent); }

/* ---------- SECTION SHELL ---------- */
section{ position:relative; }
.pad{ padding-block: clamp(5rem, 12vh, 9rem); }

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  flex-wrap: wrap;
}
.section-title{ font-size: clamp(2.2rem, 5vw, 4.2rem); }
.section-num{
  font-family:'Anton', sans-serif; font-size: clamp(3rem, 7vw, 6rem);
  color: var(--surface-2); line-height:1; -webkit-text-stroke: 1px var(--line);
  color: transparent;
}

[data-reveal]{ will-change: transform, opacity; }

/* ---------- DESTAQUE ---------- */
.destaque{ background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.destaque-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem);
  align-items:center;
}
.destaque-visual{
  position:relative; aspect-ratio: 4/5; border-radius: 4px; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(226,38,61,0.35), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(55,217,255,0.28), transparent 55%),
    linear-gradient(155deg, #201f24, #0c0c0e 70%);
  border: 1px solid var(--line);
}
.destaque-visual img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.destaque-visual .scrim{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(195deg, rgba(10,10,12,0.15) 0%, rgba(10,10,12,0.35) 55%, rgba(10,10,12,0.85) 100%);
}
.destaque-visual .beam{
  position:absolute; top:-20%; left:50%;
  width: 160%; height: 160%;
  background: conic-gradient(from 200deg at 50% 0%, transparent, rgba(255,255,255,0.05), transparent 30%);
  transform: translateX(-50%);
}
.destaque-visual .rings{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.destaque-visual .rings svg{ width: 70%; opacity:0.5; }
.destaque-badge{
  position:absolute; left:1.4rem; top:1.4rem;
  background: rgba(8,8,10,0.7); backdrop-filter: blur(4px);
  border:1px solid var(--line); padding:0.5rem 0.9rem;
  font-size:0.68rem; font-weight:800; letter-spacing:0.14em; color: var(--accent-2);
}

.destaque-copy .eyebrow{ margin-bottom: 1rem; }
.destaque-copy h2{
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  margin-bottom: 1.2rem;
}
.destaque-copy p{ color: var(--text-dim); max-width: 48ch; margin-bottom: 1.8rem; line-height:1.65; }
.destaque-meta{
  display:flex; gap:1.5rem; flex-wrap:wrap;
  font-size:0.78rem; color: var(--text-dimmer); font-weight:600;
  border-top:1px solid var(--line); padding-top:1.2rem;
}
.read-link{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-weight:700; font-size:0.85rem; color:var(--text);
  margin-top: 0.5rem;
}
.read-link svg{ width:16px; height:16px; transition: transform .3s var(--ease-out); }
.read-link:hover svg{ transform: translateX(5px); }

/* ---------- GRID DE NOTICIAS (bento) ---------- */
.news-bento{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 1.1rem;
}

/* ---------- GRID DE HISTORIAS (pagina /historias, sem bento) ---------- */
.stories-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.stories-grid .card{ min-height: 260px; }
.card{
  position:relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.6rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  transition: border-color .35s, transform .45s var(--ease-out);
  min-height: 220px;
}
.card:hover{ border-color: rgba(237,234,226,0.22); transform: translateY(-4px); }
.card .card-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0.5; transition: opacity .4s, transform .5s var(--ease-out);
}
.card:hover .card-bg{ opacity:0.62; transform: scale(1.04); }
.card .card-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,20,24,0.1) 0%, rgba(10,10,12,0.55) 45%, rgba(10,10,12,0.94) 100%);
}
.card .card-glow{
  position:absolute; inset:0; opacity:0;
  background: radial-gradient(circle at 30% 0%, rgba(226,38,61,0.16), transparent 60%);
  transition: opacity .4s;
}
.card:hover .card-glow{ opacity:1; }
.card-cat{
  font-size:0.66rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  margin-bottom: 0.8rem; position:relative; z-index:1;
}
.card-cat.c-memoria{ color: var(--accent-2); }
.card-cat.c-cena{ color: var(--accent-text); }
.card-cat.c-lancamentos{ color: #ffb454; }
.card-cat.c-turnes{ color: #8be28b; }
.card-cat.c-analise{ color: var(--text-dim); }
.card-cat.c-bastidores{ color: #c58bff; }

.card h3{ position:relative; z-index:1; font-size: 1.25rem; font-weight:700; line-height:1.3; margin-bottom:0.6rem; }
.card p{ position:relative; z-index:1; color: var(--text-dim); font-size:0.88rem; line-height:1.55; }
.card-foot{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1rem; padding-top:0.9rem; border-top:1px solid var(--line);
  font-size:0.72rem; color:var(--text-dimmer); font-weight:600;
}

.card.big{ grid-column: span 3; grid-row: span 2; min-height: 380px; }
.card.big h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); }
.card.med{ grid-column: span 3; }
.card.small{ grid-column: span 2; }

@media (max-width: 980px){
  .news-bento{ grid-template-columns: repeat(2, 1fr); }
  .card.big, .card.med, .card.small{ grid-column: span 2; }
}
@media (max-width: 560px){
  .news-bento{ grid-template-columns: 1fr; }
  .card.big, .card.med, .card.small{ grid-column: span 1; }
}

/* ---------- BANDAS ---------- */
.bandas{ background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.band-filters{ margin-bottom: 1.6rem; display:flex; flex-direction:column; gap:0.9rem; }
.band-search{
  width:100%; max-width: 360px; background: var(--bg); border:1px solid var(--line); border-radius:999px;
  padding: 0.6rem 1rem; color: var(--text); font-family:inherit; font-size:0.85rem;
}
.band-alphabet{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.band-letter{
  background: var(--bg); border:1px solid var(--line); border-radius:6px; color: var(--text-dim);
  font-size:0.72rem; font-weight:700; padding: 0.35rem 0.55rem; cursor:pointer; min-width: 2rem;
}
.band-letter:hover{ color: var(--text); border-color: rgba(237,234,226,0.3); }
.band-letter.is-active{ background: var(--accent); border-color: var(--accent); color:#fff; }

.band-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.band-card{
  background: var(--bg); border:1px solid var(--line); border-radius:3px;
  padding: 1.6rem; display:flex; flex-direction:column; gap:0.9rem;
  transition: border-color .35s, transform .45s var(--ease-out);
}
.band-photo{
  width: calc(100% + 3.2rem); aspect-ratio: 16/10; object-fit:cover; margin: -1.6rem -1.6rem 0;
}
.band-card:hover{ border-color: rgba(237,234,226,0.22); transform: translateY(-4px); }
.band-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.band-name{ font-size: 1.3rem; font-weight:800; line-height:1.2; }
.band-status{
  flex-shrink:0; display:flex; align-items:center; gap:0.4rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  padding: 0.3rem 0.6rem; border-radius:999px; border:1px solid var(--line); white-space:nowrap;
}
.band-status i{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.band-status.active{ color:#8be28b; }
.band-status.ended{ color: var(--text-dimmer); }
.band-meta{ font-size:0.78rem; color: var(--text-dimmer); font-weight:600; }
.band-genres{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.band-genres span{
  font-size:0.66rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--accent-2); border:1px solid var(--line); border-radius:999px; padding:0.25rem 0.6rem;
}
.band-bio{
  color: var(--text-dim); font-size:0.86rem; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.band-link{ font-size:0.8rem; font-weight:700; color:var(--text); margin-top:auto; }
.band-social{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top: -0.3rem; }
.band-social a{ font-size:0.76rem; font-weight:700; color: var(--text-dimmer); }
.band-social a:hover{ color: var(--accent-2); }
.band-empty{ color: var(--text-dim); padding: 2rem 0; }

@media (max-width: 980px){ .band-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .band-grid{ grid-template-columns: 1fr; } }

/* Membros de banda (pagina individual) -- mesmo grid/card de .band-grid/
   .band-card, so adaptado pra pessoa (foto quadrada, pill de ex-integrante
   reaproveitando o estilo de .band-status). */
.band-members-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.5rem 0 2rem; }
.member-card{
  background: var(--bg); border:1px solid var(--line); border-radius:3px;
  padding: 1.4rem; display:flex; flex-direction:column; gap:0.5rem;
  transition: border-color .35s, transform .45s var(--ease-out);
}
.member-card:hover{ border-color: rgba(237,234,226,0.22); transform: translateY(-4px); }
.member-photo{ width:100%; aspect-ratio: 1/1; object-fit:cover; border-radius:3px; margin-bottom:0.4rem; }
.member-name{ font-size: 1.05rem; font-weight:800; line-height:1.25; }
.member-role{ font-weight:600; color: var(--text-dimmer); font-size:0.85rem; }
.member-meta{ font-size:0.78rem; color: var(--text-dimmer); font-weight:600; }
.member-social{ font-size:0.76rem; font-weight:700; color: var(--text-dimmer); margin-top:0.2rem; }
.member-social:hover{ color: var(--accent-2); }
.member-status{
  align-self:flex-start; display:flex; align-items:center; gap:0.4rem;
  font-size:0.62rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  padding: 0.3rem 0.6rem; border-radius:999px; border:1px solid var(--line); white-space:nowrap;
}
.member-status.ex{ color: var(--text-dimmer); }
.member-references{ font-size:0.76rem; font-weight:700; margin-top:0.2rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.member-references a{ color: var(--text-dimmer); }
.member-references a:hover{ color: var(--accent-2); }

@media (max-width: 980px){ .band-members-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .band-members-grid{ grid-template-columns: 1fr; } }

/* Vídeos (página individual de banda) -- iframe do YouTube num container
   16:9 responsivo (padding-top em % é o truque clássico pra manter a
   proporção sem JS, funciona em qualquer largura). */
.video-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 1.5rem 0 2rem; }
.video-embed{ position:relative; background: var(--bg); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.video-embed::before{ content:""; display:block; padding-top:56.25%; } /* reserva o espaço 16:9 antes do iframe carregar, sem JS */
.video-embed iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.video-title{ position:relative; padding:0.7rem 0.9rem; font-size:0.85rem; font-weight:700; color: var(--text-dimmer); border-top:1px solid var(--line); background: var(--bg); }

@media (max-width: 760px){ .video-grid{ grid-template-columns: 1fr; } }

/* Player embedado global (public/youtube-embed.js) -- qualquer link do
   YouTube no site (faixa da discografia, referência, texto de post etc.)
   abre este modal em vez de sair pro youtube.com. Mesmo truque de
   proporção 16:9 do .video-embed acima. */
.yt-modal-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.85);
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
}
.yt-modal-overlay[hidden]{ display:none; }
.yt-modal{ position:relative; width:100%; max-width:960px; }
.yt-modal-embed{ position:relative; background:#000; border-radius:3px; overflow:hidden; }
.yt-modal-embed::before{ content:""; display:block; padding-top:56.25%; }
.yt-modal-embed iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.yt-modal-close{
  position:absolute; top:-2.4rem; right:0; background:none; border:0; color:#fff;
  font-size:1.6rem; line-height:1; cursor:pointer; padding:0.3rem 0.5rem;
}
.yt-modal-close:hover{ color: var(--accent-2); }

/* Discografia (página individual de banda/artista). Lançamento sem
   faixas cadastradas usa .discography-item-flat (linha simples, igual ao
   formato antigo). Lançamento com faixas usa <details>/<summary> nativo:
   o próprio HTML dá o abre/fecha, o marcador +/- é só CSS via ::before
   (girado com transform quando o <details> está aberto -- sem JS). */
.discography-list{ display:flex; flex-direction:column; gap:0.5rem; margin: 1rem 0 2rem; }
.discography-thumb{ width:36px; height:36px; object-fit:cover; border-radius:3px; flex-shrink:0; background: var(--bg); }
.discography-thumb-empty{ display:inline-block; border:1px dashed var(--line); }
.discography-item-flat{ display:flex; align-items:center; gap:0.6rem; padding:0.4rem 0; }
.discography-item{ border:1px solid var(--line); border-radius:4px; background: var(--bg); }
.discography-item summary{
  display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.9rem;
  cursor:pointer; list-style:none; font-weight:700;
}
.discography-item summary::-webkit-details-marker{ display:none; }
.discography-summary-text{ flex:1; }
.discography-toggle{ flex-shrink:0; width:1rem; text-align:center; color: var(--text-dimmer); }
.discography-toggle::before{ content:"+"; }
.discography-item[open] .discography-toggle::before{ content:"−"; }
.discography-detail{
  display:flex; gap:1.2rem; padding: 0 0.9rem 1rem; border-top:1px solid var(--line);
  padding-top: 1rem;
}
.discography-cover-large{ width:160px; height:160px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.discography-tracks{ flex:1; margin:0; padding-left:1.4rem; color: var(--text-dim); }
.discography-tracks li{ padding:0.15rem 0; }
.track-row{ display:flex; align-items:center; gap:0.5rem; }
.track-position{ color: var(--text-dimmer); }
.track-title{ flex:1; }
.track-duration{ color: var(--text-dimmer); font-variant-numeric: tabular-nums; }
.track-links{ display:flex; gap:0.4rem; flex-shrink:0; }
.track-links a{
  font-size:0.62rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--text-dimmer); border:1px solid var(--line); border-radius:999px; padding:0.15rem 0.5rem;
}
.track-links a:hover{ color: var(--accent-2); border-color: var(--accent-2); }
.track-contribute{
  flex-shrink:0; font-size:0.62rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--text-dimmer); border:1px dashed var(--line); border-radius:999px; padding:0.15rem 0.5rem;
}
.track-contribute:hover{ color: var(--accent-text); border-color: var(--accent); border-style:solid; }

/* CTA discreto "Responsável por esta banda?" -- nunca chamativo, e uma
   acao secundaria da pagina. */
.band-agent-cta{ color: var(--text-dimmer); font-size:0.85rem; margin: 0.8rem 0 1.5rem; }
.band-agent-cta a{ color: var(--text-dim); text-decoration: underline; text-underline-offset:2px; }
.band-agent-cta a:hover{ color: var(--accent-2); }

/* Faixa com letra cadastrada vira um <details> aninhado dentro do <li> --
   mesmo padrao +/- do lancamento (discography-toggle), so que menor e sem
   borda propria (ja esta dentro do card do lancamento). */
.track-item summary{ display:flex; align-items:center; gap:0.5rem; cursor:pointer; list-style:none; }
.track-item summary::-webkit-details-marker{ display:none; }
.track-item .track-row{ flex:1; }
.track-toggle{ flex-shrink:0; width:1rem; text-align:center; }
.track-toggle::before{ content:"+"; }
.track-item[open] .track-toggle::before{ content:"−"; }
.track-lyrics{
  white-space:pre-line; color: var(--text-dim); font-size:0.9rem; line-height:1.6;
  padding:0.5rem 0 0.5rem 1.6rem; border-top:1px solid var(--line); margin-top:0.4rem;
}

@media (max-width: 560px){ .discography-detail{ flex-direction:column; } .discography-cover-large{ width:100%; height:auto; max-width:220px; } }

/* ---------- BANDAS/SHOWS COVER ---------- */
.cover-tag{
  flex-shrink:0; display:inline-flex; align-items:center;
  font-size:0.62rem; font-weight:800; letter-spacing:0.1em;
  color:#0d0d10; background: var(--accent-2); border-radius:999px;
  padding: 0.3rem 0.6rem; white-space:nowrap;
}
.cover-intro{ color: var(--text-dim); max-width: 62ch; margin-bottom: 2rem; }
.show-band .cover-tag{ margin-left:0.5rem; vertical-align:middle; }

/* ---------- SHOWS ---------- */
.shows-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.show-row{
  display:grid; grid-template-columns: 84px 1fr auto; gap: 1.5rem; align-items:center;
  padding-block: 1.4rem; padding-inline: 0.5rem; border-bottom:1px solid var(--line);
  transition: background .3s, transform .3s var(--ease-out);
}
.show-row:hover{ background: var(--surface); transform: translateX(4px); }
.show-date{ text-align:center; }
.show-date .day{ font-family:'Anton', sans-serif; font-size:1.8rem; line-height:1; color: var(--text); }
.show-date .month{ font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-dimmer); font-weight:700; }
.show-date.tbd .day{ font-size:0.95rem; color: var(--text-dimmer); }
.show-info h3{ font-size:1rem; font-weight:700; margin-bottom:0.3rem; }
.show-info .show-band{ color: var(--accent-2); font-weight:800; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.4rem; display:block; }
.show-info p{ color: var(--text-dim); font-size:0.85rem; }
.show-city{
  flex-shrink:0; font-size:0.75rem; font-weight:700; color: var(--text-dim);
  border:1px solid var(--line); border-radius:999px; padding:0.4rem 0.9rem; white-space:nowrap;
}
.show-empty{ color: var(--text-dim); padding: 2rem 0 2.5rem; border-top:1px solid var(--line); }
@media (max-width: 640px){
  .show-row{ grid-template-columns: 60px 1fr; }
  .show-city{ grid-column: 2 / 3; justify-self:flex-start; }
}

/* ---------- COMO FUNCIONA ---------- */
.how{ background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.how-row{
  display:grid; grid-template-columns: 0.8fr 2fr; gap: 2rem;
  padding-block: 2.6rem; border-bottom:1px solid var(--line);
  align-items:center;
}
.how-row:last-child{ border-bottom:none; }
.how-row:nth-child(even){ direction: rtl; }
.how-row:nth-child(even) > *{ direction: ltr; }
.how-num{
  font-family:'Anton', sans-serif; font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height:0.85; color: transparent;
  -webkit-text-stroke: 1.5px rgba(237,234,226,0.18);
}
.how-copy h3{ font-size: clamp(1.5rem, 2.6vw, 2.3rem); margin-bottom:0.7rem; }
.how-copy p{ color: var(--text-dim); max-width: 56ch; line-height:1.65; }

/* ---------- STATS ---------- */
.stats-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat{ background: var(--bg); padding: 2.6rem 1.6rem; text-align:center; }
.stat .num{ font-family:'Anton', sans-serif; font-size: clamp(2.4rem, 5vw, 4rem); }
.stat .label{ margin-top:0.6rem; font-size:0.76rem; letter-spacing:0.08em; color:var(--text-dim); font-weight:600; text-transform:uppercase; }
@media (max-width: 760px){ .stats-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- NEWSLETTER CTA ---------- */
.cta{
  position:relative;
  background: linear-gradient(180deg, #0d0d10, #08080a);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.cta::before{
  content:''; position:absolute; inset:-40% -10%;
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(226,38,61,0.14), transparent 65%);
}
.cta-inner{ position:relative; text-align:center; max-width: 780px; margin-inline:auto; }
.cta h2{ font-size: clamp(2.4rem, 7vw, 5.5rem); margin-bottom: 1.2rem; }
.cta p{ color: var(--text-dim); max-width: 46ch; margin-inline:auto; margin-bottom: 2.4rem; }

.cta-form{
  display:flex; gap: 0.7rem; max-width: 480px; margin-inline:auto;
  border: 1px solid var(--line); padding: 0.4rem; border-radius: 999px;
  background: var(--surface);
}
.cta-form input{
  flex:1; background:none; border:none; outline:none;
  color: var(--text); font-family:'Inter'; padding: 0.7rem 1.1rem; font-size:0.9rem;
}
.cta-form input::placeholder{ color: var(--text-dimmer); }
.cta-form button{
  background: var(--accent); color:#fff; border:none; border-radius:999px;
  padding: 0.85rem 1.5rem; font-weight:700; font-size:0.85rem; letter-spacing:0.02em;
  cursor:pointer; transition: background .3s, transform .3s var(--ease-out);
  white-space:nowrap;
}
.cta-form button:hover{ background:#ff3450; transform: translateY(-2px); }

.cta-note{ margin-top:1.1rem; font-size:0.72rem; color: var(--text-dimmer); }

/* ---------- WHATSAPP CHANNEL CTA ---------- */
.whatsapp-cta-inner{
  display:flex; align-items:center; justify-content:center; gap: 3rem;
  max-width: 900px; text-align:left; flex-wrap: wrap;
}
.whatsapp-cta-text{ flex: 1 1 320px; min-width: 260px; }
.whatsapp-cta-text p{ margin-inline: 0; }
.whatsapp-cta-btn{
  display:inline-flex; align-items:center; gap:0.5rem; margin-top: 0.4rem;
  background: var(--accent); color:#fff; border:none; border-radius:999px;
  padding: 0.85rem 1.6rem; font-weight:700; font-size:0.85rem; letter-spacing:0.02em;
  text-decoration:none; transition: background .3s, transform .3s var(--ease-out);
}
.whatsapp-cta-btn:hover{ background:#ff3450; transform: translateY(-2px); }
.whatsapp-cta-qr{
  flex: 0 0 auto; background:#fff; padding: 0.9rem; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35); line-height:0;
}
.whatsapp-cta-qr img{ display:block; width:160px; height:160px; }
@media (max-width: 720px){
  .whatsapp-cta-inner{ flex-direction:column; text-align:center; }
  .whatsapp-cta-text p{ margin-inline:auto; }
}

.socials{ display:flex; gap:1.4rem; justify-content:center; margin-top: 2.6rem; }

.contact-form{
  display:flex; flex-direction:column; gap:0.8rem; max-width: 560px; margin-inline:auto;
  background:none; border:none; padding:0;
}
.contact-form input, .contact-form textarea{
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font-family:'Inter'; padding: 0.85rem 1.1rem; font-size:0.9rem;
  outline:none; resize:vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--text-dimmer); }
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--accent-2); }
.contact-form button{
  background: var(--accent); color:#fff; border:none; border-radius:999px;
  padding: 0.9rem 1.5rem; font-weight:700; font-size:0.85rem; letter-spacing:0.02em;
  cursor:pointer; transition: background .3s, transform .3s var(--ease-out);
}
.contact-form button:hover{ background:#ff3450; transform: translateY(-2px); }
.contact-form button:disabled{ opacity:0.6; cursor:default; transform:none; }
.contact-feedback{ margin-top:1.1rem; font-size:0.85rem; }
.contact-feedback.ok{ color: var(--accent-2); }
.contact-feedback.error{ color: var(--accent-text); }
.socials a, .social-sidebar a, .footer-socials a{
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim); transition: all .3s var(--ease-out);
  background: var(--bg);
}
.socials a:hover, .social-sidebar a:hover, .footer-socials a:hover{ color:#fff; border-color: var(--accent-2); transform: translateY(-3px); }
.socials svg, .social-sidebar svg, .footer-socials svg{ width:17px; height:17px; }

/* Barra fixa de redes sociais na lateral -- so aparece quando pelo menos
   uma rede tem link configurado (ver social-icons.js: icone sem link
   configurado e removido do DOM, nunca fica um href morto "#"); some em
   telas estreitas pra nao competir com o conteudo no mobile (o rodape ja
   cobre esse caso ali). */
.social-sidebar{
  position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 0.8rem; z-index: 45;
}
.social-sidebar a{ width:38px; height:38px; }
.social-sidebar svg{ width:15px; height:15px; }
@media (max-width: 900px){ .social-sidebar{ display:none; } }

.footer-socials{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.footer-socials a{ width:36px; height:36px; }
.footer-socials svg{ width:15px; height:15px; }

/* ---------- FOOTER ---------- */
footer{ padding-block: 3.5rem 2.2rem; border-top:1px solid var(--line); }
.footer-top{
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem;
  padding-bottom: 2.6rem; margin-bottom: 2rem; border-bottom:1px solid var(--line);
}
.footer-brand p{ color: var(--text-dim); font-size:0.85rem; margin-top:1rem; max-width:32ch; line-height:1.6; }
.footer-col h3{ font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-dimmer); margin-bottom:1.1rem; }
.footer-col a{ display:block; font-size:0.9rem; color: var(--text-dim); margin-bottom:0.75rem; transition: color .3s; }
.footer-col a:hover{ color: var(--text); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:0.75rem; color: var(--text-dimmer);
}
.footer-hubs{ display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; padding-top:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.footer-hubs a{ font-size:0.9rem; color: var(--text-dim); transition: color .3s; }
.footer-hubs a:hover{ color: var(--text); }
.footer-bottom a{ color: var(--text-dim); text-decoration:underline; text-decoration-color: var(--line); }
.footer-bottom a:hover{ color: var(--text); text-decoration-color: currentColor; }
@media (max-width: 760px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-top{ grid-template-columns: 1fr; } }

/* ---------- RESPONSIVE NAV / HERO ---------- */
@media (max-width: 860px){
  nav.links{ display:none; }
  .burger{ display:block; }
  .btn-live{ display:none; }
  .destaque-grid{ grid-template-columns: 1fr; }
  .how-row{ grid-template-columns: 1fr; }
  .how-row:nth-child(even){ direction: ltr; }
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius:5px; }

/* ---------- PAGINAS DE ARTIGO/EVENTO (fase 15 — SEO/paginas individuais) ---------- */
.article-page{ padding-top: 8rem; padding-bottom: 5rem; max-width: 760px; }
.article-back{ display:inline-flex; align-items:center; gap:0.5rem; color: var(--text-dim); font-size:0.85rem; font-weight:600; margin-bottom: 2rem; }
.article-back:hover{ color: var(--text); }
.breadcrumbs{ font-size:0.8rem; color: var(--text-dimmer); margin-bottom: 1rem; }
.breadcrumbs a{ color: var(--text-dim); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--text); text-decoration:underline; }
.article-header .eyebrow{ margin-bottom: 1rem; }
.article-title{ font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1.2rem; }
.article-meta{ display:flex; gap:1.2rem; flex-wrap:wrap; color: var(--text-dimmer); font-size:0.82rem; font-weight:600; margin-bottom: 2.4rem; }
.article-image{ width:100%; border-radius: 4px; margin-bottom: 2.4rem; border: 1px solid var(--line); }
.article-body{ color: var(--text-dim); font-size:1.02rem; line-height:1.8; white-space: pre-wrap; }
.article-body p{ margin-bottom: 1.4rem; }
.article-body a{ color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.related-list{ list-style:none; padding:0; margin: 0 0 2rem; }
.related-list li{ padding: 0.6rem 0; border-bottom: 1px solid var(--line); color: var(--text-dimmer); font-size:0.92rem; }
.related-list a{ color: var(--text); text-decoration:none; font-weight:600; }
.related-list a:hover{ text-decoration:underline; }
.article-empty{ color: var(--text-dimmer); padding: 6rem 0; text-align:center; }

.event-meta-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0; }
.event-meta-item{ background: var(--surface); border:1px solid var(--line); border-radius:3px; padding: 1.2rem; }
.event-meta-item .label{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-dimmer); margin-bottom:0.4rem; }
.event-meta-item .value{ font-size:1rem; font-weight:700; }
.event-bands{ display:flex; flex-wrap:wrap; gap:0.5rem; margin: 1.5rem 0; }
.event-bands a{ font-size:0.8rem; font-weight:700; color: var(--accent-2); border:1px solid var(--line); border-radius:999px; padding:0.4rem 0.9rem; }
.event-tickets{ display:inline-flex; margin-top:1rem; background: var(--accent); color:#fff; font-weight:700; font-size:0.85rem; padding:0.85rem 1.6rem; border-radius:999px; }

/* Sprint 3C -- agenda publica (/eventos). Mesmos tokens das regras acima,
   sem framework/JS novo -- filtros sao um <form method="get"> comum. */
.event-filters{ display:flex; flex-wrap:wrap; gap:0.6rem; margin: 1.5rem 0 1rem; }
.event-filters select{ background: var(--surface); color: var(--text); border:1px solid var(--line); border-radius: var(--radius); padding:0.5rem 0.8rem; font-size:0.85rem; }
.event-filters-toggle{ display:flex; gap:1rem; margin-bottom:2rem; }
.event-filters-toggle a{ color: var(--text-dim); font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding-bottom:0.3rem; border-bottom:2px solid transparent; }
.event-filters-toggle a.active{ color: var(--text); border-bottom-color: var(--accent); }
.event-index-list li{ display:flex; flex-direction:column; gap:0.3rem; }
.event-index-list .article-meta{ margin-bottom:0; }

/* ---------- MENU DO TOPO (paginas internas, pageShell.renderTopNav) ---------- */
.site-nav{ gap: 1.4rem; flex-wrap: wrap; }
nav.links a.active{ color: var(--text); }
nav.links a.active::after{ right:0; }
.site-burger{ background:none; border:0; padding:0; position:relative; z-index:100; }
#siteMobileMenu a{ font-size: 1.7rem; }
#siteMobileMenu a.active{ color: var(--text); }
@media (max-width: 1040px){
  .site-nav{ display:none; }
  .site-burger{ display:block; }
}

/* ---------- PAGINA DO BAR / CASA DE SHOWS (venuePage.js) ---------- */
.venue-page{ display:flex; flex-direction:column; gap: 2.2rem; margin-top: 1rem; }
.venue-hero{ display:flex; gap: 2rem; align-items:center; justify-content:space-between; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.venue-hero .article-title{ margin: .5rem 0 .6rem; }
.venue-hero-address{ color: var(--text-dim); margin: 0; font-size: 1rem; }
.venue-hero-img{ width: 140px; height: 140px; object-fit: contain; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); padding: 8px; flex-shrink: 0; }
.venue-grid{ display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.4rem; align-items:start; }
.venue-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem 1.5rem; }
.venue-card h2, .venue-section h2{ font-family:'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.35rem; margin: 0 0 1rem; }
.venue-card h3{ font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 1.6rem 0 .7rem; }
.venue-about p{ line-height: 1.7; margin: 0; }
.venue-facts dl{ display:grid; grid-template-columns: 1fr; gap: .15rem; margin: 0; }
.venue-facts dt{ font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dimmer); margin-top: .75rem; }
.venue-facts dt:first-child{ margin-top: 0; }
.venue-facts dd{ margin: 0; line-height: 1.5; }
.venue-facts dd a{ color: var(--accent-2); }
.venue-actions{ display:flex; flex-wrap:wrap; gap: .6rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.venue-btn{ display:inline-block; font-weight: 700; font-size: .85rem; padding: .6rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); color: var(--text); background: var(--surface-2); }
.venue-btn:hover{ border-color: var(--text-dim); }
.venue-btn.primary{ background: var(--accent); border-color: var(--accent); color: #fff; }
.venue-pills{ display:flex; flex-wrap:wrap; gap: .5rem; }
.venue-pill{ display:inline-block; font-size: .85rem; font-weight: 600; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.venue-pill:hover{ border-color: var(--accent-2); color: var(--accent-2); }
.venue-events{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: .7rem; }
.venue-event{ display:flex; gap: 1rem; align-items:center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.venue-event-date{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width: 62px; padding: .4rem .3rem; border-radius: 8px; background: var(--accent); color:#fff; line-height: 1.05; text-transform: uppercase; }
.venue-event-date .d{ font-family:'Anton', sans-serif; font-size: 1.6rem; }
.venue-event-date .m{ font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.venue-event-date .w{ font-size: .65rem; opacity: .85; }
.venue-event-title{ font-weight: 700; font-size: 1.05rem; color: var(--text); }
.venue-event-title:hover{ color: var(--accent-2); }
.venue-event-meta{ color: var(--text-dim); font-size: .88rem; margin-top: .25rem; }
.venue-event-meta a{ color: var(--accent-2); }
@media (max-width: 820px){
  .venue-grid{ grid-template-columns: 1fr; }
  .venue-hero{ flex-direction: column-reverse; align-items:flex-start; }
  .venue-hero-img{ width: 96px; height: 96px; }
}
.event-actions{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
.event-whatsapp{ background:#1f9d55; }

/* ---------- PÁGINA DE BANDA / ARTISTA (bandPage.js / artistPage.js) ---------- */
/* Hero + grid (Sobre + Informações) + seções, espelhando a página do bar. */
.band-page{ display:flex; flex-direction:column; gap: 2.2rem; margin-top: 1rem; }
.band-hero{ display:flex; gap: 2rem; align-items:center; justify-content:space-between; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.band-hero .article-title{ margin: .5rem 0 0; }
.band-hero-img{ width: 160px; height: 160px; object-fit: cover; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); flex-shrink: 0; }
.band-grid{ display:grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.4rem; align-items:start; }
.band-card{ background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem 1.5rem; }
.band-card h2, .band-section h2{ font-family:'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.35rem; margin: 0 0 1rem; }
.band-card h3{ font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 1.6rem 0 .7rem; }
.band-bio{ line-height: 1.75; white-space: pre-line; }
.band-facts dl{ display:grid; grid-template-columns: 1fr; gap: .15rem; margin: 0; }
.band-facts dt{ font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dimmer); margin-top: .75rem; }
.band-facts dt:first-child{ margin-top: 0; }
.band-facts dd{ margin: 0; line-height: 1.5; }
.band-facts dd a{ color: var(--accent-2); }
.band-pills{ display:flex; flex-wrap:wrap; gap: .5rem; }
.band-pill{ display:inline-block; font-size: .85rem; font-weight: 600; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.band-pill:hover{ border-color: var(--accent-2); color: var(--accent-2); }
.band-pill.is-tag{ color: var(--text-dim); }
.band-section{ border-top: 1px solid var(--line); padding-top: 1.6rem; }
.band-section:first-of-type{ border-top: 0; padding-top: 0; }
/* a discografia tras o proprio <h2>; alinha com os demais titulos de secao */
.band-section > h2:first-child{ margin-top: 0; }
@media (max-width: 820px){
  .band-grid{ grid-template-columns: 1fr; }
  .band-hero{ flex-direction: column-reverse; align-items:flex-start; gap: 1.2rem; }
  .band-hero-img{ width: 110px; height: 110px; }
}