/* Site do Croko.

   As cores, as fontes e os raios vêm de /design-system/croko.css (a mesma
   pasta do sistema): aqui não se escreve cor. Translucidez e tons
   intermediários saem de color-mix sobre os tokens.

   A ideia da página é a da marca — o croco na linha d'água. Acima da linha,
   o claro (fundo); abaixo, o pântano: as partes escuras são "o que o Croko
   mostra por baixo". O lagoa só aparece sobre o escuro (regra 3 do guia). */

/* --- base ------------------------------------------------------------------ */

:root {
  --margem: clamp(20px, 5vw, 56px);
  --largura: 1200px;
  --secao: clamp(88px, 11vw, 168px);
  --topo: 60px;
  --saida: cubic-bezier(0.16, 1, 0.3, 1);

  /* Sobre o pântano: o branco em dois níveis de leitura */
  --sobre-escuro: var(--superficie);
  --sobre-escuro-2: color-mix(in srgb, var(--superficie) 74%, var(--pantano));
  --linha-escura: color-mix(in srgb, var(--superficie) 14%, var(--pantano));

  --sombra-cartao: 0 1px 2px color-mix(in srgb, var(--icone-base) 6%, transparent),
    0 18px 40px -24px color-mix(in srgb, var(--icone-base) 30%, transparent);
  --sombra-janela: 0 2px 6px color-mix(in srgb, var(--icone-base) 10%, transparent),
    0 40px 90px -30px color-mix(in srgb, var(--icone-base) 55%, transparent);
  --anel: 0 0 0 4px color-mix(in srgb, var(--croko) 22%, transparent);

  color-scheme: light;
  scroll-padding-top: calc(var(--topo) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
dl,
dd,
ul,
ol,
figure {
  margin: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  text-wrap: balance;
}

p,
dd,
li {
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--brejo);
  color: var(--pantano);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--croko) 60%, transparent);
  outline-offset: 3px;
  border-radius: var(--raio-8);
}

.limite {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--raio-10);
  background: var(--pantano);
  color: var(--superficie);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.pular:focus-visible {
  transform: none;
}

/* --- botões ---------------------------------------------------------------- */

/* Um botão principal por tela (regra 2 do guia): croko com texto branco. Os
   outros são de linha, tonais ou claros (sobre o escuro). */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-10);
  background: var(--croko);
  color: var(--superficie);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
}

.botao:hover {
  background: color-mix(in srgb, var(--croko) 86%, var(--pantano));
}

.botao:active {
  transform: scale(0.98);
}

.botao:disabled {
  opacity: 0.6;
  cursor: progress;
}

.botao--grande {
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--raio-12);
  font-size: 17px;
}

.botao--pequeno {
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--raio-8);
  font-size: 14px;
}

.botao--linha {
  border-color: var(--borda);
  background: var(--superficie);
  color: var(--texto);
}

.botao--linha:hover {
  border-color: var(--borda-destaque);
  background: var(--superficie);
  color: var(--pantano);
}

.botao--tonal {
  background: var(--brejo);
  color: var(--pantano);
}

.botao--tonal:hover {
  background: color-mix(in srgb, var(--brejo) 80%, var(--borda-destaque));
}

.botao--claro {
  background: var(--superficie);
  color: var(--pantano);
}

.botao--claro:hover {
  background: var(--brejo);
}

/* --- topo ------------------------------------------------------------------ */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--fundo) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: border-color 0.3s;
}

.topo--rolado {
  border-bottom-color: var(--separador);
}

.topo__faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--topo);
}

.topo__marca {
  display: block;
  padding: 6px 0;
  border-radius: var(--raio-8);
}

.topo__marca img {
  width: 92px;
  height: auto;
}

.navegacao {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.navegacao > a,
.navegacao__entrar {
  color: var(--texto-2);
  text-decoration: none;
  transition: color 0.2s;
}

.navegacao > a:hover,
.navegacao__entrar:hover {
  color: var(--texto);
}

.navegacao__acoes {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 8px;
}

.navegacao__entrar {
  font-weight: 600;
}

.menu-botao {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-10);
  background: none;
  cursor: pointer;
}

/* Duas linhas que viram um x — o menu da Apple */
.menu-botao__traco,
.menu-botao__traco::before {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--texto);
  transition: transform 0.3s var(--saida);
}

.menu-botao__traco {
  top: 18px;
}

.menu-botao__traco::before {
  content: "";
  top: 7px;
  left: 0;
}

.menu-botao[aria-expanded="true"] .menu-botao__traco {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-botao[aria-expanded="true"] .menu-botao__traco::before {
  transform: translateY(-7px) rotate(-90deg);
}

/* --- herói ----------------------------------------------------------------- */

.heroi {
  padding-top: clamp(56px, 9vw, 128px);
  overflow: hidden;
}

.heroi h1 {
  max-width: 11.5em;
  font-size: clamp(46px, 7.2vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.heroi__apoio {
  max-width: 34em;
  margin-top: clamp(20px, 2.4vw, 28px);
  color: var(--texto-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

.heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 40px);
}

/* A linha d'água. A ilustração oficial tem a linha dela no viewBox
   (y 80 a 83,5 de 48 a 88, largura 122): a janela recorta a ilustração no
   alto da linha, e quem desenha a água é a faixa que atravessa a página,
   com a mesma espessura. Assim o croco pousa na linha sem emenda. */
.superficie {
  --w: clamp(240px, 42vw, 600px);
  --agua: calc(var(--w) * 3.5 / 122);
  --acima: calc(var(--w) * 32 / 122);
  position: relative;
  height: calc(var(--acima) + var(--agua));
  margin-top: clamp(56px, 8vw, 112px);
}

.superficie__agua {
  position: absolute;
  inset: auto 0 0;
  height: var(--agua);
  background: var(--croko);
}

.superficie .limite {
  position: relative;
  z-index: 1;
}

.superficie__janela {
  display: block;
  width: var(--w);
  height: var(--acima);
  margin-left: auto;
  overflow: hidden;
}

.superficie__croco {
  width: var(--w);
  height: auto;
}

/* O único movimento que ninguém pediu: a água corre, o croco sobe */
@media (prefers-reduced-motion: no-preference) {
  .superficie__agua {
    transform-origin: left center;
    animation: correr 1.1s var(--saida) 0.15s both;
  }

  .superficie__croco {
    animation: emergir 1.3s var(--saida) 0.75s both;
  }
}

@keyframes correr {
  from {
    transform: scaleX(0);
  }
}

@keyframes emergir {
  from {
    transform: translateY(100%);
  }
}

/* --- abaixo da linha: o pântano e a janela do sistema ---------------------- */

/* O fundo escuro termina antes da seção: a janela do sistema atravessa a
   fronteira e a legenda fica no claro */
.abaixo {
  --sobra: clamp(150px, 20vw, 300px);
  padding-top: clamp(72px, 9vw, 128px);
  background: linear-gradient(var(--pantano) 0 calc(100% - var(--sobra)), var(--fundo) 0);
}

.abaixo__texto {
  max-width: 760px;
  color: var(--sobre-escuro);
}

.abaixo__texto h2 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.abaixo__texto p {
  max-width: 36em;
  margin-top: 24px;
  color: var(--sobre-escuro-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

.vitrine {
  margin-top: clamp(48px, 6vw, 80px);
}

.vitrine figcaption {
  max-width: 44em;
  margin-top: 20px;
  color: var(--texto-2);
  font-size: 15px;
  line-height: 1.5;
}

/* A janela do sistema, com as medidas do guia: barra lateral de 240 px
   (reduzida a 208 aqui), itens de 32, margem de 28 */
.app {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--separador);
  border-radius: var(--raio-20);
  background: var(--fundo);
  box-shadow: var(--sombra-janela);
  font-size: 13px;
  line-height: 1.35;
}

.app__lateral {
  display: flex;
  flex-direction: column;
  padding: 20px 8px;
  border-right: 1px solid var(--separador);
  background: var(--fundo-lateral);
}

.app__lateral img {
  width: 74px;
  height: auto;
  margin: 0 8px 8px;
}

.app__secao {
  padding: 18px 8px 6px;
  color: var(--texto-3);
  font-size: 11px;
  font-weight: 600;
}

.app__item {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--raio-8);
  color: var(--texto);
}

.app__item--ativo {
  background: var(--selecao);
  font-weight: 600;
}

.app__conteudo {
  padding: 26px 28px 28px;
}

.app__titulo {
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.01em;
}

.app__sub {
  margin-top: 4px;
  color: var(--texto-2);
  font-size: 14px;
}

.app__indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.app__indicadores > div {
  display: grid;
  gap: 6px;
  padding: 14px 18px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-16);
  background: var(--superficie);
}

.app__indicadores span {
  color: var(--texto-2);
}

.app__indicadores b {
  font-size: 28px;
  line-height: 34px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.app__indicadores small {
  color: var(--texto-2);
  font-size: 15px;
  font-weight: 500;
}

.app__indicadores .app__indicador-destaque {
  border-color: var(--borda-destaque);
}

/* O funil: a mesma escala do gráfico do sistema (site.js, montarFunil) */
.funil {
  margin-top: 16px;
  padding: 18px 20px 14px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-16);
  background: var(--superficie);
}

.funil__titulo {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
}

.funil__titulo small {
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 400;
}

.funil__etapas {
  padding: 0;
  list-style: none;
}

.funil__etapas li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  height: 28px;
}

.funil__nome {
  overflow: hidden;
  color: var(--texto-2);
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funil__barra {
  display: flex;
  align-items: center;
  width: var(--largura, 0%);
  height: 22px;
  padding-left: 9px;
  border-radius: 6px;
  background: var(--cor);
  color: var(--sobre);
  font-size: 12px;
  line-height: 1;
}

.funil__barra b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.funil__etapas .funil__virada {
  grid-template-columns: 1fr;
  height: 30px;
}

.funil__virada span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: calc(9.5rem + 14px);
  color: var(--texto-3);
  font-size: 12px;
}

.funil__virada span::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--borda);
}

/* O funil se enche uma vez, quando aparece. Sem JavaScript ou com movimento
   reduzido, nasce cheio */
.js .funil__barra {
  width: 0;
}

.js .funil__barra b {
  opacity: 0;
}

.js .funil--pronto .funil__barra {
  width: var(--largura);
  transition: width 0.8s var(--saida) var(--atraso, 0s);
}

.js .funil--pronto .funil__barra b {
  opacity: 1;
  transition: opacity 0.3s ease var(--atraso-numero, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .js .funil__barra {
    width: var(--largura);
  }

  .js .funil__barra b {
    opacity: 1;
  }

  .js .funil--pronto .funil__barra,
  .js .funil--pronto .funil__barra b {
    transition: none;
  }
}

/* --- cabeçalho de seção ---------------------------------------------------- */

.cabeca {
  max-width: 780px;
  margin-bottom: clamp(48px, 6vw, 88px);
}

.cabeca h2,
.jornada h2,
.base h2,
.consultoria h2,
.perguntas h2,
.contato h2 {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.cabeca p {
  max-width: 36em;
  margin-top: 20px;
  color: var(--texto-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

.cabeca--escura h2 {
  color: var(--sobre-escuro);
}

.cabeca--escura p {
  color: var(--sobre-escuro-2);
}

/* --- o caminho ------------------------------------------------------------- */

.caminho {
  padding-block: var(--secao);
}

.caminho__grade {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* O índice é um passo a passo: a régua enche conforme a leitura desce
   (site.js põe --progresso) e o número do passo na tela se acende */
.indice {
  --progresso: 0;
  position: sticky;
  top: calc(var(--topo) + 40px);
  display: grid;
}

.indice__nivel {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 13px;
  width: 2px;
  border-radius: 1px;
  background: var(--separador);
}

.indice__nivel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--croko);
  transform: scaleY(var(--progresso));
  transform-origin: top;
}

.indice a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  color: var(--texto-2);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s;
}

.indice a:hover {
  color: var(--texto);
}

.indice a span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-total);
  background: var(--fundo);
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.indice a[aria-current] {
  color: var(--texto);
  font-weight: 600;
}

.indice a[aria-current] span {
  border-color: var(--tom);
  background: var(--tom);
  color: var(--superficie);
}

/* Trilho de largura fixa: o quadro que rola de lado no celular não pode
   alargar a coluna (com trilho "auto", alargava a página inteira) */
.passos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(96px, 12vw, 160px);
}

.passo {
  min-width: 0;
  max-width: 760px;
}

.passo__numero {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: var(--raio-total);
  background: var(--tom);
  color: var(--superficie);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.passo h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.passo__tese {
  max-width: 30em;
  margin-top: 12px;
  color: var(--texto-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

/* --- recortes de tela ------------------------------------------------------ */

/* Desenhados com as medidas do sistema (13 px, campos de 32, raios 8/12/16),
   para o recorte parecer a tela — e não uma ilustração dela */
.tela {
  margin-block: 36px 44px;
  padding: 22px 24px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-20);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
  font-size: 13px;
  line-height: 1.35;
}

.ui-titulo {
  font-size: 15px;
  font-weight: 600;
}

.ui-titulo--menor {
  margin-top: 22px;
  margin-bottom: 10px;
  font-size: 13px;
}

.ui-sub {
  margin-top: 2px;
  margin-bottom: 14px;
  color: var(--texto-2);
}

.ui-links {
  padding: 0;
  list-style: none;
}

.ui-links li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  height: 44px;
  border-top: 1px solid var(--separador);
}

.ui-canal {
  font-weight: 600;
}

.ui-num {
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.ui-botao {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-8);
  font-size: 12px;
  font-weight: 600;
}

.ui-botao--feito {
  border-color: transparent;
  background: var(--brejo);
  color: var(--pantano);
}

.tela--quadro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--fundo);
}

.ui-coluna {
  display: grid;
  align-content: start;
  gap: 8px;
}

.ui-coluna__nome {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 4px;
  font-weight: 600;
}

.ui-coluna__nome i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--raio-total);
}

.ui-coluna__nome em {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: var(--raio-total);
  background: color-mix(in srgb, var(--texto) 7%, transparent);
  color: var(--texto-2);
  font-size: 12px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.ui-cartao {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-12);
  background: var(--superficie);
}

.ui-cartao b {
  font-weight: 600;
}

.ui-cartao small {
  color: var(--texto-2);
  font-size: 12px;
}

/* O cartão que está sendo arrastado */
.ui-cartao--erguido {
  border-color: var(--borda-destaque);
  box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--icone-base) 40%, transparent);
  transform: rotate(-1.5deg);
}

.ui-cartao--atraso {
  box-shadow: inset 3px 0 0 var(--alerta);
}

.ui-etiqueta {
  padding: 2px 8px;
  border-radius: var(--raio-total);
  background: var(--fundo-lateral);
  color: var(--texto-2);
  font-size: 11px;
  font-weight: 600;
}

.ui-etiqueta--ok {
  background: var(--brejo);
  color: var(--pantano);
}

.ui-cartao .ui-hora {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.ui-cartao .ui-prazo--atraso {
  padding: 2px 8px;
  border-radius: var(--raio-total);
  background: color-mix(in srgb, var(--alerta) 24%, var(--superficie));
  color: var(--texto);
  font-weight: 600;
}

.ui-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.ui-campos label {
  display: grid;
  gap: 5px;
}

.ui-campos span {
  color: var(--texto-2);
  font-size: 12px;
}

.ui-campos b {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-8);
  font-weight: 400;
}

.ui-campos .ui-campos__largo {
  grid-column: 1 / -1;
}

.ui-campos__travado b {
  border-color: var(--separador);
  background: var(--fundo-lateral);
  color: var(--texto-2);
}

.ui-indicadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ui-indicadores div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-12);
}

.ui-indicadores span {
  color: var(--texto-2);
  font-size: 12px;
}

.ui-indicadores b {
  font-size: 22px;
  line-height: 28px;
  font-variant-numeric: tabular-nums;
}

/* As barras do gráfico em CSS, não em SVG: o texto fica no tamanho do
   sistema em qualquer largura (o SVG escalava rótulo e barra juntos) */
.ui-barras {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 120px;
  background:
    linear-gradient(var(--separador) 0 0) top / 100% 1px no-repeat,
    linear-gradient(var(--separador) 0 0) center / 100% 1px no-repeat,
    linear-gradient(var(--borda) 0 0) bottom / 100% 1px no-repeat;
}

.ui-barras span {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.ui-barras i {
  width: min(14px, 30%);
  height: var(--v);
  border-radius: 3px 3px 0 0;
  background: var(--contratado);
}

.ui-barras i + i {
  background: var(--moldura-rosa-borda);
}

.ui-meses {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 6px;
  color: var(--texto-3);
  font-size: 11px;
  text-align: center;
}

.ui-legenda {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  padding: 0;
  color: var(--texto-2);
  font-size: 12px;
  list-style: none;
}

.ui-legenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ui-legenda i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.ui-legenda__entrada {
  background: var(--contratado);
}

.ui-legenda__saida {
  background: var(--moldura-rosa-borda);
}

.ui-acoes {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--raio-12);
  background: var(--brejo);
  color: var(--pantano);
}

/* --- listas de recursos ---------------------------------------------------- */

.recursos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
}

.recursos dt {
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.recursos dd {
  color: var(--texto-2);
  font-size: 16px;
  line-height: 1.55;
}

/* Ao lado de um recorte de tela, os recursos vão numa coluna só */
.recursos--coluna {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

/* --- as automações ------------------------------------------------------------ */

.automacoes {
  padding-block: var(--secao);
}

.automacoes .cabeca {
  margin-bottom: 28px;
}

/* Atalhos para as cinco — capítulos de uma seção longa, não abas */
.capitulos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(64px, 8vw, 112px);
}

.capitulos a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-total);
  background: var(--superficie);
  color: var(--texto);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.capitulos a:hover {
  border-color: var(--borda-destaque);
  background: var(--brejo);
}

.automacoes__lista {
  display: grid;
  gap: clamp(96px, 12vw, 168px);
}

.auto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* O recorte troca de lado a cada automação */
.auto:nth-child(even) .auto__texto {
  order: 2;
}

.auto h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.auto__tese {
  max-width: 30em;
  margin-top: 14px;
  margin-bottom: 32px;
  color: var(--texto-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

.auto .tela {
  margin: 0;
}

/* O parecer do match: a nota, a faixa e cada requisito com a evidência */
.ui-match {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ui-match .ui-sub {
  margin-bottom: 0;
}

.ui-nota {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.ui-nota b {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ui-nota span {
  padding: 2px 10px;
  border-radius: var(--raio-total);
  background: var(--brejo);
  color: var(--pantano);
  font-size: 12px;
  font-weight: 600;
}

.ui-requisitos {
  padding: 0;
  list-style: none;
}

.ui-requisitos li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-block: 10px;
  border-top: 1px solid var(--separador);
}

.ui-requisitos b {
  font-weight: 600;
}

.ui-requisitos small {
  margin-left: 6px;
  color: var(--texto-3);
  font-size: 12px;
}

.ui-requisitos q,
.ui-requisitos em {
  display: block;
  margin-top: 3px;
  color: var(--texto-2);
  font-size: 12px;
  font-style: normal;
}

.ui-av {
  justify-self: start;
  padding: 2px 8px;
  border-radius: var(--raio-total);
  background: var(--fundo-lateral);
  color: var(--texto-2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ui-av--sim {
  background: var(--brejo);
  color: var(--pantano);
}

.ui-av--parte {
  background: color-mix(in srgb, var(--alerta) 24%, var(--superficie));
  color: var(--texto);
}

.ui-rodape-ia {
  padding-top: 12px;
  border-top: 1px solid var(--separador);
  color: var(--texto-2);
  font-size: 12px;
}

/* A conferência dos documentos */
.ui-docs {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.ui-docs li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-12);
}

.ui-docs li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 12px;
  width: 16px;
  height: 16px;
  border-radius: var(--raio-total);
}

.ui-docs b {
  font-weight: 600;
}

.ui-docs span {
  color: var(--texto-2);
  font-size: 12px;
}

.ui-docs--ok::before {
  background: var(--acima-meta);
}

/* O visto, desenhado com duas bordas */
.ui-docs--ok::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 18px;
  width: 4px;
  height: 8px;
  border: solid var(--superficie);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ui-docs--problema {
  border-color: color-mix(in srgb, var(--alerta) 55%, var(--separador));
  background: color-mix(in srgb, var(--alerta) 10%, var(--superficie));
}

.ui-docs--problema::before {
  background: var(--alerta);
}

.ui-docs--problema::after {
  content: "!";
  position: absolute;
  top: 11px;
  left: 12px;
  width: 16px;
  color: var(--texto);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.ui-selo {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--brejo);
  color: var(--pantano);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

/* A mensagem que chegou e a programação das próximas */
.tela--mensagens {
  background: var(--fundo);
}

.ui-bolha {
  max-width: 88%;
  margin-bottom: 20px;
  padding: 12px 14px 8px;
  border-radius: 16px 16px 16px 4px;
  background: var(--superficie);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--icone-base) 14%, transparent);
  font-size: 14px;
  line-height: 1.45;
}

.ui-bolha b {
  font-weight: 600;
}

.ui-bolha small {
  display: block;
  margin-top: 6px;
  color: var(--texto-3);
  font-size: 11px;
  text-align: right;
}

.ui-agenda {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--separador);
  border-radius: var(--raio-12);
  background: var(--superficie);
  list-style: none;
}

.ui-agenda li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--separador);
}

.ui-agenda li:first-child {
  border-top: 0;
}

/* O título primeiro; o canal e o quando, na linha de baixo */
.ui-agenda b {
  flex-basis: 100%;
  order: -1;
  font-weight: 600;
}

.ui-agenda small {
  color: var(--texto-2);
  font-size: 12px;
}

.ui-agenda--cancelada b {
  color: var(--texto-3);
  text-decoration: line-through;
}

/* Os processos encadeados: quem entra e quem sai */
.tela--fluxo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ui-fluxo ol {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.ui-fluxo .ui-titulo--menor {
  margin-top: 0;
}

.ui-fluxo li {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-12);
  background: var(--superficie);
}

/* O elo entre um passo e o próximo */
.ui-fluxo li + li::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 22px;
  width: 2px;
  height: 14px;
  background: var(--borda-destaque);
}

.ui-fluxo b {
  font-weight: 600;
}

.ui-fluxo small {
  color: var(--texto-2);
  font-size: 12px;
}

.ui-onde {
  margin-bottom: 4px;
  padding: 1px 8px;
  border-radius: var(--raio-total);
  background: var(--fundo-lateral);
  color: var(--texto-2);
  font-size: 11px;
  font-weight: 600;
}

/* A assinatura: o documento e os três passos dele */
.ui-arquivo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--separador);
}

.ui-arquivo__tipo {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 46px;
  border-radius: 6px;
  background: var(--moldura-rosa);
  color: var(--texto);
  font-size: 11px;
  font-weight: 800;
}

.ui-arquivo b {
  display: block;
  font-weight: 600;
}

.ui-arquivo small {
  color: var(--texto-2);
  font-size: 12px;
}

.ui-assinatura {
  margin-top: 4px;
  padding: 0;
  list-style: none;
}

.ui-assinatura li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 0 12px 34px;
}

.ui-assinatura li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--raio-total);
  background: var(--acima-meta);
}

.ui-assinatura li::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 8px;
  width: 4px;
  height: 8px;
  border: solid var(--superficie);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* O fio entre os passos */
.ui-assinatura li:not(:last-child) {
  background: linear-gradient(var(--borda-destaque), var(--borda-destaque)) 9px 36px / 2px calc(100% - 26px) no-repeat;
}

.ui-assinatura b {
  font-weight: 600;
}

.ui-assinatura small {
  color: var(--texto-2);
  font-size: 12px;
}

/* --- a jornada (escuro) ---------------------------------------------------------- */

.jornada {
  padding-block: var(--secao);
  background: var(--pantano);
  color: var(--sobre-escuro);
}

.jornada :focus-visible,
.contato :focus-visible,
.rodape :focus-visible {
  outline-color: var(--lagoa);
}

.jornada__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.jornada__cabeca {
  position: sticky;
  top: calc(var(--topo) + 40px);
}

.jornada__cabeca > p {
  max-width: 26em;
  margin-top: 20px;
  color: var(--sobre-escuro-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

.jornada__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.jornada__cabeca .jornada__conta {
  margin-top: 32px;
  color: var(--lagoa);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Quem deu o passo: a mesma cor na legenda e na linha do tempo */
.quem--ia {
  --quem: var(--lagoa);
}

.quem--mensagem {
  --quem: var(--pos-1);
}

.quem--processo {
  --quem: var(--alerta);
}

.quem--assinatura {
  --quem: var(--moldura-rosa-borda);
}

.quem--pessoa {
  --quem: color-mix(in srgb, var(--superficie) 50%, var(--pantano));
}

.quem {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sobre-escuro-2);
  font-size: 13px;
  font-weight: 500;
}

.quem::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: var(--raio-total);
  background: var(--quem);
}

.linha-tempo {
  display: grid;
  gap: 36px;
}

.linha-tempo h3 {
  margin-bottom: 10px;
  color: var(--sobre-escuro);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.linha-tempo ol {
  position: relative;
  padding: 0;
  list-style: none;
}

/* O fio da linha do tempo, por baixo dos pontos */
.linha-tempo ol::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 61px;
  width: 2px;
  background: var(--linha-escura);
}

.linha-tempo li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: baseline;
  padding-block: 10px;
}

.linha-tempo li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 56px;
  width: 12px;
  height: 12px;
  border-radius: var(--raio-total);
  background: var(--quem);
  box-shadow: 0 0 0 4px var(--pantano);
}

.linha-tempo time {
  color: var(--sobre-escuro-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.linha-tempo p {
  color: var(--sobre-escuro);
  font-size: 17px;
  line-height: 1.5;
}

/* Os passos de gente ficam um tom abaixo: o destaque é o que andou sozinho */
.linha-tempo .quem--pessoa p {
  color: var(--sobre-escuro-2);
}

.linha-tempo li .quem {
  font-size: 12px;
  white-space: nowrap;
}

/* --- o que vale em todas as telas ------------------------------------------ */

.base {
  padding-block: var(--secao);
}

.base__colunas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}

.base__colunas > div {
  padding-top: 24px;
  border-top: 2px solid var(--pantano);
}

.base h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.base__colunas p {
  margin-top: 12px;
  color: var(--texto-2);
}

/* --- consultoria ----------------------------------------------------------- */

.consultoria {
  padding-block: var(--secao);
  background: var(--brejo);
}

.consultoria__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.consultoria__cabeca p {
  max-width: 30em;
  margin-top: 20px;
  margin-bottom: 32px;
  color: var(--texto-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

.consultoria__cabeca .botao--linha {
  border-color: var(--borda-destaque);
}

.consultoria__servicos > div {
  padding-block: 22px;
  border-top: 1px solid var(--borda-destaque);
}

.consultoria__servicos > div:last-child {
  border-bottom: 1px solid var(--borda-destaque);
}

.consultoria__servicos dt {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.consultoria__servicos dd {
  margin-top: 6px;
  color: var(--texto-2);
}

/* --- planos ---------------------------------------------------------------- */

.planos {
  padding-block: var(--secao);
}

.planos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.planos__grade--dois {
  grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-20);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}

.plano--destaque {
  border: 2px solid var(--borda-destaque);
  padding: 27px;
}

.plano--unico {
  max-width: 560px;
}

/* No canto, fora do fluxo: os nomes dos planos ficam na mesma linha */
.plano__selo {
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 4px 10px;
  border-radius: var(--raio-total);
  background: var(--brejo);
  color: var(--pantano);
  font-size: 13px;
  font-weight: 600;
}

.plano h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plano__para {
  margin-top: 8px;
  color: var(--texto-2);
  font-size: 16px;
}

.plano__preco {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.plano__preco span {
  margin-left: 4px;
  color: var(--texto-2);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.plano ul {
  display: grid;
  gap: 10px;
  margin-block: 24px;
  padding: 22px 0 0;
  border-top: 1px solid var(--separador);
  list-style: none;
  font-size: 16px;
  line-height: 1.4;
}

.plano li {
  position: relative;
  padding-left: 26px;
}

/* O visto da lista, desenhado com duas bordas */
.plano li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--croko);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.plano__nota {
  margin-bottom: 20px;
  color: var(--texto-2);
  font-size: 14px;
}

.plano .botao {
  margin-top: auto;
  width: 100%;
}

.creditos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.creditos[hidden] {
  display: none;
}

.creditos__bloco {
  padding: 26px 28px;
  border: 1px solid var(--separador);
  border-radius: var(--raio-20);
  background: var(--superficie);
}

.creditos__bloco h3 {
  font-size: 19px;
  font-weight: 600;
}

.creditos__bloco > p {
  margin-top: 6px;
  color: var(--texto-2);
  font-size: 15px;
}

.creditos__lista {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.creditos__lista li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 11px;
  border-top: 1px solid var(--separador);
}

.creditos__lista b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- perguntas ------------------------------------------------------------- */

.perguntas {
  padding-bottom: var(--secao);
}

.perguntas__grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.perguntas details {
  border-bottom: 1px solid var(--separador);
}

.perguntas details:first-child {
  border-top: 1px solid var(--separador);
}

.perguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding-block: 20px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.perguntas summary::-webkit-details-marker {
  display: none;
}

/* O + que vira x ao abrir */
.perguntas summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--texto-2), var(--texto-2)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--texto-2), var(--texto-2)) center / 1.5px 14px no-repeat;
  transition: transform 0.3s var(--saida);
}

.perguntas details[open] summary::after {
  transform: rotate(45deg);
}

.perguntas details p {
  max-width: 40em;
  padding-bottom: 24px;
  color: var(--texto-2);
}

/* Abrir e fechar com altura animada, onde o navegador já sabe (Chrome 131+) */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .perguntas {
      interpolate-size: allow-keywords;
    }

    .perguntas details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.35s var(--saida), content-visibility 0.35s allow-discrete;
    }

    .perguntas details[open]::details-content {
      block-size: auto;
    }
  }
}

/* --- contato (escuro) ------------------------------------------------------ */

.contato {
  padding-block: var(--secao);
  background: var(--pantano);
  color: var(--sobre-escuro);
}

.contato__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.contato__texto p {
  max-width: 26em;
  margin-top: 20px;
  color: var(--sobre-escuro-2);
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.5;
}

.contato__canais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
}

.contato__email {
  color: var(--lagoa);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.formulario {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--raio-20);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-janela);
}

.formulario__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.formulario label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-10);
  background: var(--superficie);
  font-size: 16px;
  font-weight: 400;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.formulario textarea {
  min-height: 120px;
  padding-block: 12px;
  line-height: 1.5;
  resize: vertical;
}

/* A seta do select, feita de dois triângulos de gradiente — sem imagem com cor */
.formulario select {
  padding-right: 36px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-2) 50%),
    linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.formulario ::placeholder {
  color: var(--texto-3);
}

.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
  border-color: var(--croko);
  outline: none;
  box-shadow: var(--anel);
}

.formulario [aria-invalid="true"] {
  border-color: var(--moldura-rosa-borda);
}

.formulario .botao {
  justify-self: start;
}

.formulario__aviso:empty {
  display: none;
}

.formulario__aviso {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--raio-12);
  font-size: 15px;
}

.formulario__aviso--erro {
  border-color: var(--moldura-rosa-borda);
  background: var(--moldura-rosa);
  color: var(--texto);
}

.formulario__aviso--ok {
  border-color: var(--borda-destaque);
  background: var(--brejo);
  color: var(--pantano);
}

.formulario__privacidade {
  color: var(--texto-2);
  font-size: 13px;
}

/* Campo-isca: fora da tela, fora do teclado */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- rodapé ---------------------------------------------------------------- */

.rodape {
  padding-block: 56px;
  background: var(--icone-base);
  color: color-mix(in srgb, var(--superficie) 70%, var(--icone-base));
  font-size: 15px;
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px 48px;
  align-items: end;
}

.rodape__marca img {
  width: 110px;
  height: auto;
}

.rodape__marca p {
  margin-top: 14px;
}

.rodape nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.rodape nav a {
  color: var(--superficie);
  text-decoration: none;
}

.rodape nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rodape__empresa {
  grid-column: 1 / -1;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--superficie) 14%, var(--icone-base));
  font-size: 13px;
}

/* --- entrar ---------------------------------------------------------------- */

/* A tela de entrada do sistema, em folha: coluna de 340 px, ícone de 72 */
.entrar {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--raio-20);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-janela);
}

.entrar::backdrop {
  background: color-mix(in srgb, var(--icone-base) 45%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: no-preference) {
  .entrar[open] {
    animation: abrir 0.32s var(--saida);
  }
}

@keyframes abrir {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

.entrar__caixa {
  display: grid;
  justify-items: center;
  max-width: 340px;
  margin-inline: auto;
  padding: 36px 0 28px;
  text-align: center;
}

.entrar__icone {
  width: 72px;
  height: 72px;
  border-radius: var(--raio-icone);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--icone-base) 18%, transparent),
    0 10px 24px -8px color-mix(in srgb, var(--icone-base) 42%, transparent);
}

.entrar h2 {
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.entrar__caixa > p {
  margin-top: 8px;
  color: var(--texto-2);
  font-size: 14px;
  line-height: 20px;
}

.entrar__campo {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-top: 24px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-12);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.entrar__campo:focus-within {
  border-color: var(--croko);
  box-shadow: var(--anel);
}

.entrar__campo input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 4px 0 16px;
  border: 0;
  background: none;
  font-size: 16px;
  text-align: right;
  outline: none;
}

.entrar__campo > span:last-child {
  padding-right: 16px;
  color: var(--texto-2);
  font-size: 16px;
}

.entrar__erro {
  min-height: 20px;
  margin-top: 10px;
  color: var(--texto);
  font-size: 13px;
}

.entrar__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

/* --- telas estreitas ------------------------------------------------------- */

/* --- as gravações do sistema ------------------------------------------------ */

/* Uma janela do sistema de verdade: a barra fina em cima diz de onde é a
   gravação, e o vídeo repete em silêncio. Com "reduzir movimento", fica
   parado na capa atrás de um botão (site.js) */
.demo {
  margin: 0;
  min-width: 0;
}

.demo__janela {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--separador);
  border-radius: var(--raio-20);
  background: var(--superficie);
  box-shadow: var(--sombra-janela);
}

.demo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 36px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--separador);
  background: color-mix(in srgb, var(--fundo) 72%, var(--superficie));
  color: var(--texto-2);
  font-size: 12px;
  line-height: 1;
}

.demo__barra b {
  padding: 4px 9px;
  border-radius: var(--raio-total);
  background: var(--brejo);
  color: var(--pantano);
  font-weight: 600;
}

.demo__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--fundo);
}

.demo__tocar {
  position: absolute;
  inset: 36px 0 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: color-mix(in srgb, var(--pantano) 42%, transparent);
  color: var(--superficie);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.demo__tocar[hidden] {
  display: none;
}

.demo figcaption {
  margin-top: 12px;
  color: var(--texto-2);
  font-size: 14px;
  line-height: 1.45;
}

/* --- pessoas: depois da contratação ------------------------------------------- */

.pessoas {
  padding-block: var(--secao);
  background: color-mix(in srgb, var(--brejo) 28%, var(--fundo));
}

.pessoas .cabeca {
  margin-bottom: 48px;
}

.pessoas__grade {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

/* A gravação fica à vista enquanto a lista rola */
.pessoas__grade .demo {
  position: sticky;
  top: calc(var(--topo) + 24px);
}

.pessoas__lista {
  gap: 26px;
}

.pessoas__lista dt {
  font-size: 18px;
}

@media (max-width: 1080px) {
  .app__indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jornada__grade,
  .consultoria__grade,
  .contato__grade,
  .perguntas__grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .jornada__cabeca {
    position: static;
  }
}

@media (max-width: 900px) {
  .menu-botao {
    display: block;
  }

  /* O menu vira uma folha abaixo do topo */
  .navegacao {
    position: absolute;
    inset: var(--topo) 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--margem) 24px;
    border-bottom: 1px solid var(--separador);
    background: var(--fundo);
    box-shadow: 0 28px 40px -28px color-mix(in srgb, var(--icone-base) 45%, transparent);
    font-size: 17px;
  }

  .navegacao--aberta {
    display: flex;
  }

  .navegacao > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--separador);
    color: var(--texto);
  }

  .navegacao__acoes {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 20px 0 0;
  }

  .navegacao__entrar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-10);
    background: var(--superficie);
    color: var(--texto);
  }

  .navegacao .botao--pequeno {
    min-height: 44px;
    border-radius: var(--raio-10);
    font-size: 16px;
  }

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

  .auto:nth-child(even) .auto__texto {
    order: 0;
  }

  .auto .tela,
  .auto .demo {
    max-width: 640px;
  }

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

  .pessoas__grade .demo {
    position: static;
    max-width: 760px;
  }

  .indice {
    display: none;
  }

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

@media (max-width: 760px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .app__lateral {
    display: none;
  }

  .app__conteudo {
    padding: 20px 16px;
  }

  .app__titulo {
    font-size: 22px;
    line-height: 28px;
  }

  .app__indicadores {
    gap: 10px;
  }

  .app__indicadores > div {
    padding: 12px 14px;
  }

  .app__indicadores b {
    font-size: 22px;
    line-height: 28px;
  }

  .funil {
    padding: 14px 12px 10px;
  }

  .funil__etapas li {
    grid-template-columns: 6.8rem minmax(0, 1fr);
    gap: 10px;
  }

  .funil__nome {
    font-size: 12px;
  }

  .funil__virada span {
    padding-left: calc(6.8rem + 10px);
  }

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

  .tela {
    padding: 18px 16px;
  }

  /* O quadro rola de lado, como no sistema */
  .tela--quadro {
    grid-template-columns: repeat(3, 220px);
    overflow-x: auto;
    padding: 14px;
    scroll-snap-type: x mandatory;
  }

  .ui-coluna {
    scroll-snap-align: start;
  }

  .ui-indicadores,
  .tela--fluxo {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-requisitos li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  /* No celular, o quem vai para baixo do texto */
  .linha-tempo li {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 28px;
  }

  .linha-tempo ol::before {
    left: 53px;
  }

  .linha-tempo li::before {
    left: 48px;
  }

  .linha-tempo li .quem {
    grid-column: 2;
    margin-top: 4px;
  }

  .linha-tempo p {
    font-size: 16px;
  }

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

  .ui-indicadores b {
    font-size: 18px;
  }

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

@media (max-width: 520px) {
  .heroi__acoes .botao {
    flex: 1 1 100%;
  }

  .formulario .botao {
    justify-self: stretch;
  }

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