/* =====================================================================
   MARIA PAULLA DINIZ — STYLES
   Deep warm-black + elegant gold. Inspired by the official covers.
   ===================================================================== */

:root{
  --bg:            #0b0805;
  --bg-2:          #110d08;
  --bg-3:          #16110a;
  --panel:         #1a140c;
  --panel-2:       #211a10;

  --gold:          #e4be6e;
  --gold-bright:   #f1d597;
  --gold-mid:      #c79c50;
  --gold-deep:     #8c6a37;

  --cream:         #f4ecdb;
  --text:          #e9ddc6;
  --muted:         #ab9c7e;
  --muted-2:       #7e7158;

  --line:          rgba(212,170,92,0.20);
  --line-soft:     rgba(212,170,92,0.10);
  --glow:          rgba(228,190,110,0.16);

  --maxw: 1240px;
  --r: 4px;

  --serif: "Cormorant Garamond", Georgia, serif;
  --cinzel: "Cinzel", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(228,190,110,0.28); color:#fff; }

/* ---------- type helpers ---------- */
.kicker{
  font-family:var(--sans);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.1rem;
  display:inline-flex;
  align-items:center;
  gap:.85rem;
}
.kicker::before{
  content:"";
  width:34px;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-mid));
}
.kicker.center::after{
  content:"";
  width:34px;height:1px;
  background:linear-gradient(90deg, var(--gold-mid), transparent);
}
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:.005em;
  color:var(--cream);
  margin:0;
}
.gold-text{
  background:linear-gradient(180deg,#fbeec4 0%,#e4be6e 42%,#b98e44 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ position:relative; }
.section-pad{ padding:clamp(72px,11vw,150px) 0; }
.section-head{ max-width:620px; margin-bottom:clamp(36px,5vw,64px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2.4rem,5.2vw,4rem); }
.section-head p{ color:var(--muted); font-size:1.05rem; margin:1.1rem 0 0; max-width:48ch; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

.divider-band{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* ---------- buttons ---------- */
.btn{
  --bg-btn:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-weight:400; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.9rem; border:1px solid var(--gold-mid); color:var(--cream);
  background:var(--bg-btn); cursor:pointer; border-radius:var(--r);
  transition:.4s cubic-bezier(.2,.7,.3,1); position:relative; overflow:hidden;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{
  border-color:transparent;
  background:linear-gradient(180deg,#f1d597,#cf9f4f);
  color:#241803; font-weight:500;
  box-shadow:0 8px 30px -10px rgba(228,190,110,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(228,190,110,.7); filter:brightness(1.06); }
.btn-ghost:hover{ background:rgba(228,190,110,.08); border-color:var(--gold); color:#fff; }

/* ===================================================================
   NAV
   =================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,4vw,44px);
  transition:.45s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,8,5,.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line-soft);
  padding-top:13px; padding-bottom:13px;
}
.brand{
  font-family:var(--cinzel); font-weight:600;
  font-size:1.02rem; letter-spacing:.22em; line-height:1;
  color:var(--cream); white-space:nowrap;
}
.brand small{ display:block; font-family:var(--sans); font-weight:300;
  font-size:.52rem; letter-spacing:.46em; color:var(--gold-mid); margin-top:5px; }
.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); transition:.3s; position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--gold); transition:.35s;
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ width:100%; }

.lang{
  display:inline-flex; border:1px solid var(--line); border-radius:40px; overflow:hidden;
  font-size:.68rem; letter-spacing:.12em;
}
.lang button{
  background:transparent; border:0; color:var(--muted); cursor:pointer;
  padding:7px 13px; font-family:var(--sans); letter-spacing:.12em; transition:.3s;
}
.lang button.active{ background:linear-gradient(180deg,#f1d597,#cf9f4f); color:#241803; font-weight:500; }

.nav-right{ display:flex; align-items:center; gap:1.4rem; }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.burger span{ display:block; width:24px; height:1.5px; background:var(--cream); margin:5px 0; transition:.3s; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:rgba(8,6,4,.97);
  backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
  opacity:0; pointer-events:none; transition:.4s;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{ font-family:var(--serif); font-size:2rem; color:var(--cream); }
.mobile-menu a:hover{ color:var(--gold); }

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:120px 0 70px; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg .glow-a{
  position:absolute; width:60vw; height:60vw; right:-12vw; top:-10vw; border-radius:50%;
  background:radial-gradient(circle, rgba(199,156,80,.22), transparent 62%);
  filter:blur(20px);
}
.hero-bg .glow-b{
  position:absolute; width:46vw; height:46vw; left:-14vw; bottom:-18vw; border-radius:50%;
  background:radial-gradient(circle, rgba(140,106,55,.18), transparent 60%);
  filter:blur(20px);
}
.hero-bg::after{ /* vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(6,4,2,.6) 100%);
}
#sparkles{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.hero-inner{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px);
  align-items:center; width:100%;
}
.hero-copy .kicker{ animation:rise .9s .05s both; }
.hero-name{
  font-family:var(--cinzel); font-weight:600; color:var(--cream);
  font-size:clamp(2.6rem,6vw,5.1rem); line-height:1.02; letter-spacing:.04em;
  margin:0; animation:rise .9s .12s both;
}
.hero-name .ln2{ display:block; }
.hero-tagline{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.25rem,2.5vw,1.85rem); color:var(--gold);
  margin:1.4rem 0 0; max-width:24ch; line-height:1.35; animation:rise .9s .2s both;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; animation:rise .9s .3s both; }

.hero-art{ position:relative; animation:rise 1s .25s both; justify-self:center; }
.hero-card{
  position:relative; width:min(420px,80vw); aspect-ratio:1; border-radius:6px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(228,190,110,.06);
}
.hero-card img{ width:100%; height:100%; object-fit:cover; }
.hero-art .badge{
  position:absolute; left:-14px; top:26px; z-index:4;
  background:rgba(11,8,5,.85); border:1px solid var(--line); backdrop-filter:blur(8px);
  padding:9px 16px; border-radius:40px; font-size:.62rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:.5rem;
}
.hero-art .badge .dot{ width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 2s infinite; }
.hero-art .ring{
  position:absolute; inset:-22px; border:1px solid var(--line-soft); border-radius:14px; z-index:-1;
}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4;
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted-2);
  display:flex; flex-direction:column; align-items:center; gap:9px; animation:rise 1s .6s both;
}
.scroll-cue i{ width:1px; height:42px; background:linear-gradient(var(--gold-mid),transparent); display:block; animation:cue 2.2s infinite; transform-origin:top; }

/* ===================================================================
   RELEASES (featured)
   =================================================================== */
.bg-alt{ background:
  linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 8%, var(--bg-2) 92%, var(--bg) 100%); }
.releases-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px);
}
.rcard{
  position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line-soft);
  background:var(--panel); transition:.5s cubic-bezier(.2,.7,.3,1); cursor:pointer;
  display:block;
}
.rcard .cover{ position:relative; aspect-ratio:1; overflow:hidden; }
.rcard .cover img{ width:100%;height:100%;object-fit:cover; transition:.7s; }
.rcard:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:0 30px 60px -28px rgba(0,0,0,.9); }
.rcard:hover .cover img{ transform:scale(1.05); }
.rcard .cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%, rgba(10,7,4,.9));
}
.rcard .play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2; opacity:0; transition:.4s;
}
.rcard:hover .play{ opacity:1; }
.rcard .play span{
  width:54px;height:54px;border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,#f1d597,#cf9f4f); color:#241803;
  box-shadow:0 10px 30px -6px rgba(228,190,110,.6);
}
.rcard .meta{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 18px; }
.rcard .meta .tag{ font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.rcard .meta h3{ font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--cream); margin:.25rem 0 0; line-height:1.1; }
.rcard-listen{ display:inline-flex; align-items:center; gap:5px; margin-top:10px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#1db954; opacity:.9; }
.rcard-listen svg{ width:12px; height:12px; flex:none; }

/* ===================================================================
   MUSIC GRID
   =================================================================== */
.music-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px);
}
.mcard{
  background:linear-gradient(180deg,var(--panel),var(--bg-3));
  border:1px solid var(--line-soft); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; transition:.5s cubic-bezier(.2,.7,.3,1);
}
.mcard:hover{ border-color:var(--line); transform:translateY(-4px); box-shadow:0 36px 70px -34px rgba(0,0,0,.9); }
.mcard .cover{ position:relative; aspect-ratio:1; overflow:hidden; }
.mcard .cover img{ width:100%;height:100%;object-fit:cover; transition:.8s; }
.mcard:hover .cover img{ transform:scale(1.045); }
.mcard .cover .sheen{
  position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(12,8,4,.55));
}
.mcard .body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.mcard h3{ font-family:var(--serif); font-weight:600; font-size:1.7rem; color:var(--cream); margin:0; line-height:1.08; }
.mcard .desc{ color:var(--muted); font-size:.92rem; margin:.5rem 0 0; font-style:italic; font-family:var(--serif); font-size:1.05rem; }
.mcard .listen-label{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2);
  margin:1.4rem 0 .8rem; display:flex; align-items:center; gap:.7rem;
}
.mcard .listen-label::after{ content:""; flex:1; height:1px; background:var(--line-soft); }

.platforms{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.plat{
  --c:var(--gold);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .85rem; border:1px solid var(--line); border-radius:40px;
  font-size:.7rem; letter-spacing:.08em; color:var(--text);
  transition:.3s; background:rgba(255,255,255,.012); cursor:pointer;
}
.plat svg{ width:15px; height:15px; flex:none; }
.plat:hover{ border-color:var(--c); color:#fff; background:rgba(255,255,255,.04); transform:translateY(-1px); }
.plat.disabled{ opacity:.45; cursor:not-allowed; }
.plat.icon-only{ padding:.6rem; }
.plat.spotify:hover{ box-shadow:0 0 0 1px #1db95455; }

/* ===================================================================
   CAROUSEL
   =================================================================== */
.carousel-sec{ overflow:hidden; }
.carousel{
  display:flex; gap:clamp(14px,1.6vw,22px); padding:6px 28px 26px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel.dragging{ cursor:grabbing; }
.cslide{
  position:relative; flex:0 0 auto; width:clamp(220px,26vw,310px); aspect-ratio:1;
  scroll-snap-align:center; border-radius:6px; overflow:hidden; border:1px solid var(--line-soft);
  transition:.5s; will-change:transform;
}
.cslide img{ width:100%;height:100%;object-fit:cover; transition:.7s; pointer-events:none; }
.cslide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,5,3,.75)); opacity:0; transition:.4s; }
.cslide:hover{ border-color:var(--gold-mid); }
.cslide:hover::after{ opacity:1; }
.cslide:hover img{ transform:scale(1.06); }
.cslide .clabel{
  position:absolute; left:0; right:0; bottom:0; padding:16px; z-index:2;
  opacity:0; transform:translateY(8px); transition:.4s;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cslide:hover .clabel{ opacity:1; transform:none; }
.cslide .clabel b{ font-family:var(--serif); font-weight:600; font-size:1.15rem; color:#fff; }
.cslide .clabel .go{
  width:34px;height:34px;border-radius:50%;flex:none; display:grid;place-items:center;
  background:linear-gradient(180deg,#f1d597,#cf9f4f); color:#241803;
}
.carousel-ctrl{ display:flex; justify-content:center; gap:14px; margin-top:8px; }
.carousel-ctrl button{
  width:48px;height:48px;border-radius:50%; border:1px solid var(--line); background:transparent;
  color:var(--cream); cursor:pointer; display:grid; place-items:center; transition:.3s;
}
.carousel-ctrl button:hover{ background:rgba(228,190,110,.1); border-color:var(--gold); }

/* ===================================================================
   PLAYLIST
   =================================================================== */
.playlist-sec{ position:relative; overflow:hidden; }
.playlist-sec .glow-c{
  position:absolute; width:50vw;height:50vw; left:50%;top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(199,156,80,.12), transparent 62%); filter:blur(30px); z-index:0;
}
.playlist-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,68px); align-items:center;
}
.playlist-art{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9); }
.playlist-embed iframe{ width:100%; border-radius:12px; display:block; }
.playlist-copy h2{ font-size:clamp(2.2rem,4.6vw,3.6rem); }
.playlist-copy p{ color:var(--muted); font-size:1.08rem; margin:1.2rem 0 2rem; max-width:42ch; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{ background:var(--bg-2); border-top:1px solid var(--line-soft); padding:clamp(56px,8vw,96px) 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer .brand-big{ font-family:var(--cinzel); font-weight:600; font-size:1.5rem; letter-spacing:.16em; color:var(--cream); }
.footer .ftag{ font-family:var(--serif); font-style:italic; color:var(--gold); margin:1rem 0 0; font-size:1.2rem; }
.fcol h4{ font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2); margin:0 0 1.3rem; font-weight:400; }
.fcol a, .fcol p{ display:block; color:var(--muted); font-size:.95rem; margin:0 0 .85rem; transition:.3s; }
.fcol a:hover{ color:var(--gold); }
.socials{ display:flex; gap:12px; }
.socials a{
  width:44px;height:44px;border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--cream); transition:.35s; margin:0;
}
.socials a:hover{ background:linear-gradient(180deg,#f1d597,#cf9f4f); color:#241803; border-color:transparent; transform:translateY(-3px); }
.socials a svg{ width:19px;height:19px; }
.footer-bottom{
  margin-top:clamp(40px,6vw,70px); padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  color:var(--muted-2); font-size:.78rem; letter-spacing:.04em;
}
.footer-bottom .verse{ font-family:var(--serif); font-style:italic; color:var(--muted); }

/* ===================================================================
   ANIMATIONS
   =================================================================== */
@keyframes rise{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none;} }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.4;} }
@keyframes cue{ 0%{ transform:scaleY(0); opacity:0;} 40%{ opacity:1;} 100%{ transform:scaleY(1); opacity:0;} }
.reveal{ opacity:0; transform:translateY(28px); transition:.9s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.1ms !important; }
  html{ scroll-behavior:auto; }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:980px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .hero-inner{ grid-template-columns:1fr; text-align:center; gap:48px; }
  .hero-copy .kicker{ justify-content:center; }
  .hero-tagline{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-art{ order:-1; }
  .releases-grid{ grid-template-columns:repeat(2,1fr); }
  .music-grid{ grid-template-columns:repeat(2,1fr); }
  .playlist-inner{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .releases-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .music-grid{ grid-template-columns:1fr; }
  .rcard .meta h3{ font-size:1.15rem; }
  .footer-top{ grid-template-columns:1fr; }
  .hero{ min-height:auto; padding-top:130px; }
  .carousel{ padding-left:20px; padding-right:20px; }
}