/* =========================================================
   SENSACIONAL — CSS GERAL (NOVO)
   Objetivo: visual mais agradável, consistente e limpo
   Compatível com seu HTML atual (topbar, brandMini, hero, docs, searchOverlay)
========================================================= */

:root{
  /* Base */
  --bg0:#07070b;
  --bg1:#090a12;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --card: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.10);

  --text:#eef0ff;
  --muted:#a7acc7;

  /* Brand accents (menos neon) */
  --brand1:#ff2aa3;
  --brand2:#2cff65;
  --brand3:#7a4dff;

  --radius:18px;
  --radius2:14px;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow2: 0 10px 28px rgba(0,0,0,.28);

  --container:1140px;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  min-height:100%;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  overflow-x:hidden;

  /* o body não carrega mais o fundo */
  background: transparent;
  position: relative;
}

/* FUNDO CONTÍNUO (sempre cobre a viewport toda) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
    radial-gradient(1400px 900px at 18% 10%, rgba(122,77,255,.12), transparent 62%),
    radial-gradient(1100px 800px at 82% 12%, rgba(255,42,163,.09), transparent 64%),
    radial-gradient(1400px 1000px at 50% 92%, rgba(44,255,101,.07), transparent 68%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, #060611 100%);
}
.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

/* Acessibilidade */
.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 12px; border-radius:12px;
  background:#000; border:1px solid var(--line);
  z-index:9999;
}

/* =========================================================
   HEADER / NAV (topbar)
========================================================= */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(12px);
  background: linear-gradient(to bottom, rgba(7,7,11,.82), rgba(7,7,11,.42));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:14px;
}

/* Brand mini: logo 80x80 */
.brandMini{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}
.brandMini img{
  width:80px;
  height:80px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.brandMini .name{
  font-weight: 950;
  letter-spacing: .6px;
  line-height: 1.05;
}

/* Menu */
.menu{
  display:flex;
  align-items:center;
  gap:10px;
}

.menu a{
  padding:10px 12px;
  border-radius: 12px;
  color: var(--muted);
  border:1px solid transparent;
  background: transparent;
  transition: .18s ease;
}
.menu a:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* Botões ícone (buscar) */
.iconBtn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition:.18s ease;
}
.iconBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
}

/* Burger */
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}
.burger:hover{ background: rgba(255,255,255,.10); }

/* Drawer */
.drawer{
  display:none;
  border-top: 1px solid rgba(255,255,255,.08);
  padding:10px 0 14px 0;
}
.drawer a{
  display:block;
  padding:12px 10px;
  border-radius: 12px;
  color: var(--muted);
  border:1px solid transparent;
  transition:.18s ease;
}
.drawer a:hover{
  color: var(--text);
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  padding: 48px 0 26px 0;
}

.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items:center;
}

.heroLeft h1{
  margin:0 0 10px 0;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -.6px;
  line-height:1.04;
}

.subtitle{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: .9px;
  opacity: .95;
}

.desc{
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 60ch;
}

/* Logo da direita (não gigante) */
.heroRight{
  display:flex;
  align-items:center;
  justify-content:center;
}
.heroRight img{
  width: min(280px, 78%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  opacity: .98;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45));
}

/* =========================================================
   TÍTULOS / SEÇÕES
========================================================= */
.sectionTitle{
  margin: 26px 0 14px 0;
  font-weight: 950;
  letter-spacing: 1px;
  opacity:.95;
}

/* =========================================================
   DOCUMENTAÇÃO (3 colunas: ATA / ESTATUTO / EVENTOS)
========================================================= */
.docs{
  padding-bottom: 14px;
}

.docsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.docCard{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.docCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}

.docShot{
  width:100%;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,.25);
  overflow:hidden;
}

.docShot img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.05);
  transform: scale(1.01);
}

.docLinks{
  padding: 14px;
}

.docLinks a{
  display:block;
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  text-align:center;
  font-weight: 950;
  letter-spacing: .4px;
  transition: .18s ease;
}

.docLinks a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

/* =========================================================
   CTA “Sobre”
========================================================= */
.ctaSobre{
  margin: 22px 0 10px;
  display:flex;
  justify-content:flex-start;
}

.btnPrimary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(122,77,255,.18), rgba(255,42,163,.14)),
    rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 950;
  letter-spacing:.3px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition:.18s ease;
}
.btnPrimary:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
  background:
    linear-gradient(135deg, rgba(122,77,255,.22), rgba(255,42,163,.18)),
    rgba(255,255,255,.06);
}

/* =========================================================
   CONTATO / FOOTER META
========================================================= */
.contact{
  padding: 18px 0 10px 0;
}

.mail{
  color: var(--muted);
  font-size: 14px;
}
.mail a{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .95;
}
.mail a:hover{ opacity: 1; }

.footerMeta{
  margin-top: 16px;
  padding: 18px 0 26px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

/* =========================================================
   SEARCH OVERLAY
========================================================= */
.searchOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  z-index: 90;
}

.searchOverlay[aria-hidden="false"]{
  display:flex;
}

.searchBox{
  width: min(760px, 100%);
  margin-top: 80px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(18,20,37,.92), rgba(8,8,12,.92));
  box-shadow: var(--shadow);
  overflow:hidden;
}

.searchRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

#searchInput{
  width:100%;
  height:44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

#searchInput::placeholder{
  color: rgba(167,172,199,.75);
}

.searchResults{
  padding: 12px;
  max-height: min(56vh, 520px);
  overflow:auto;
}

.searchResults a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: .16s ease;
  margin-bottom: 10px;
  color: var(--text);
}
.searchResults a:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* =========================================================
   RESPONSIVO
========================================================= */
@media (max-width: 920px){
  .heroGrid{ grid-template-columns: 1fr; }
  .heroRight{ justify-content:flex-start; }
  .heroRight img{ width: 210px; }
  .docsGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .menu{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .drawer{ display:block; }

  /* Logo do topo ainda 80x80, mas com menos espaço */
  .brandMini{ min-width: auto; }
  .brandMini .name{ font-size: 14px; }
}

@media (max-width: 560px){
  .container{ width: min(var(--container), calc(100% - 28px)); }
  .docsGrid{ grid-template-columns: 1fr; }
  .searchBox{ margin-top: 64px; }
}

.siteFooter{
  margin-top: 28px;
  padding: 24px 0 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

.footerGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  padding-bottom: 16px;
}

.footerCol{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 16px;
}

.footerBrand{
  font-weight: 950;
  letter-spacing: .8px;
  font-size: 14px;
  margin-bottom: 10px;
}

.footerDesc{
  margin: 0 0 14px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.footerLabel{
  display:block;
  color: rgba(167,172,199,.9);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.footerText{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.footerContact{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.footerLink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width: fit-content;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 850;
  font-size: 13px;
  transition: .18s ease;
}

.footerLink:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.footerBottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 12px;
}

/* Responsivo */
@media (max-width: 920px){
  .footerGrid{ grid-template-columns: 1fr; }
}
.siteFooter{
  position: relative;
}

.siteFooter::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.15),
    transparent
  );
}
/* Espaçamento padrão antes do footer */
main > footer.siteFooter{
  margin-top: 80px;
}
.eventSingle{
  margin-bottom: 40px;
}
/* =========================================================
   ADIÇÕES — Shows, nav CTA, preview home
========================================================= */
.btnCTA{
  padding:9px 14px;border-radius:12px;
  border:1px solid rgba(255,42,163,.35);
  background:linear-gradient(135deg,rgba(122,77,255,.18),rgba(255,42,163,.14));
  color:var(--text);font-weight:900;font-size:13px;letter-spacing:.3px;
  transition:.18s ease;white-space:nowrap;
}
.btnCTA:hover,.btnCTA.active{
  border-color:rgba(255,42,163,.55);
  background:linear-gradient(135deg,rgba(122,77,255,.26),rgba(255,42,163,.22));
}
.drawer a.highlight{color:#ff2aa3;border-color:rgba(255,42,163,.2);background:rgba(255,42,163,.06)}
.menu a.active{color:var(--text)}
.heroCTAs{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btnSecondary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:var(--text);font-weight:900;
  letter-spacing:.3px;transition:.18s ease;
}
.btnSecondary:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.showsPreview{margin-bottom:32px}
.showsPreviewGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.previewCard{
  border-radius:var(--radius);border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  overflow:hidden;transition:.16s ease;text-decoration:none;display:block;
}
.previewCard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.20);box-shadow:0 14px 36px rgba(0,0,0,.3)}
.previewImg{width:100%;height:140px;object-fit:cover;display:block}
.previewImgPlaceholder{
  width:100%;height:140px;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:linear-gradient(135deg,rgba(122,77,255,.16),rgba(255,42,163,.10))
}
.previewBody{padding:12px}
.previewDate{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#ff2aa3;margin-bottom:4px}
.previewTitle{font-size:14px;font-weight:900;margin-bottom:3px;line-height:1.2}
.previewBands{font-size:11px;color:var(--muted);margin-bottom:3px}
.previewLocal{font-size:11px;color:rgba(167,172,199,.7)}
.previewLoader,.previewEmpty{grid-column:1/-1;font-size:14px;color:var(--muted);padding:24px 0}
.previewEmpty a{color:var(--text);text-decoration:underline}
.showsPreviewFooter{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:760px){
  .heroCTAs{flex-direction:column}
  .heroCTAs .btnPrimary,.heroCTAs .btnSecondary{text-align:center}
}

/* =========================================================
   PREVIEW CARDS HOME — estilo flyer Instagram
========================================================= */
.showsPreviewGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:18px;
}

.previewCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:#0d0e1a;
  overflow:hidden;
  transition:.18s ease;
  text-decoration:none;
  display:flex;flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.previewCard:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 20px 44px rgba(0,0,0,.45);
}

/* Imagem quadrada */
.previewImgWrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(122,77,255,.22),rgba(255,42,163,.16));
  flex-shrink:0;
}
.previewImg{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .4s ease;
}
.previewCard:hover .previewImg{transform:scale(1.05)}
.previewImgPlaceholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:48px;
}

/* Badge data */
.previewDateBadge{
  position:absolute;bottom:10px;left:10px;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:5px 9px;
  font-size:10px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:#ff2aa3;
  line-height:1.2;
}

/* Badge preço */
.previewPriceBadge{
  position:absolute;bottom:10px;right:10px;
  background:rgba(44,255,101,.15);
  backdrop-filter:blur(8px);
  border:1px solid rgba(44,255,101,.28);
  border-radius:8px;
  padding:5px 9px;
  font-size:11px;font-weight:900;color:#2cff65;
}

.previewBody{padding:12px 14px 14px}
.previewTitle{font-size:14px;font-weight:900;margin:0 0 4px;line-height:1.2;color:#eef0ff}
.previewBands{font-size:11px;color:rgba(167,172,199,.85);margin:0 0 3px}
.previewLocal{font-size:11px;color:rgba(167,172,199,.6);margin:0}

.previewLoader,.previewEmpty{
  grid-column:1/-1;font-size:14px;color:var(--muted);padding:24px 0;text-align:center;
}
.previewEmpty a{color:var(--text);text-decoration:underline}

@media(max-width:900px){.showsPreviewGrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.showsPreviewGrid{grid-template-columns:1fr}}