@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600&display=swap');

:root{
  --mf-bg: #060504;
  --mf-bg-soft: #0c0a08;
  --mf-panel: #161412;
  --mf-line: rgba(255,255,255,.08);
  --mf-text: #f2ede6;
  --mf-muted: #a89f95;
  --mf-pink: #ff5a1f;
  --mf-pink-soft: #ff9a63;
  --mf-violet: #9aa0aa;
  --mf-gold: #cda86a;
  --mf-chrome: #c9ccd1;
  --mf-chrome-dark: #6b6f76;
  --mf-font-display: 'Fraunces', Georgia, serif;
  --mf-font-body: 'Inter', -apple-system, sans-serif;
  --mf-font-mono: 'Space Grotesk', monospace;
}

body{
  background: radial-gradient(120% 100% at 50% -10%, #1a0f08 0%, var(--mf-bg) 45%, #010101 100%) !important;
  color: var(--mf-text);
  font-family: var(--mf-font-body);
}

main h1, main h2, main h3,
section h1, section h2, section h3{
  font-family: var(--mf-font-display) !important;
  letter-spacing: .01em;
}

section a.btn, .btn{
  font-family: var(--mf-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 999px !important;
}

#topo{
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(255,90,31,.25), transparent 60%),
    radial-gradient(50% 70% at 85% 10%, rgba(154,159,168,.25), transparent 60%),
    var(--mf-bg) !important;
  position: relative;
  overflow: hidden;
}
#topo::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-radial-gradient(circle at 50% 40%, rgba(255,150,90,.045) 0, rgba(255,150,90,.045) 1px, transparent 2px, transparent 64px);
  pointer-events:none;
  animation: mf-pulse 9s ease-in-out infinite;
}
@keyframes mf-pulse{
  0%,100%{ opacity:.5; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.05); }
}
#topo h1, #topo h2, #topo .hero-title{
  background: linear-gradient(100deg, var(--mf-pink) 0%, var(--mf-pink-soft) 35%, #fff 55%, var(--mf-violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mf-hero-carousel .btn-outline{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow: none;
}
.mf-hero-carousel .btn-outline:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: #fff !important;
}
.mf-hero-carousel .btn-gold{
  background: linear-gradient(120deg, var(--mf-gold), var(--mf-pink-soft)) !important;
  color:#0c0a08 !important; border:none !important;
}

.faixa-momento, .historia-cta, .lancamentos, .trap-teaser,
.comunidade, .sobre, .ouca{
  background: transparent !important;
  border-top: 1px solid var(--mf-line);
}
.faixa-momento h2, .historia-cta h2, .lancamentos h2, .trap-teaser h2,
.comunidade h2, .sobre h2, .ouca h2{
  color: var(--mf-text);
}
.faixa-momento h2::before, .lancamentos h2::before{
  content: "◆ ";
  color: var(--mf-pink);
}

.faixa-momento .card, .comunidade .card, .trap-teaser .card,
.lancamentos .card{
  background: var(--mf-panel) !important;
  border: 1px solid var(--mf-line) !important;
  border-radius: 18px !important;
}

.historia-cta a.btn, .comunidade a.btn, .trap-teaser a.btn, .ouca a.btn{
  background: var(--mf-panel) !important;
  color: var(--mf-pink-soft) !important;
  border: 1px solid var(--mf-pink) !important;
}
.historia-cta a.btn:hover, .comunidade a.btn:hover, .trap-teaser a.btn:hover, .ouca a.btn:hover{
  background: var(--mf-pink) !important;
  color: #fff !important;
}

.marquee{
  border-top: 1px solid var(--mf-line);
  border-bottom: 1px solid var(--mf-line);
}

.mf-disco-section{ padding: 96px 0; }
.mf-disco-kicker{ font-family: var(--mf-font-mono); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--mf-pink-soft); margin: 0 0 8px; }
.mf-disco-title{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 8px; color: #fff; }
.mf-disco-sub{ color: var(--mf-muted); max-width: 56ch; margin: 0 0 44px; }
.mf-group-label{ font-family: var(--mf-font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--mf-gold); margin: 40px 0 18px; display:flex; align-items:center; gap:10px; }
.mf-group-label::after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, var(--mf-line), transparent); }
.mf-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.mf-card{ position:relative; background: var(--mf-panel); border: 1px solid var(--mf-line); border-radius: 20px; overflow:hidden; transition: transform .35s ease, border-color .35s ease; }
.mf-card:hover{ transform: translateY(-6px); border-color: rgba(255,90,31,.5); }
.mf-card-cover{ position:relative; aspect-ratio: 1/1; overflow:hidden; }
.mf-card-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.mf-card:hover .mf-card-cover img{ transform: scale(1.08); }
.mf-card-badge{ position:absolute; top:12px; left:12px; font-family: var(--mf-font-mono); font-size: .68rem; text-transform:uppercase; letter-spacing:.08em; padding: 4px 10px; border-radius: 999px; background: rgba(11,7,16,.75); backdrop-filter: blur(6px); color: var(--mf-pink-soft); border: 1px solid rgba(255,90,31,.4); }
.mf-card-badge.is-live{ color: #8be9b0; border-color: rgba(139,233,176,.4); }
.mf-card-body{ padding: 18px 18px 20px; }
.mf-card-title{ font-family: var(--mf-font-display); font-size: 1.15rem; margin: 0 0 4px; color:#fff; }
.mf-card-meta{ font-family: var(--mf-font-mono); font-size: .74rem; color: var(--mf-muted); text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; }
.mf-card-date{ font-size:.78rem; color: var(--mf-gold); margin: 0 0 14px; }
.mf-card-listen{ display:inline-flex; align-items:center; gap:6px; font-family: var(--mf-font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--mf-pink-soft); text-decoration:none; border: 1px solid var(--mf-pink); border-radius: 999px; padding: 8px 16px; transition: all .25s ease; }
.mf-card-listen:hover{ background: var(--mf-pink); color:#fff; }

.mf-card-more{ position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(11,7,16,.75); backdrop-filter: blur(6px); border: 1px solid rgba(255,90,31,.4); color:#fff; text-decoration:none; font-size:1.15rem; line-height:1; font-weight:600; z-index:2; transition: all .25s ease; }
.mf-card-more:hover{ background: var(--mf-pink); border-color: var(--mf-pink); transform: scale(1.1); }

.mf-card-badge.is-hit{ color: var(--mf-gold); border-color: rgba(205,168,106,.55); background: rgba(11,7,16,.85); }

.mf-card--destaque{ border-color: rgba(205,168,106,.6); box-shadow: 0 0 0 1px rgba(205,168,106,.35), 0 16px 40px -16px rgba(205,168,106,.4); }
.mf-card--destaque:hover{ border-color: var(--mf-gold); }

.mf-cta-row{ margin-top: 56px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap: wrap; padding: 28px 32px; border-radius: 22px; background: linear-gradient(120deg, rgba(255,90,31,.14), rgba(154,159,168,.14)); border: 1px solid var(--mf-line); }
.mf-cta-row p{ margin:0; font-family: var(--mf-font-display); font-size:1.2rem; color:#fff; }
.mf-cta-btn{ display:inline-flex; align-items:center; gap:8px; background: linear-gradient(120deg, var(--mf-pink), var(--mf-violet)); color:#fff !important; text-decoration:none; font-family: var(--mf-font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; padding: 14px 26px; border-radius:999px; white-space:nowrap; box-shadow: 0 8px 24px -8px rgba(255,90,31,.55); }

.mf-full-hero{ padding: 160px 0 60px; text-align:center; background: radial-gradient(60% 80% at 20% 10%, rgba(255,90,31,.22), transparent 60%), radial-gradient(50% 70% at 80% 0%, rgba(154,159,168,.22), transparent 60%), var(--mf-bg); }
.mf-full-hero .mf-disco-kicker{ justify-content:center; display:flex; }
.mf-full-hero h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 14px; background: linear-gradient(100deg, #fff 20%, var(--mf-pink-soft) 60%, var(--mf-violet) 100%); -webkit-background-clip: text; background-clip:text; color:transparent; }
.mf-full-hero p{ color: var(--mf-muted); max-width: 60ch; margin: 0 auto; }
.mf-back-link{ display:inline-flex; align-items:center; gap:6px; color: var(--mf-muted); text-decoration:none; font-family: var(--mf-font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom: 18px; }
.mf-back-link:hover{ color: var(--mf-pink-soft); }
.mf-full-grid-section{ padding: 20px 0 120px; }
.mf-card-desc{ font-size:.86rem; color: var(--mf-muted); margin: 0 0 14px; line-height:1.5; }
.mf-card.is-large .mf-card-body{ padding: 20px 20px 24px; }

@media (max-width: 640px){
  .mf-disco-section{ padding: 64px 0; }
  .mf-cta-row{ flex-direction:column; align-items:flex-start; }
  .mf-full-hero{ padding: 120px 0 40px; }
}

/* ---------- HERO CAROUSEL (3 destaques) ---------- */
.mf-hero-carousel{ position:relative; min-height: 640px; overflow:hidden; }
.mf-hero-slide{
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity 1s ease, visibility 1s ease, transform 1.4s ease;
  z-index: 1;
  background: var(--mf-bg);
}
.mf-hero-slide::before{
  content: "";
  position: absolute;
  inset: -30px;
  background: var(--mf-slide-bg) center/cover no-repeat;
  filter: blur(24px);
  opacity: .65;
  mix-blend-mode: lighten;
  z-index: 0;
}
.mf-hero-slide.is-active{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}
.mf-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,7,16,.15) 0%, rgba(11,7,16,.35) 60%, var(--mf-bg) 100%),
              radial-gradient(70% 60% at 20% 30%, rgba(255,90,31,.18), transparent 60%);
  filter: saturate(1.1);
  z-index: 1;
}
.mf-hero-carousel .hero-content{ position:relative; z-index:2; padding: 80px 0; }
.mf-hero-title{
  font-family: var(--mf-font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  margin: 8px 0 16px;
  background: linear-gradient(100deg, #fff 10%, var(--mf-pink-soft) 55%, var(--mf-violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mf-badge-soon{ color: var(--mf-gold) !important; }
.mf-btn-primary{
  background: linear-gradient(120deg, var(--mf-pink), var(--mf-violet)) !important;
  color:#fff !important; border:none !important;
  box-shadow: 0 8px 30px -8px rgba(255,90,31,.6);
}
.mf-hero-dots{
  position:absolute; z-index:3; bottom:6px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px;
}
.mf-hero-dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.4);
  cursor:pointer; padding:0; transition: all .3s ease;
}
.mf-hero-dot.is-active{ background: var(--mf-pink); border-color: var(--mf-pink); width:26px; border-radius:6px; }
@media (max-width: 640px){
  .mf-hero-carousel{ min-height: 600px; }
  .mf-hero-carousel:has(.mf-hero-slide[data-slide="1"].is-active){ min-height: 710px; }
  .mf-hero-carousel:has(.mf-hero-slide[data-slide="3"].is-active){ min-height: 780px; }
  .mf-hero-dots{ bottom: 21px !important; }
}
@media (max-width: 480px){
  .mf-hero-carousel{ min-height: 630px; }
  .mf-hero-carousel:has(.mf-hero-slide[data-slide="1"].is-active){ min-height: 740px; }
  .mf-hero-carousel:has(.mf-hero-slide[data-slide="3"].is-active){ min-height: 810px; }
}

/* ============================================================
   Y2K NEO-CHROME / DARK SURREALISM / TRAP COVER ART additions
   ============================================================ */

/* hero title art (logo image replacing plain text headline) */
.mf-hero-carousel .hero-title-art{
  max-width: min(420px, 78%) !important;
  max-height: 210px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.55));
}

/* merged 4-card single row on the home discografia mini-section (desktop) */
.mf-grid.is-quad{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px){
  .mf-grid.is-quad{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .mf-grid.is-quad{ grid-template-columns: 1fr; }
}

/* discografia-completa.html: stacked horizontal rows instead of a grid */
.mf-row-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mf-card.is-row{
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 0;
  overflow: hidden;
}
.mf-card.is-row .mf-card-cover{
  aspect-ratio: auto;
  height: 100%;
  min-height: 190px;
}
.mf-card.is-row .mf-card-body{
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.mf-card.is-row .mf-card-actions{
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
@media (max-width: 640px){
  .mf-card.is-row{ grid-template-columns: 1fr; }
  .mf-card.is-row .mf-card-cover{ aspect-ratio: 1/1; min-height: 0; }
}

/* secondary "Saiba mais" link, pairs with .mf-card-listen */
.mf-card-more{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mf-font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color: var(--mf-muted); text-decoration:none;
  border: 1px solid var(--mf-line); border-radius: 999px;
  padding: 8px 16px; transition: all .25s ease;
}
.mf-card-more:hover{ border-color: var(--mf-chrome); color: var(--mf-chrome); }


/* =====================================================
   Rodada 2 — ajustes pedidos por Vitor (27/08)
   ===================================================== */

/* --- Quebra de linha equilibrada em títulos (evita palavra órfã) --- */
main h1, main h2, section h1, section h2{
  text-wrap: balance;
}

/* --- Faixa amarela (marquee): retema pra paleta chrome/fire + mais fina --- */
.marquee{
  background: linear-gradient(90deg, #1a1512, #201a16, #1a1512) !important;
  border-top: 1px solid rgba(255,90,31,.35) !important;
  border-bottom: 1px solid rgba(255,90,31,.35) !important;
  padding: 7px 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.marquee-track{
  gap: 0;
}
.marquee-track span{
  color: var(--mf-chrome) !important;
  background: transparent !important;
  font-family: var(--mf-font-mono) !important;
  font-size: .68rem !important;
  font-weight: 600;
  letter-spacing: .1em !important;
  padding: 0 10px !important;
  text-transform: uppercase;
}

/* --- Grid de 4 discos da home: capa quadrada sem cortar + lightbox --- */
.mf-grid.is-quad .mf-card-cover{
  aspect-ratio: 1/1;
  background: var(--mf-bg-soft);
}
.mf-grid.is-quad .mf-card-cover img{
  object-fit: contain;
  background: var(--mf-bg-soft);
}
.mf-lightbox-img{
  cursor: zoom-in;
}
.mf-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(3,2,1,.92);
  backdrop-filter: blur(6px);
  padding: 32px;
}
.mf-lightbox.is-open{
  display: flex;
}
.mf-lightbox-img-full{
  max-width: min(90vw, 900px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.mf-lightbox-close{
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mf-line);
  background: rgba(20,16,12,.8);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mf-lightbox-close:hover{
  background: var(--mf-pink);
  border-color: var(--mf-pink);
}

/* --- CTA "Veja todos os lançamentos": mobile sem estourar, centralizado --- */
@media (max-width: 680px){
  .mf-cta-row{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .mf-cta-btn{
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
}

/* --- Seção "Discos em lançamento": centralizar conteúdo no mobile --- */
@media (max-width: 680px){
  .lancamentos .container > .eyebrow,
  .lancamentos .section-title,
  .lancamento-info,
  .lancamento-previsao{
    text-align: center;
  }
  .lancamento-body{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .countdown{
    justify-content: center;
  }
}

/* --- Fundo aqua wave sutil e reativo ao mouse (seções fora do hero) --- */
.mf-ambient-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  --mf-mx: 50%;
  --mf-my: 40%;
}
.mf-blob{
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(115px);
  opacity: .13;
  mix-blend-mode: screen;
  transition: filter 1.8s ease-out;
}
.mf-blob-1{
  background: radial-gradient(circle, #1fd8ff, transparent 70%);
  left: calc(var(--mf-mx) - 23vw);
  top: calc(var(--mf-my) - 23vw);
  transition: left 1.8s ease-out, top 1.8s ease-out;
  animation: mfDrift1 26s ease-in-out infinite;
}
.mf-blob-2{
  background: radial-gradient(circle, #17e6c4, transparent 70%);
  right: 8vw;
  bottom: 6vw;
  animation: mfDrift2 32s ease-in-out infinite;
}
.mf-blob-3{
  background: radial-gradient(circle, #ff9a63, transparent 70%);
  left: 4vw;
  bottom: -10vw;
  opacity: .11;
  animation: mfDrift3 38s ease-in-out infinite;
}
@keyframes mfDrift1{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(3vw, -2vw) scale(1.08); }
}
@keyframes mfDrift2{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-4vw, 3vw) scale(1.1); }
}
@keyframes mfDrift3{
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(2vw, -3vw) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .mf-blob{ animation: none !important; }
}


/* ---------- Selos de "Discos em Lançamento": dourado/prata discretos (retheme v3) ---------- */
.lancamento-status{
  background: rgba(154,160,170,.14);
  color: var(--mf-chrome);
  border: 1px solid rgba(154,160,170,.4);
  box-shadow: none;
}
.lancamento-status--principal{
  background: rgba(205,168,106,.14);
  color: var(--mf-gold);
  border: 1px solid rgba(205,168,106,.45);
}


/* ---------- Selo maior só no slide Visão de Águia (rodada 4) ---------- */
.mf-hero-carousel .hero-title-art--aguia{
  max-width: min(680px, 96%) !important;
  max-height: 345px !important;
  margin-top: -22px !important;
}

/* ---------- Remover scroll cue (rodada 5) ---------- */
.scroll-cue{ display: none !important; }

/* ---------- Evitar quebra de linha feia na tagline do hero (rodada 8) ---------- */
.hero-tagline{ text-wrap: balance; }


/* Plataformas (plataformas.html) - cards de perfil por servico de streaming */
.mf-platform-card .mf-card-cover{
  aspect-ratio: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.15));
}
.mf-platform-icon{
  width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mf-font-display); font-size:1.6rem; font-weight:700;
  color:#0b0710;
  background: var(--mf-platform-color, var(--mf-pink));
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
}
.mf-platform-card .mf-card-desc{ margin: 2px 0 0; }
.mf-platform-note{
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid var(--mf-line);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  color: var(--mf-muted);
  font-size: .92rem;
  line-height: 1.65;
}