/* seções — specs/design.md §7 */

/* nav — barra sólida, fixa no topo ao rolar */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--linha);
  background: var(--preto);
}

.nav__barra {
  display: flex;
  align-items: center;
  gap: var(--e-48);
  height: var(--nav-altura);
}

.nav__menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-32);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--e-32);
}

.nav__links a {
  display: block;
  padding-block: var(--e-12);
  font-size: var(--corpo-pequeno);
  font-weight: 500;
  white-space: nowrap;
  color: var(--texto);
  transition: color var(--transicao);
}

.nav__links a:hover {
  color: var(--acento);
}

.nav__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-24);
}

.nav__alternar {
  display: none;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 var(--e-16);
  border: 1px solid var(--linha);
  border-radius: var(--raio-botao);
  background: transparent;
  font-size: var(--label);
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .js .nav__alternar {
    display: inline-flex;
  }

  .js .nav__menu {
    display: none;
    position: absolute;
    inset: var(--nav-altura) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-24);
    padding: var(--e-8) var(--lateral) var(--e-32);
    border-bottom: 1px solid var(--linha);
    background: var(--preto);
  }

  .js .nav--aberto .nav__menu {
    display: flex;
  }

  .nav__links,
  .nav__acoes {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__links a {
    padding-block: 14px;
    border-bottom: 1px solid var(--linha);
    font-size: var(--corpo);
  }

  .nav__acoes {
    gap: var(--e-16);
  }

  /* sem JavaScript o menu fica à mostra, abaixo da barra */
  html:not(.js) .nav {
    position: static;
  }

  html:not(.js) .nav__barra {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    padding-block: var(--e-12) var(--e-24);
  }

  html:not(.js) .nav__menu {
    flex-direction: column;
    align-items: stretch;
  }
}

/* hero — banner escuro de ponta a ponta: mensagem à esquerda, formulário à direita */

.hero {
  background:
    radial-gradient(ellipse 55% 90% at 88% 20%, rgba(61, 232, 174, 0.16), transparent 62%),
    radial-gradient(ellipse 40% 60% at 60% 110%, rgba(255, 255, 255, 0.07), transparent 70%),
    linear-gradient(120deg, var(--preto) 35%, var(--grafite-800));
}

.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-64);
  align-items: center;
  min-height: 600px;
  padding-block: var(--e-64);
}

.hero h1 em {
  font-style: normal;
  color: var(--menta);
}

.hero .lead {
  margin-top: var(--e-24);
  max-width: 520px;
  color: var(--branco);
}

.hero__apoio {
  margin-top: var(--e-12);
  max-width: 520px;
  font-size: var(--corpo-pequeno);
  line-height: 1.6;
  color: var(--texto-2);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-12);
  margin-top: var(--e-32);
}

.hero__cartao {
  padding: var(--e-32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--raio-painel);
  background: rgba(22, 27, 25, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hero__cartao h2 {
  font-size: 22px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

.hero__cartao > p {
  margin-block: var(--e-8) var(--e-24);
  font-size: var(--label);
  line-height: 1.5;
  color: var(--texto-2);
}

@media (max-width: 1024px) {
  .hero__grade {
    grid-template-columns: 1fr;
    gap: var(--e-48);
    min-height: 0;
  }

  .hero__cartao {
    max-width: 560px;
  }
}

@media (max-width: 768px) {
  .hero__grade {
    padding-block: var(--e-48);
  }

  .hero__cartao {
    padding: var(--e-24);
  }

  .hero__acoes .botao {
    width: 100%;
  }
}

/* grades de cartões */

.grade {
  display: grid;
  gap: var(--gutter);
}

.grade--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grade--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 960px) {
  .grade--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .grade--2 {
    grid-template-columns: 1fr;
  }
}

/* passo — número pequeno ao lado do ícone */

.passo__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.passo__numero {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

/* destaque — título e botão à esquerda, painel à direita */

.destaque {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--e-64);
  align-items: center;
  margin-bottom: var(--e-64);
}

.destaque .lead {
  margin-top: var(--e-16);
}

.destaque .botao {
  margin-top: var(--e-32);
}

@media (max-width: 960px) {
  .destaque {
    grid-template-columns: 1fr;
    gap: var(--e-48);
    margin-bottom: var(--e-48);
  }
}

/* dúvidas — título à esquerda, lista à direita */

.duvidas {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--e-64);
  align-items: start;
}

.duvidas .lead {
  margin-top: var(--e-16);
}

@media (max-width: 960px) {
  .duvidas {
    grid-template-columns: 1fr;
    gap: var(--e-32);
  }
}

/* chamada final */

.chamada {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e-64);
  align-items: center;
}

.chamada .lead {
  margin-top: var(--e-16);
}

.chamada .botao {
  margin-top: var(--e-32);
}

.chamada__canais > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-24);
  padding-block: var(--e-16);
  border-bottom: 1px solid var(--linha);
}

.chamada__canais > div:first-child {
  border-top: 1px solid var(--linha);
}

.chamada__canais dd {
  font-size: var(--corpo-pequeno);
  text-align: right;
}

@media (max-width: 960px) {
  .chamada {
    grid-template-columns: 1fr;
    gap: var(--e-48);
  }
}

/* rodapé — colunas com título sublinhado por uma linha */

.rodape {
  padding-block: var(--e-64) var(--e-48);
  background: var(--preto);
}

.rodape__colunas {
  display: grid;
  grid-template-columns: 4fr 4fr 4fr;
  gap: var(--e-48);
  margin-block: var(--e-48) var(--e-32);
}

.rodape__titulo {
  margin-bottom: var(--e-16);
  padding-bottom: var(--e-12);
  border-bottom: 1px solid var(--linha);
  font-family: var(--fonte-corpo);
  font-size: var(--corpo-pequeno);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.rodape__lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--e-24);
}

.rodape__lista a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--label);
  font-weight: 500;
  color: var(--texto);
  transition: color var(--transicao);
}

.rodape__lista a:hover {
  color: var(--acento);
}

.rodape__dados {
  display: grid;
  gap: var(--e-12);
  font-size: var(--label);
  line-height: 1.6;
  color: var(--texto-2);
}

.rodape__dados dt {
  font-weight: 600;
  color: var(--texto);
}

/* a única menção a risco do site: uma linha, no tom do texto legal */
.rodape__risco {
  padding-top: var(--e-24);
  border-top: 1px solid var(--linha);
  font-size: var(--label);
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 880px;
}

.rodape__fim {
  margin-top: var(--e-16);
  font-size: var(--label);
  line-height: 1.6;
  color: var(--texto-2);
}

@media (max-width: 960px) {
  .rodape__colunas {
    grid-template-columns: 1fr;
    gap: var(--e-32);
  }
}

/* página de documento */

.documento__capa {
  padding-block: var(--e-64);
  background: linear-gradient(120deg, var(--preto) 35%, var(--grafite-800));
}

.documento__capa .lead {
  margin-top: var(--e-16);
}

.documento__grade {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px);
  gap: var(--e-64);
  align-items: start;
  padding-block: var(--e-64) var(--secao);
}

.sumario {
  position: sticky;
  top: calc(var(--nav-altura) + var(--e-32));
  padding: var(--e-24);
  border-radius: var(--raio-cartao);
  background: var(--branco-suave);
}

.sumario__titulo {
  margin-bottom: var(--e-8);
  font-size: var(--corpo-pequeno);
  font-weight: 600;
}

.sumario a {
  display: block;
  padding-block: var(--e-8);
  font-size: var(--label);
  line-height: 1.4;
  color: var(--texto-2);
  transition: color var(--transicao);
}

.sumario a:hover {
  color: var(--acento);
}

.documento__secao {
  padding-block: var(--e-32);
  border-top: 1px solid var(--linha);
  color: var(--texto-2);
}

.documento__secao:first-child {
  padding-top: 0;
  border-top: 0;
}

.documento__secao h2 {
  margin-bottom: var(--e-16);
  color: var(--texto);
}

.documento__secao p + p,
.documento__secao p + ul,
.documento__secao ul + p {
  margin-top: var(--e-16);
}

@media (max-width: 1023px) {
  .documento__grade {
    grid-template-columns: minmax(0, 720px);
  }

  .sumario {
    display: none;
  }
}

/* página de obrigado */

.obrigado {
  padding-block: var(--e-96) var(--secao);
  background: var(--branco-suave);
}

.obrigado__cartao {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--e-48);
  border-radius: var(--raio-painel);
  background: var(--branco);
  text-align: center;
}

.obrigado__selo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--e-24);
  border-radius: 50%;
  background: var(--menta-fraca);
  color: var(--menta-escura);
}

.obrigado__selo svg {
  width: 28px;
  height: 28px;
}

.obrigado .lead {
  margin: var(--e-16) auto 0;
}

.obrigado__passos {
  margin-top: var(--e-32);
  padding-top: var(--e-32);
  border-top: 1px solid var(--linha);
  text-align: left;
}

.obrigado__passos ol {
  display: grid;
  gap: var(--e-16);
  margin-top: var(--e-16);
  counter-reset: passo;
}

.obrigado__passos li {
  position: relative;
  padding-left: 40px;
  font-size: var(--corpo-pequeno);
  line-height: 1.6;
  color: var(--texto-2);
  counter-increment: passo;
}

.obrigado__passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--branco-suave);
  font-size: var(--label);
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  color: var(--texto);
}

.obrigado__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-12);
  margin-top: var(--e-32);
}

.obrigado__contato {
  margin-top: var(--e-24);
  font-size: var(--corpo-pequeno);
  color: var(--texto-2);
}

@media (max-width: 768px) {
  .obrigado {
    padding-block: var(--e-48) var(--secao);
  }

  .obrigado__cartao {
    padding: var(--e-32) var(--e-24);
  }
}