:root{
  --paper: #F7F7F3;
  --ink: #16161A;
  --ink-soft: #55555E;
  --blue: #0631f0;
  --blue-dim: #E7EBFB;
  --red: #E31B23;
  --red-dim: #FBE7E7;
  --line: #DEDED6;
  --radius: 6px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.site-header{ padding: 28px 6vw; }

.site-header-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.main-nav{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 22px;
  margin-right: 2vw;
}
/* ">" em vez de espaço: estiliza só os links que ficam direto dentro do
   menu (Helives Music, Parceiros, Contato). Sem isso, essa regra também
   pegava os botões lá dentro do dropdown do Perfil, que estão aninhados
   mais fundo (nav > .perfil-nav-wrap > .perfil-dropdown > ... > a), e
   sobrescrevia a cor deles por engano. */
.main-nav > a{
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
}
.main-nav > a:hover{ opacity: .7; }

/* Perfil — dropdown no menu */
.perfil-nav-wrap{ position: relative; }

.perfil-toggle{
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.perfil-toggle:hover{ opacity: .7; }

.perfil-dropdown{
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 300px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(22,22,26,0.14);
  padding: 22px 22px 20px;
  z-index: 40;
  text-align: left;
}
.perfil-dropdown[hidden]{ display: none; }

.perfil-dropdown-titulo{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink) !important;
  margin-bottom: 12px;
  text-align: center;
}

.perfil-dropdown-form .field{ margin-bottom: 12px; }
.perfil-dropdown-form .checkbox-field{ margin-bottom: 12px; }

.perfil-dropdown-erro{
  font-size: 12px; color: var(--red); margin: -6px 0 10px; display: none; text-align: center;
}
.perfil-dropdown-erro.is-visivel{ display: block; }

.perfil-linha{
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); gap: 10px;
}
.perfil-linha:last-of-type{ border-bottom: none; }
.perfil-label{ font-size: 12px; color: var(--ink-soft) !important; font-weight: 600; }
.perfil-valor{ font-size: 13.5px; color: var(--ink) !important; font-weight: 600; text-align: right; }

.perfil-dropdown-acoes{ display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.perfil-dropdown-acoes .btn{ font-size: 13.5px; padding: 11px; }
/* Reforço: garante o texto branco nos botões do dropdown não importa o
   que mais esteja tentando mudar a cor — cinto de segurança extra
   depois do bug do ".main-nav a" que vazava pra cá. */
.perfil-dropdown-acoes .btn-blue{ color: var(--paper) !important; }
.perfil-dropdown-acoes .btn-red{ color: var(--paper) !important; }

@media (max-width: 480px){
  .perfil-dropdown{ width: calc(100vw - 48px); right: -6vw; }
}

.logo{ display: inline-flex; align-items: center; gap: 10px; }

.logo-mark{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 50%, var(--red) 50%);
  flex-shrink: 0;
}

.logo-text{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.2px;
}
.logo-text strong{ font-weight: 700; }

/* Hero */
main{ flex: 1; display: flex; flex-direction: column; align-items: center; }

.hero{
  width: 100%;
  max-width: 780px;
  margin: 9vh auto 0;
  padding: 0 6vw;
  text-align: center;
}

.kicker{
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 22px;
}

h1{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(38px, 6.5vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.ink-underline{ position: relative; white-space: nowrap; }
.ink-underline::after{
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -6px;
  height: 4px;
  background: var(--red);
  z-index: -1;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: draw 0.6s 0.35s cubic-bezier(.4,0,.2,1) forwards;
}
@media (prefers-reduced-motion: reduce){
  .ink-underline::after{ animation: none; transform: scaleX(1); }
}
@keyframes draw{ to{ transform: scaleX(1); } }

.lede{
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* CTAs */
.cta-row{
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 42px;
  flex-wrap: wrap;
}

.btn{
  font-family: -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
  display: inline-block;
  text-decoration: none;
}
.btn:hover{ transform: translateY(-1px); }
.btn:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

.cta-row .btn{ font-size: 17px; padding: 18px 38px; border-radius: 8px; }

.btn-blue{ background: var(--blue); color: var(--paper); }
.btn-blue:hover{ box-shadow: 0 6px 18px rgba(11,63,203,0.28); }

.btn-red{ background: var(--red); color: var(--paper); }
.btn-red:hover{ box-shadow: 0 6px 18px rgba(227,27,35,0.28); }

/* Quem somos */
.sobre-section{
  width: 100%;
  max-width: 680px;
  margin: 70px auto 0;
  padding: 0 6vw;
  text-align: center;
}
.sobre-texto{
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* Empresas parceiras */
.parceiros-section{
  width: 100%;
  max-width: 780px;
  margin: 56px auto 0;
  padding: 0 6vw;
  text-align: center;
}
.parceiros-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}
.parceiro-badge{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
}

/* Contato */
.contato-section{
  width: 100%;
  max-width: 680px;
  margin: 56px auto 0;
  padding: 0 6vw;
  text-align: center;
}
.contato-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.contato-link{
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.contato-link:hover{ border-color: var(--blue); color: var(--blue); }

/* Demo toggle */
.demo-toggle{
  margin-top: 36px;
  background: var(--blue-dim);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  font-size: 15px;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.demo-toggle:hover{ background: var(--blue); color: var(--paper); }
.demo-toggle:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

.demo-toggle-icon{ display: inline-block; transition: transform .2s ease; font-size: 13px; }
.demo-toggle[aria-expanded="true"] .demo-toggle-icon{ transform: rotate(90deg); }

/* Demo panels */
.demo{
  width: 100%;
  max-width: 860px;
  margin: 48px auto 0;
  padding: 0 6vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  animation: fadeUp .35s ease;
}
.demo[hidden]{ display: none; }
@keyframes fadeUp{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } }

@media (max-width: 620px){ .demo{ grid-template-columns: 1fr; } }

/* Tela de criar acesso de demonstração (aparece ao clicar em "Conheça") */
.demo-acesso{
  width: 100%;
  max-width: 480px;
  margin: 48px auto 0;
  padding: 0 6vw;
  animation: fadeUp .35s ease;
}
.demo-acesso[hidden]{ display: none; }

.demo-panel{
  background: #eee8e8;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  text-align: left;
}

.demo-label{
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.demo-label.is-blue{ background: var(--blue); }
.demo-label.is-red{ background: var(--red); }

.swatch{ width: 9px; height: 9px; border-radius: 50%; }
.swatch-blue{ background: var(--blue); }
.swatch-red{ background: var(--red); }

/* Abas de segmento da demonstração */
.demo-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.demo-tab{
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.demo-tab:hover{ border-color: var(--blue); color: var(--blue); }
.demo-tab.is-active{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.demo-tab:disabled{ opacity: .5; cursor: not-allowed; }

/* Mantém a lista de faixas da demo com altura fixa e rolagem própria —
   assim, conforme a playlist cresce (uploads, catálogo), ela rola por
   dentro em vez de esticar a página e empurrar o botão "Adicionar
   música" e o rodapé da demo pra fora da tela. */
.track-list{
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.track-list::-webkit-scrollbar{ width: 6px; }
.track-list::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 3px; }
.track-list::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }

.track{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s ease, color .12s ease;
}
.track:hover{ background: var(--blue-dim); }
.track:last-child{ border-bottom: none; }
.track.is-active{ color: var(--ink); font-weight: 500; }

.track.is-disabled{
  cursor: not-allowed;
  color: #C6C6CC;
  pointer-events: none;
}

.eq{ display: flex; gap: 3px; align-items: flex-end; height: 16px; width: 18px; flex-shrink: 0; }
.eq i{ width: 3px; background: var(--line); border-radius: 1px; font-style: normal; }
.track.is-playing .eq i{ background: var(--blue); animation: eq 1s ease-in-out infinite; }
.track.is-playing .eq i:nth-child(1){ animation-delay: 0s; }
.track.is-playing .eq i:nth-child(2){ animation-delay: .15s; }
.track.is-playing .eq i:nth-child(3){ animation-delay: .3s; }

@keyframes eq{ 0%, 100%{ height: 4px; } 50%{ height: 16px; } }
@media (prefers-reduced-motion: reduce){ .track.is-playing .eq i{ animation: none; height: 10px; } }

.demo-transport-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.demo-transport-btn{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.demo-transport-btn:hover{ border-color: var(--ink); }
.demo-transport-btn:disabled{ opacity: .4; cursor: not-allowed; }
#demo-btn-play{ background: var(--blue); border-color: var(--blue); color: var(--paper); width: 46px; height: 46px; }
#demo-btn-play:hover{ border-color: var(--blue); }

.demo-lista-vazia{
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 26px 10px;
}

.demo-transport{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.demo-transport-btn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.demo-transport-btn:hover{ border-color: var(--ink); }
.demo-transport-btn:disabled{ opacity: .4; cursor: not-allowed; }
.demo-transport-btn.is-play{
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
  width: 48px;
  height: 48px;
}
.demo-transport-btn.is-play:hover{ border-color: var(--blue); }

.demo-tempo{
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.demo-tempo a{ color: var(--blue); font-weight: 600; text-decoration: none; }
.demo-tempo a:hover{ text-decoration: underline; }

.demo-typing{
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  min-height: 56px;
}
.demo-typing::after{
  content: "";
  display: inline-block;
  width: 2px; height: 16px;
  background: var(--red);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }

.demo-tag{
  margin-top: 16px;
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Footer */
.site-footer{
  text-align: center;
  padding: 26px 6vw 34px;
  color: var(--ink-soft);
  font-size: 12.5px;
  border-top: 1px solid var(--line);
  margin-top: 60px;
}
/* Garante que o atributo [hidden] sempre esconde — sem isso, botões com
   classe .btn (que define display) apareciam mesmo marcados como hidden. */
[hidden]{ display: none !important; }