/* Diagnóstico de SST Bioproteção — estilos. Cores e fonte extraídas de bioprotecao.com.br. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #0063ff;
  --azul-escuro: #004fcc;
  --azul-claro: #eaf1ff;
  --azul-borda: #c9dbff;
  --marinho: #081a3a;
  --texto: #0a0b0d;
  --texto-2: #535b69;
  --borda: #e2e6ec;
  /* contorno de campos e opções: pelo menos 3:1 sobre o branco (WCAG 1.4.11) */
  --borda-controle: #858d9b;
  --fundo: #ffffff;
  --fundo-2: #f6f8fb;
  --verde-whatsapp: #1fa855;
  --critica: #c62828;
  --alta: #c2410c;
  --media: #8a5d00;
  --erro: #c62828;

  --raio: 16px;
  --raio-opcao: 14px;
  --sombra: 0 1px 2px rgb(8 26 58 / 6%), 0 8px 24px rgb(8 26 58 / 8%);
  --transicao: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --largura: 40rem;

  color-scheme: light;
  accent-color: var(--azul);
}

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

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  caret-color: var(--azul);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--azul-borda);
  color: var(--texto);
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: 1.75rem;
  font-weight: 800;
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--azul-escuro);
  text-underline-offset: 0.2em;
}

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

/* ---------- Estrutura ---------- */

.topo {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borda);
}

.topo__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--texto);
  text-decoration: none;
}

.topo__marca img {
  display: block;
  height: 48px;
  width: auto;
}

.topo__texto {
  display: grid;
  line-height: 1.15;
}

.topo__nome {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marinho);
}

.topo__apoio {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--azul-escuro);
}

.pagina {
  flex: 1;
  width: 100%;
  max-width: calc(var(--largura) + 2rem);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.rodape {
  padding: 2rem 1rem;
  background: var(--marinho);
  color: #c3cde0;
  font-size: 0.875rem;
  text-align: center;
  display: grid;
  gap: 0.375rem;
}

.rodape a {
  color: #fff;
}

.rodape a:hover {
  color: var(--azul-borda);
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.25rem;
  margin: 0.25rem 0;
  padding: 0;
  list-style: none;
}

/* área de toque de 44 px sem aumentar a letra */
.rodape__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.rodape__empresa {
  font-size: 0.8125rem;
}

/* serviços do site oficial, acima dos links do próprio diagnóstico, separados por um fio */
.rodape__servicos {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  font-weight: 600;
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transicao),
    border-color var(--transicao),
    color var(--transicao),
    transform var(--transicao);
}

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

.botao svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botao--primario {
  background: var(--azul);
  color: #fff;
}

.botao--primario:hover {
  background: var(--azul-escuro);
}

.botao--claro {
  background: #fff;
  color: var(--azul-escuro);
  border-color: var(--azul-borda);
}

.botao--claro:hover {
  border-color: var(--azul);
  background: var(--azul-claro);
}

/* Verde mais escuro que o do WhatsApp para o texto branco ter contraste suficiente. */
.botao--whatsapp {
  background: #15803d;
  color: #fff;
}

.botao--whatsapp:hover {
  background: #116932;
}

.botao--texto {
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem;
  background: none;
  color: var(--azul-escuro);
  text-decoration: underline;
}

.botao--texto:hover {
  color: var(--marinho);
}

.botao:disabled,
.botao[aria-disabled="true"] {
  background: var(--borda);
  border-color: var(--borda);
  color: var(--texto-2);
  cursor: not-allowed;
  transform: none;
}

.botao--largo {
  width: 100%;
}

/* ---------- Página inicial ---------- */

.inicio {
  --largura: 72rem;
  background:
    radial-gradient(56rem 34rem at 82% 9rem, rgb(0 99 255 / 11%), transparent 70%),
    linear-gradient(180deg, #f1f5ff 0, var(--fundo) 44rem);
}

.inicio .topo {
  border-bottom: 0;
}

.inicio .pagina {
  max-width: none;
  padding: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--largura) + 2rem);
  margin-inline: auto;
  padding-inline: 1rem;
}

.destaque {
  color: var(--azul);
}

.hero__lista {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.hero__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

/* alinhado à primeira linha quando o texto quebra */
.hero__lista svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
}

.botao--grande {
  min-height: 3.5rem;
  padding-inline: 2rem;
  font-size: 1.0625rem;
}

.botao--primario.botao--grande {
  box-shadow: 0 10px 24px rgb(0 99 255 / 28%);
}

/* História em rolagem: os passos à esquerda e, à direita, um painel fixo com os quadros do
   exemplo (pergunta, resultado e relatório). No celular, cada passo vem seguido do seu quadro.
   Sem JavaScript, os quadros aparecem todos, parados; o script acrescenta .historia--viva
   para ligar a troca de quadros. Com movimento reduzido, a troca acontece sem animação. */

.historia {
  display: grid;
  gap: 1rem;
  padding-block: 1.5rem 3.5rem;
}

.historia__abertura {
  display: grid;
  align-content: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.historia__abertura h1 {
  font-size: 2.125rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Ilustração do hero. O fundo branco da imagem se funde ao degradê da página. */
/* foto em pé: no celular recortada nos rostos, no computador inteira com altura limitada */
.historia__imagem img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  border-radius: 24px;
  object-fit: cover;
  object-position: center 45%;
}

/* No celular os invólucros somem e os itens se intercalam pela ordem abaixo. */
.historia__passos,
.historia__passos ol,
.palco,
.palco__tela {
  display: contents;
}

.historia__passos h2 {
  order: 1;
  margin-top: 1rem;
  /* destino do link "Como funciona": para um pouco abaixo da borda da tela */
  scroll-margin-top: 1.5rem;
}

#passo-1 {
  order: 2;
}

.quadro--pergunta {
  order: 3;
}

#passo-2 {
  order: 4;
}

.palco__legenda {
  order: 5;
}

.quadro--resultado {
  order: 6;
}

#passo-3 {
  order: 7;
}

.quadro--relatorio {
  order: 8;
}

.palco__nota {
  order: 9;
}

/* Indicador de etapa do painel: só no computador com o script ligado, onde os quadros se
   revezam no mesmo lugar. No celular eles já aparecem um embaixo do outro. */
.palco__etapas {
  display: none;
}

/* Só no computador: no celular a escolha do diagnóstico já vem logo abaixo. */
.historia__cta {
  display: none;
}

.passo {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-content: start;
  gap: 0.25rem 0.875rem;
  margin-top: 1.5rem;
  list-style: none;
}

.passo > :not(.passo__numero) {
  grid-column: 2;
}

.passo__numero {
  position: relative;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition:
    background-color var(--transicao),
    color var(--transicao);
}

/* área de toque de 44 px em volta do círculo de 36 px */
.passo__numero::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.passo__numero:hover {
  background: var(--azul-escuro);
  color: #fff;
}

.passo h3 {
  font-size: 1.125rem;
}

.passo p {
  color: var(--texto-2);
}

.palco__legenda {
  display: grid;
  gap: 0.25rem;
  margin-top: 1rem;
  color: var(--texto-2);
}

.palco__legenda strong {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--texto);
}

.palco__nota {
  font-size: 0.8125rem;
  color: var(--texto-2);
}

.quadro {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1.5rem 1.25rem;
  border-radius: 20px;
  background: var(--fundo);
  box-shadow: 0 18px 40px rgb(8 26 58 / 14%);
}

.quadro__pergunta {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.quadro__apoio {
  margin-top: -0.5rem;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.quadro__opcoes {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quadro__opcao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-opcao);
  font-weight: 500;
  transition:
    border-color 300ms ease-out,
    background-color 300ms ease-out;
}

.quadro__radio {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid var(--texto-2);
  border-radius: 50%;
  transition:
    border-color 300ms ease-out,
    background-color 300ms ease-out,
    box-shadow 300ms ease-out;
}

.quadro__opcao--marcada {
  border-color: var(--azul);
  background: var(--azul-claro);
}

.quadro__opcao--marcada .quadro__radio {
  border-color: var(--azul);
  background: var(--azul);
  box-shadow: inset 0 0 0 3px #fff;
}

.quadro__medidor {
  width: 100%;
  max-width: 17rem;
  margin: 0 auto;
}

/* Animações das peças (opção marcada, ponteiro, itens surgindo): só com .historia--viva e sem
   pedido de movimento reduzido. Fora do quadro ativo, cada peça volta ao começo na hora, para a
   animação se repetir quando o quadro voltar. */
@media (prefers-reduced-motion: no-preference) {
  .historia--viva .quadro.ativo .quadro__opcao--marcada,
  .historia--viva .quadro.ativo .quadro__opcao--marcada .quadro__radio {
    transition-delay: 700ms;
  }

  .historia--viva .quadro:not(.ativo) .quadro__opcao--marcada {
    border-color: var(--borda);
    background: var(--fundo);
    transition-duration: 0s;
  }

  .historia--viva .quadro:not(.ativo) .quadro__opcao--marcada .quadro__radio {
    border-color: var(--texto-2);
    background: transparent;
    box-shadow: none;
    transition-duration: 0s;
  }

  /* Quadro do resultado, em sequência: a faixa do medidor se desenha de Baixo a Crítico
     (o arco tem ~377 de comprimento), o ponteiro gira até o nível, e depois chegam o nível
     e os pontos de atenção (.surge, com --i). */
  .historia--viva .quadro--resultado .medidor svg > path {
    stroke-dasharray: 377;
    transition: stroke-dashoffset 700ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
  }

  .historia--viva .quadro--resultado:not(.ativo) .medidor svg > path {
    stroke-dashoffset: 377;
    transition-duration: 0s;
    transition-delay: 0s;
  }

  .historia--viva .quadro--resultado .medidor svg > line:last-of-type {
    transform-box: view-box;
    transform-origin: 160px 150px;
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 450ms;
  }

  .historia--viva .quadro--resultado:not(.ativo) .medidor svg > line:last-of-type {
    transform: rotate(-100deg);
    transition-duration: 0s;
    transition-delay: 0s;
  }

  .historia--viva .surge {
    transition:
      opacity 450ms ease-out,
      transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(950ms + var(--i, 0) * 150ms);
  }

  .historia--viva .quadro:not(.ativo) .surge {
    opacity: 0;
    transform: translateY(8px);
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

/* Escolha do diagnóstico: fundo marinho com um brilho azul onde a mão neon entra pela borda de
   baixo. A imagem encosta no rodapé da seção, por isso não há respiro embaixo. */
.escolha {
  overflow: hidden;
  padding: 3.5rem 0 0;
  background:
    radial-gradient(48rem 30rem at 15% 100%, rgb(0 99 255 / 42%), transparent 65%),
    radial-gradient(40rem 24rem at 90% 0%, rgb(0 99 255 / 18%), transparent 70%), var(--marinho);
  color: #fff;
}

.escolha__grade {
  display: grid;
  gap: 1.5rem;
}

.escolha__imagem {
  justify-self: center;
  width: min(15rem, 68%);
}

/* a manga vem cortada na borda esquerda da foto: o degradê esconde o corte reto */
.escolha__imagem img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to right, transparent, #000 22%);
}

.escolha__topo {
  display: grid;
  gap: 0.75rem;
  max-width: 40rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.escolha h2,
.historia__passos h2,
.quem h2,
.perguntas h2 {
  font-size: 1.75rem;
}

.diagnosticos {
  display: grid;
  gap: 1rem;
  max-width: 58rem;
  margin-inline: auto;
}

.diagnostico {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 1.75rem;
  border-radius: 20px;
  box-shadow: 0 18px 40px rgb(8 26 58 / 22%);
}

.diagnostico h3 {
  font-size: 1.25rem;
}

.diagnostico__meta {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.diagnostico .botao {
  margin-top: 0.5rem;
}

/* link discreto para a página do serviço no site oficial */
.diagnostico__servico {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
  text-underline-offset: 0.2em;
}

.diagnostico--geral .diagnostico__servico {
  color: var(--azul-escuro);
}

.diagnostico__icone {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.25rem;
  border-radius: 14px;
}

.diagnostico__icone svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagnostico--geral {
  background: var(--fundo);
  color: var(--texto);
}

.diagnostico--geral p {
  color: var(--texto-2);
}

.diagnostico--geral .diagnostico__icone {
  background: var(--azul-claro);
  color: var(--azul);
}

/* sobre o fundo marinho, o cartão escuro sobe um tom e ganha um contorno fino */
.diagnostico--psicossocial {
  border: 1px solid rgb(143 184 255 / 22%);
  background: #10285a;
  color: #fff;
}

.diagnostico--psicossocial p {
  color: #c3cde0;
}

.diagnostico--psicossocial .diagnostico__icone {
  background: rgb(255 255 255 / 10%);
  color: #8fb8ff;
}

.quadro__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-2);
}

.quadro__selo {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--marinho);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.quadro__nivel {
  margin-top: -0.5rem;
  text-align: center;
  font-weight: 600;
}

.quadro__nivel strong {
  color: var(--alta);
}

.quadro__bloco {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borda);
}

.quadro__rotulo {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--marinho);
}

.quadro__adequados,
.quadro__pontos {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.quadro__adequados li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quadro__adequados svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: #15803d;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quadro__pontos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.quadro__multa {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: 14px;
  background: var(--fundo-2);
}

.quadro__multa p {
  font-size: 0.875rem;
  color: var(--texto-2);
}

.quadro__multa strong {
  font-size: clamp(1.0625rem, 4.6vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marinho);
  font-variant-numeric: tabular-nums;
}

.passo__legendas {
  display: grid;
  gap: 0.875rem;
  margin: 0.75rem 0 0;
}

.passo__legendas div {
  display: grid;
  gap: 0.25rem;
}

.passo__legendas dt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.passo__legendas dd {
  margin: 0 0 0 2.625rem;
  color: var(--texto-2);
}

.legenda__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--azul);
  color: #fff;
}

.legenda__marca--ok {
  background: #15803d;
}

.legenda__marca--atencao {
  background: var(--alta);
}

.legenda__marca svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quem {
  display: grid;
  gap: 1rem;
  padding-block: 4rem;
}

/* Uma seção só: a logo com os números de um lado, o texto e os botões do outro. */
.quem__cartao {
  display: grid;
  border: 1px solid var(--azul-borda);
  border-radius: 28px;
  background: linear-gradient(160deg, var(--azul-claro), var(--fundo) 70%);
  box-shadow: var(--sombra);
}

.quem__marca {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.75rem;
  padding: 2rem 1.5rem 1.5rem;
}

.quem__marca img {
  width: 100%;
  max-width: 10rem;
  height: auto;
}

.quem__texto {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 2rem;
  border-top: 1px solid var(--azul-borda);
}

.quem__texto p {
  color: var(--texto-2);
}

/* quem responde pelo conteúdo: separado dos parágrafos por um fio, com o escudo da marca */
.quem__texto .quem__revisor {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-top: 1rem;
  border-top: 1px solid var(--azul-borda);
  font-size: 0.9375rem;
  color: var(--texto);
}

.quem__revisor svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--azul);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quem__conferido {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--texto-2);
}

.quem__revisor a {
  font-weight: 600;
  color: var(--marinho);
  text-underline-offset: 0.2em;
}

/* Perguntas frequentes: respostas abertas por clique, mas no HTML para os buscadores. */
.perguntas {
  display: grid;
  gap: 1.5rem;
  max-width: calc(48rem + 2rem);
  padding-bottom: 4rem;
}

.perguntas h2 {
  text-align: center;
}

.perguntas__lista {
  border-top: 1px solid var(--borda);
}

.pergunta {
  border-bottom: 1px solid var(--borda);
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

/* seta que gira quando a resposta abre */
.pergunta__seta {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--azul-escuro);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transicao);
}

.pergunta[open] .pergunta__seta {
  transform: rotate(180deg);
}

.pergunta summary:hover {
  color: var(--azul-escuro);
}

.pergunta p {
  padding-bottom: 1.25rem;
  color: var(--texto-2);
}

/* A resposta desliza ao abrir e fechar, nos navegadores que já animam <details>; nos outros
   ela só aparece. Fechar é mais rápido que abrir. */
@media (prefers-reduced-motion: no-preference) {
  .perguntas__lista {
    interpolate-size: allow-keywords;
  }

  .pergunta::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 200ms ease-in,
      content-visibility 200ms allow-discrete;
  }

  .pergunta[open]::details-content {
    block-size: auto;
    transition-duration: 320ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

.quem__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.quem__numeros,
.avaliacoes__lista,
.clientes__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* números lado a lado, discretos, abaixo da logo */
.quem__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.75rem;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  color: var(--texto-2);
}

.quem__numeros strong {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marinho);
  font-variant-numeric: tabular-nums;
}

/* Avaliações no formato dos cartões do Google, como no site da Bioproteção */

.avaliacoes {
  display: grid;
  gap: 0.375rem;
  margin-top: 2.5rem;
}

.avaliacoes__rotulo {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-escuro);
}

/* Faixa de cartões que passa da esquerda para a direita, em loop, como a dos logos. As
   bordas esmaecem; o respiro em cima e embaixo deixa a sombra dos cartões aparecer. Para ao
   passar o mouse, para dar tempo de ler. */
.avaliacoes__faixa {
  overflow: hidden;
  margin: 0.75rem -1rem 0.25rem;
  padding-block: 0.5rem 1rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* quatro levas seguidas; andar metade da largura emenda o fim no começo */
.avaliacoes__lista {
  display: flex;
  width: max-content;
  animation: faixa-direita 80s linear infinite;
}

.avaliacoes__faixa:hover .avaliacoes__lista {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .avaliacoes__lista {
    animation-duration: 160s;
  }
}

/* relative prende o texto só para leitor de tela dentro do cartão; sem isso ele vaza e
   cria rolagem lateral na página */
.avaliacao {
  position: relative;
  display: grid;
  flex: none;
  width: 17.5rem;
  margin-right: 1rem;
  align-content: start;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--borda);
  border-radius: 20px;
  background: var(--fundo);
  box-shadow: var(--sombra);
}

.avaliacao__topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avaliacao__inicial {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.125rem;
  color: #fff;
  background: var(--azul);
}

.avaliacao__inicial--1 {
  background: #c2410c;
}

.avaliacao__inicial--2 {
  background: #15803d;
}

.avaliacao__autor {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.avaliacao__autor span {
  font-size: 0.8125rem;
  color: var(--texto-2);
}

.avaliacao__google {
  flex: none;
  align-self: flex-start;
  width: 1.25rem;
  height: 1.25rem;
}

.avaliacao__estrelas {
  display: flex;
  gap: 0.125rem;
}

.avaliacao__estrelas svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: #f5a800;
}

.avaliacao blockquote {
  margin: 0;
  color: var(--texto);
}

.avaliacoes__todas {
  justify-self: start;
}

/* Clientes: logos em cinza numa faixa única que passa da esquerda para a direita, em loop */

.clientes {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--borda);
}

.clientes__titulo {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  color: var(--azul);
}

/* as bordas esmaecem para os logos entrarem e saírem sem corte seco */
.clientes__faixa {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* a lista tem duas cópias seguidas; andar metade da largura emenda o fim no começo */
.clientes__lista {
  display: flex;
  width: max-content;
  align-items: center;
  animation: faixa-direita 40s linear infinite;
}

.clientes__lista li {
  flex: none;
  padding-inline: 1.5rem;
}

.clientes__faixa:hover .clientes__lista {
  animation-play-state: paused;
}

@keyframes faixa-direita {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* com movimento reduzido a faixa segue, mas bem mais devagar */
@media (prefers-reduced-motion: reduce) {
  .clientes__lista {
    animation-duration: 90s;
  }
}

.clientes__lista img {
  display: block;
  width: auto;
  height: 2.375rem;
  filter: grayscale(1);
  opacity: 0.75;
  transition:
    filter var(--transicao),
    opacity var(--transicao);
}

.clientes__lista img:hover {
  filter: none;
  opacity: 1;
}

@media (min-width: 48rem) {
  .avaliacao {
    width: 22rem;
    margin-right: 1.25rem;
  }

  .clientes__lista li {
    padding-inline: 2.5rem;
  }
}

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

/* ---------- Questionário ---------- */

.progresso {
  height: 6px;
  margin-bottom: 1.75rem;
  border-radius: 999px;
  background: var(--borda);
  overflow: hidden;
}

.progresso__barra {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--azul);
  transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tela {
  display: grid;
  gap: 1rem;
  animation: entrar 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tela h1 {
  font-size: 1.5rem;
}

/* Apresentação do diagnóstico abaixo da tela inicial: para quem chega pela busca */
.sobre {
  display: grid;
  gap: 0.875rem;
  max-width: 40rem;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--borda);
}

.sobre[hidden] {
  display: none;
}

.sobre h2 {
  font-size: 1.25rem;
}

.sobre p {
  color: var(--texto-2);
}

.sobre .sobre__meta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto);
}

.sobre__perguntas {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding-left: 1.5rem;
}

.sobre__perguntas li::marker {
  font-weight: 700;
  color: var(--azul);
}

.sobre__servico a {
  font-weight: 600;
  color: var(--azul-escuro);
  text-underline-offset: 0.2em;
}

.tela h1:focus {
  outline: none;
}

.tela__contexto {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-2);
}

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

.tela__acoes {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Em listas longas, o botão de seguir acompanha a rolagem no rodapé da tela. */
.tela__acoes--fixas {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding-block: 1.25rem max(1rem, env(safe-area-inset-bottom));
  background: linear-gradient(rgb(255 255 255 / 0%), var(--fundo) 1.25rem);
}

.voltar {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--texto-2);
  cursor: pointer;
}

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

.voltar svg,
.opcao svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes entrar {
  from {
    opacity: 0.4;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tela {
    animation: none;
  }
  .progresso__barra,
  .botao,
  .opcao {
    transition: none;
  }
}

/* Opções de resposta: botões grandes, um por linha */

.opcoes {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.opcao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--borda-controle);
  border-radius: var(--raio-opcao);
  background: var(--fundo);
  font: inherit;
  font-weight: 500;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--transicao),
    background-color var(--transicao);
}

.opcao:hover {
  border-color: var(--azul);
}

.opcao[aria-pressed="true"],
.opcao:has(input:checked) {
  border-color: var(--azul);
  background: var(--azul-claro);
}

.opcao input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* marcador de escolha única, no mesmo desenho do rádio do cadastro */
.opcao__marca {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--borda-controle);
  border-radius: 50%;
  background: var(--fundo);
  transition:
    border-color var(--transicao),
    box-shadow var(--transicao);
}

.opcao[aria-pressed="true"] .opcao__marca {
  border-color: var(--azul);
  box-shadow: inset 0 0 0 3px var(--fundo);
  background: var(--azul);
}

.opcao__texto {
  display: grid;
  gap: 0.125rem;
}

.opcao__exemplo {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--texto-2);
}

/* Campos */

.campo {
  display: grid;
  gap: 0.375rem;
}

.campo label {
  font-weight: 600;
}

.campo input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--borda-controle);
  border-radius: var(--raio-opcao);
  font: inherit;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  background: var(--fundo);
  transition: border-color var(--transicao);
}

.campo input::placeholder {
  color: #6b7280;
}

.campo input:hover {
  border-color: var(--texto-2);
}

.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgb(0 99 255 / 18%);
}

.campo input[aria-invalid="true"] {
  border-color: var(--erro);
}

.campo__erro {
  color: var(--erro);
  font-size: 0.9375rem;
  font-weight: 500;
}

.campo__erro:empty {
  display: none;
}

.aviso {
  padding: 0.875rem 1rem;
  border-radius: var(--raio-opcao);
  background: var(--fundo-2);
  color: var(--texto-2);
}

/* Cadastro */

.formulario {
  display: grid;
  gap: 1.25rem;
}

.grupo {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.grupo legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.campo__dica {
  font-weight: 400;
  color: var(--texto-2);
}

.aceites {
  display: grid;
  gap: 0.75rem;
}

.aceite {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  cursor: pointer;
}

.aceite input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
}

.armadilha {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.verificacao {
  min-height: 65px;
}

.texto-legal {
  display: grid;
  gap: 0.875rem;
  max-width: 68ch;
}

.texto-legal h2 {
  margin-top: 1rem;
}

.texto-legal ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.375rem;
}

/* Empresa encontrada */

.empresa {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem;
  border-radius: var(--raio);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
}

.empresa__nome {
  font-size: 1.125rem;
  font-weight: 700;
}

.empresa__detalhe {
  color: var(--texto-2);
  font-size: 0.9375rem;
}

/* Carregando */

.carregando {
  display: grid;
  gap: 0.75rem;
}

.carregando span {
  display: block;
  height: 1rem;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--fundo-2), var(--borda), var(--fundo-2));
  background-size: 200% 100%;
  animation: brilho 1.2s linear infinite;
}

.carregando span:nth-child(1) {
  height: 10rem;
  border-radius: var(--raio);
}

.carregando span:nth-child(3) {
  width: 70%;
}

@keyframes brilho {
  to {
    background-position: -200% 0;
  }
}

/* Resumo */

.medidor {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
}

.medidor svg {
  display: block;
  width: 100%;
  height: auto;
}

.nivel {
  text-align: center;
  display: grid;
  gap: 0.375rem;
}

.nivel__titulo {
  font-size: 1.375rem;
  font-weight: 800;
}

.nivel__pontos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.nivel__alerta {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--alta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nivel__texto {
  color: var(--texto-2);
  max-width: 32rem;
  margin: 0 auto;
}

.pontos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borda);
}

.ponto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--borda);
  font-weight: 500;
}

.gravidade {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.gravidade::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.gravidade--critica {
  color: var(--critica);
}

.gravidade--alta {
  color: var(--alta);
}

.gravidade--media {
  color: var(--media);
}

.gravidade--recomendacao {
  color: var(--azul-escuro);
}

/* Resultado preliminar: a oferta do relatório logo depois do nível, depois os pontos, o que
   está adequado, a Bioproteção e as dúvidas comuns, e a chamada final. */
.resultado__oferta {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  background: var(--azul-claro);
  text-align: center;
}

.resultado__oferta p {
  font-weight: 500;
  color: var(--marinho);
}

.resultado__oferta .resultado__garantias {
  font-size: 0.8125rem;
  color: var(--texto-2);
}

/* Blocos de apoio (quem ajuda, dúvidas): mais espaço acima do título do que abaixo, para
   separar a zona de decisão (alerta, nível e oferta) da zona de apoio. */
.resultado__bloco {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.resultado__bloco h2 {
  font-size: 1.25rem;
}

.resultado__bioprotecao p {
  font-size: 0.9375rem;
  color: var(--texto-2);
}

/* Risco de multa: o valor em vermelho, grande, é o gancho para pedir o relatório. */
.risco {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgb(198 40 40 / 25%);
  border-radius: var(--raio);
  background: rgb(198 40 40 / 6%);
  text-align: center;
}

/* numa linha só; a fonte encolhe um pouco nas telas mais estreitas para caber */
.risco__rotulo {
  font-size: clamp(0.9375rem, 4.3vw, 1.0625rem);
  font-weight: 700;
  white-space: nowrap;
  color: var(--texto);
}

.risco__valor {
  font-size: clamp(2.25rem, 11vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--critica);
  font-variant-numeric: tabular-nums;
}

/* inline-block para o salto mexer só no número */
.risco__numero {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* fonte da estimativa, bem discreta, logo abaixo do valor */
.risco__fonte {
  max-width: 28rem;
  margin-top: -0.25rem;
  font-size: 0.6875rem;
  color: var(--texto-2);
}

.risco__nota {
  max-width: 28rem;
  font-size: 0.9375rem;
  color: var(--texto);
}

.risco__nota strong {
  color: var(--critica);
}

.resultado__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--borda);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
  color: var(--texto-2);
}

.resultado__numeros strong {
  display: block;
  margin-bottom: 0.125rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marinho);
  font-variant-numeric: tabular-nums;
}

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.chamada {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 1.5rem;
  border-radius: var(--raio);
  background: var(--marinho);
  color: #fff;
}

.chamada p {
  color: #c3cde0;
}

/* os dois botões com a mesma largura: lado a lado quando cabem, um sobre o outro no celular */
.chamada__acoes .botao {
  flex: 1 1 13rem;
}

/* ---------- Telas maiores ---------- */

@media (min-width: 48rem) {
  h1 {
    font-size: 2.25rem;
  }

  .pagina {
    padding-top: 3rem;
  }

  .tela h1 {
    font-size: 2rem;
  }

  .escolha {
    border-top-right-radius: 3rem;
  }

  .escolha h2,
  .historia__passos h2,
  .quem h2,
  .perguntas h2 {
    font-size: 2.125rem;
  }

  .diagnosticos {
    grid-template-columns: 1fr 1fr;
  }

  .escolha__imagem {
    width: 17rem;
  }

  .quem__cartao {
    grid-template-columns: minmax(15rem, 1fr) 2fr;
  }

  .quem__marca {
    padding: 2.5rem 2rem;
  }

  .quem__texto {
    padding: 2.5rem 3rem;
    border-top: 0;
    border-left: 1px solid var(--azul-borda);
  }

  .tela__acoes {
    grid-auto-flow: column;
    justify-content: start;
  }

  .botao--largo {
    width: auto;
  }

  .topo {
    padding-inline: max(1rem, calc((100% - var(--largura)) / 2));
  }

  .topo__marca img {
    height: 56px;
  }

  .topo__nome {
    font-size: 1.5rem;
  }

  .topo__apoio {
    font-size: 0.875rem;
  }
}

/* Página inicial no computador: painel fixo à direita, um passo por vez à esquerda. */
@media (min-width: 60rem) {
  /* a mão à esquerda, de baixo para cima; título e cartões à direita */
  .escolha {
    padding-top: 4.5rem;
  }

  .escolha__grade {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
    align-items: end;
    gap: 3rem;
  }

  .escolha__imagem {
    order: -1;
    justify-self: start;
    width: 100%;
    max-width: 22rem;
  }

  .escolha__conteudo {
    align-self: center;
    padding-bottom: 4.5rem;
  }

  .escolha__topo {
    max-width: none;
    margin: 0 0 2rem;
    text-align: left;
  }

  .diagnosticos {
    max-width: none;
  }

  .historia {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      "abertura imagem"
      "passos palco";
    gap: 0 5rem;
    padding-block: 0 4rem;
  }

  .historia__abertura {
    grid-area: abertura;
    min-height: calc(100svh - 6rem);
    margin: 0;
    padding-block: 2rem 4rem;
  }

  .historia__abertura h1 {
    font-size: clamp(2.5rem, 3.6vw, 3.25rem);
  }

  .historia__imagem {
    grid-area: imagem;
    align-self: center;
    padding-bottom: 2rem;
  }

  .historia__imagem img {
    width: auto;
    max-width: 100%;
    max-height: 36rem;
    aspect-ratio: auto;
  }

  .historia__passos {
    display: block;
    grid-area: passos;
  }

  .historia__passos h2 {
    margin: 0;
  }

  .historia__passos ol {
    display: block;
    margin: 0;
    padding: 0;
  }

  .historia__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-left: 4rem;
  }

  .passo {
    grid-template-columns: 2.75rem 1fr;
    align-content: center;
    gap: 0.5rem 1.25rem;
    min-height: 50svh;
    margin: 0;
    padding-block: 2rem;
    /* o clique no número deixa o passo perto do meio, onde ele vira o passo ativo */
    scroll-margin-top: 20svh;
  }

  .passo__numero {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
  }

  .passo h3 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .passo p {
    font-size: 1.125rem;
  }

  .palco {
    display: grid;
    grid-area: palco;
    align-self: start;
    position: sticky;
    /* centrado na tela, mas sem passar da borda em telas baixas (painel com ~44rem) */
    top: max(1rem, calc(50svh - 22rem));
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 28px;
    background: linear-gradient(160deg, var(--azul-claro), var(--azul-borda));
  }

  /* o painel surge suave quando a seção "Como funciona" entra na tela (inicio.js põe .visivel) */
  .historia--viva .palco {
    opacity: 0;
    transform: translateY(2rem);
    transition:
      opacity 0.7s ease,
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .historia--viva .palco.visivel {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .historia--viva .palco {
      transform: none;
    }
  }

  /* a ordem intercalada do celular não vale aqui */
  .palco > *,
  .palco__tela > * {
    order: 0;
  }

  .palco__legenda {
    margin: 0 0.25rem;
  }

  .palco__nota {
    margin: 0 0.25rem;
    text-align: center;
  }

  /* Três etapas de largura igual; um único destaque marinho desliza até a etapa do quadro
     ativo (--etapa), mostrando que os quadros são uma sequência. */
  .historia--viva .palco__etapas {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-self: center;
    width: min(100%, 22rem);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etapa;
  }

  .palco__etapas::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: calc(100% / 3);
    border-radius: 999px;
    background: var(--marinho);
    transform: translateX(calc(var(--etapa, 0) * 100%));
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .palco:has(.quadro--resultado.ativo) .palco__etapas {
    --etapa: 1;
  }

  .palco:has(.quadro--relatorio.ativo) .palco__etapas {
    --etapa: 2;
  }

  .palco__etapas li {
    position: relative;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    color: var(--azul-escuro);
    counter-increment: etapa;
    transition: color 250ms ease-out;
  }

  .palco__etapas li::before {
    content: counter(etapa) ". ";
  }

  .palco:has(.quadro--pergunta.ativo) .palco__etapas li:nth-child(1),
  .palco:has(.quadro--resultado.ativo) .palco__etapas li:nth-child(2),
  .palco:has(.quadro--relatorio.ativo) .palco__etapas li:nth-child(3) {
    color: #fff;
  }

  .palco__tela {
    display: grid;
    gap: 1rem;
  }

  .quadro {
    padding: 1.75rem 1.5rem;
  }

  /* Os quadros inativos somem só da vista: continuam no texto lido pelo leitor de tela, que
     assim percorre os três. Não há nada clicável dentro deles. */
  .historia--viva .palco__tela > .quadro {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition:
      opacity 450ms ease-out,
      transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .historia--viva .palco__tela > .quadro.ativo {
    opacity: 1;
    transform: none;
  }

  /* Fora do passo ativo, só o número e o título esmaecem; o título é texto grande, que fica
     acima de 3:1, e o parágrafo continua com o contraste normal. */
  .historia--viva .passo h3 {
    transition: opacity 400ms ease-out;
  }

  .historia--viva .passo:not(.ativo) h3 {
    opacity: 0.6;
  }

  @media (prefers-reduced-motion: reduce) {
    .historia--viva .palco__tela > .quadro,
    .historia--viva .passo h3 {
      transform: none;
      transition: none;
    }

    /* o destaque continua indo para a etapa certa, só que sem deslizar */
    .palco__etapas::before,
    .palco__etapas li {
      transition: none;
    }
  }

  .historia--viva .passo:not(.ativo) .passo__numero {
    background: var(--azul-claro);
    color: var(--azul-escuro);
  }

  .historia--viva .passo .passo__numero:hover {
    background: var(--azul-escuro);
    color: #fff;
  }
}