/*
 * O CSS do site. Cores, fontes e medidas são as das pranchas aprovadas
 * (docs/superpowers/pranchas/site/project).
 *
 * Fica todo aqui, e não em <style> na página, por causa da CSP. As fontes são
 * servidas do próprio site, nunca do Google Fonts: é LGPD (o Google veria cada
 * visita) e é CSP. Os caminhos são relativos a este arquivo, para valerem
 * também na homologação, em /site.
 */

/* Fontes: Archivo 600/700, IBM Plex Sans 400/500/600, IBM Plex Mono 400/500 (OFL, ver fontes/OFL.txt). */
@font-face {
  font-family: 'Archivo';
  src: url('fontes/Archivo-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fontes/Archivo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fontes/IBMPlexSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fontes/IBMPlexSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fontes/IBMPlexSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fontes/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fontes/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --fundo: #EBEEEA;
  --superficie: #F8FAF7;
  --texto: #14171A;
  --texto-2: #2B3035;
  --apagado: #5B635D;
  --linha: #D2D8D1;
  --borda: #B7C0B7;
  --verde: #1D6B54;
  --brasa: #E03C15;
  --rodape: #E1E6E0;
  --linha-rodape: #C9D0C8;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --titulo: Archivo, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
}

/* Some da tela, mas não do leitor de tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Marca --------------------------------------------------------------- */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--texto);
  text-decoration: none;
}
.marca__nome {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.035em;
}
.marca--compacta {
  gap: 2px;
}
.marca--compacta .marca__nome {
  font-size: 22px;
}
.marca--rodape .marca__nome {
  font-size: 24px;
}

/* --- Botão verde ("Criar conta grátis") ---------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--verde);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.botao--compacto {
  padding: 0 14px;
}

/* --- Seletor de idioma (cabeçalho largo e rodapé) ------------------------ */

.idiomas {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--mono);
  font-size: 13px;
}
.idiomas__item {
  padding: 8px 6px;
  color: var(--apagado);
  text-decoration: none;
}
.idiomas__item[aria-current='true'] {
  color: var(--texto);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--texto);
}

/* --- Cabeçalho ----------------------------------------------------------- */

.cabecalho {
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
}

.cabecalho__largo {
  /* O mesmo recuo do rodapé e das páginas: o logo começa na coluna do conteúdo (120 px em 1440). */
  --recuo: clamp(16px, 4vw, 40px);
  max-width: calc(1200px + 2 * var(--recuo));
  margin: 0 auto;
  padding: 16px var(--recuo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cabecalho__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}
.cabecalho__nav a {
  padding: 10px 0;
  color: var(--texto-2);
  text-decoration: none;
}
.cabecalho__nav a[aria-current='page'] {
  color: var(--texto);
  box-shadow: inset 0 -2px 0 var(--verde);
}
.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cabecalho__entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--texto);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

/* A versão compacta: logo, "Criar conta" e o botão do menu. */
.cabecalho__compacto {
  display: none;
  position: relative;
}
@media (max-width: 1179.98px) {
  .cabecalho__largo {
    display: none;
  }
  .cabecalho__compacto {
    display: block;
  }
}

.cabecalho__barra {
  /* À direita, o lugar do botão do menu (44 px), que fica por cima da barra. */
  padding: 12px 68px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* O menu é um <details>: abre e fecha sem JavaScript. */
.menu__botao {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}
.menu__botao::-webkit-details-marker {
  display: none;
}
.menu[open] .menu__abrir,
.menu:not([open]) .menu__fechar {
  display: none;
}

.menu__painel {
  border-top: 1px solid var(--linha);
  padding: 4px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.menu__nav {
  display: flex;
  flex-direction: column;
}
.menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--linha);
  color: var(--texto);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
.menu__nav a[aria-current='page'] {
  color: var(--verde);
  font-weight: 600;
}
.menu__aqui {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
}
.menu__idioma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menu__idioma > span {
  font-size: 14px;
  color: var(--apagado);
}
.menu__idiomas {
  display: flex;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
}
.menu__idiomas-item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--texto-2);
  text-decoration: none;
}
.menu__idiomas-item[aria-current='true'] {
  border-color: var(--texto);
  background: var(--texto);
  color: var(--superficie);
}
.menu__entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 10px;
  border: 1px solid var(--borda);
  color: var(--texto);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

/* --- Rodapé -------------------------------------------------------------- */

/*
 * O recuo lateral fica por fora da largura máxima, como nas seções das
 * páginas: o conteúdo do rodapé começa na mesma coluna que o delas (120 px
 * em 1440), e não 40 px para dentro.
 */
.rodape {
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--rodape);
  border-top: 1px solid var(--linha);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.6;
}
.rodape__dentro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.rodape__colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
}
.rodape__marca {
  flex: 1.4 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rodape__marca .marca {
  align-self: flex-start;
}
.rodape__marca p {
  margin: 0;
  max-width: 300px;
  color: var(--texto-2);
}
.rodape__nav {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rodape__nav h2 {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apagado);
}
.rodape__nav a {
  color: var(--texto-2);
  text-decoration: none;
}
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--linha-rodape);
  font-size: 14px;
  color: var(--apagado);
}

/* --- Aviso de cookies ---------------------------------------------------- */

/*
 * Quadros "Aviso de cookies — desktop" e "— celular": o cartão fixo no pé da
 * tela. Só existe com SITE_GA_ID e sai do build com `hidden`; o site.js mostra.
 * Os botões partem do `.botao` (Aceitar) e do `.botao--contorno` (Recusar).
 */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 10;
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(20, 23, 26, 0.18);
}
.cookies__texto {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cookies h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* O título recebe o foco quando o aviso abre pelo rodapé, para o leitor de tela anunciar; não é clicável, então sem contorno. */
.cookies h2:focus {
  outline: none;
}
/* O começo do conteúdo recebe o foco quando o aviso fecha pela escolha da primeira visita; não é clicável, então sem contorno. */
main:focus {
  outline: none;
}
.cookies p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-2);
}
.cookies a {
  color: var(--verde);
}
.cookies a:hover {
  color: #14513F;
}
.cookies__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cookies__botao {
  justify-content: center;
  min-width: 132px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--verde);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}
.cookies__botao.botao--contorno {
  border-color: var(--borda);
  background: #FFFFFF;
}

@media (max-width: 639.98px) {
  .cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }
  .cookies__texto {
    flex: none;
  }
  .cookies h2 {
    font-size: 19px;
  }
  .cookies p {
    line-height: 1.55;
  }
  .cookies__botoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cookies__botao {
    min-width: 0;
    padding: 0 12px;
  }
}

/* --- Páginas: o que se repete ------------------------------------------- */

/* `hidden` vale mesmo num elemento que o CSS põe em flex ou grid. */
[hidden] {
  display: none !important;
}

.sobrancelha {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
}
.sobrancelha--rec {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sobrancelha--apagada {
  color: var(--apagado);
}
/* O ponto de REC, sempre brasa. */
.ponto-rec {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brasa);
}
.ponto-rec--8 {
  width: 8px;
  height: 8px;
}

.titulo-secao {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.secao {
  padding: clamp(56px, 8vw, 112px) clamp(16px, 4vw, 40px);
}
.secao--clara {
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.secao--escura {
  background: #14171A;
  color: #E7EBE7;
}
.secao--escura .sobrancelha {
  color: #4BAB8A;
}
.secao__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.secao__cabeca {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.secao__cabeca--720 {
  max-width: 720px;
}

/* Os botões das chamadas: maiores que o do cabeçalho. */
.botao--grande {
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  font-size: 17px;
}
.botao--medio {
  min-height: 50px;
  padding: 0 22px;
  font-size: 16px;
}
.botao--contorno {
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto);
}

/* --- Home: abertura ------------------------------------------------------ */

.abertura {
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 40px) clamp(56px, 8vw, 112px);
}
.abertura__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.abertura__texto {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.abertura__titulo {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(42px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.abertura__lide {
  margin: 0;
  max-width: 560px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--texto-2);
}
.abertura__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.abertura__nota {
  margin: 0;
  font-size: 15px;
  color: var(--apagado);
}
.abertura__figura {
  flex: 1.25 1 520px;
  min-width: 0;
}

/* A ilustração do player: a gravação, a bolha da câmera e a transcrição. */
.player {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(20, 23, 26, 0.35);
}
.player__video {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 22px;
  background: #14171A;
}
.player__documento {
  height: 100%;
  padding: 14px;
  border-radius: 8px;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.player__titulo-doc {
  display: flex;
  gap: 8px;
}
.player__titulo-doc span {
  height: 10px;
  border-radius: 3px;
  background: #C9D0C8;
}
.player__titulo-doc span + span {
  background: #DCE1DB;
}
.player__linha {
  display: block;
  width: 100%;
  height: 9px;
  border-radius: 3px;
  background: #E4E8E3;
}
.player__linha--marcada {
  background: #DCEBE4;
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}
.player__bolha {
  position: absolute;
  left: 34px;
  bottom: 34px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid var(--superficie);
  background: var(--verde);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 22px;
}
.player__tocar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(248, 250, 247, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.player__progresso {
  padding: 10px 18px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.player__trilha {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--linha);
}
.player__trilha > div {
  height: 4px;
  border-radius: 2px;
  background: var(--verde);
}
.player__progresso > span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--apagado);
}
.player__legenda {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.player__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.player__cabeca strong {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.player__cabeca span {
  font-size: 13px;
  color: var(--apagado);
}
.player__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}
.selo {
  padding: 4px 10px;
  border-radius: 999px;
  background: #E4E8E3;
  color: var(--texto-2);
}
.selo--verde {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #DCEBE4;
  color: #14513F;
}
.player__falas {
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.fala {
  display: flex;
  gap: 12px;
  color: var(--apagado);
}
.fala__tempo {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 12px;
}
.fala--atual {
  margin: 0 -8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #DCEBE4;
  color: var(--texto);
}
.fala--atual .fala__tempo {
  color: #14513F;
}

/* --- Home: como funciona, onde entra, recursos --------------------------- */

.passos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.passos li {
  padding: 28px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--fundo);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.passos__numero {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--apagado);
}
.passos h3 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
}
.passos p {
  margin: 0;
  color: var(--texto-2);
}

.para-quem {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.para-quem__cabeca {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.para-quem__usos {
  flex: 1.6 1 520px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.para-quem__usos li {
  padding: 20px 0;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.para-quem__usos li:last-child {
  border-bottom: 1px solid var(--linha);
}
.para-quem__usos strong {
  flex: 0 0 180px;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 19px;
}
.para-quem__usos span {
  flex: 1 1 280px;
  color: var(--texto-2);
}

.recursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-top: 1px solid var(--linha);
  border-left: 1px solid var(--linha);
}
.recursos__item {
  padding: 28px;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recursos__item h3 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 18px;
}
.recursos__item p {
  margin: 0;
  font-size: 15px;
  color: var(--texto-2);
}

/* --- Home: relatório de audiência ---------------------------------------- */

.audiencia {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.audiencia__texto {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.audiencia__descricao {
  margin: 0;
  max-width: 520px;
  color: var(--texto-2);
}
.audiencia__quadro {
  flex: 1.2 1 480px;
  min-width: 0;
  padding: 8px 20px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--superficie);
}
.audiencia__tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.audiencia__tabela caption {
  padding: 14px 0 10px;
  text-align: left;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 16px;
}
.audiencia__tabela th {
  padding: 8px 0;
  text-align: left;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--apagado);
}
.audiencia__col-ate {
  width: 38%;
}
.audiencia__tabela tbody tr {
  border-top: 1px solid var(--linha);
}
.audiencia__tabela td {
  padding: 14px 8px 14px 0;
}
.audiencia__tabela td:last-child {
  padding: 14px 0;
}
.audiencia__quando,
.audiencia__origem {
  color: var(--apagado);
}
.audiencia__origem {
  font-size: 13px;
}
.audiencia__ate {
  display: flex;
  align-items: center;
  gap: 10px;
}
.audiencia__trilha {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #E4E8E3;
}
.audiencia__trilha > div {
  height: 6px;
  border-radius: 3px;
  background: var(--verde);
}
.audiencia__ate > span {
  font-family: var(--mono);
  font-size: 12px;
}

/* --- Home: segurança ----------------------------------------------------- */

.seguranca {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.seguranca__item {
  padding-top: 20px;
  border-top: 1px solid #2E3439;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seguranca__item h3 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 18px;
  color: var(--superficie);
}
.seguranca__item p,
.seguranca__politica {
  margin: 0;
  font-size: 15px;
  color: #B4BCB6;
}
.seguranca__politica a {
  color: #7FD0B1;
}

/* --- Bloco de planos (Home e Preços) ------------------------------------- */

.secao-planos {
  padding: clamp(24px, 4vw, 72px) 0;
}
.secao-planos--precos {
  padding: 0 0 clamp(32px, 5vw, 64px);
}
.planos {
  padding: 40px clamp(16px, 4vw, 40px);
}
.planos__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.planos__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.planos__titulo {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.planos__titulo > p:last-child {
  margin: 0;
  color: var(--texto-2);
}
/* Em Preços, a alternância vem sozinha, à esquerda. */
.planos__dentro > .ciclo {
  align-self: flex-start;
}

.ciclo {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--linha-rodape);
  border-radius: 12px;
  background: var(--superficie);
}
.ciclo__opcao {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.ciclo__opcao[aria-pressed='true'] {
  background: #14171A;
  color: var(--superficie);
}
/* Cada valor que muda com o ciclo aparece só no escolhido; sem escolha, é o mensal. */
.planos:not([data-ciclo-escolhido='anual']) [data-ciclo='anual'],
.planos[data-ciclo-escolhido='anual'] [data-ciclo='mensal'] {
  display: none;
}

/* A grade acomoda quantos planos o catálogo tiver: cada cartão tem no mínimo 250 px. */
.planos__cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.plano {
  padding: 28px;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.plano--destaque {
  border: 2px solid var(--verde);
}
.plano--escuro {
  border-color: #14171A;
  background: #14171A;
  color: #E7EBE7;
}
.plano__nome {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plano__nome h2,
.plano__nome h3 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 22px;
}
.plano__nome p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--apagado);
}
.plano__preco {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plano__preco p {
  margin: 0;
}
.plano__valor {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.plano__sufixo {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--apagado);
}
.plano__a-partir,
.plano__nota {
  font-size: 14px;
  color: var(--apagado);
}
.plano__acao {
  min-height: 48px;
  border-radius: 10px;
  background: var(--verde);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.plano__acao--contorno {
  border: 1px solid var(--borda);
  background: transparent;
  color: var(--texto);
}
.plano__acao--clara {
  background: var(--superficie);
  color: #14171A;
}
.plano__limites {
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.plano__limites li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plano__limite {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.plano__limite span {
  font-size: 14px;
  color: var(--apagado);
}
/* O valor não quebra ("sem limite" inteiro); quem quebra é o rótulo. */
.plano__limite strong {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.plano__barra {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.plano__barra span {
  height: 6px;
  border-radius: 3px;
  background: #DCE1DB;
}
.plano__barra .aceso {
  background: var(--verde);
}
.plano__extra {
  font-size: 13px;
  color: var(--apagado);
}
/* O cartão escuro, do plano de falar com o comercial. */
.plano--escuro .plano__nome h2,
.plano--escuro .plano__nome h3,
.plano--escuro .plano__valor,
.plano--escuro .plano__limite strong {
  color: var(--superficie);
}
.plano--escuro .plano__nome p,
.plano--escuro .plano__sufixo,
.plano--escuro .plano__a-partir,
.plano--escuro .plano__nota,
.plano--escuro .plano__limite span,
.plano--escuro .plano__extra {
  color: #B4BCB6;
}
.plano--escuro .plano__limites {
  border-top-color: #2E3439;
}
.plano--escuro .plano__barra span {
  background: #2E3439;
}
.plano--escuro .plano__barra .aceso {
  background: #4BAB8A;
}

.planos__todos {
  padding: 24px 28px;
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.planos__todos-titulo {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
}
.planos__todos ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px 24px;
  font-size: 15px;
}
.planos__todos li {
  display: flex;
  gap: 10px;
}
.planos__todos svg {
  flex: none;
  margin-top: 3px;
}
.planos__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.planos__rodape p {
  margin: 0;
  font-size: 15px;
  color: var(--apagado);
}
.planos__comparar {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--verde);
  font-weight: 600;
  text-decoration: none;
}

/* --- Perguntas frequentes (Home e Preços) -------------------------------- */

.perguntas {
  padding: clamp(56px, 8vw, 112px) clamp(16px, 4vw, 40px);
}
.perguntas--home {
  background: var(--superficie);
  border-top: 1px solid var(--linha);
}
.perguntas--precos {
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 40px);
}
.perguntas__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.perguntas__titulo {
  flex: 1 1 300px;
  min-width: 0;
}
.perguntas__titulo h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.perguntas--precos .perguntas__titulo h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}
.perguntas__lista {
  flex: 2 1 560px;
  min-width: 0;
  border-top: 1px solid var(--linha);
}
.perguntas details {
  border-bottom: 1px solid var(--linha);
}
.perguntas summary {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 19px;
}
.perguntas summary::-webkit-details-marker {
  display: none;
}
.perguntas summary svg {
  flex: none;
}
.perguntas details p {
  margin: 0 0 22px;
  max-width: 680px;
  color: var(--texto-2);
}
.perguntas details a {
  color: var(--verde);
}
.perguntas--precos summary {
  padding: 20px 0;
  font-size: 18px;
}
.perguntas--precos details p {
  margin-bottom: 20px;
}

/* --- Home: chamada final ------------------------------------------------- */

.chamada {
  padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px);
}
.chamada__caixa {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
  border-radius: 20px;
  background: var(--verde);
  color: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.chamada__texto {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chamada__texto h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.chamada__texto p {
  margin: 0;
  color: #DCEBE4;
}
.chamada__botao {
  min-height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  background: var(--superficie);
  color: #14513F;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
}

/* --- Preços -------------------------------------------------------------- */

.topo-precos {
  padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 40px) 40px;
}
.topo-precos__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.topo-precos h1 {
  margin: 0;
  max-width: 880px;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.topo-precos__texto {
  margin: 0;
  max-width: 720px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--texto-2);
}

.comparar {
  padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 40px);
  background: var(--superficie);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
.comparar__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.comparar h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
/* Abaixo de 760 px a tabela rola de lado; com foco, rola também pelo teclado. */
.comparar__rolagem {
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--fundo);
}
.comparar__tabela {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 15px;
}
.comparar__tabela thead tr {
  background: var(--superficie);
}
.comparar__tabela thead th {
  padding: 18px 16px;
  text-align: left;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 17px;
}
.comparar__tabela thead .comparar__canto {
  width: 32%;
  padding: 18px 20px;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--apagado);
}
.comparar__canto span {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.comparar__tabela tbody tr {
  border-top: 1px solid var(--linha);
}
.comparar__tabela tbody th {
  padding: 14px 20px;
  text-align: left;
  font-weight: 500;
}
.comparar__tabela td {
  padding: 14px 16px;
}
.comparar__tabela td.vazio {
  color: var(--apagado);
}

.duvida {
  padding: 0 clamp(16px, 4vw, 40px) clamp(56px, 8vw, 104px);
}
.duvida__caixa {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--superficie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.duvida__texto {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.duvida__texto h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.duvida__texto p {
  margin: 0;
  color: var(--texto-2);
}

/* --- Falar com o comercial ----------------------------------------------- */

.contato {
  padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 40px) clamp(56px, 8vw, 112px);
}
.contato__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 56px;
}
.contato__texto {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contato__texto h1 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.contato__lide {
  margin: 0;
  max-width: 520px;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--texto-2);
}
.contato__ajuda {
  margin-top: 8px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
}
.contato__ajuda > p {
  margin: 0;
  padding: 18px 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apagado);
}
.contato__ajuda ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.contato__ajuda li {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  display: flex;
  gap: 12px;
}
.contato__ajuda li > span:first-child {
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--apagado);
}
.contato__direto {
  margin: 0;
  font-size: 15px;
  color: var(--apagado);
}
.contato__direto a,
.contato__envio a {
  color: var(--verde);
}
.contato__quadro {
  flex: 1.1 1 440px;
  min-width: 0;
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--linha);
  border-radius: 18px;
  background: var(--superficie);
}
.contato__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contato__form h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 22px;
}
.contato__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.campo label {
  font-size: 14px;
  font-weight: 600;
}
.campo__opcional {
  font-weight: 400;
  color: var(--apagado);
}
.campo input,
.campo select,
.campo textarea {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
}
.campo select {
  padding: 0 12px;
}
.campo textarea {
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
/* A isca dos robôs: fora da tela, e não `display: none`, que alguns robôs pulam. */
.contato__isca {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contato__erro {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--brasa);
  border-radius: 10px;
  background: #FCEDE8;
  font-size: 15px;
}
.contato__envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.contato__envio p {
  margin: 0;
  max-width: 340px;
  font-size: 14px;
  color: var(--apagado);
}
.contato__enviar {
  min-height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: var(--verde);
  color: #FFFFFF;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
.contato__enviar:disabled {
  opacity: 0.6;
  cursor: progress;
}
.contato__enviado {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.contato__enviado h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
}
/* O título recebe o foco depois do envio, para o leitor de tela anunciar; não é clicável, então sem contorno. */
.contato__enviado h2:focus {
  outline: none;
}
.contato__enviado p {
  margin: 0;
  max-width: 440px;
  color: var(--texto-2);
}
/* Botão na página do formulário; link na página de confirmação. */
.contato__outra {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: transparent;
  color: var(--texto);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

/* --- Termos e Privacidade ------------------------------------------------ */

.legal {
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 40px) clamp(56px, 8vw, 104px);
  line-height: 1.7;
}
.legal__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.legal__aviso {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--verde);
  border-radius: 8px;
  background: var(--rodape);
  font-weight: 500;
}
.legal__aviso a {
  color: var(--texto);
  font-weight: 600;
}
.legal__cabeca {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Enquanto o texto não passou pelo jurídico. Some com `RASCUNHO = false` (src/legal/rascunho.ts). */
.legal__rascunho {
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  border: 1px dashed var(--brasa);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto);
}
.legal__documentos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.legal__documento {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  color: var(--texto-2);
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.legal__documento[aria-current='page'] {
  border-color: #14171A;
  background: #14171A;
  color: var(--superficie);
}
.legal__titulo {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.legal__vigencia {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--apagado);
}
.legal__corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}
.legal__indice {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 320px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  line-height: 1.4;
}
.legal__indice p {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apagado);
}
.legal__indice a {
  padding: 7px 0;
  color: var(--texto-2);
  text-decoration: none;
}
.legal__indice a:hover {
  color: var(--texto);
}
.legal__texto {
  flex: 3 1 560px;
  min-width: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.legal__resumo {
  margin: 0;
  font-size: 19px;
  color: var(--texto-2);
}
.legal__secao {
  padding-top: 28px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal__secao h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.legal__secao h3 {
  margin: 8px 0 0;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.legal__secao p {
  margin: 0;
  color: var(--texto-2);
}
.legal__secao ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--texto-2);
}

/* --- 404 ----------------------------------------------------------------- */

.nao-encontrada {
  padding: clamp(64px, 10vw, 140px) clamp(16px, 4vw, 40px);
}
.nao-encontrada__dentro {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}
.nao-encontrada__desenho {
  flex: 0 1 360px;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.nao-encontrada__desenho svg {
  max-width: 100%;
  height: auto;
}
.nao-encontrada__texto {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nao-encontrada__texto h1 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.nao-encontrada__lide {
  margin: 0;
  max-width: 520px;
  color: var(--texto-2);
}
.nao-encontrada__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.nao-encontrada__painel {
  margin: 0;
  font-size: 15px;
  color: var(--apagado);
}
.nao-encontrada__painel a {
  color: var(--verde);
}