/* =========================================================
   Sellum LP · seções
   Uma seção por bloco, na ordem do Figma (frame 1520:883).
   Toda seção: py 120 (espaco/120) e margem lateral 80 (margem-web).
   ========================================================= */

/* ---------- Header LP (Figma: set 1542:1241) ----------
   Um único header fixo com dois estados:
   - Topo (scroll <= 80 px, 1542:1195): faixa preta, cápsula sem fundo.
   - Rolado (.is-rolado, 1542:1218): faixa transparente, cápsula com fundo
     sólido (superfície do tema), borda sutil e sombra suave. No Figma a
     cápsula ainda é translúcida com desfoque.
   Mesma estrutura nos dois (js/cabecalho.js). No Topo o conteúdo do menu
   fica alinhado com o conteúdo da página; no Rolado ele se comprime para
   dentro da cápsula (o Figma ainda mostra os dois estados iguais). */
:root {
  --altura-cabecalho: 110px; /* 20 + cápsula 70 (10 + botão 48 + 10 + borda 2) + 20 */

  /* Páginas internas (Figma: coleção Sellum / Medidas). Mover para tokens.css. */
  --largura-conteudo-interno: 1024px; /* largura/conteudo-interno: 80% do conteúdo da home */
  --largura-texto-interno: 720px;     /* largura/texto: coluna de leitura */
  --largura-indice: 240px;            /* largura/indice: menu lateral das políticas */
  --linha-progresso: 4px;             /* linha/progresso: barra de leitura do blog */
}

html {
  scroll-padding-top: var(--altura-cabecalho); /* âncoras não ficam sob o header */
}

main {
  padding-top: var(--altura-cabecalho);
}

.cabecalho {
  --cabecalho-padding-y: 20px; /* Figma: py 20 (fora da escala) */

  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  padding-block: var(--cabecalho-padding-y);
  background-color: var(--tema-fundo);
  transition: background-color var(--transicao-estado);
}

.cabecalho__capsula {
  --capsula-padding-esquerda: 28px; /* Figma: pl 28 (fora da escala) */
  --capsula-padding: 10px;          /* proporcional ao botão de 48 (Figma: 12 com botão de 48 numa cápsula de 72) */
  --menu-gap: 36px;                 /* Figma: gap 36 (fora da escala) */

  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Topo: sem recuo lateral, logo e botão alinhados com as bordas do conteúdo.
     Rolado: a cápsula aparece e o conteúdo se comprime para dentro dela. */
  margin-inline: calc(-1 * var(--linha-fina)); /* compensa a borda transparente: alinhamento exato com o conteúdo */
  padding: var(--capsula-padding) 0;
  background-color: transparent;
  border: var(--linha-fina) solid transparent;
  border-radius: var(--raio-card); /* 24: mais retangular. No Figma a cápsula é pill (raio total) */
  transition:
    padding var(--transicao-estado),
    margin var(--transicao-estado),
    background-color var(--transicao-estado),
    border-color var(--transicao-estado),
    box-shadow var(--transicao-estado);
}

/* No header os botões têm 48 px de altura (no resto do site, 56) */
.cabecalho .botao { --botao-padding-y: 12px; }
.cabecalho .botao--icone { width: 48px; height: 48px; }

/* Duas cápsulas lado a lado: o menu (ocupa o espaço que sobra) e os utilitários (tema e idioma) */
.cabecalho > .container {
  display: flex;
  align-items: stretch;
  gap: var(--espaco-8);
}
.cabecalho__capsula { flex: 1; min-width: 0; }
.cabecalho__capsula--utilitarios {
  flex: none;
  gap: var(--espaco-8);
}
.cabecalho.is-rolado .cabecalho__capsula.cabecalho__capsula--utilitarios { padding: var(--capsula-padding); }
@media (max-width: 1279px) {
  /* abaixo de 1280 px o logo, o menu e os botões já ocupam a largura toda:
     os utilitários saem do header (o tema fica no rodapé) e os links do
     menu ficam um pouco mais juntos */
  .cabecalho .cabecalho__capsula--utilitarios { display: none; }
  .cabecalho__capsula { --menu-gap: 24px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  /* faixa mais apertada com o menu inteiro: só o símbolo do logo (38 de 135 do desenho) */
  .cabecalho .logo { flex-shrink: 0; width: 38px; overflow: hidden; }
}

/* Seletor de idiomas: globo que abre uma lista (details/summary; js/idiomas.js fecha ao clicar fora) */
.idiomas { position: relative; }
.idiomas summary { list-style: none; }
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas__lista {
  position: absolute;
  top: calc(100% + var(--espaco-16));
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  margin: 0;
  padding: var(--espaco-8);
  list-style: none;
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}
.idiomas__item {
  display: block;
  padding: var(--espaco-12) var(--espaco-16);
  color: var(--tema-texto-2);
  text-decoration: none;
  border-radius: var(--raio-ui);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.idiomas__item:hover,
.idiomas__item:focus-visible { color: var(--tema-texto); background: var(--tema-superficie); }
.idiomas__item[aria-current] { color: var(--tema-texto); }

.cabecalho.is-rolado {
  background-color: transparent;
}
.cabecalho.is-rolado .cabecalho__capsula {
  margin-inline: 0;
  padding: var(--capsula-padding) var(--capsula-padding) var(--capsula-padding) var(--capsula-padding-esquerda);
  /* TESTE: no estado Rolado a cápsula usa o esquema de cores da caixa do rodapé, o
     inverso do tema da página: neutro/200 com textos escuros no tema escuro, e
     neutro/900 com textos claros no tema claro (regra junto à do rodapé). No
     estado Topo a cápsula é transparente e segue o tema da página.
     PARA DESFAZER: volte este fundo para var(--tema-superficie) e tire a cápsula
     das duas listas marcadas com "TESTE: menu" (aqui e em css/componentes.css). */
  color: var(--tema-texto);
  background-color: var(--cor-neutro-200);
  border-color: var(--tema-linha-sutil);
  box-shadow: var(--sombra);
}

@media (prefers-reduced-motion: reduce) {
  .cabecalho,
  .cabecalho__capsula {
    transition: none;
  }
}

.cabecalho__menu {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabecalho__menu a {
  color: var(--tema-texto-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cabecalho__menu a:hover,
.cabecalho__menu a:focus-visible {
  color: var(--tema-texto);
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-8);
}

/* ---------- Menu de produtos (Figma 1545:1558 · Opção 3 · Card compacto) ----------
   Painel de 760 centralizado na página, 36 px abaixo da cápsula (20 do py do
   header + 16). Abre no hover ou no foco de "Produtos"; js/cabecalho.js cuida
   de toque, Esc e aria-expanded. Sem JS o hover e o foco continuam abrindo.
   Valores fora da escala de tokens ficam declarados aqui, como no Figma. */
.cabecalho__capsula { position: relative; }

.menu-produtos {
  --menu-produtos-largura: 760px;
  --menu-produtos-distancia: 36px;      /* 20 (py do header) + 16 */
  --menu-produtos-raio: 28px;           /* Figma: raio 28 (fora da escala) */
  --menu-produtos-raio-celula: 16px;    /* Figma: raio 16 (fora da escala) */
  --menu-produtos-celula-y: 14px;       /* Figma: py 14 / gap 14 (fora da escala) */
  --menu-produtos-icone: 10px;          /* Figma: p 10 (fora da escala) */
  --menu-produtos-rodape-y: 18px;       /* Figma: py 18 (fora da escala) */
}

/* O link ocupa a altura inteira da cápsula: o ponteiro desce de "Produtos" até
   o painel sem sair da área que mantém o menu aberto. */
.menu-produtos__gatilho {
  display: block;
  margin-block: calc(-1 * var(--espaco-24));
  padding-block: var(--espaco-24);
}
.menu-produtos:hover > .menu-produtos__gatilho,
.menu-produtos:focus-within > .menu-produtos__gatilho,
.menu-produtos.is-aberto > .menu-produtos__gatilho { color: var(--tema-texto); }

.menu-produtos__painel {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 1;
  width: var(--menu-produtos-largura);
  padding-top: var(--menu-produtos-distancia); /* ponte de hover até a caixa */
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.menu-produtos:hover > .menu-produtos__painel,
.menu-produtos:focus-within > .menu-produtos__painel,
.menu-produtos.is-aberto > .menu-produtos__painel {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.menu-produtos.is-fechado > .menu-produtos__painel { opacity: 0; visibility: hidden; }

.menu-produtos__caixa {
  overflow: hidden;
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--menu-produtos-raio);
  box-shadow: var(--sombra);
}
.menu-produtos__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-8);
  padding: var(--espaco-16);
}
.cabecalho__menu .menu-produtos__item {
  display: flex;
  align-items: flex-start;
  gap: var(--menu-produtos-celula-y);
  padding: var(--menu-produtos-celula-y) var(--espaco-16);
  border-radius: var(--menu-produtos-raio-celula);
  transition: background-color 0.2s ease;
}
.cabecalho__menu .menu-produtos__item:hover,
.cabecalho__menu .menu-produtos__item:focus-visible { background: var(--tema-superficie); }
.menu-produtos__icone {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: var(--menu-produtos-icone);
  background: var(--tema-superficie);
  border-radius: var(--raio-ui);
}
.menu-produtos__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px; /* Figma: gap 2 (fora da escala) */
  min-width: 0;
}
.menu-produtos__nome { color: var(--tema-texto); }
.menu-produtos__descricao { color: var(--tema-texto-3); }
.menu-produtos__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--menu-produtos-rodape-y) var(--espaco-32);
  background: var(--tema-fundo);
  color: var(--tema-texto-2);
}
.cabecalho__menu .menu-produtos__link {
  display: flex;
  gap: var(--espaco-8);
  color: var(--tema-texto);
}
.cabecalho__menu .menu-produtos__link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .menu-produtos__painel,
  .menu-produtos__item { transition: none; }
}

/* ---------- 01 Hero (Figma 1520:902) ---------- */
.hero__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-48);
  text-align: center;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--espaco-16);
}

/* Frase alternada do título (js/rotacao.js): linha fixa em cima e, embaixo, as
   frases se revezam. Todas ocupam a mesma célula, então a linha tem sempre a
   altura da frase mais alta e nada pula. Cada palavra fica numa máscara:
   entra subindo de baixo e sai por cima, em cascata. Fora do Figma: teste. */
.rotacao.is-ativa { display: block; }
.rotacao__palco { display: grid; }
.rotacao__frase {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.rotacao__mascara {
  display: inline-block;
  overflow: hidden;
  /* folga para as descendentes (g, p, ç) não serem cortadas pela máscara */
  margin-bottom: -0.15em;
  padding-bottom: 0.15em;
}
.rotacao__palavra {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}
/* a transição só vale depois que a página carregou (js/rotacao.js põe is-pronta):
   antes disso as frases escondidas ficam escondidas na hora, sem animar */
.rotacao.is-pronta .rotacao__palavra {
  transition: opacity 0.45s cubic-bezier(0.65, 0, 0.35, 1), transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.rotacao__frase.is-atual .rotacao__palavra { opacity: 1; transform: none; }
.rotacao__frase.is-saindo .rotacao__palavra { transform: translateY(-100%); }

/* Frase de baixo do hero em degradê, da esquerda para a direita: da cor do
   texto do tema (branco no escuro, preto no claro) para o azul da marca.
   TESTE no escuro: o azul da marca sobre o preto tem contraste baixo (cerca
   de 2,4:1); antes terminava no azul médio (--cor-apoio-azul-medio).
   Sem JS o degradê fica no próprio texto; com a rotação, em cada palavra
   (js/rotacao.js informa a largura da frase e a posição). Fora do Figma. */
.hero__titulo .rotacao {
  --frase-degrade: linear-gradient(90deg, var(--tema-texto), var(--cor-marca-azul));
}
.hero__titulo .rotacao:not(.is-ativa),
.hero__titulo .rotacao__palavra {
  background-image: var(--frase-degrade);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero__titulo .rotacao__palavra {
  background-size: var(--frase-largura, 100%) 100%;
  background-position: calc(-1 * var(--palavra-x, 0px)) 0;
}

/* ---------- Cards de destaque por etapa da venda ----------
   Três seções (Captação, Conversão, Retenção), cada uma com uma
   distribuição de cards: 2 verticais + faixa; faixa horizontal + 2
   compactos; 3 colunas. No Figma (1526:1268) existe só a de Conversão. */
.destaques__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-64);
}
.destaques__cards {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
}
.destaques__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-24);
}
.destaques__linha--tres {
  --card-compacto-altura: 360px;

  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- 03 Mais uma plataforma (Figma 1523:9979) ----------
   Caixa neutro/200 com título central e selos de apps soltos.
   Posições dos selos em % da largura de 1280 do Figma. */
/* A seção não tem respiro próprio: a caixa é a seção. O espaço de cima e de
   baixo vem das seções vizinhas. */
.plataforma { padding-block: 0; }
.plataforma__caixa {
  --caixa-altura: 486px; /* Figma: 726 da seção - 2 x 120 */
  --caixa-raio: 50px;    /* Figma: raio 50 (fora da escala) */
  --app-tamanho: 64px;       /* tamanho dos selos. No Figma são 86 (--app-tamanho-figma) */
  --app-tamanho-figma: 86px; /* as posições abaixo foram medidas com este tamanho */

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--caixa-altura);
  /* mesmo fundo e borda dos cards de plano: acompanha o tema da página */
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--caixa-raio);
}
.plataforma__titulo {
  position: relative;
  z-index: 1;
  color: var(--tema-texto);
  text-align: center;
}
/* Digitação (js/digitacao.js): a segunda linha do título alterna as frases
   de data-digitacao. A linha reserva a própria altura para a caixa não
   pular quando o texto é apagado. Fora do Figma: teste de texto. */
.digitacao { display: block; }
.digitacao.is-ativa { min-height: 1lh; }
.digitacao__barra {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 4px;
  vertical-align: -0.08em;
  background: currentColor;
}
.digitacao.is-parada .digitacao__barra { animation: digitacao-piscar 1s steps(1) infinite; }
@keyframes digitacao-piscar {
  50% { opacity: 0; }
}
/* Selo: anel de vidro (efeito Glass do Figma, exportado em 3x) + logo em SVG.
   Flutuação: cada selo percorre um pequeno trajeto (sobe/desce, desliza
   para os lados e gira de leve), em ritmo e fase próprios. */
.plataforma__app {
  --flutuar-y: 14px;        /* deslocamento vertical máximo */
  --flutuar-x: 6px;         /* deslocamento lateral máximo */
  --flutuar-giro: 4deg;     /* rotação máxima */
  --flutuar-duracao: 7s;
  --flutuar-atraso: 0s;

  position: absolute;
  width: var(--app-tamanho);
  height: var(--app-tamanho);
  margin: calc((var(--app-tamanho-figma) - var(--app-tamanho)) / 2); /* mantém o centro de cada selo onde estava */
  background: url("../img/app-anel.png") center / 100% 100% no-repeat;
  animation: plataforma-flutuar var(--flutuar-duracao) ease-in-out var(--flutuar-atraso) infinite;
  will-change: transform;
}
.plataforma__app img { width: 100%; height: 100%; }

@keyframes plataforma-flutuar {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--flutuar-x), calc(-1 * var(--flutuar-y))) rotate(var(--flutuar-giro)); }
  50% { transform: translate(0, calc(-0.4 * var(--flutuar-y))) rotate(0deg); }
  75% { transform: translate(calc(-1 * var(--flutuar-x)), calc(-0.8 * var(--flutuar-y))) rotate(calc(-1 * var(--flutuar-giro))); }
}
@media (prefers-reduced-motion: reduce) {
  .plataforma__app { animation: none; }
}
.plataforma__app--pipedrive { left: 11.016%; top: 41px;    --flutuar-duracao: 6.4s; --flutuar-atraso: -1.2s; } /* 141, 41 */
.plataforma__app--excel     { left: 85.234%; top: 44.72px; --flutuar-duracao: 7.6s; --flutuar-atraso: -4.1s; } /* 1091, 44.72 */
.plataforma__app--power-bi  { left: 4.297%;  top: 199px;   --flutuar-duracao: 7.1s; --flutuar-atraso: -2.4s; } /* 55, 199 */
.plataforma__app--openai    { left: 88.359%; top: 211px;   --flutuar-duracao: 6.1s; --flutuar-atraso: -0.6s; } /* 1131, 211 */
.plataforma__app--zendesk   { left: 18.984%; top: 327px;   --flutuar-duracao: 8.0s; --flutuar-atraso: -5.0s; } /* 243, 327 */
.plataforma__app--shopify   { left: 73.516%; top: 338px;   --flutuar-duracao: 6.8s; --flutuar-atraso: -2.8s; } /* 941, 338 */

/* ---------- Chamada final com especialista (Figma 1568:7212) ----------
   Foto redonda de 100 px, Título/3 centralizado e os dois botões do hero. */
.chamada-final__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-48);
  text-align: center;
}
.chamada-final__foto {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--raio-pill);
}
.chamada-final__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-16);
}

/* ---------- Calculadora de potencial de ganho (fora do Figma: teste) ----------
   Modal em tela cheia. Topo: título no canto esquerdo, alternador Por ano /
   Por mês e fechar no direito. Corpo: três colunas numeradas, na ordem da
   conta: 1 Faturamento (entrada), 2 Incrementos (as três frentes) e
   3 Resultado + CTA (azul). */
.calculadora__form {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espaco-32);
}
.calculadora__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-16);
  padding-inline: var(--espaco-32);
}
.calculadora__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
}
.calculadora__conteudo {
  --calculadora-linha: var(--cor-apoio-azul-vivo);

  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
  margin-block: auto; /* colunas centralizadas na altura que sobra */
}
.calculadora__colunas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-24);
}
.calculadora__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
  box-sizing: border-box;
  min-height: 440px;
  padding: var(--espaco-32);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-box);
}
.calculadora__coluna--resultado {
  --calculadora-linha: var(--cor-apoio-azul-medio);

  background: var(--cor-marca-azul);
  border-color: var(--cor-marca-azul); /* sem borda visível no azul */
}

/* Cabeça de cada coluna: número do passo + nome */
.calculadora__passo {
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
  margin: 0;
  color: var(--tema-texto);
}
.calculadora__numero {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--tema-texto);
  background: var(--tema-superficie);
  border-radius: var(--raio-pill);
}
.calculadora__coluna--resultado .calculadora__numero { background: var(--cor-apoio-azul-vivo); }
.calculadora__periodo { margin-left: auto; color: var(--tema-texto-2); font-weight: 400; }

/* O alternador de período e os atalhos de faturamento são o Seletor segmentado (css/componentes.css) */
/* Na coluna de faturamento as quatro opções não cabem com px 18: o mesmo componente, com recuo lateral 12 */
.calculadora__coluna .seletor { --seletor-opcao-padding: var(--espaco-8) var(--espaco-12); }

/* Número grande sobre uma linha (entrada na coluna 1, total na coluna 3) */
.calculadora__numero-grande {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  margin-top: auto; /* encosta o número na parte de baixo da coluna */
  padding-bottom: var(--espaco-12);
  border-bottom: var(--linha-fina) solid var(--calculadora-linha);
}
.calculadora__numero-grande:focus-within { border-bottom-color: var(--tema-texto); }
.calculadora__rotulo { color: var(--tema-texto-2); }
.calculadora__campo,
.calculadora__total-valor {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--tema-texto);
  background: transparent;
  border: 0;
  outline: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calculadora__apoio { color: var(--tema-texto-2); }
.calculadora__coluna--resultado .calculadora__rotulo,
.calculadora__coluna--resultado .calculadora__apoio { color: var(--cor-apoio-azul-claro); }
.calculadora__cta { align-self: stretch; }

/* Coluna 2: as três frentes, uma embaixo da outra */
.calculadora__etapas {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.calculadora__etapa {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-12);
}
.calculadora__valor {
  padding-bottom: var(--espaco-12);
  color: var(--tema-texto);
  border-bottom: var(--linha-fina) solid var(--calculadora-linha);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calculadora__etapa-nome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-8);
  color: var(--tema-texto-2);
}
.calculadora__taxa {
  padding: 2px var(--espaco-8);
  color: var(--tema-texto);
  background: var(--cor-marca-azul);
  border-radius: var(--raio-pill);
}
.calculadora__nota { color: var(--tema-texto-3); text-align: center; }

@media (max-width: 1099px) {
  /* colunas estreitas demais para os números: uma embaixo da outra */
  .calculadora__colunas { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .calculadora__conteudo { width: 100%; }
  .calculadora__coluna { min-height: 0; }
  .calculadora__numero-grande { margin-top: 0; }
}
@media (max-width: 767px) {
  .calculadora__topo { padding-inline: 20px; }
  .calculadora__coluna { padding: var(--espaco-24); border-radius: var(--raio-card); }
}

/* ---------- 04 Integrações (Figma 1522:932) ---------- */
.integracoes__composicao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-120);
  padding: var(--espaco-64);
}
.integracoes__rotulo { color: var(--tema-texto); }
.integracoes__logos {
  display: flex;
  align-items: center;
  gap: var(--espaco-64);
}

/* ---------- 05 Depoimentos (Figma 1522:953) ---------- */
.depoimentos__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
}
.depoimentos__cards {
  --card-azul-largura: 496px; /* Figma: card Azul com largura fixa */

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--card-azul-largura);
  gap: var(--espaco-24);
}
.depoimentos__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-48);
}
.depoimentos__midia {
  display: flex;
  align-items: center;
  gap: var(--espaco-48);
}
/* Logos de imprensa: SVG inline em currentColor. Figma: neutro/400; hover branco. */
.depoimentos__midia li {
  color: var(--tema-texto-2);
  transition: color 0.2s ease;
}
.depoimentos__midia li:hover { color: var(--tema-texto); }
.depoimentos__midia svg { display: block; }

/* ---------- 06 Perguntas (Figma 1522:1014) ---------- */
.perguntas__colunas {
  --coluna-esquerda: 400px;

  display: flex;
  align-items: flex-start;
  gap: var(--espaco-64);
}
.perguntas__esquerda {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-32);
  width: var(--coluna-esquerda);
}
.perguntas__cabeca {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
}
.perguntas__cabeca .corpo-m { color: var(--tema-texto-2); }
.perguntas__lista {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--espaco-12);
  min-width: 0;
}

/* ---------- 07 Rodapé (Rodapé LP, Figma 1565:1728) ----------
   Fora do Figma: o rodapé fica dentro de uma caixa igual à de "Você não
   precisa de mais um sistema" (.plataforma__caixa): raio 50, na largura do
   conteúdo. No tema escuro é uma ilha clara (css/componentes.css), em
   neutro/200 com textos escuros; no tema claro as cores se invertem. Atrás dela vem a marca gigante, que fecha a página. */
.rodape {
  --marca-altura: calc(100vw * 319.294 / 1280); /* a marca tem a largura da janela; proporção do desenho */
  --marca-sobreposicao: 0.8;                    /* fração da altura da marca que fica atrás da caixa (sobram 20% à mostra) */

  position: relative;
  isolation: isolate; /* a marca fica atrás da caixa, mas na frente do fundo da página */
  padding: var(--espaco-secao) var(--margem-lateral); /* em cima e embaixo, o mesmo respiro das seções */
  overflow: clip; /* em janelas largas a ponta da marca passa do respiro: corta no fim da página */
}
.rodape .rodape__conteudo {
  --rodape-padding-base: 40px; /* Figma: pb 40 (fora da escala) */
  --caixa-raio: 50px;          /* igual ao da .plataforma__caixa */
  /* sobre o neutro/200 os cinzas de apoio precisam de um tom a mais */
  --tema-texto-3: var(--cor-neutro-700);
  --tema-borda-forte: var(--cor-neutro-400);

  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
  max-width: var(--largura-conteudo);
  padding: var(--espaco-64) var(--espaco-64) var(--rodape-padding-base);
  color: var(--tema-texto);
  background: var(--cor-neutro-200);
  border-radius: var(--caixa-raio);
}
/* A caixa do rodapé é sempre o inverso do tema da página: clara (acima) no tema
   escuro, escura no tema claro. Só as cores mudam. A caixa do campo de pergunta
   (.pergunta-rapida) usa as mesmas cores e inverte junto. */
[data-tema="claro"] .rodape .rodape__conteudo,
[data-tema="claro"] .pergunta-rapida > .container,
[data-tema="claro"] .cabecalho.is-rolado .cabecalho__capsula { /* TESTE: menu com as cores do rodapé */
  color-scheme: dark;
  --tema-fundo: var(--cor-neutro-preto);
  --tema-superficie: var(--cor-neutro-900);
  --tema-borda: var(--cor-neutro-800);
  --tema-borda-forte: var(--cor-neutro-700);
  --tema-linha-sutil: var(--cor-linha-sutil);
  --tema-texto: var(--cor-neutro-branco);
  --tema-texto-suave: var(--cor-neutro-300);
  --tema-texto-2: var(--cor-neutro-400);
  --tema-texto-3: var(--cor-neutro-400);
  --tema-contraste: var(--cor-neutro-branco);
  --tema-contraste-texto: var(--cor-neutro-preto);
  --tema-contraste-hover: var(--cor-neutro-200);
  background: var(--cor-neutro-900);
}
.rodape__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-48);
}
.rodape__chamada {
  --chamada-gap: 20px; /* Figma: gap 20 (fora da escala) */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--chamada-gap);
}
.rodape__logo svg { width: auto; height: 32px; }
.rodape__texto { max-width: 320px; color: var(--tema-texto-3); }
.rodape__redes {
  display: flex;
  gap: var(--espaco-8); /* Figma: botões de ícone (Botão Tipo=Ícone, Contorno), gap 8 */
}
/* Redes sociais no tamanho do botão do DS (Figma set 1551:835: 48 px), como no header */
.rodape__redes .botao--icone { width: 48px; height: 48px; }
.rodape__colunas {
  display: flex;
  gap: var(--espaco-64);
}
.rodape__coluna,
.rodape__coluna ul {
  --coluna-gap: 14px; /* Figma: gap 14 (fora da escala) */

  display: flex;
  flex-direction: column;
  gap: var(--coluna-gap);
}
.rodape__coluna-titulo { color: var(--tema-texto); }
.rodape__coluna a,
.rodape__base a {
  color: var(--tema-texto-3);
  text-decoration: none;
  transition: color 0.2s ease;
}
.rodape__coluna a:hover,
.rodape__base a:hover { color: var(--tema-texto); }

/* Marca gigante: fora da caixa, como fundo do fim da página. Ocupa 100% da
   largura da janela e encosta no fim da página. Fica atrás da caixa do rodapé,
   que cobre o alto das letras (--marca-sobreposicao).
   O arquivo traz um degradê azul -> preto fixo; aqui ele vira só o recorte das
   letras (máscara) e o degradê é refeito para sumir na cor de fundo do tema. */
.rodape::after {
  content: "";
  position: relative;
  z-index: -1;
  display: block;
  width: 100vw;
  height: var(--marca-altura);
  /* sobe para trás da caixa e sai da margem lateral do rodapé; a parte que sobra à
     mostra não ocupa espaço: fica por cima do respiro de baixo do rodapé */
  margin: calc(-1 * var(--marca-sobreposicao) * var(--marca-altura)) 0 calc(-1 * (1 - var(--marca-sobreposicao)) * var(--marca-altura)) calc(50% - 50vw);
  /* azul da marca cheio até a borda de baixo da caixa; dali some até a cor de fundo no fim da página */
  background: linear-gradient(to bottom, var(--cor-marca-azul) calc(var(--marca-sobreposicao) * 100%), var(--tema-fundo) 100%);
  -webkit-mask: url("../img/marca-sellum.svg") center / 100% 100% no-repeat;
  mask: url("../img/marca-sellum.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-24);
  padding-top: var(--espaco-32); /* respiro entre a divisória e o texto */
  color: var(--tema-texto-3);
  border-top: var(--linha-fina) solid var(--tema-borda-forte); /* divisória acima da linha de direitos */
}
.rodape__legal {
  display: flex;
  gap: 1.25em; /* Figma: 5 espaços entre os nomes, em Rótulo/UI */
}

/* ---------- Página de integrações (integracoes.html) ----------
   Título, Seletor segmentado de filtro e grade com um card por integração.
   Fora do Figma: teste. */
.integracoes-pagina__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
}
.integracoes-pagina__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espaco-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.integracoes-pagina__cards[hidden],
.integracoes-pagina__cards [hidden] { display: none; }
.integracoes-pagina__cards > li { display: flex; }
/* Card de integração: Card de destaque compacto, com o logo no lugar da caixa de ícone */
/* Aqui a caixa de ícone fica no Tamanho=P (48), para acompanhar a altura dos logos */
.card-integracao { --card-recuo: var(--espaco-32); --card-icone-caixa: 48px; --card-icone: 24px; width: 100%; }
.card-integracao__logo {
  position: absolute;
  top: var(--card-recuo);
  left: var(--card-recuo);
  display: flex;
  align-items: center;
  height: var(--card-icone-caixa);
}
.card-integracao__logo img { display: block; width: auto; height: 100%; }
[data-tema="claro"] .card-integracao__logo img { filter: invert(1); } /* logos gravados em claro */
.card-integracao .card-destaque__icone { color: var(--tema-texto); }
.integracoes-pagina__vazio { margin: 0; color: var(--tema-texto-2); }

.integracoes-pagina__vazio[hidden] { display: none; }
@media (max-width: 1099px) {
  .integracoes-pagina__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .integracoes-pagina__cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Preços · 01 Planos (Figma 1587:1905) ----------
   Página precos.html. Três Cards de plano de 410 px (1280 - 2 x 24) e CTA. */
.planos__conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-64);
}
.planos__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-24);
  width: 100%;
}

/* O nome do card leva à página do ERP; o clique vale no card inteiro */
.card-integracao__link { color: inherit; text-decoration: none; }
.card-integracao__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-integracao__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-integracao__link:focus-visible { outline: 0; }
.card-integracao__link:focus-visible::after { outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo); outline-offset: var(--linha-espessura); }

/* Página de ERP (integracoes/<erp>/index.html). Fora do Figma: estrutura da
   referência enviada em 05/10/2026. Trilha em cima; à esquerda logo, nome e
   os blocos de texto; à direita o formulário de contato (Caixa de info) e os
   dados do ERP. Em telas estreitas vira uma coluna, com o formulário depois do texto. */
.integracao-erp__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
}
.integracao-erp__trilha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-16);
  padding-bottom: var(--espaco-24);
  color: var(--tema-texto-2);
  border-bottom: var(--linha-fina) solid var(--tema-borda);
}
.integracao-erp__trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.integracao-erp__trilha li + li::before { content: "/"; margin-right: var(--espaco-8); color: var(--tema-texto-3); }
.integracao-erp__trilha a { color: var(--tema-texto); }
.integracao-erp__trilha .link-seta { text-decoration: none; }
.integracao-erp__colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--espaco-64);
  align-items: start;
}
.integracao-erp__principal,
.integracao-erp__lateral {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-32);
}
.integracao-erp__lateral { align-items: stretch; }
.integracao-erp__logo { display: flex; align-items: center; height: 48px; } /* mesma altura dos logos nos cards */
.integracao-erp__logo img { display: block; width: auto; height: 100%; }
[data-tema="claro"] .integracao-erp__logo img { filter: invert(1); } /* logos gravados em claro */
.integracao-erp__icone { --card-icone-caixa: 48px; --card-icone: 24px; position: static; color: var(--tema-texto); } /* caixa de ícone do card, fora do card */
.integracao-erp__bloco {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-12);
}
.integracao-erp__bloco .web-corpo { color: var(--tema-texto-2); }
.integracao-erp__bloco ul { margin: 0; padding-left: var(--espaco-24); }
.integracao-erp__nota {
  padding: var(--espaco-12) var(--espaco-24);
  color: var(--tema-texto-suave);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
}
.integracao-erp__dados {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
  margin: 0;
}
.integracao-erp__dados > div { display: flex; flex-direction: column; gap: var(--espaco-8); }
.integracao-erp__dados dd { margin: 0; color: var(--tema-texto-2); }
@media (max-width: 899px) {
  .integracao-erp__colunas { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-48); }
}

/* Formulário de contato (js/contato.js): campos do site (.campo) numa Caixa de info.
   Depois do envio ficam só o título e a confirmação. */
.contato .botao { align-self: flex-start; }
.contato textarea.campo__entrada { resize: vertical; }
.contato__ok { margin: 0; color: var(--tema-texto); }
.contato__ok[hidden] { display: none; }
.contato.is-enviado .campo,
.contato.is-enviado .botao { display: none; }

/* ---------- Páginas internas (Produto, Política, Secundária e Blog) ----------
   Figma: frames 1600:2288, 1602:2579, 1600:2820 e 1602:2651.
   Conteúdo de 1024 px (80% da home), margem lateral 80.
   Topo: pt 120 / pb 64. Seções: py 64. Última seção antes do rodapé: pb 120. */
.interna .container {
  max-width: calc(var(--largura-conteudo-interno) + 2 * var(--margem-lateral));
}
.interna__topo { padding-block: var(--espaco-120) var(--espaco-64); }
.interna__secao { padding-block: var(--espaco-64); }
.interna__secao--final { padding-bottom: var(--espaco-120); }

.interna__topo-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-32);
  text-align: center;
}
.interna__topo-conteudo--esquerda {
  align-items: flex-start;
  gap: var(--espaco-16);
  text-align: left;
}
.interna__titulos {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: var(--espaco-16);
}
.interna__titulos .corpo-m {
  max-width: var(--largura-texto);
  color: var(--tema-texto-2);
}
.interna__ctas,
.interna__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espaco-16);
}
.interna__tags { gap: var(--espaco-8); }

/* Bloco de texto: Título/4 ou Título/5 + parágrafos em Web/Corpo, coluna de 720 */
.interna__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
  max-width: var(--largura-texto-interno);
}
.interna__texto .web-corpo { color: var(--tema-texto-2); }
.interna__texto--centro { margin-inline: auto; }

.interna__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-24);
}

/* Página Download (download.html): uma Caixa de info por loja, com o selo oficial embaixo */
.download__loja { align-items: flex-start; }
.download__selo { display: inline-flex; margin-top: var(--espaco-8); border-radius: var(--raio-ui); }
.download__selo img { display: block; width: auto; height: 48px; }
.download__selo:focus-visible { outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo); outline-offset: var(--linha-espessura); }

/* Página Cases (cases.html): título à esquerda e subtítulo à direita, Seletor
   segmentado de categoria (js/filtro.js) e a grade de Cards de case, na largura da home. */
.interna.interna--larga .container {
  max-width: calc(var(--largura-conteudo) + 2 * var(--margem-lateral));
}
.cases__conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
}
.cases__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--espaco-48);
}
.cases__cabeca .corpo-m {
  flex: 0 1 40%;
  color: var(--tema-texto-2);
}
.cases__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-48) var(--espaco-32);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cases__cards[hidden],
.cases__cards [hidden] { display: none; }
.cases__cards > li { display: flex; }
.cases__vazio { margin: 0; color: var(--tema-texto-2); }
.cases__vazio[hidden] { display: none; }
@media (max-width: 1099px) {
  .cases__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cases__cabeca { flex-direction: column; gap: var(--espaco-16); }
  .cases__cabeca .corpo-m { flex-basis: auto; }
}
@media (max-width: 599px) {
  .cases__cards { grid-template-columns: minmax(0, 1fr); }
}

/* Política: índice lateral preso (240) + documento (720), gap 64 */
.politica__topo { padding-bottom: var(--espaco-64); }
.politica__documento { padding-block: var(--espaco-32) var(--espaco-120); }
.politica__colunas {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-64);
}
.politica__indice {
  position: sticky;
  top: calc(var(--altura-cabecalho) + var(--espaco-24));
  flex-shrink: 0;
  width: var(--largura-indice);
}
.politica__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
  flex: 1;
  min-width: 0;
  max-width: var(--largura-texto-interno);
}
.politica__topico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
  scroll-margin-top: calc(var(--altura-cabecalho) + var(--espaco-24));
}
.politica__topico .web-corpo { color: var(--tema-texto-2); }

/* Conteúdo real de documento (política, termos). O modelo do Figma só tem
   título de tópico (Título/6) e parágrafo (Web/Corpo). Subtítulo, lista, link,
   ênfase e tabela reaproveitam Web/Corpo e as variáveis de cor e espaço que já
   existem; não há estilo novo aqui. */
.politica__indice {
  max-height: calc(100vh - var(--altura-cabecalho) - var(--espaco-48));
  overflow-y: auto;
}
.politica__abertura { color: var(--tema-texto-2); }
.politica__topico h3.web-corpo { font-weight: 500; color: var(--tema-texto); margin-top: var(--espaco-8); }
.politica__topico strong { font-weight: 500; color: var(--tema-texto); }
.politica__texto a { color: var(--tema-texto); text-decoration: underline; text-underline-offset: 3px; }
.politica__texto a:hover { color: var(--cor-apoio-azul-suave); }
.politica__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  padding-left: var(--espaco-24);
}
ul.politica__lista { list-style: disc; }
ol.politica__lista { list-style: decimal; }
.politica__tabela-rolagem { overflow-x: auto; }
.politica__tabela { width: 100%; border-collapse: collapse; color: var(--tema-texto-2); }
.politica__tabela th,
.politica__tabela td {
  padding: var(--espaco-16);
  border: var(--linha-fina) solid var(--tema-borda);
  text-align: left;
  vertical-align: top;
}
.politica__tabela th { font-weight: 500; color: var(--tema-texto); }

/* Blog: topo pt 88 / pb 48, capa 1024 x 480, corpo com blocos a cada 48 */
.post__topo { padding-block: var(--espaco-88) var(--espaco-48); }
.post__capa-secao { padding-block: var(--espaco-16) var(--espaco-48); }
.post__capa {
  --capa-proporcao: 1024 / 480;

  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  aspect-ratio: var(--capa-proporcao);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-borda);
  border-radius: var(--raio-card);
  color: var(--tema-texto-3);
  overflow: hidden;
}
.post__capa img { width: 100%; height: 100%; object-fit: cover; }
.post__corpo { padding-block: var(--espaco-16) var(--espaco-64); }
.post__blocos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
}

/* =========================================================
   Responsivo (mobile ainda não desenhado na v3: adaptação provisória)
   ========================================================= */
@media (max-width: 1279px) {
  .integracoes__composicao { gap: var(--espaco-64); }
}

/* Menu do celular e do tablet: o botão e os itens extras só existem até 1023 px */
.cabecalho__menu-botao,
.cabecalho__menu-extra,
.cabecalho__menu-icone,
.cabecalho__menu-chev { display: none; }

@media (max-width: 1023px) {
  /* ---------- Menu responsivo ----------
     Até 1023 px a navegação sai da cápsula e vira um painel que abre abaixo dela
     ao tocar no botão de menu (js/cabecalho.js põe .is-menu-aberto no header).
     É a mesma lista do desktop, em coluna, com os produtos sempre à vista.
     Fora do Figma (o mobile ainda não foi desenhado). */
  .cabecalho__menu-botao { display: inline-flex; }
  .cabecalho__menu-botao[hidden] { display: none; }
  .cabecalho__menu-fechar,
  .cabecalho__menu-botao[aria-expanded="true"] .cabecalho__menu-abrir { display: none; }
  .cabecalho__menu-botao[aria-expanded="true"] .cabecalho__menu-fechar { display: block; }

  .cabecalho__capsula > nav { display: none; }
  .cabecalho.is-menu-aberto .cabecalho__capsula > nav {
    position: absolute;
    top: calc(100% + var(--espaco-8));
    right: 0;
    left: 0;
    z-index: 1;
    display: block;
    max-height: calc(100vh - var(--altura-cabecalho) - var(--espaco-16));
    max-height: calc(100dvh - var(--altura-cabecalho) - var(--espaco-16));
    padding: var(--espaco-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--tema-superficie);
    border: var(--linha-fina) solid var(--tema-linha-sutil);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra);
  }
  /* aberto no topo da página, a cápsula ainda é transparente: o painel usa as cores do tema */
  .cabecalho__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .cabecalho__menu > li > a,
  .cabecalho__menu-tema {
    display: flex;
    align-items: center;
    gap: var(--espaco-12);
    box-sizing: border-box;
    width: 100%;
    padding: var(--espaco-12) var(--espaco-16);
    color: var(--tema-texto);
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--raio-ui);
    cursor: pointer;
  }
  .cabecalho__menu-extra { display: block; }
  /* cada item leva um ícone na frente; "Produtos" leva também a seta de abrir */
  .cabecalho__menu-icone { display: block; flex-shrink: 0; color: var(--tema-texto-2); }
  .cabecalho__menu-chev {
    display: block;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--tema-texto-2);
    transition: transform 0.2s ease;
  }
  .menu-produtos.is-expandido .cabecalho__menu-chev { transform: rotate(180deg); }

  /* No fim, depois de um separador: Entrar (contorno) e Agendar demonstração (azul) */
  .cabecalho__menu > .cabecalho__menu-botoes {
    margin-top: var(--espaco-8);
    padding: var(--espaco-16) var(--espaco-8) var(--espaco-8);
    border-top: var(--linha-fina) solid var(--tema-linha-sutil);
  }
  .cabecalho__menu-botoes-grupo { display: flex; flex-direction: column; gap: var(--espaco-8); }
  .cabecalho__menu .cabecalho__menu-botoes .botao { box-sizing: border-box; width: 100%; color: var(--tema-texto); }

  /* Produtos: fechado por padrão. O toque no título abre a lista logo abaixo
     (js/cabecalho.js põe .is-expandido); o painel deixa de flutuar. */
  .cabecalho__menu .menu-produtos__gatilho { margin-block: 0; padding-block: var(--espaco-12); }
  .cabecalho__menu .menu-produtos__painel {
    position: static;
    display: none;
    width: auto;
    padding-top: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .cabecalho__menu .menu-produtos.is-expandido > .menu-produtos__painel { display: block; }
  .cabecalho__menu .menu-produtos__caixa {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .cabecalho__menu .menu-produtos__grade { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .cabecalho__menu .menu-produtos__item { align-items: center; padding: var(--espaco-8) var(--espaco-16) var(--espaco-8) var(--espaco-8); }
  .cabecalho__menu .menu-produtos__icone { background: none; }
  .cabecalho__menu .menu-produtos__descricao,
  .cabecalho__menu .menu-produtos__rodape { display: none; }

  .destaques__linha,
  .depoimentos__cards { grid-template-columns: minmax(0, 1fr); }

  .card-destaque--horizontal {
    flex-direction: column-reverse; /* visual em cima, texto na base (como o vertical) */
    height: auto;
  }
  .card-destaque--horizontal .card-destaque__texto {
    width: auto;
    padding: var(--espaco-32) var(--card-recuo) var(--card-recuo);
  }
  .card-destaque--horizontal .card-destaque__visual { height: 420px; flex: none; margin: 0; }
  .card-destaque--horizontal .card-destaque__visual img { object-position: 30% top; }
  .card-destaque--horizontal.card-destaque--faixa .card-destaque__visual { height: 380px; } /* como o vertical */

  .plataforma__app { display: none; }
  .plataforma__caixa { min-height: 0; padding: var(--espaco-88) var(--espaco-32); }

  .integracoes__composicao {
    flex-direction: column;
    gap: var(--espaco-32);
    padding: 0;
    text-align: center;
  }

  .depoimentos__base,
  .perguntas__colunas,
  .rodape__topo { flex-direction: column; align-items: flex-start; }
  .perguntas__esquerda { width: auto; }
  .perguntas__lista { width: 100%; }

  .planos__cards { grid-template-columns: minmax(0, 1fr); max-width: 480px; }

  .interna__grade { grid-template-columns: minmax(0, 1fr); }
  .politica__colunas { flex-direction: column; gap: var(--espaco-32); }
  .politica__indice { position: static; width: 100%; max-height: none; }
}

@media (max-width: 767px) {
  :root {
    --altura-cabecalho: 98px; /* 16 + cápsula 66 (8 + botão 48 + 8 + borda 2) + 16 */
    --espaco-secao: var(--espaco-48); /* respiro das seções no celular: 48 em cima e embaixo (96 entre duas seções) */
  }
  .container { padding-inline: 20px; } /* CLAUDE.md: margem mobile 20 px */

  .cabecalho { --cabecalho-padding-y: var(--espaco-16); }
  .cabecalho__capsula { --capsula-padding: var(--espaco-8); --capsula-padding-esquerda: var(--espaco-16); }
  .cabecalho__entrar { display: none; }
  .cabecalho .logo svg { width: auto; height: 24px; } /* logo completo menor no celular */

  .titulo-3 { font-size: 40px; line-height: 48px; }
  .titulo-4 { font-size: 32px; line-height: 40px; }
  .titulo-4 br, .plataforma__titulo br, .hero__titulo br, .chamada-final br { display: none; }
  .chamada-final h2 { text-wrap: balance; }
  .hero__titulo { text-wrap: balance; }
  .corpo-m { font-size: 20px; line-height: 28px; }

  .card-destaque--vertical { height: 560px; }
  .card-destaque--vertical .card-destaque__visual { height: 300px; }
  .card-destaque { --card-recuo: var(--espaco-24); }
  .card-destaque--horizontal .card-destaque__visual { height: 340px; }
  .card-destaque--horizontal.card-destaque--faixa .card-destaque__visual { height: 300px; } /* como o vertical */

  .plataforma__caixa { padding: var(--espaco-64) var(--espaco-24); border-radius: var(--raio-box); }
  .rodape { padding: var(--espaco-secao) 20px; } /* margem do celular; respiro das seções em cima e embaixo */
  .rodape .rodape__conteudo { --caixa-raio: var(--raio-box); padding: var(--espaco-48) var(--espaco-24) var(--espaco-32); }
  .digitacao.is-ativa { min-height: 2lh; } /* a frase pode quebrar em duas linhas */

  .integracoes__logos { flex-wrap: wrap; justify-content: center; gap: var(--espaco-32); }
  .integracoes__logos img { width: auto; height: 36px; }

  .card-depoimento { height: auto; min-height: 320px; gap: var(--espaco-32); padding: var(--espaco-24); }
  .card-depoimento { --citacao-fonte: 400 22px/1.3 var(--fonte-titulo); }

  .depoimentos__midia { flex-wrap: wrap; gap: var(--espaco-24); }
  .depoimentos__midia svg { width: auto; height: 28px; }

  .item-faq { --item-padding: var(--espaco-16) var(--espaco-16) var(--espaco-16) var(--espaco-24); }

  .rodape__colunas { flex-wrap: wrap; gap: var(--espaco-32); }
  .rodape__base { flex-direction: column; align-items: flex-start; }

  .interna__topo { padding-top: var(--espaco-64); }
  .interna__secao--final,
  .politica__documento { padding-bottom: var(--espaco-64); }
  .caixa-cta { padding: var(--espaco-48) var(--espaco-24); border-radius: var(--raio-box); }
  .caixa-info { padding: var(--espaco-24); }
  .barra-progresso { top: var(--altura-cabecalho); }
}

/* ---------- Páginas de conversão: agendamento (demo.html) e obrigado ----------
   Referências: sellum.com/demo e sellum.com/demo/thanks. Fundo preto
   padrão do site, topo enxuto (marca + voltar) e cartões em neutro/900.
   Fora do Figma: teste. */
.funil {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--tema-fundo);
}
.funil main { padding-top: 0; } /* sem o header fixo da LP */
.funil__topo-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-16);
  padding-block: var(--espaco-24);
}
.funil__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  color: var(--tema-texto-2);
  text-decoration: none;
  transition: color 0.2s ease;
}
.funil__voltar:hover,
.funil__voltar:focus-visible { color: var(--tema-texto); }
.funil__principal {
  display: flex;
  flex: 1;
  align-items: center;
  padding-block: var(--espaco-64);
}
.funil__rodape {
  padding-block: var(--espaco-32);
  color: var(--tema-texto-3);
  border-top: var(--linha-fina) solid var(--tema-borda);
}

/* Variante com fundo no azul da marca (demo.html, <body class="funil funil--azul">).
   A página vira uma ilha escura fixa: texto branco nos dois temas, e os cinzas
   de apoio (voltar, etapas, rodapé) passam para o azul claro, que tem leitura
   sobre o azul. A caixa do formulário, que era azul sobre o preto, inverte:
   fica preta sobre o azul. Fora do Figma. */
.funil--azul {
  color-scheme: dark;
  --tema-fundo: var(--cor-marca-azul);
  --tema-superficie: var(--cor-neutro-preto);   /* trilho das etapas */
  --tema-borda: var(--cor-apoio-azul-medio);    /* linha do rodapé */
  --tema-texto: var(--cor-neutro-branco);
  --tema-texto-suave: var(--cor-neutro-branco);
  --tema-texto-2: var(--cor-apoio-azul-claro);
  --tema-texto-3: var(--cor-apoio-azul-claro);
  --tema-contraste: var(--cor-neutro-branco);
  --tema-contraste-texto: var(--cor-neutro-preto);
  --tema-contraste-hover: var(--cor-neutro-200);
  color: var(--tema-texto);
}
.funil--azul .agendamento__caixa { background: var(--cor-neutro-preto); }

/* Agendamento: título e formulário em etapas numa coluna central */
.funil__colunas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-48);
}
.funil__chamada {
  max-width: 768px; /* CLAUDE.md: títulos com no máximo 768 px */
  text-align: center;
}
.agendamento-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-24);
  width: 100%;
}
.funil__colunas .agendamento {
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
}
@media (min-width: 960px) {
  /* trilho de etapas na coluna da esquerda, formulário na da direita */
  .agendamento-grade {
    display: grid;
    grid-template-columns: var(--largura-indice) minmax(0, 560px);
    align-items: start;
    justify-content: center;
    gap: var(--espaco-32);
  }
}
@media (min-width: 1200px) {
  /* com folga dos lados, o formulário fica no eixo do título e o trilho ao lado dele */
  .agendamento-grade { margin-left: calc(-1 * (var(--largura-indice) + var(--espaco-32))); }
}

/* Trilho de etapas do cadastro (.passos): trilho fino translúcido com a marca
   de cada etapa (número; check quando já passou) e o nome ao lado. O
   preenchimento branco cresce do início até a etapa atual (js/agendamento.js).
   Deitado acima do formulário nas telas menores; vertical ao lado a partir
   de 960 px. Fora do Figma: teste. */
.passos {
  --passos-trilho: 40px;
  --passos-cor-trilho: var(--tema-superficie);
  --passos-curva: 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.passos[hidden] { display: none; }
.passos::before,
.passos__preenchimento {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--raio-pill);
}
/* deitado (padrão): trilho na horizontal, nome embaixo de cada marca */
.passos::before { width: 100%; height: var(--passos-trilho); background: var(--passos-cor-trilho); }
.passos__preenchimento {
  width: var(--passos-preenchido, 0);
  height: var(--passos-trilho);
  background: var(--tema-contraste);
}
.passos.is-pronto .passos__preenchimento { transition: width var(--passos-curva), height var(--passos-curva); }
.passos__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-12);
}
.passos__marca {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--passos-trilho);
  height: var(--passos-trilho);
  color: var(--tema-texto-3);
  font: 500 14px/20px var(--fonte-corpo); /* Rótulo/UI */
  transition: color 0.3s ease;
}
.passos__check { display: none; }
.passos__item[aria-current] .passos__marca,
.passos__item.is-feito .passos__marca { color: var(--tema-contraste-texto); }
.passos__item.is-feito .passos__numero { display: none; }
.passos__item.is-feito .passos__check { display: block; }
.passos__nome {
  color: var(--tema-texto-2);
  opacity: 0.6;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.passos__item.is-feito .passos__nome { opacity: 1; }
.passos__item[aria-current] .passos__nome {
  color: var(--tema-texto);
  font-weight: 500;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .passos.is-pronto .passos__preenchimento,
  .passos__marca,
  .passos__nome { transition: none; }
}
@media (min-width: 960px) {
  /* vertical: trilho à esquerda, nome ao lado de cada marca, preso na rolagem */
  .passos {
    position: sticky;
    top: var(--espaco-24);
    flex-direction: column;
    gap: var(--espaco-16);
  }
  .passos::before { width: var(--passos-trilho); height: 100%; }
  .passos__preenchimento {
    width: var(--passos-trilho);
    height: var(--passos-preenchido, 0);
  }
  .passos__item {
    flex: none;
    flex-direction: row;
    gap: var(--espaco-24);
  }
}
.agendamento {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
}
/* A caixa leva só as perguntas; os botões ficam fora dela, embaixo */
.agendamento__caixa {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-48);
  padding: var(--espaco-48);
  background: var(--cor-marca-azul);
  border-radius: var(--raio-box); /* azul sobre o preto: sem borda */
}
.agendamento__caixa .campo__rotulo { color: var(--cor-apoio-azul-claro); }
.agendamento__form {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
}
.agendamento__etapa {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-24);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.agendamento__etapa[hidden] { display: none; }
.agendamento__etapa legend {
  margin-bottom: var(--espaco-24);
  padding: 0;
  color: var(--tema-texto);
}
.agendamento__form:not(.is-passos) [data-avancar],
.agendamento__form:not(.is-passos) [data-voltar] { display: none; } /* sem JS: um formulário só */
.agendamento__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-12);
}
.agendamento__acoes .botao--branco { margin-left: auto; }
.agendamento__acoes .botao[hidden] { display: none; }

/* Campo de formulário */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
}
.campo__rotulo { color: var(--tema-texto-suave); }
.campo__entrada {
  box-sizing: border-box;
  width: 100%;
  padding: var(--espaco-16);
  color: var(--tema-texto);
  background: var(--tema-fundo);
  border: var(--linha-fina) solid var(--tema-borda-forte);
  border-radius: var(--raio-ui);
  outline: none;
  transition: border-color 0.2s ease;
}
.campo__entrada::placeholder { color: var(--tema-texto-3); }
.campo__entrada:focus { border-color: var(--tema-texto); }
.campo__entrada[aria-invalid="true"] { border-color: var(--tema-erro); }
.campo__erro { margin: 0; color: var(--tema-erro); }
.campo__erro:empty { display: none; }

/* Faixas de faturamento: rádios em forma de opção grande */
.agendamento__opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
}
.agendamento__opcao {
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
  padding: var(--espaco-16);
  color: var(--tema-texto-suave);
  background: var(--tema-fundo);
  border: var(--linha-fina) solid var(--tema-borda-forte);
  border-radius: var(--raio-ui);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.agendamento__opcao:hover { color: var(--tema-texto); border-color: var(--tema-texto-3); }
.agendamento__opcao input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--cor-marca-azul);
}
.agendamento__opcao:has(input:checked) {
  color: var(--tema-texto);
  border-color: var(--tema-texto);
}
.agendamento__opcao:has(input:focus-visible) {
  outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo);
  outline-offset: var(--linha-espessura);
}

/* Obrigado */
.obrigado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-24);
  text-align: center;
}
.obrigado__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--tema-contraste-texto);
  background: var(--tema-contraste);
  border-radius: var(--raio-pill);
}
.obrigado__sub { max-width: 640px; color: var(--tema-texto-2); }
.obrigado__consultor {
  display: flex;
  align-items: center;
  gap: var(--espaco-24);
  margin-block: var(--espaco-16);
  padding: var(--espaco-16) var(--espaco-24);
  text-align: left;
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
}
.obrigado__espera {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.obrigado__anel {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.obrigado__anel circle {
  fill: none;
  stroke: var(--tema-borda);
  stroke-width: 3;
}
.obrigado__anel .obrigado__anel-progresso {
  stroke: var(--tema-texto);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.obrigado__relogio { color: var(--tema-texto); font-variant-numeric: tabular-nums; }
.obrigado__separador {
  align-self: stretch;
  width: var(--linha-fina);
  height: auto;
  margin: 0;
  background: var(--tema-superficie);
  border: 0;
}
.obrigado__pessoa {
  display: flex;
  align-items: center;
  gap: var(--espaco-16);
}
.obrigado__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--tema-texto);
  background: var(--cor-marca-azul);
  border-radius: var(--raio-pill);
}
.obrigado__pessoa-texto { display: flex; flex-direction: column; gap: 2px; }
.obrigado__pessoa-texto .rotulo-ui { color: var(--tema-texto-2); }
.obrigado__whatsapp { margin-left: var(--espaco-16); }

@media (max-width: 767px) {
  .funil__principal { padding-block: var(--espaco-32) var(--espaco-64); }
  .agendamento__caixa { padding: var(--espaco-24); border-radius: var(--raio-card); }
  .agendamento__acoes .botao { flex: 1; }
  .obrigado__consultor { flex-direction: column; align-items: stretch; text-align: center; }
  .obrigado__espera { align-self: center; }
  .obrigado__separador { width: auto; height: var(--linha-fina); }
  .obrigado__pessoa { flex-wrap: wrap; justify-content: center; }
  .obrigado__whatsapp { flex-basis: 100%; margin-left: 0; }
}

/* Celular: o botão "Agendar demonstração" sai da cápsula do header, que ficava
   amontoada, e flutua no canto de baixo, ao lado do botão do chat (ou sozinho
   nas páginas sem chat). É o mesmo elemento do header, só reposicionado; no
   menu do celular há uma segunda cópia (.cabecalho__menu-botoes). Com isso o logo
   aparece inteiro, sem corte. */
@media (max-width: 767px) {
  .cabecalho__acoes > .botao--primario {
    --botao-padding-y: var(--espaco-16); /* 56 px, a altura do botão do chat */
    position: fixed;
    right: var(--espaco-16);
    bottom: var(--espaco-16);
    z-index: 0; /* abaixo do painel do menu (nav), que fica no mesmo contexto do header */
    box-shadow: var(--sombra);
  }
  body:has(.chat-atalho:not([hidden])) .cabecalho__acoes > .botao--primario {
    right: calc(var(--espaco-16) + 56px + var(--espaco-8)); /* à esquerda do botão do chat (56 px) */
  }
}

/* ---------- Assistente de dúvidas (chat em tela cheia, js/chat.js) ----------
   Topo fixo, conversa rolando no meio e campo de pergunta preso embaixo.
   Mensagens numa coluna central de 720 px; a do visitante em balão à
   direita, a do assistente em texto corrido com o símbolo da Sellum.
   Fora do Figma: teste. */
.chat {
  --chat-ponto: color-mix(in srgb, var(--tema-texto) 4%, transparent);  /* cor das bolinhas: o texto do tema, bem fraco */
  --chat-grade: 14px;                                                   /* distância entre as bolinhas */

  padding: 0;
  overflow: hidden; /* quem rola é a conversa, não o modal */
  /* fundo em grade de pontos (dot grid): bolinhas alinhadas, fixas enquanto a conversa rola */
  background-image: radial-gradient(circle, var(--chat-ponto) 1px, transparent 1.5px);
  background-size: var(--chat-grade) var(--chat-grade);
  background-position: center top;
}
.chat[open] { display: flex; flex-direction: column; }
.chat__coluna {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--chat-coluna) + 2 * var(--espaco-24));
  margin-inline: auto;
  padding-inline: var(--espaco-24);
}
.chat__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-16);
  padding: var(--espaco-16) var(--espaco-24);
  background: var(--tema-fundo); /* a barra do topo fica lisa, sem as bolinhas do fundo */
  border-bottom: var(--linha-fina) solid var(--tema-linha-sutil);
}
.chat__identidade {
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
}
.chat__identidade h2 { margin: 0; color: var(--tema-texto); }
.chat__identidade .rotulo-ui { color: var(--tema-texto-2); }
/* Fotos dos três atendentes na barra do topo: em linha, sobrepostas, a primeira na frente */
.chat__avatares { display: flex; flex-shrink: 0; align-items: center; }
.chat__avatares .chat__avatar {
  position: relative;
  box-sizing: content-box; /* o anel fica por fora dos 40 px da foto */
  border: var(--linha-espessura) solid var(--tema-fundo); /* anel na cor do fundo, separa uma foto da outra */
}
.chat__avatares .chat__avatar + .chat__avatar { margin-left: calc(-1 * var(--espaco-12)); }
.chat__avatares .chat__avatar:nth-child(1) { z-index: 2; }
.chat__avatares .chat__avatar:nth-child(2) { z-index: 1; }
.chat__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-8);
}
.chat__acoes [hidden] { display: none; } /* "Nova conversa" só aparece depois da primeira pergunta */
.chat__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--tema-texto);
  object-fit: cover; /* foto do agente */
  background: var(--cor-marca-azul);
  border-radius: var(--raio-pill);
}

/* Conversa */
.chat__conversa {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chat__boas-vindas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-16);
  padding-block: var(--espaco-88) var(--espaco-48);
  text-align: center;
}
.chat__boas-vindas[hidden] { display: none; }
/* Fotos dos agentes acima do título: três círculos (o do meio maior), cada um
   flutuando em ritmo próprio, com a mesma animação dos selos de apps. */
.chat__agentes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 var(--espaco-16);
  padding: var(--espaco-16) 0; /* espaço para o sobe e desce */
  list-style: none;
}
.chat__agente {
  --flutuar-y: 6px;
  --flutuar-x: 2px;
  --flutuar-giro: 3deg;

  animation: plataforma-flutuar var(--flutuar-duracao, 6s) ease-in-out var(--flutuar-atraso, 0s) infinite;
  will-change: transform;
}
.chat__agente img {
  display: block;
  object-fit: cover;
  border: var(--linha-espessura) solid var(--tema-fundo);
  border-radius: var(--raio-pill);
  box-shadow: 0 0 0 var(--linha-fina) var(--tema-linha-sutil);
}
.chat__agente--esquerda { --flutuar-duracao: 6.4s; --flutuar-atraso: -1.2s; margin-top: var(--espaco-16); }
/* a foto do meio fica por cima e avança 14 px sobre cada lateral */
.chat__agente--centro   { --flutuar-duracao: 7.2s; --flutuar-atraso: -3.5s; position: relative; z-index: 1; margin-inline: -14px; }
.chat__agente--direita  { --flutuar-duracao: 5.8s; --flutuar-atraso: -2.4s; margin-top: var(--espaco-24); }
@media (prefers-reduced-motion: reduce) {
  .chat__agente { animation: none; }
}
/* Perguntas sugeridas: chips pequenos com ícone, abaixo do campo; somem depois da primeira pergunta */
.chat__sugestoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-8);
  margin: var(--espaco-16) 0 0;
  padding: 0;
  list-style: none;
}
.chat__sugestoes[hidden] { display: none; }
.chat__sugestao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  padding: var(--espaco-8) var(--espaco-12);
  color: var(--tema-texto-2);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-pill);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.chat__sugestao:hover,
.chat__sugestao:focus-visible { color: var(--tema-texto); background: var(--tema-superficie); }
.chat__sugestao:focus-visible { outline: var(--linha-espessura) solid var(--cor-apoio-azul-vivo); outline-offset: var(--linha-espessura); }

.chat__mensagens {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
  margin: 0;
  padding: var(--espaco-32) 0;
  list-style: none;
}
.chat__mensagens:empty { padding: 0; }
.chat__msg--usuario { align-self: flex-end; max-width: 80%; }
.chat__msg--usuario p {
  margin: 0;
  padding: var(--espaco-12) var(--espaco-16);
  color: var(--tema-texto);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--tema-superficie);
  border-radius: var(--raio-card);
}
.chat__msg--assistente {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-12);
}
.chat__msg--assistente .chat__avatar { width: 32px; height: 32px; }
/* Resposta: nome do agente em cima e o texto num balão de fala, como o do
   visitante, mas à esquerda e em superfície mais discreta */
.chat__resposta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-8);
  flex: 1; /* ocupa a coluna: o cartão de agendamento mede a largura por aqui */
  min-width: 0;
}
.chat__nome { margin: 0; color: var(--tema-texto-2); }
.chat__nome:empty { display: none; }
.chat__texto,
.chat__digitando {
  padding: var(--espaco-12) var(--espaco-16);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
}
.chat__texto {
  margin: 0;
  color: var(--tema-texto-suave);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat__texto:empty,
.chat__texto[hidden] { display: none; }
/* Mensagens seguidas do mesmo agente: ficam juntas, e só a primeira leva foto e nome */
.chat__msg--assistente + .chat__msg--assistente { margin-top: calc(var(--espaco-8) - var(--espaco-32)); }
.chat__msg--assistente + .chat__msg--assistente .chat__avatar { visibility: hidden; }
.chat__msg--assistente + .chat__msg--assistente .chat__nome { display: none; }
.chat__digitando { display: none; gap: 4px; padding-block: var(--espaco-16); }
.chat__msg.is-digitando .chat__digitando { display: inline-flex; }
.chat__digitando span {
  width: 6px;
  height: 6px;
  background: var(--tema-texto-2);
  border-radius: var(--raio-pill);
  animation: chat-pulso 1.2s ease-in-out infinite;
}
.chat__digitando span:nth-child(2) { animation-delay: 0.15s; }
.chat__digitando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-pulso {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat__digitando span { animation: none; opacity: 0.6; }
}

/* Estado inicial (antes da primeira pergunta): título e campo juntos no
   meio da tela. A conversa ocupa a metade de cima, com o título encostado
   na base dela; o campo e as sugestões começam na metade de baixo. Depois
   da primeira pergunta o campo desce para o pé da tela. */
.chat:has(.chat__boas-vindas:not([hidden])) .chat__conversa {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
}
.chat:has(.chat__boas-vindas:not([hidden])) .chat__compositor { flex: 1 1 0; padding-top: 0; }
.chat:has(.chat__boas-vindas:not([hidden])) .chat__boas-vindas { padding-block: var(--espaco-secao); } /* o mesmo respiro das seções do site (70; 32 no celular) */
.chat:has(.chat__boas-vindas:not([hidden])) .chat__aviso { display: none; } /* o aviso de IA só entra com a conversa ativa */

/* Cartão de agendamento em formato de mensagem (mesmo formulário de demo.html, mais compacto) */
.chat__cartao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
  width: 100%;
  max-width: 480px;
}
.chat__cartao .agendamento__caixa { gap: var(--espaco-24); padding: var(--espaco-24); border-radius: var(--raio-card); }
.chat__cartao .agendamento__etapa { gap: var(--espaco-16); }
.chat__cartao .campo__entrada,
.chat__cartao .agendamento__opcao { padding: var(--espaco-12) var(--espaco-16); }
.agendamento__dica { order: 1; margin: 0 0 0 auto; color: var(--tema-texto-3); } /* à direita, no lugar do botão Continuar */
.agendamento__dica[hidden] { display: none; }
.chat__sugestao--destaque { color: var(--tema-texto); background: var(--cor-marca-azul); border-color: var(--cor-marca-azul); }
.chat__sugestao--destaque:hover,
.chat__sugestao--destaque:focus-visible { background: var(--cor-apoio-azul-vivo); }

/* Cartão do consultor na mensagem de agradecimento: do tamanho do conteúdo, não da coluna */
.chat__resposta .obrigado__consultor { width: fit-content; max-width: 100%; margin-bottom: 0; }

/* Campo de pergunta */
.chat__compositor { padding-block: var(--espaco-16) var(--espaco-24); }
.chat__caixa {
  display: flex;
  align-items: flex-end;
  gap: var(--espaco-12);
  padding: var(--espaco-8) var(--espaco-8) var(--espaco-8) var(--espaco-24);
  background: var(--tema-superficie);
  border: var(--linha-fina) solid var(--tema-linha-sutil);
  border-radius: var(--raio-card);
  transition: border-color 0.2s ease;
}
.chat__caixa:focus-within { border-color: var(--tema-borda-forte); }
.chat__campo {
  flex: 1;
  box-sizing: border-box; /* a altura calculada pelo JS já inclui o respiro */
  min-width: 0;
  max-height: 200px;
  padding: 14px 0; /* alinha a primeira linha com o centro do botão de 56 */
  color: var(--tema-texto);
  resize: none;
  background: transparent;
  border: 0;
  outline: none;
}
.chat__campo::placeholder { color: var(--tema-texto-3); }
.chat__enviar { flex-shrink: 0; }
.chat__enviar:disabled { opacity: 0.4; cursor: default; }
.chat__enviar:disabled::before { content: none; }
.chat__aviso {
  margin: var(--espaco-12) 0 0;
  color: var(--tema-texto-3);
  text-align: center;
}
.chat__aviso a { color: var(--tema-texto-suave); text-underline-offset: 3px; }

/* Campo de pergunta do chat na home: seção própria, acima das perguntas
   frequentes. O fundo é uma caixa nas medidas dos containers do site
   (largura do conteúdo, raio 50), com as mesmas cores da caixa do rodapé:
   clara no tema escuro, escura no tema claro. O respiro padrão
   das seções (--espaco-secao) vale dentro da caixa e também fora dela, em
   cima e embaixo, como nas outras seções. Sem JS o formulário não aparece e a
   seção some junto. */
.chat { --chat-coluna: 720px; }
.pergunta-rapida.secao { padding: var(--espaco-secao) var(--margem-lateral); } /* respiro padrão das seções em cima e embaixo */
.pergunta-rapida > .container {
  --caixa-raio: 50px; /* igual ao da .plataforma__caixa */

  box-sizing: border-box;
  max-width: var(--largura-conteudo);
  padding: var(--espaco-secao) var(--espaco-64);
  color: var(--tema-texto);
  background: var(--cor-neutro-200); /* as cores da caixa do rodapé: clara no tema escuro; no claro inverte junto com ela */
  border: var(--linha-fina) solid transparent; /* sem borda visível, como no rodapé (mantém a medida da caixa) */
  border-radius: var(--caixa-raio);
}
/* o campo usa o fundo da ilha (branco na caixa clara, preto na escura), para não sumir na caixa */
.pergunta-rapida .chat__caixa { --tema-superficie: var(--tema-fundo); }
.pergunta-rapida:has(.pergunta-rapida__form[hidden]) { display: none; }
.pergunta-rapida__titulo { margin: 0 0 var(--espaco-32); color: var(--tema-texto); text-align: center; }
.pergunta-rapida__form { width: 100%; }
/* os exemplos digitados no texto de apoio ficam em uma linha só: em tela estreita, cortam com reticências em vez de quebrar e sumir */
.pergunta-rapida .chat__campo::placeholder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pergunta-rapida__form[hidden] { display: none; }
/* Celular: fica aqui, depois das regras-base acima, porque no bloco de 767 px
   lá em cima estas mesmas regras perdiam para as de baixo (mesma força, ordem
   posterior) e a caixa saía espremida. */
@media (max-width: 767px) {
  .pergunta-rapida.secao { padding: var(--espaco-secao) 20px; } /* margem do celular */
  .pergunta-rapida > .container { --caixa-raio: var(--raio-box); padding: var(--espaco-secao) var(--espaco-24); }
  .pergunta-rapida__titulo { margin-bottom: var(--espaco-24); }
}

/* Atalho flutuante */
.chat-atalho {
  position: fixed;
  right: var(--espaco-24);
  bottom: var(--espaco-24);
  z-index: 45; /* acima do conteúdo, abaixo do header */
  box-shadow: var(--sombra);
}
.chat-atalho[hidden] { display: none; }

@media (max-width: 767px) {
  .chat__topo { padding-inline: var(--espaco-16); }
  .chat__coluna { padding-inline: var(--espaco-16); }
  .chat__boas-vindas { padding-top: var(--espaco-48); }
  .chat__msg--usuario { max-width: 90%; }
  .chat-atalho { right: var(--espaco-16); bottom: var(--espaco-16); }
  .chat-atalho__texto { display: none; } /* só o ícone no celular */
  .chat-atalho { width: 56px; height: 56px; padding: 0; }
  .chat__nova-texto { display: none; } /* "Nova conversa" vira só o ícone de + */
  .chat__acoes [data-chat-nova] { width: 56px; height: 56px; padding: 0; }
  .chat__identidade .rotulo-ui { display: none; }
}

/* ---------- TESTE: títulos à esquerda ----------
   Alinha à esquerda os blocos de título que eram centralizados: cabeças de
   seção (as três etapas da jornada) e caixa da calculadora. O hero e a
   chamada com foto ("Vamos falar sobre a sua operação?") voltaram a ser
   centralizados, como no Figma. A caixa "Você não precisa…"
   fica centralizada: o título divide o espaço com os selos flutuantes, e à
   esquerda colidiria com eles.
   Para desfazer o teste, apague este bloco. */
.cabeca-secao,
.caixa-cta {
  align-items: flex-start;
  text-align: left;
}
/* Exceção: em "Planos e preços" os cards e o botão são centralizados, então o título também é */
.planos .cabeca-secao {
  align-items: center;
  text-align: center;
}

/* ---------- Carrosséis no celular ----------
   Depoimentos, logos de imprensa e planos deixam de empilhar: viram uma fileira
   que desliza de lado, com encaixe a cada item (scroll-snap, sem JS). A fileira
   vai até as bordas da tela, e o item seguinte aparece em parte para mostrar
   que há mais. No desktop nada muda. */
@media (max-width: 767px) {
  .depoimentos__cards,
  .planos__cards,
  .depoimentos__midia {
    --carrossel-margem: 20px; /* a margem lateral do celular (.container) */

    display: flex;
    flex-wrap: nowrap;
    align-self: stretch;
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--carrossel-margem));
    padding-inline: var(--carrossel-margem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--carrossel-margem);
    scrollbar-width: none; /* sem barra: o item cortado na borda já indica a rolagem */
  }
  .depoimentos__cards::-webkit-scrollbar,
  .planos__cards::-webkit-scrollbar,
  .depoimentos__midia::-webkit-scrollbar { display: none; }

  .depoimentos__cards,
  .planos__cards { gap: var(--espaco-12); }
  .depoimentos__cards > *,
  .planos__cards > * {
    flex: 0 0 86%; /* sobra uma fatia do próximo card à vista */
    min-width: 0;
    scroll-snap-align: start;
  }

  /* logos de imprensa: uma linha só, encaixe mais solto */
  .depoimentos__midia {
    flex-wrap: nowrap;
    gap: var(--espaco-32);
    scroll-snap-type: x proximity;
  }
  .depoimentos__midia li { flex: none; scroll-snap-align: start; }
}