/* ==========================================================================
   Esse Forró é Nosso — style.css
   Identidade "Brasa Viva". Mobile-first: estilos base = mobile,
   breakpoints (min-width) adicionam/ajustam para tablet e desktop.
   Sem estilos inline nas páginas — mantém o CSP em style-src 'self'.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dark:    #0d0501;
  --panel:   #1a0a02;
  --panel-2: #120600;
  --border:  #2e1404;
  --amber:   #d97010;
  --gold:    #f5c020;
  --red:     #c01818;
  --laranja: #f09020;
  --white:   #ffffff;
  --cream:   #fff0d0;
  --muted:   #a07040;

  --font-display: 'Big Shoulders', 'Segoe UI', Arial, sans-serif;
  --font-sub:     'Work Sans', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Jura', 'Segoe UI', Arial, sans-serif;

  --header-h: 92px; /* estimativa da barra (logo + menu numa linha só) só pra scroll-padding-top */
  --max-w: 1080px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

html, body {
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-body);
  min-height: 100vh;
}

/* Header agora é position:sticky (ver abaixo) — ocupa espaço normal no
   fluxo do documento, então o conteúdo não precisa de padding-top manual
   pra compensar (isso também evita o descompasso que deixava o menu sem
   fundo quando ele tinha mais de uma linha). */

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
}

/* Skip link — acessibilidade de teclado */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--gold); color: var(--dark);
  padding: 10px 16px; z-index: 200; font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Header / navegação
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13, 5, 1, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  position: relative;
  padding-top: 10px; padding-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: flex; align-items: center; flex-shrink: 0;
  text-decoration: none; color: var(--white);
}
.brand img { width: 64px; height: 64px; border-radius: 50%; }

.nav-toggle {
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; background: transparent;
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; width: 20px; margin: 0 auto;
  background: var(--gold); transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile (<760px): menu vira dropdown ancorado embaixo da barra logo+toggle */
.site-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.site-nav.is-open { max-height: 480px; }
.site-nav ul { list-style: none; display: flex; flex-direction: column; padding: 8px 16px 16px; }
.site-nav a {
  display: block; padding: 14px 6px;
  text-decoration: none; font-weight: 700; letter-spacing: .03em;
  font-size: .95rem; color: var(--cream);
  border-bottom: 1px solid var(--border);
}
.site-nav li:last-child a { border-bottom: none; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a.nav-cta { color: var(--dark); background: var(--gold); border-radius: 8px; text-align: center; margin-top: 6px; }

/* Desktop / tablet (>= 760px): logo e menu na mesma linha, barra baixa */
@media (min-width: 760px) {
  .site-header .container { justify-content: flex-start; gap: 24px; }
  .nav-toggle { display: none; }
  .site-nav {
    position: static; max-height: none; overflow: visible;
    background: transparent; border-bottom: none;
  }
  .site-nav ul { flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px; padding: 0; flex-wrap: wrap; }
  .site-nav a { border-bottom: none; padding: 8px 12px; font-size: .88rem; }
  .site-nav a.nav-cta { margin-top: 0; padding: 8px 16px; }
}

/* ==========================================================================
   Layout genérico de página
   ========================================================================== */
.page { padding: 24px 0 48px; }
.page-hero { text-align: center; padding: 8px 0 28px; }
.page-hero h1 {
  font-family: var(--font-display); font-size: 2.1rem; color: var(--gold);
  line-height: 1.05; letter-spacing: .01em;
}
.page-hero p { font-family: var(--font-sub); color: var(--cream); margin-top: 8px; font-size: .95rem; }

/* ==========================================================================
   Hero com carrossel de fotos (home)
   ========================================================================== */
.page-hero.hero-with-photos {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: 72px 20px 30px; margin: 0 0 4px; min-height: 300px;
  display: flex; align-items: flex-end; justify-content: center;
}
.hero-carousel { position: absolute; inset: 0; z-index: 0; }
.hero-carousel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: heroFade 18s infinite ease-in-out;
}
.hero-carousel img:nth-child(1) { animation-delay: 0s; }
.hero-carousel img:nth-child(2) { animation-delay: 6s; }
.hero-carousel img:nth-child(3) { animation-delay: 12s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  36%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel img { animation: none; opacity: 0; }
  .hero-carousel img:first-child { opacity: 1; }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(28,10,2,.25) 0%, rgba(28,10,2,.6) 60%, rgba(28,10,2,.94) 100%);
}
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-with-photos h1, .hero-with-photos p { text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* ==========================================================================
   Fotos inline nas seções (Sobre / Evento / Redes)
   ========================================================================== */
.section-with-photo { display: flex; flex-direction: column-reverse; gap: 16px; }
@media (min-width: 700px) {
  .section-with-photo { flex-direction: row; align-items: stretch; }
  .section-with-photo > .card { flex: 1 1 55%; }
  .section-with-photo > .inline-photo-wrap { flex: 1 1 45%; }
}
.inline-photo-wrap { border-radius: 14px; overflow: hidden; min-height: 200px; }
.inline-photo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 200px; }

.event-photo { border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.event-photo img { width: 100%; height: 220px; object-fit: cover; display: block; }

.socials-photo { border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.socials-photo img { width: 100%; height: 180px; object-fit: cover; display: block; }

.photo-grid-caption {
  font-family: var(--font-sub); font-size: .8rem; color: var(--cream);
  margin-bottom: 12px;
}

.section { margin: 0 auto 28px; max-width: 640px; }
.section-wide { margin: 0 auto 28px; max-width: var(--max-w); }

h2.section-title {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--amber);
  margin-bottom: 14px; letter-spacing: .01em;
}

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 22px 20px; margin-bottom: 16px;
}

.prose p { font-size: .95rem; line-height: 1.75; color: var(--cream); margin-bottom: 12px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--white); }

/* ==========================================================================
   CTAs / botões
   ========================================================================== */
.cta { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.btn {
  display: block; padding: 16px 20px; border-radius: 12px;
  text-align: center; text-decoration: none;
  font-family: var(--font-sub);
  font-size: 1rem; font-weight: 700; letter-spacing: .03em;
  transition: opacity .15s, transform .1s; border: none; cursor: pointer;
}
.btn:hover { opacity: .85; }
.btn:active { transform: scale(.99); }
.btn-pix    { background: var(--gold);  color: #1a0a02; }
.btn-sympla { background: var(--amber); color: #1a0a02; }
.btn-maps   { background: var(--panel); color: var(--cream); border: 1px solid var(--border); }
.btn-outline{ background: transparent; color: var(--gold); border: 1px solid var(--amber); }

@media (min-width: 560px) {
  .cta { flex-direction: row; flex-wrap: wrap; }
  .cta .btn { flex: 1 1 220px; }
}

/* ==========================================================================
   Módulo de EVENTO (home) — auto-contido, ver comentários no HTML
   ========================================================================== */
.event-module { margin-bottom: 28px; }
.event-badge {
  display: inline-block; background: var(--red); color: var(--white);
  font-family: var(--font-sub); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.event-flyer { text-align: center; margin-bottom: 18px; }
.event-flyer img {
  width: 100%; max-width: 420px; margin: 0 auto;
  border-radius: 14px; box-shadow: 0 6px 32px rgba(217,112,16,.35);
}
.event-placeholder {
  border: 1px dashed var(--amber); border-radius: 14px;
  padding: 34px 20px; text-align: center; margin-bottom: 18px;
  background: linear-gradient(160deg, rgba(217,112,16,.12), rgba(0,0,0,0));
}
.event-placeholder .wfc {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--gold);
  letter-spacing: .02em;
}
.event-placeholder p { font-size: .88rem; color: var(--cream); margin-top: 8px; }

.info-card h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); margin-bottom: 2px; }
.tagline { font-size: .88rem; color: var(--cream); margin-bottom: 16px; font-family: var(--font-sub); }
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.row { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.row:last-child { margin-bottom: 0; }
.label {
  font-family: var(--font-sub);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: var(--amber); min-width: 78px; padding-top: 3px; flex-shrink: 0;
}
.val { font-size: .92rem; line-height: 1.55; color: var(--cream); }
.val strong { color: var(--white); }
.tbd { color: var(--cream); font-style: italic; }

/* ==========================================================================
   Embeds (Spotify / YouTube) — responsivos e acessíveis
   ========================================================================== */
.embed-wrap {
  position: relative; width: 100%; border-radius: 14px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border);
}
.embed-wrap iframe {
  display: block; width: 100%; border: 0;
}
.embed-wrap.ratio-16x9 { aspect-ratio: 16 / 9; }
.embed-wrap.ratio-16x9 iframe { width: 100%; height: 100%; }
.embed-spotify iframe { height: 352px; }

.embed-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .embed-grid.grid-2 { grid-template-columns: 1fr 1fr; }
}

.embed-caption { font-size: .82rem; color: var(--cream); margin-top: 8px; }

/* ==========================================================================
   Listas de itens individuais (episódios de rádio, shows, playlists)
   ========================================================================== */
.item-list { display: flex; flex-direction: column; gap: 16px; }

.item-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.item-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.item-number {
  font-family: var(--font-display); font-size: 1rem; color: var(--amber);
  flex-shrink: 0;
}
.item-title { font-family: var(--font-sub); font-size: .95rem; font-weight: 700; color: var(--white); }
.item-meta { font-size: .78rem; color: var(--cream); }

.item-card .embed-wrap { border: none; background: transparent; }
.item-card .embed-episode iframe { height: 152px; }

.show-grid, .playlist-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 700px) {
  .show-grid, .playlist-grid { grid-template-columns: 1fr 1fr; }
}

.show-card, .playlist-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.show-card-title, .playlist-card-title {
  font-family: var(--font-sub); font-size: .92rem; font-weight: 700; color: var(--white);
  line-height: 1.35;
}
.playlist-count {
  display: inline-block; font-family: var(--font-sub); font-size: .68rem;
  font-weight: 700; letter-spacing: .06em; color: var(--dark);
  background: var(--gold); border-radius: 999px; padding: 3px 10px;
  align-self: flex-start;
}

.section-note {
  font-size: .85rem; color: var(--cream); margin: -6px 0 18px; line-height: 1.6;
}

.subsection-title {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--laranja);
  margin: 32px 0 14px; letter-spacing: .01em;
}

/* ==========================================================================
   Socials
   ========================================================================== */
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.social-link {
  padding: 9px 14px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--cream); text-decoration: none;
  font-family: var(--font-sub);
  font-size: .82rem; font-weight: 600; transition: border-color .15s;
}
.social-link:hover, .social-link:focus-visible { border-color: var(--amber); }

/* ==========================================================================
   Grid de fotos (placeholder — ver página Fotos)
   ========================================================================== */
.photo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
@media (min-width: 560px)  { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-grid a { border-radius: 10px; overflow: hidden; aspect-ratio: 1 / 1; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.site-footer {
  background: var(--gold); color: #1a0a02;
  text-align: center; padding: 22px 16px;
  font-family: var(--font-sub);
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
}
footer.site-footer a { text-decoration: none; }
footer.site-footer .foot-links { margin-top: 8px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
footer.site-footer .foot-disclaimer {
  margin-top: 14px; font-weight: 500; letter-spacing: normal;
  font-size: .7rem; opacity: .75; max-width: 480px; margin-left: auto; margin-right: auto;
}

/* ==========================================================================
   Utilitários
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

@media (min-width: 900px) {
  .page-hero h1 { font-size: 2.6rem; }
}

/* ==========================================================================
   ============================================================================
   HOME V2 — novo design (fase 1, só a home). Escopado em body.home-v2 para
   não afetar radio.html / shows.html / playlists.html, que continuam usando
   as regras acima sem nenhuma mudança. Inspirado em soraeats.com: seções
   claras (creme) alternando com blocos escuros de destaque (hero, imersão,
   rodapé), rótulos pequenos em versalete, fotografia em primeiro plano.
   ============================================================================
   ========================================================================== */
body.home-v2 {
  --v2-cream:      #fbf3e7;
  --v2-cream-alt:  #f1e4ce;
  --v2-ink:        #2b1608;
  --v2-ink-soft:   #6b5138;
  --v2-line-light: rgba(43, 22, 8, .14);
  --v2-dark:       var(--dark);
  --v2-panel:      var(--panel);
  --v2-line-dark:  rgba(255, 240, 208, .16);
  background: var(--v2-cream);
  /* Home v2 usa só 2 famílias (Big Shoulders pros títulos, Work Sans pro
     resto) — Jura (--font-body no tema escuro original) ficava fino/pouco
     legível nos blocos claros, então aqui --font-body vira um alias de
     --font-sub em vez de herdar a Jura do :root. */
  --font-body: var(--font-sub);
}

/* Barra de anúncio no topo (mirrors a faixa dourada do site de referência).
   Fica no fluxo normal (rola com a página) — só o header abaixo dela é que
   gruda no topo ao rolar, isso evita ter que "adivinhar" a altura da barra
   em px pra encaixar o header certinho embaixo dela. */
.v2-announce {
  background: var(--gold); color: var(--v2-ink, #2b1608);
  font-family: var(--font-sub); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
  padding: 9px 16px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; gap: 6px; flex-wrap: wrap;
}
.v2-announce a { color: inherit; text-decoration: underline; white-space: nowrap; }
body.home-v2 .site-header { background: rgba(13, 5, 1, .98); }
/* Header (logo + menu, um embaixo do outro) já é position:sticky e altura
   automática pra tudo (ver regras base de .site-header/.site-nav) — o menu
   sempre fica dentro do mesmo fundo marrom da logo, em vez de rolar por
   cima do conteúdo da página com fundo transparente. */

/* ---- Hero (escuro, carrossel de fotos, pronto para vídeo de fundo) ---- */
.v2-hero {
  position: relative; overflow: hidden;
  min-height: 560px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--v2-dark);
}
.v2-hero-media { position: absolute; inset: 0; z-index: 0; }
.v2-hero-media img, .v2-hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: v2HeroFade 40s infinite ease-in-out;
}
.v2-hero-media video { opacity: 1; animation: none; }
/* 8 fotos, 5s de intervalo entre cada uma — nenhuma foto repete antes de
   40s (folga acima do mínimo de 30s pedido). */
.v2-hero-media img:nth-child(1) { animation-delay: 0s; }
.v2-hero-media img:nth-child(2) { animation-delay: 5s; }
.v2-hero-media img:nth-child(3) { animation-delay: 10s; }
.v2-hero-media img:nth-child(4) { animation-delay: 15s; }
.v2-hero-media img:nth-child(5) { animation-delay: 20s; }
.v2-hero-media img:nth-child(6) { animation-delay: 25s; }
.v2-hero-media img:nth-child(7) { animation-delay: 30s; }
.v2-hero-media img:nth-child(8) { animation-delay: 35s; }
@keyframes v2HeroFade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero-media img { animation: none; opacity: 0; }
  .v2-hero-media img:first-child { opacity: 1; }
}
.v2-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,5,1,.35) 0%, rgba(13,5,1,.55) 45%, rgba(13,5,1,.96) 100%);
}
.v2-hero-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto; width: 100%;
  padding: 140px 20px 30px; text-align: center;
}
.v2-kicker {
  display: inline-block; font-family: var(--font-sub); font-size: .74rem;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.v2-hero-content h1 { display: block; }
.v2-hero-content h1 img {
  display: block; width: 180px; height: 180px; margin: 0 auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.v2-hero-content p.v2-sub {
  font-family: var(--font-sub); color: var(--cream);
  font-size: 1rem; margin-top: 14px; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.v2-hero-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.v2-btn {
  display: inline-block; padding: 15px 26px; border-radius: 10px;
  font-family: var(--font-sub); font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  text-align: center; transition: transform .15s, opacity .15s;
}
.v2-btn:active { transform: scale(.98); }
.v2-btn-solid { background: var(--amber); color: var(--white); }
.v2-btn-solid:hover, .v2-btn-solid:focus-visible { opacity: .9; }
.v2-btn-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.5); }
.v2-btn-outline:hover, .v2-btn-outline:focus-visible { border-color: var(--gold); color: var(--gold); }
.v2-btn-dark { background: var(--v2-ink); color: var(--v2-cream); }
.v2-btn-dark:hover, .v2-btn-dark:focus-visible { opacity: .85; }

.v2-hero-info {
  position: relative; z-index: 2;
  border-top: 1px solid var(--v2-line-dark);
  max-width: var(--max-w); margin: 26px auto 0; width: 100%;
  padding: 18px 20px 26px;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  text-align: center;
}
.v2-hero-info .v2-info-item {
  font-family: var(--font-sub); font-size: .78rem; color: var(--cream);
}
.v2-hero-info .v2-info-item strong { display: block; color: var(--gold); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.v2-hero-social { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-hero-social a {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--v2-line-dark); color: var(--cream);
  text-decoration: none; font-family: var(--font-sub); font-size: .72rem;
  font-weight: 600; letter-spacing: .02em;
}
.v2-hero-social a:hover, .v2-hero-social a:focus-visible { border-color: var(--gold); color: var(--gold); }

/* ---- Seções claras / escuras genéricas ---- */
.v2-section-light { background: var(--v2-cream); padding: 56px 0; }
.v2-section-alt { background: var(--v2-cream-alt); padding: 56px 0; }
.v2-section-dark { background: var(--v2-dark); padding: 56px 0; color: var(--cream); }
.v2-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.v2-kicker-light { color: var(--amber); }
.v2-heading {
  font-family: var(--font-display); font-weight: 800; color: var(--v2-ink);
  font-size: 1.7rem; line-height: 1.08; letter-spacing: .01em;
}
.v2-section-dark .v2-heading, .v2-heading-on-dark { color: var(--white); }
.v2-body-text { font-family: var(--font-body); color: var(--v2-ink-soft); font-size: .95rem; line-height: 1.75; }
.v2-section-dark .v2-body-text { color: var(--cream); }

/* ---- Linhas alternadas foto/texto (instrumentos, dentro da seção Sobre) ---- */
.v2-feature-rows { display: flex; flex-direction: column; gap: 40px; margin-bottom: 24px; }
.v2-feature-rows > .v2-kicker { margin-bottom: 4px; }
.v2-feature-row { display: flex; flex-direction: column; gap: 28px; }
.v2-feature-photo { order: 2; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(43,22,8,.18); }
.v2-feature-photo img { width: 100%; height: auto; display: block; aspect-ratio: 4/5; object-fit: cover; }
.v2-feature-text { order: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 18px; }
.v2-feature-text .v2-body-text { font-size: 1.02rem; }
@media (min-width: 700px) {
  .v2-feature-row { flex-direction: row; align-items: flex-start; gap: 44px; }
  .v2-feature-row .v2-feature-text { padding-top: 8px; padding-left: 0; padding-right: 0; order: 0; }
  .v2-feature-row .v2-feature-photo { order: 0; }
  .v2-feature-row > * { flex: 1 1 0; min-width: 0; }
  .v2-feature-row .v2-feature-photo { max-width: 340px; flex: 0 1 340px; }
  .v2-feature-row .v2-feature-text { flex: 1 1 420px; }
  .v2-feature-row-reverse { flex-direction: row-reverse; }
}

/* ---- Grid de cards (destaques) ---- */
.v2-card-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.v2-card {
  background: var(--v2-cream); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.v2-card-photo { aspect-ratio: 4/3; overflow: hidden; }
.v2-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v2-card-body h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--v2-ink); letter-spacing: .01em; }
.v2-card-body p { font-family: var(--font-body); font-size: .88rem; color: var(--v2-ink-soft); line-height: 1.6; flex: 1; }
.v2-card-link {
  align-self: flex-start; margin-top: 6px;
  font-family: var(--font-sub); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--amber); border-bottom: 1px solid var(--amber); padding-bottom: 2px;
}
.v2-card-link:hover, .v2-card-link:focus-visible { color: var(--red); border-color: var(--red); }

/* ---- Faixa de números ---- */
.v2-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 8px; }
.v2-stat { text-align: center; }
.v2-stat strong {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 2.2rem; color: var(--amber); line-height: 1;
}
.v2-stat span {
  display: block; margin-top: 6px; font-family: var(--font-sub);
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-ink-soft);
}

/* ---- Abas (pilares) ---- */
.v2-tabs-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 26px; }
.v2-tab-btn {
  font-family: var(--font-sub); font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--v2-line-light);
  background: transparent; color: var(--v2-ink-soft); cursor: pointer;
}
.v2-tab-btn[aria-selected="true"] { background: var(--amber); color: var(--white); border-color: var(--amber); }
.v2-tab-panel { display: none; }
.v2-tab-panel[data-active="true"] { display: block; }
.v2-tab-rows { display: flex; flex-direction: column; gap: 20px; }
.v2-tab-row { border-bottom: 1px solid var(--v2-line-light); padding-bottom: 16px; }
.v2-tab-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.v2-tab-row-head h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--v2-ink); }
.v2-tab-row-head a { font-family: var(--font-sub); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); text-decoration: none; white-space: nowrap; }
.v2-tab-row p { font-family: var(--font-body); font-size: .86rem; color: var(--v2-ink-soft); margin-top: 6px; }

/* ---- Faixa de 3 fotos ---- */
.v2-photo-strip { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
.v2-photo-strip a { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; }
.v2-photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Lista de artistas (página artistas.html) — uma linha por artista,
        pronta pra receber um link de Instagram na direita mais tarde
        (ver comentário .v2-artist-ig dentro de cada .v2-artist-row). ---- */
.v2-artist-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.v2-filter-btn {
  font-family: var(--font-sub); font-size: .78rem; font-weight: 700;
  letter-spacing: .03em; color: var(--v2-ink-soft);
  background: var(--v2-cream); border: 1px solid var(--v2-line-light);
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.v2-filter-btn:hover, .v2-filter-btn:focus-visible { border-color: var(--amber); color: var(--v2-ink); }
.v2-filter-btn.is-active { background: var(--amber); border-color: var(--amber); color: #fff; }

.v2-artist-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-top: 24px; }
.v2-artist-row {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  background: var(--v2-cream); border: 1px solid var(--v2-line-light);
  border-radius: 10px; padding: 12px 18px;
}
.v2-artist-row.is-hidden { display: none; }
.v2-artist-avatar {
  flex-shrink: 0; width: 60px; height: 60px; border-radius: 5px;
  background: var(--amber); color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sub); font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.v2-artist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.v2-artist-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v2-artist-name {
  font-family: var(--font-sub); font-weight: 700; font-size: .92rem; color: var(--v2-ink);
  white-space: nowrap;
}
.v2-artist-ig {
  font-family: var(--font-sub); font-size: .74rem; font-weight: 700;
  letter-spacing: .01em; text-decoration: none;
  color: var(--amber); white-space: nowrap;
}
.v2-artist-ig:hover, .v2-artist-ig:focus-visible { color: var(--red); }

/* ---- Grid dinâmico de mídia (Shows/Playlists) ---- */
.v2-media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 28px; }
.v2-media-card {
  background: var(--v2-cream); border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  display: flex; flex-direction: column;
}
.v2-media-card .embed-wrap { border: none; }
.v2-media-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.v2-media-count {
  font-family: var(--font-sub); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--amber);
}
.v2-media-card-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--v2-ink); line-height: 1.25; }
.v2-media-card-date { font-family: var(--font-sub); font-size: .74rem; color: var(--v2-ink-soft); }
.v2-media-card .v2-card-link { margin-top: 4px; }

/* ---- Lista de episódios (Rádio) ---- */
.v2-episode-list { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.v2-episode-card {
  background: var(--v2-cream); border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  display: flex; align-items: center; gap: 16px; padding: 14px 18px;
}
.v2-episode-number {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  color: var(--amber); flex-shrink: 0; min-width: 52px;
}
.v2-episode-title { font-family: var(--font-sub); font-weight: 700; font-size: .92rem; color: var(--v2-ink); flex: 1; }
.v2-episode-card .embed-wrap { flex-shrink: 0; width: 260px; border: none; background: transparent; }
.v2-episode-card .embed-episode iframe { height: 152px; }
@media (max-width: 640px) {
  .v2-episode-card { flex-wrap: wrap; }
  .v2-episode-card .embed-wrap { width: 100%; }
}

/* ---- Seção imersiva (foto cheia + texto) ---- */
.v2-immersive {
  position: relative; min-height: 420px; display: flex; align-items: center;
  overflow: hidden;
}
.v2-immersive img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.v2-immersive::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,5,1,.55), rgba(13,5,1,.75));
}
.v2-immersive-content {
  position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto;
  padding: 70px 20px; text-align: center; width: 100%;
}
.v2-immersive-content h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--white); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.v2-immersive-content p { font-family: var(--font-sub); color: var(--cream); margin-top: 12px; font-size: .92rem; }
.v2-immersive-content .v2-btn { margin-top: 22px; display: inline-block; }

/* ---- Card do evento (reaproveita .row/.label/.val do módulo antigo,
        mas essas classes foram feitas p/ fundo escuro — corrige as cores
        e reforça peso/tamanho pra ler bem no fundo claro do .v2-card) ---- */
body.home-v2 .v2-card .val,
body.home-v2 .v2-card .tbd,
body.home-v2 .v2-card .tagline {
  font-family: var(--font-body); font-size: .96rem; font-weight: 500;
  line-height: 1.55; color: var(--v2-ink-soft);
}
body.home-v2 .v2-card .val strong { color: var(--v2-ink); font-weight: 700; }
body.home-v2 .v2-card .divider { background: var(--v2-line-light); }
body.home-v2 .v2-card .label { min-width: 92px; font-size: .72rem; }

/* Card do #evento especificamente: mais presença (sombra funda, borda
   sutil, barra de destaque no topo) e a DATA em maior evidência, já que
   é a informação que mais importa nessa seção. */
#evento .v2-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(43,22,8,.08);
  box-shadow: 0 28px 64px rgba(0,0,0,.4);
  max-width: 480px; margin: 0; background: var(--v2-cream, #fbf3e7);
  /* Escondido no mobile (o flyer já mostra data/local/atrações/preço de
     forma legível) — fica só visualmente oculto, não removido do DOM,
     pra continuar acessível a leitor de tela e indexável por buscador. */
  display: none;
}
#evento .v2-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--amber), var(--gold));
}
#evento .v2-card .row:first-child .val strong {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .01em;
  font-size: 1.3rem; color: var(--v2-ink);
}
#evento .v2-card .val a {
  color: var(--amber); font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
#evento .v2-card .val a:hover, #evento .v2-card .val a:focus-visible { color: var(--red); }

/* ---- Layout flyer + card do #evento ----
   Mobile: só o flyer (largura cheia) + os 2 botões de ingresso — o
   .v2-card fica oculto (ver acima), sem duplicar a mesma informação
   visualmente. Desktop (≥700px): flyer e card lado a lado, botões de
   ingresso já embutidos na linha INGRESSOS do card, então o CTA solto
   do mobile não é mais necessário. */
.v2-event-layout { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.v2-event-flyer {
  max-width: 420px; margin: 0 auto; border-radius: 16px; overflow: hidden;
  box-shadow: 0 22px 50px rgba(0,0,0,.45);
}
.v2-event-flyer img { width: 100%; height: auto; display: block; aspect-ratio: 4/5; }
.v2-event-mobile-cta {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 420px; margin: 0 auto; width: 100%;
}
@media (min-width: 700px) {
  .v2-event-layout { flex-direction: row; align-items: flex-start; gap: 40px; }
  .v2-event-flyer { max-width: 320px; flex: 0 0 320px; margin: 0; }
  .v2-event-mobile-cta { display: none; }
  #evento .v2-card { display: flex; flex: 1 1 380px; }
}

/* ---- Rodapé v2 ---- */
.v2-footer { position: relative; background: var(--v2-dark); overflow: hidden; padding: 52px 0 26px; }
.v2-footer-bgtext {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800; font-size: 4.2rem;
  color: rgba(255,240,208,.045); white-space: nowrap; letter-spacing: .02em;
  pointer-events: none; user-select: none; line-height: 1;
}
.v2-footer-top { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.v2-footer-brand { display: flex; align-items: center; gap: 12px; }
.v2-footer-brand img { width: 52px; height: 52px; border-radius: 50%; }
.v2-footer-brand span { font-family: var(--font-display); font-size: 1.2rem; color: var(--white); font-weight: 700; }
.v2-footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-footer-social a {
  padding: 9px 16px; border-radius: 999px; background: var(--amber);
  color: var(--white); text-decoration: none;
  font-family: var(--font-sub); font-size: .74rem; font-weight: 700;
}
.v2-footer-social a:hover, .v2-footer-social a:focus-visible { background: var(--gold); color: var(--v2-ink); }
.v2-footer-cols { display: grid; grid-template-columns: 1fr; gap: 26px; border-top: 1px solid var(--v2-line-dark); padding-top: 26px; }
.v2-footer-col h5 { font-family: var(--font-sub); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.v2-footer-col p, .v2-footer-col a { font-family: var(--font-body); font-size: .86rem; color: var(--cream); line-height: 1.9; text-decoration: none; display: block; }
.v2-footer-col a:hover, .v2-footer-col a:focus-visible { color: var(--gold); }
.v2-footer-bottom { position: relative; z-index: 1; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--v2-line-dark); text-align: center; font-family: var(--font-sub); font-size: .72rem; color: var(--v2-ink-soft, #a07040); letter-spacing: .04em; }
.v2-footer-disclaimer {
  position: relative; z-index: 1; margin-top: 10px; text-align: center;
  font-family: var(--font-body); font-size: .68rem; color: var(--v2-ink-soft, #a07040);
  opacity: .8; max-width: 480px; margin-left: auto; margin-right: auto;
}

/* ---- Responsivo ---- */
@media (min-width: 560px) {
  .v2-stats { grid-template-columns: repeat(4, 1fr); }
  .v2-photo-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) {
  .v2-hero-content h1 img { width: 230px; height: 230px; }
  .v2-hero-info { flex-direction: row; justify-content: space-between; text-align: left; }
  .v2-hero-cta { flex-direction: row; justify-content: center; }
  .v2-card-grid { grid-template-columns: repeat(2, 1fr); }
  .v2-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .v2-hero-content h1 img { width: 270px; height: 270px; }
  .v2-hero-content { padding-top: 170px; }
  .v2-card-grid { grid-template-columns: repeat(4, 1fr); }
  .v2-tab-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .v2-footer-cols { grid-template-columns: repeat(4, 1fr); }
  .v2-footer-top { flex-direction: row; justify-content: space-between; align-items: center; }
  .v2-immersive-content h2 { font-size: 2.6rem; }
}