/* Design System inspirado no Spotify (DESIGN-spotify.md):
   escuro imersivo, verde só em ações/estados ativos, pílulas e círculos,
   botões em caixa alta com tracking largo, sombras pesadas. */

:root {
  --green:        #1ed760;
  --green-border: #1db954;

  --bg-page:      #121212;
  --bg-surface:   #181818;
  --bg-mid:       #1f1f1f;
  --bg-card:      #252525;
  --bg-card-alt:  #272727;
  --light-surface:#eeeeee;

  --text-primary:   #ffffff;
  --text-secondary: #b3b3b3;
  --text-near:      #cbcbcb;
  --text-on-green:  #000000;

  --border-gray:  #4d4d4d;
  --border-light: #7c7c7c;

  --shadow-medium: rgba(0,0,0,0.3) 0px 8px 8px;
  --shadow-heavy:  rgba(0,0,0,0.5) 0px 8px 24px;
  --shadow-inset:  rgb(124,124,124) 0px 0px 0px 1px inset;

  --radius-card: 8px;
  --radius-pill: 500px;
  --radius-full: 9999px;

  --font: "Figtree", "Helvetica Neue", helvetica, arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;

  --rail-w: 76px;
  --nav-h: 88px;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  width: 100%;
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

/* ---------- fundo: círculos acromáticos (verde nunca é decorativo) ---------- */
.bg-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.bg-glow--top {
  width: 460px;
  height: 460px;
  top: -240px;
  left: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), rgba(255,255,255,0) 70%);
}

/* ---------- barra social ---------- */
.social-rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  padding-bottom: 40px;
  z-index: 20;
}
.social-rail a {
  color: var(--text-secondary);
  display: flex;
  transition: color .15s ease, transform .15s ease;
}
.social-rail a:hover { color: var(--text-primary); transform: translateY(-2px); }
.social-rail__line { width: 1px; height: 64px; background: var(--border-gray); }

/* ---------- navegação ---------- */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px 0 calc(var(--rail-w) + 16px);
  z-index: 20;
}
.brand {
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.brand__dot { color: var(--green); }

.topnav__links { display: flex; gap: 8px; }
.topnav__links a {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  transition: color .15s ease, background-color .15s ease;
}
.topnav__links a:hover { color: var(--text-primary); background: var(--bg-mid); }

.topnav__cta {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  background: var(--light-surface);
  color: var(--bg-surface);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  transition: transform .15s ease, background-color .15s ease;
}
.topnav__cta:hover { background: var(--text-primary); transform: scale(1.04); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 560px) minmax(320px, 520px);
  align-items: stretch;
  justify-content: space-between;
  gap: 48px;
  padding: calc(var(--nav-h) + 24px) 64px 88px calc(var(--rail-w) + 64px);
  max-width: 1440px;
  margin: 0 auto;
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-bottom: 72px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.headline {
  font-weight: 800;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-secondary);
  margin: 0 0 20px;
  min-height: 3.3em;
  transition: opacity .35s ease;
}
.headline .accent { color: var(--text-primary); }

.description {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0 0 32px;
  min-height: 3.1em;
  transition: opacity .35s ease;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* CTA primário: verde é permitido em CTAs e estados ativos */
.btn-cta {
  display: inline-flex;
  align-items: center;
  background: var(--green);
  color: var(--text-on-green);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 16px 40px;
  border-radius: var(--radius-pill);
  transition: transform .15s ease, background-color .15s ease;
}
.btn-cta:hover { transform: scale(1.04); background: #3be477; }
.btn-cta[aria-disabled="true"] {
  background: var(--bg-mid);
  color: var(--text-secondary);
  pointer-events: none;
}

/* pílula escura com borda inset (sem borda cinza crua) */
.tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-mid);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset);
}

.dots {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dots button {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--border-gray);
  cursor: pointer;
  padding: 0;
  transition: background-color .2s ease, width .2s ease;
}
.dots button:hover { background: var(--border-light); }
.dots button[aria-selected="true"] { width: 30px; background: var(--green); }

/* ---------- visual (capa de álbum) ---------- */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: min(560px, 70vh);
}

.visual-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.visual-glow--behind {
  width: 360px;
  height: 360px;
  right: -70px;
  bottom: -50px;
  z-index: 0;
  background: radial-gradient(circle at 35% 35%, var(--bg-card), rgba(37,37,37,0) 72%);
}
.visual-glow--front {
  width: 84px;
  height: 84px;
  left: -14px;
  top: 10%;
  z-index: 3;
  background: var(--bg-card-alt);
  box-shadow: var(--shadow-heavy);
}

.visual-frame {
  position: relative;
  z-index: 1;
  width: min(440px, 90%);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-surface) 55%, var(--bg-page) 100%);
  box-shadow: var(--shadow-heavy);
  overflow: hidden;
}

.visual-frame__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease;
}
.visual-frame__inner svg { width: 74%; height: 74%; }

/* botão play circular (verde, ícone preto) */
.visual-badge {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: var(--text-on-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-medium);
  z-index: 4;
  transition: transform .15s ease, background-color .15s ease;
}
.visual-badge:hover { transform: scale(1.08); background: #3be477; }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    padding: calc(var(--nav-h) + 24px) 28px 48px calc(var(--rail-w) + 28px);
    gap: 40px;
  }
  .hero__visual { order: -1; height: 320px; }
  .visual-frame { width: min(300px, 78%); }
  .description { max-width: 100%; }
}

@media (max-width: 640px) {
  :root { --rail-w: 0px; }
  .social-rail { display: none; }
  .topnav { padding: 0 20px; }
  .topnav__links { display: none; }
  .hero { padding: calc(var(--nav-h) + 16px) 20px 40px; }
  .visual-badge { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}