/* Acordes Para Vida — estilos compartilhados entre todas as páginas */

:root{
  --g:#cfb508; --gd:#9e8b06; --gl:#f0da30; --gp:#fff8d0;
  --bg:#080604; --bgc:#12100c; --bgp:#181510;
  --t:#f5eed8; --td:#bfb590; --b:rgba(207,181,8,0.25);
  --f:'Nunito',sans-serif;
  --fd:'Cinzel',serif;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg); color:var(--t); font-family:var(--f); font-size:17px;
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  overflow-x:hidden; position:relative;
}

.sparkles{position:fixed;inset:0;z-index:1;pointer-events:none;}

.music-notes{position:fixed;inset:0;z-index:1;pointer-events:none;}

.music-note:nth-child(1){left:5%;animation-delay:0s;font-size:22px;}

@keyframes floatNote{
  0%{transform:translateY(100vh) rotate(0deg) scale(0);opacity:0;}
  10%{opacity:0.18;} 50%{opacity:0.12;} 90%{opacity:0.18;}
  100%{transform:translateY(-120px) rotate(360deg) scale(1);opacity:0;}
}

.nav-logo{height:38px;width:auto;margin-right:8px;filter:drop-shadow(0 2px 4px rgba(207,181,8,.35));}

.nav-item:hover,.nav-item.current{
  color:var(--gl); border-color:var(--g); top:-2px;
  box-shadow:0 6px 0 var(--gd),0 8px 16px rgba(0,0,0,.4);
}

.nav-item:active{top:2px;box-shadow:0 2px 0 var(--gd);}

.nav-item.current{color:var(--gl);border-color:var(--g);}

.nav-dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:200px;
  background:rgba(20,17,12,.97); border:2px solid var(--g); border-radius:14px;
  box-shadow:0 8px 0 rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.5);
  padding:8px 0; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all .22s ease; z-index:200;
}

.nav-dropgroup{position:relative;}

.nav-dropgroup:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);}

.nav-dropgroup.open .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);}

.nav-dropdown a{
  display:block; text-decoration:none; color:var(--td); font-family:var(--f);
  font-size:14px; padding:10px 20px; transition:all .18s ease; white-space:nowrap;
}

.nav-dropdown a:hover{color:var(--gl);background:rgba(207,181,8,.08);}

a.nav-item.nav-cta,
a.nav-item.nav-cta:hover,
a.nav-item.nav-cta:active,
a.nav-item.nav-cta:focus,
a.nav-item.nav-cta.current{
  color:var(--bg) !important;
  background:linear-gradient(180deg,var(--gl),var(--g));
  border-color:var(--gd); font-weight:800; box-shadow:0 4px 0 var(--gd);
}

a.nav-item.nav-cta:hover{
  border-color:var(--gd); top:-2px;
  box-shadow:0 6px 0 var(--gd),0 8px 16px rgba(0,0,0,.4);
}

a.nav-item.nav-cta:active{top:2px;box-shadow:0 2px 0 var(--gd);}

footer{
  position:relative; z-index:2; width:100%; text-align:center;
  padding:20px; color:var(--td); font-size:14px; margin-top:auto;
  border-top:1px solid var(--b);
}

.final-cta{text-align:center;margin:40px 0 6px;padding-top:30px;border-top:1px solid var(--b);}

.final-cta .eyebrow{margin-bottom:8px;}

.final-cta h2{font-family:var(--fd);font-size:clamp(1.25rem,4vw,1.7rem);color:var(--gl);text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px;text-shadow:0 0 20px rgba(207,181,8,.2);}

.final-cta p{color:var(--td);font-size:14px;line-height:1.7;max-width:420px;margin:0 auto 22px;}
