/* =========================================================
   DJ TUBAS — CSS LIMPO (sem carrossel)
   - Mantém: Hero, História (Tubas ao fundo), Galeria, Bigs, Rodapé
   - Remove: todo comportamento/estilo de carrossel (horizontal/vertical/3D)
   - Play na Trenheira: 2 colunas de capas (4+4) + 3ª coluna de plataformas
   - Mobile otimizado (capas simples, retangulares)
   ========================================================= */

/* ========== RESET/BASE ========== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ====== FONTES ====== */
@font-face {
  font-family: "Instagram Sans";
  src: url("elementos/fonts/instagram-sans.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instagram Sans";
  src: url("elementos/fonts/instagram-sans-medium.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instagram Sans";
  src: url("elementos/fonts/instagram-sans-bold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instagram Sans";
  src: url("elementos/fonts/instagram-sans-light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}

:root{
  --bg-0:#0b0b0d;
  --bg-1:#101214;
  --tint-1:39,80,70;
  --accent:#a78bfa;
  --radius:14px;
  --container:min(1100px,92vw);
  --nav-h:76px;
}

html{ font-size:16px; }
body{
  font-family:"Instagram Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff; line-height:1.55;

  /* Fundo: gradiente + ruído leve */
  background-image:
    radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 60%, var(--bg-1) 100%),
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjxmZUNvbXBvbmVudFRyYW5zZmVyPjxmZUZ1bmNBIHR5cGU9InRhYmxlIiB0YWJsZVZhbHVlcz0iMCAwIDAgMCAwIDAgMC4wNSAwLjA4IDAuMTEiLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMjUiLz48L3N2Zz4=');
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:cover,cover,256px 256px;
}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(100% 60% at 20% 0%, rgba(var(--tint-1), .10), rgba(0,0,0,0) 60%),
    radial-gradient(100% 60% at 80% 100%, rgba(var(--tint-1), .08), rgba(0,0,0,0) 60%);
}

.container{ width:var(--container); margin-inline:auto; }
.section{ padding:clamp(36px,6vw,80px) 0; }
.narrow{ width:min(780px,92vw); }

.title-xl{ font-size:clamp(2rem,6vw,3.2rem); margin:0 0 10px; }
.section-title{ font-size:clamp(1.6rem,4.5vw,2.2rem); margin:0 0 18px; }
.lead{ font-size:clamp(1rem,2.6vw,1.2rem); color:#d6d6de; }
.b{ font-weight:800; }

/* ===== NAV ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.18));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-wrap{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand img{ height:32px; width:auto; }
.nav{ display:flex; gap:clamp(10px,2.2vw,20px); align-items:center; }
.nav a{ color:#ddd; font-weight:700; }
.nav a:hover{ color:#fff; }
.nav .btn-cta{ background:var(--accent); color:#0b0b0d; }

/* ===== HERO (mantido como está) ===== */
.hero{
  position:relative; padding:clamp(56px,8vw,110px) 0;
  background:linear-gradient(180deg,#1a2b26 0%, #0b0b0d 100%); overflow:hidden; color:#fff;
}
.hero-layout{ position:relative; display:block; min-height:auto; }
.hero-artist{
  position:absolute; left:max(2vw,16px); bottom:0;
  width:min(620px,60vw); height:auto; object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); pointer-events:none; user-select:none;
}
.hero-right{
  position:absolute; right:max(8vw,48px); bottom:max(8%,40px);
  text-align:left; z-index:2;
}
.hero-kicker{
  display:inline-block; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  font-size:.9rem; color:#cfd3d6; margin:0 0 .35rem .25rem;
}
.hero-cover{ position:relative; margin:0; filter:drop-shadow(0 18px 42px rgba(0,0,0,.55)); }
.hero-cover img{
  width:min(240px,28vw); aspect-ratio:1/1; object-fit:cover; border-radius:14px;
}
.hero-title{
  position:absolute; top:-0.85rem; left:0; transform:translateY(-100%);
  font-size:clamp(1.8rem,4.8vw,3rem); font-weight:800; line-height:1.05; margin:0;
  text-shadow:0 2px 8px rgba(0,0,0,.6); pointer-events:none;
}
@media (max-width:900px){
  .hero-artist{ left:50%; transform:translateX(-44%); width:min(520px,78vw); opacity:.98; }
  .hero-right{ right:50%; transform:translateX(50%); bottom:8%; text-align:center; }
  .hero-title{ left:50%; transform:translate(-50%,-100%); }
}
@media (max-width:560px){
  .hero-artist{ width:min(420px,88vw); }
  .hero-cover img{ width:min(220px,58vw); }
}

/* ===== LISTEN / PLAY NA TRENHEIRA (SEM CARROSSEL) =====
   Estrutura esperada no HTML já existente:
   <section id="play"> 
     <div class="listen-card listen-card--v2cols">
       <div id="coverRailV" class="cover-rail vstack">
         <ul id="railListV"> <li class="card"><a>...<img></a></li> ... </ul>
       </div>
       <aside class="listen-platforms-col"> ... (lista .listen-platforms--col) ... </aside>
     </div>
   </section>
   Agora: estático, sem scroll/snap/3D. O UL vira grade 2x4 de capas 16:9.
*/
.listen-card-section .section-title{ margin-bottom:16px; }

.listen-card{
  position:relative; padding:clamp(16px,2.6vw,28px);
  border-radius:18px; background:linear-gradient(180deg,#1f3a34,#23433b);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

/* Card principal em 3 colunas: (capas 2x4) | (plataformas) */
.listen-card--v2cols{
  display:grid;
  grid-template-columns:minmax(520px,1fr) minmax(280px,360px);
  gap:clamp(16px,3vw,28px);
  align-items:start;

  /* fundo com imagem, como já está */
  background-color:#143830;
  background-image:url("elementos/bg.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
}

/* Área de capas — agora SEM comportamento de carrossel */
.cover-rail.vstack{
  position:relative !important;
  top:auto !important; height:auto !important; max-height:none !important;
  overflow:visible !important; perspective:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}

/* A pilha vira GRADE 2x4 estática */
#railListV{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:auto;
  gap:clamp(12px,2.4vw,18px);
}

/* Cada capa é um card simples */
#railListV .card{
  margin:0; padding:0; width:100%;
  transform:none !important; opacity:1 !important; filter:none !important;
}
#railListV .card > a{ display:block; color:inherit; }

/* Imagem retangular (16:9), como seu desenho */
#railListV .card img{
  width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
  border-radius:14px; box-shadow:0 14px 28px rgba(0,0,0,.35);
  max-width:none; /* ignora max-width global */
}

/* Metadados opcionais sob a capa (se existirem) */
#railListV .meta{ text-align:center; margin-top:6px; font-size:.9rem; color:#d7d7de; }
#railListV .meta h3{ margin:0; font-size:1rem; font-weight:800; color:#fff; }

/* Coluna de plataformas (3ª coluna visual) */
.listen-platforms-col{ align-self:start; position:sticky; top:clamp(72px,10vh,120px); }
.listen-platforms--col{
  display:flex; flex-direction:column; gap:12px; padding:0; margin:0; list-style:none;
}
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1rem; border-radius:999px; color:#fff;
  background:rgba(0,0,0,.18); font-weight:800; letter-spacing:.2px;
}
.pill:hover{ background:rgba(0,0,0,.28); transform:translateY(-1px); }
.pill svg{ width:20px; height:20px; fill:currentColor; }

/* Linha decorativa */
.listen-line{ height:2px; width:70%;
  background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  border:0; margin:14px 0;
}
.listen-line--wide{ width:86%; }

/* ---------- RESPONSIVO do PLAY ----------- */
@media (max-width:1100px){
  .listen-card--v2cols{
    grid-template-columns:1fr;
  }
  .listen-platforms-col{
    position:static; top:auto; margin-top:10px;
  }
  .listen-platforms--col{ align-items:center; }
}

/* Tablet: mantém 2 colunas de capas, plataformas abaixo */
@media (max-width:900px){
  #railListV{ grid-template-columns:repeat(2, 1fr); }
}

/* Mobile estreito: capas em 1 coluna e tudo centralizado */
@media (max-width:600px){
  #railListV{ grid-template-columns:1fr; gap:12px; }
  #railListV .card img{ aspect-ratio:16/9; }
  .listen-platforms--col{ align-items:center; }
}

/* ===== HISTÓRIA (mantida) ===== */
:root{ --story-invade-top:140px; --story-card:clamp(240px,28vw,340px); }
.story{
  position:relative; margin-top:calc(-1 * var(--story-invade-top));
  padding-top:clamp(180px,22vh,260px); padding-bottom:clamp(180px,18vh,260px);
  overflow:visible; z-index:1;
}
.story-figure{
  position:absolute; right:-6vw; top:calc(-1 * var(--story-invade-top));
  width:clamp(560px,40vw,800px); height:auto; object-fit:contain;
  z-index:-1; pointer-events:none; user-select:none;
}
.story .container{ position:relative; z-index:1; }
#gallery{ position:relative; z-index:1; padding-top:clamp(100px,14vw,240px); }

.story-grid{ display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; margin-top:24px; }
.story-grid .lb{
  display:block; width:var(--story-card); aspect-ratio:4/5;
  border-radius:14px; overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.48);
  transition:transform .25s ease, box-shadow .25s ease;
}
.story-grid .lb img{ width:100%; height:100%; object-fit:cover; }
.story-grid video{
  width:var(--story-card); aspect-ratio:4/5; object-fit:cover;
  border-radius:14px; box-shadow:0 16px 36px rgba(0,0,0,.48);
  transition:transform .25s ease, box-shadow .25s ease;
}
.story-grid .lb:hover, .story-grid video:hover{
  transform:translateY(-4px) scale(1.03); box-shadow:0 20px 48px rgba(0,0,0,.56);
}
@media (max-width:560px){ :root{ --story-card:min(92vw,360px); } }

/* ===== GALERIA (mantida) ===== */
:root{ --gallery-invade-top:120px; --gallery-figure-w:clamp(520px,42vw,820px); }
.gallery{ position:relative; overflow:visible; }
.gallery .container{ position:relative; z-index:1; }
.gallery-figure{
  position:absolute; left:-10vw; top:calc(-1 * var(--gallery-invade-top));
  width:clamp(680px,52vw,1040px); height:auto; object-fit:contain; z-index:-1;
  pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,.6) 80%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,.6) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.gallery-grid{ display:grid; gap:12px; grid-template-columns:repeat(5,1fr); }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
@media (max-width:1100px){ .gallery-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:700px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== LIGHTBOX ===== */
.lb{ position:relative; }
.lightbox{
  position:fixed; inset:0; z-index:80; padding:20px;
  background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center;
}
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; }
.lightbox .close{
  position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-weight:800; cursor:pointer;
}

/* ===== BIGS (mantido) ===== */
.bigs-grid{ display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
.big-vid{ width:100%; border-radius:12px; box-shadow:0 12px 26px rgba(0,0,0,.32); background:#000; }
@media (max-width:1100px){ .bigs-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .bigs-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== FOOTER ===== */
.site-footer{
  padding:28px 0; border-top:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.25);
}
.site-footer p{ margin:0; color:#d6d6de; text-align:center; }

/* ===== UTIL ===== */
section[id]{ scroll-margin-top:var(--nav-h); }
.heavy-section{ content-visibility:auto; contain-intrinsic-size:1200px; }

/* ===== DESATIVA “TRENHEIRA WALLPAPER” (se houver) ===== */
#trenheira,.trenheira,#trenheira::before,#trenheira::after,.trenheira::before,.trenheira::after{
  background:transparent !important; background-image:none !important;
}

/* ===== PLATAFORMAS (ícones compactos, se usar a barra de ícones solta) ===== */
.plataformas{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px; margin-top:24px; }
.plataformas a{
  display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center;
  border-radius:12px; background:rgba(255,255,255,.04);
  transition:transform .2s ease, background .2s ease, filter .2s ease;
}
.plataformas a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.08); }
.icone-plataforma{ width:30px; height:30px; object-fit:contain; filter:brightness(.95); }
.plataformas a:hover .icone-plataforma{ filter:brightness(1.2); }
@media (max-width:480px){
  .plataformas a{ width:44px; height:44px; }
  .icone-plataforma{ width:26px; height:26px; }
}

/* ===== KILL SWITCH GLOBAL DO CARROSSEL =====
   Remove qualquer herança antiga de estilos/classes de coverflow */
.cover-rail, .cover-rail .rail, .cover-rail.coverflow,
.vstack, .vrail{
  overflow:visible !important; scroll-snap-type:none !important;
  transform:none !important; perspective:none !important;
}
.cover-rail .nav, .listen-card .cover-rail .nav{ display:none !important; }
#railListV .card.active,
#railListV .card.top1, #railListV .card.top2, #railListV .card.top3,
#railListV .card.bot1, #railListV .card.bot2, #railListV .card.bot3{
  transform:none !important; filter:none !important; opacity:1 !important;
}
/* ================== PATCH 1 — HERO sem corte ================== */
/* dá altura real pro hero e impede “corte” do artista */
.hero-layout{
  min-height: clamp(520px, 72vh, 860px) !important;
}

/* o artista se ajusta pelo alto da viewport, sem estourar */
.hero-artist{
  left: max(2vw, 16px) !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: min(60vw, 680px) !important;
  max-height: 78vh !important;     /* evita cortar em telas baixas */
  object-fit: contain !important;
}

/* centraliza melhor em tablets/phones */
@media (max-width: 900px){
  .hero-artist{
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: min(88vw, 520px) !important;
    max-height: 70vh !important;
  }
  .hero-right{
    right: 50% !important;
    transform: translateX(50%) !important;
    bottom: 8% !important;
    text-align: center !important;
  }
}

/* ================== PATCH 2 — Capas 1:1 (quadradas) ================== */
/* Play na Trenheira — troca 16:9 por 1:1 */
#railListV .card img{
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* no mobile continua 1 coluna, quadrado */
@media (max-width: 600px){
  #railListV{ grid-template-columns: 1fr !important; }
  #railListV .card img{ aspect-ratio: 1 / 1 !important; }
}

/* ================== PATCH 3 — CTA "Ouça agora" roxo, texto branco ================== */
.nav .btn-cta{
  background: var(--accent) !important;      /* roxo */
  color: #fff !important;                     /* texto branco */
  padding: 10px 18px !important;
  border-radius: 999px !important;            /* oval */
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(167,139,250,.35);
  border: 0;
}
.nav .btn-cta:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(167,139,250,.45);
}
/* ================= HERO — layout final (capa 1:1, Tubas atrás, fade-out) ================ */

/* estrutura base */
.hero{
  position: relative !important;
  padding: 0 !important;                /* quem manda é a altura/min-height */
  min-height: clamp(560px, 78vh, 840px) !important;
  overflow: hidden !important;
  background: linear-gradient(180deg,#152825 0%, #0b0b0d 60%) !important;
}

/* Tubas fica POR TRÁS da capa, “colado” na nav (pouco espaço) */
.hero-artist{
  position: absolute !important;
  top: calc(var(--nav-h) + 6px) !important; /* ~colado na nav */
  left: max(3vw, 24px) !important;
  width: min(620px, 48vw) !important;
  height: auto !important;
  z-index: 1 !important;                /* atrás da capa */
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 22px 48px rgba(0,0,0,.55));
}

/* CAPA quadrada sobreposta, à direita, com sombra */
.hero-right{
  position: absolute !important;
  right: max(8vw, 64px) !important;
  top: 50% !important;
  transform: translateY(-42%) !important; /* centraliza vertical suave */
  z-index: 2 !important;                   /* acima do Tubas */
  text-align: left !important;
}

.hero-cover{ margin: 0 !important; filter: drop-shadow(0 22px 50px rgba(0,0,0,.55)); }
.hero-cover img{
  width: min(640px, 46vw) !important;
  aspect-ratio: 1 / 1 !important;        /* QUADRADA */
  object-fit: cover !important;
  border-radius: 18px !important;
}

/* Título/Kicker se tiverem — mantemos, mas sem invadir */
.hero-kicker{ margin-bottom: .4rem !important; }
.hero-title{ position: static !important; margin: .6rem 0 0 0 !important; }

/* Fade-out na BASE do hero para transição de seções */
.hero::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: min(22vh, 200px);
  background: linear-gradient(180deg, rgba(11,11,13,0) 0%, rgba(11,11,13,1) 90%);
  pointer-events: none; z-index: 3;      /* acima do bg, abaixo do conteúdo */
}

/* ---------- Responsivo ---------- */
@media (max-width: 1050px){
  .hero-artist{
    left: 50% !important; transform: translateX(-46%) !important;
    width: min(520px, 78vw) !important;
  }
  .hero-right{
    right: 50% !important; transform: translate(50%,-38%) !important;
  }
  .hero-cover img{ width: min(420px, 66vw) !important; }
}

@media (max-width: 560px){
  .hero{ min-height: clamp(520px, 74vh, 740px) !important; }
  .hero-artist{
    top: calc(var(--nav-h) + 4px) !important;
    width: min(420px, 86vw) !important;
  }
  .hero-right{
    right: 50% !important; transform: translate(50%,-32%) !important;
  }
  .hero-cover img{ width: min(320px, 78vw) !important; }
}

/* ================= Play na Trenheira — garante capas 1:1 ================= */
#railListV .card img{
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* ================= CTA "Ouça agora" — roxo oval, texto branco ================= */
.nav .btn-cta{
  background: var(--accent) !important;
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(167,139,250,.35);
  border: 0;
}
.nav .btn-cta:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(167,139,250,.45);
}
/* ===== HERO – Tubas maior, capa menor e sem escurecer a capa ===== */

/* 1) Tubas um pouco maior */
.hero-artist{
  width: min(760px, 56vw) !important;   /* ↑ aumentei */
  top: calc(var(--nav-h) + 6px) !important; /* segue “quase colado” na nav */
  z-index: 2 !important;                /* abaixo da capa, acima do fundo */
}

/* 2) Capa quadrada MENOR e SEM cortar/escurecer */
.hero-right{
  right: max(8vw, 64px) !important;
  top: 50% !important;
  transform: translateY(-40%) !important;
  z-index: 4 !important;                /* acima do fade e do Tubas */
}
.hero-cover img{
  width: min(520px, 38vw) !important;   /* ↓ diminuí a capa */
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;       /* garante visualizar 100% sem crop */
  background: #0b0b0d;                  /* cor de fundo caso a arte tenha bordas transparentes */
  border-radius: 18px !important;
}

/* 3) Fade-out fica ATRÁS do conteúdo (não escurece a capa) */
.hero::after{
  z-index: 1 !important;                /* estava acima; agora fica atrás */
  pointer-events: none;
}

/* ---------- Responsivo fino ---------- */
@media (max-width: 1050px){
  .hero-artist{
    width: min(600px, 78vw) !important; /* continua grande no tablet */
    left: 50% !important; transform: translateX(-46%) !important;
  }
  .hero-right{
    right: 50% !important; transform: translate(50%, -36%) !important;
  }
  .hero-cover img{ width: min(420px, 62vw) !important; }
}
@media (max-width: 560px){
  .hero-artist{ width: min(460px, 88vw) !important; }
  .hero-right{ transform: translate(50%, -32%) !important; }
  .hero-cover img{ width: min(320px, 82vw) !important; }
}
/* ===== HERO — Tubas maior, capa menor e SEM CROP ===== */

/* Tubas maior */
.hero-artist{
  width: min(780px, 58vw) !important;          /* ↑ aumenta um pouco */
  top: calc(var(--nav-h) + 6px) !important;
  z-index: 2 !important;                        /* atrás da capa */
}

/* Capa do hero: NADA de 1:1 aqui, sem crop, sem barras pretas */
.hero-right{
  right: max(8vw, 64px) !important;
  top: 50% !important;
  transform: translateY(-40%) !important;
  z-index: 4 !important;                        /* acima do fade e do Tubas */
}
.hero-cover{
  margin: 0 !important;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.55));
  background: transparent !important;           /* sem fundo escuro */
}
.hero-cover img{
  width: min(520px, 40vw) !important;           /* ↓ capa menor */
  height: auto !important;                      /* mantém proporção da arte */
  object-fit: contain !important;               /* SEM CROP */
  border-radius: 18px !important;
  display: block;
}

/* Fade do hero fica por trás do conteúdo (não escurece a capa) */
.hero::after{
  z-index: 1 !important;
  pointer-events: none;
}

/* Responsivo fino */
@media (max-width: 1050px){
  .hero-artist{
    width: min(620px, 80vw) !important;
    left: 50% !important; transform: translateX(-46%) !important;
  }
  .hero-right{
    right: 50% !important; transform: translate(50%, -36%) !important;
  }
  .hero-cover img{ width: min(440px, 66vw) !important; }
}
@media (max-width: 560px){
  .hero-artist{ width: min(470px, 90vw) !important; }
  .hero-right{ transform: translate(50%, -32%) !important; }
  .hero-cover img{ width: min(320px, 84vw) !important; }
}
/* ================= HERO FINAL — Tubas grande, sem corte e capa menor ================= */

.hero{
  position: relative !important;
  overflow: visible !important;                   /* libera o Tubas */
  background: linear-gradient(180deg,#152825 0%, #0b0b0d 70%) !important;
  padding: 0 !important;
  min-height: clamp(720px, 88vh, 980px) !important; /* dá espaço vertical pro corpo todo */
}

/* TUBAS — corpo inteiro, grande e colado na nav */
.hero-artist{
  position: absolute !important;
  top: calc(var(--nav-h) + 4px) !important;
  left: max(2vw, 24px) !important;
  width: min(980px, 70vw) !important;             /* bem grandão */
  height: auto !important;
  z-index: 2 !important;
  object-fit: contain !important;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.6));
}

/* CAPA — menor, proporcional, sem crop */
.hero-right{
  position: absolute !important;
  right: max(8vw, 80px) !important;
  top: 50% !important;
  transform: translateY(-42%) !important;
  z-index: 4 !important;
  text-align: left !important;
}

.hero-cover img{
  width: min(480px, 36vw) !important;             /* capa menor */
  height: auto !important;                        /* mantém proporção natural */
  object-fit: contain !important;
  border-radius: 18px !important;
  display: block;
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
}

/* FADE suave no fundo — não corta mais o Tubas */
.hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: min(22vh, 240px);
  background: linear-gradient(180deg, rgba(11,11,13,0) 0%, rgba(11,11,13,1) 92%);
  pointer-events: none;
  z-index: 1 !important;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1050px){
  .hero{
    min-height: clamp(620px, 84vh, 860px) !important;
  }
  .hero-artist{
    width: min(680px, 82vw) !important;
    left: 50% !important;
    transform: translateX(-46%) !important;
  }
  .hero-right{
    right: 50% !important;
    transform: translate(50%, -36%) !important;
  }
  .hero-cover img{
    width: min(400px, 60vw) !important;
  }
}

@media (max-width: 560px){
  .hero{
    min-height: clamp(580px, 80vh, 740px) !important;
  }
  .hero-artist{
    width: min(460px, 90vw) !important;
  }
  .hero-right{
    transform: translate(50%, -32%) !important;
  }
  .hero-cover img{
    width: min(320px, 82vw) !important;
  }
}
/* ===== Fade-out suave na base do HERO ===== */
.hero {
  position: relative !important;
  overflow: visible !important;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px; /* ajuste a altura do fade */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(11, 11, 13, 0.85) 70%,
    rgba(11, 11, 13, 1) 100%
  );
  pointer-events: none;
  z-index: 3; /* acima do fundo, abaixo da capa e do Tubas */
}
/* ===== FADE-OUT FORÇADO NA BASE DO HERO (sobre o conteúdo) ===== */
.hero{
  position: relative !important;  /* contêiner do pseudo-elemento */
  z-index: 0;                      /* cria contexto sem brigar com a navbar */
}
/* ===== HERO: player do YouTube no lugar da capa ===== */
/* mantém posição/escala iguais às que você já tem para .hero-right */

.hero-cover{
  margin: 0 !important;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.55));
  border-radius: 18px !important;
  overflow: hidden; /* arredonda o player */
  background: #0b0b0d; /* fundo neutro enquanto carrega */
}

/* ===== Ajuste do player YouTube no HERO ===== */
.hero-cover {
  margin: 0 !important;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.55));
  border-radius: 18px !important;
  overflow: hidden;
  background: #0b0b0d;
}

/* Player no desktop — maior */
.hero-cover .yt-embed {
  display: block;
  width: min(620px, 46vw) !important; /* aumenta aqui o tamanho do player */
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 18px;
}

/* Player no tablet */
@media (max-width: 1050px) {
  .hero-cover .yt-embed {
    width: min(500px, 70vw) !important;
  }
}

/* Player no celular — centralizado e proporcional */
@media (max-width: 600px) {
  .hero-cover {
    display: flex;
    justify-content: center;
  }
  .hero-cover .yt-embed {
    width: 90vw !important;
    aspect-ratio: 16 / 9;
  }
}
/* ===== HERO — saneado: ordem/z-index e tamanho do Tubas + player ===== */
.hero{
  position: relative !important;
  overflow: visible !important;
  min-height: clamp(720px, 88vh, 980px) !important; /* espaço p/ não cortar nada */
}

/* TUBAS: AQUI você regula o tamanho */
.hero-artist{
  position: absolute !important;
  top: calc(var(--nav-h) + 4px) !important;
  left: max(2vw, 24px) !important;
  width: min(1080px, 74vw) !important;  /* << aumenta/diminui aqui */
  height: auto !important;
  z-index: 2 !important;                 /* atrás do player, na frente do fundo */
  object-fit: contain !important;
  pointer-events: none;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.6));
}

/* Player do YouTube (no lugar da capa) */
.hero-right{
  position: absolute !important;
  right: max(8vw, 80px) !important;
  bottom: clamp(28px, 6vh, 96px) !important; /* ancorado pelo rodapé do hero */
  transform: none !important;
  z-index: 3 !important;                     /* acima do Tubas */
}

.hero-cover{
  margin: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.55));
}
.hero-cover .yt-embed{
  display: block;
  width: min(620px, 46vw) !important;        /* tamanho do player */
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Fade curto só para “sumir o corte” no final do hero */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height: 80px;
  background: linear-gradient(180deg, rgba(11,11,13,0) 0%, rgba(11,11,13,.3) 50%, rgba(11,11,13,1) 100%);
  pointer-events:none; z-index:1 !important;  /* atrás do Tubas e do player */
}

/* Responsivo: mantém proporções no tablet/mobile */
@media (max-width:1050px){
  .hero{ min-height: clamp(620px,84vh,860px) !important; }
  .hero-artist{ left:50% !important; transform:translateX(-46%) !important; width:min(820px, 86vw) !important; }
  .hero-right{ right:50% !important; transform:translateX(50%) !important; }
  .hero-cover .yt-embed{ width:min(500px,70vw) !important; }
}
@media (max-width:600px){
  .hero{ min-height: clamp(580px,80vh,740px) !important; }
  .hero-cover .yt-embed{ width:90vw !important; }
}
/* ===== FADE-OUT INTENSO NA BASE DO HERO ===== */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(180px, 22vh, 300px); /* aumenta a altura do fade */
  background: linear-gradient(
    180deg,
    rgba(11, 11, 13, 0) 0%,      /* transparente no início */
    rgba(11, 11, 13, 0.88) 50%,  /* escurece mais rápido */
    rgba(11, 11, 13, 1) 100%     /* preto sólido no final */
  );
  pointer-events: none;
  z-index: 9999 !important; /* fica sobre o conteúdo */
}
/* ===== Movimento nas capas das músicas ===== */
#railListV .card img {
  transition: transform 0.35s ease, filter 0.35s ease;
  transform-origin: center;
}

#railListV .card:hover img {
  transform: scale(1.05) rotate(2deg);
  filter: brightness(1.15) saturate(1.2);
}

/* pequeno pulso ao clicar */
#railListV .card:active img {
  transform: scale(0.96) rotate(-1deg);
  filter: brightness(0.9);
}
/* ==== FIX: imagem do DJ Tubas interferindo nos cliques ==== */

/* garante que o Tubas fique atrás de todas as seções seguintes */
.hero-artist {
  position: relative;
  z-index: 0 !important;
  pointer-events: none !important; /* impede que capture cliques */
}

/* reforço extra para as seções abaixo ficarem acima */
.section,
.listen-card-section,
#play,
#story,
#gallery,
#bigs,
.site-footer {
  position: relative;
  z-index: 1;
}