/*
  Site institucional da Tocka.

  Sem framework CSS e sem fonte externa de propósito: a LCP (maior conteúdo visível) do
  hero depende de nada bloquear o primeiro parágrafo, e uma fonte do Google adiciona uma
  requisição a mais, exatamente no caminho crítico. A pilha de fontes do sistema abaixo
  já parece profissional em qualquer aparelho, sem esse custo.

  As cores reaproveitam a identidade do produto (Documento 26 — Identidade da Marca) e os
  mesmos tons usados no painel real da aplicação, para que quem migra do site para o
  aplicativo reconheça a mesma marca — não duas.
*/

:root {
  --cor-primaria: #1565c0;
  --cor-primaria-escura: #0d47a1;
  --cor-primaria-clara: #e3f0fd;

  /* Mesma FAMÍLIA de cor dos indicadores do Dashboard real (Quasar `negative`/
     `warning`/`positive`), mas não o mesmo valor exato: o amarelo e o verde padrão do
     Quasar (`#F2C037`, `#21BA45`) reprovam contraste WCAG AA em texto sobre fundo claro
     — verificado calculando a razão real, não por inspeção visual. Os tons abaixo foram
     escolhidos escurecendo até passar de 4.5:1, mantendo a mesma família de cor. */
  --cor-vencido: #c10015;
  --cor-atencao: #8a5a00;
  --cor-atencao-fundo: #fdf3d9;
  --cor-sucesso: #0e7a2e;

  --texto-principal: #1a2027;
  --texto-secundario: #57616c;
  /* #8a94a0, o tom inicial, dava 3.08:1 sobre branco — abaixo do mínimo de 4.5:1 para
     texto normal. Usado em legendas pequenas (rodapé da maquete, datas, tags), onde
     essa diferença é real, não cosmética. */
  --texto-terciario: #5f6975;
  --fundo: #ffffff;
  --fundo-alternado: #f6f8fb;
  --borda: #e2e6ec;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  --largura-conteudo: 1120px;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --sombra-elevada: 0 8px 24px rgba(16, 24, 40, 0.12);

  --transicao: 180ms ease;
}

/* -------------------------------------------------------------------------
   Reset mínimo
   ------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  /* `scroll-padding-top` compensa o cabeçalho fixo: sem isto, um link de âncora esconde
     o título da seção embaixo do cabeçalho. */
  scroll-padding-top: 76px;
}

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

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--texto-principal);
  background: var(--fundo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

button {
  font-family: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Todo alvo interativo focável precisa de indicação visível — sem isto, quem navega por
   teclado perde de vista onde está. `:focus-visible` evita o anel aparecer num clique de
   mouse, que é ruído para quem usa mouse e não precisa dele. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: 20px;
}

.secao {
  padding-block: 64px;
}

.secao--alternada {
  background: var(--fundo-alternado);
}

.secao__cabecalho {
  max-width: 640px;
  margin-bottom: 40px;
}

.secao__rotulo {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cor-primaria);
  margin-bottom: 12px;
}

.secao__titulo {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.secao__texto {
  margin-top: 12px;
  color: var(--texto-secundario);
  font-size: 17px;
}

/* -------------------------------------------------------------------------
   Marca
   ------------------------------------------------------------------------- */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--texto-principal);
}

.marca__simbolo {
  width: 30px;
  height: 30px;
  color: var(--cor-primaria);
  flex-shrink: 0;
}

.marca__nome {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------
   Cabeçalho
   ------------------------------------------------------------------------- */
/* Cabeçalho e aviso de ambiente de testes grudados juntos no topo, como uma unidade só
   (`.topo-fixo` é quem fixa; o cabeçalho, sozinho, não tem mais `position`). Manter os
   dois juntos evita fazer conta de altura em pixel para encaixar um sticky embaixo do
   outro — o navegador resolve isso sozinho quando é um único bloco. */
.topo-fixo {
  position: sticky;
  top: 0;
  z-index: 40;
}

.aviso-teste {
  margin: 0;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--cor-atencao);
  background: var(--cor-atencao-fundo);
  border-bottom: 1px solid var(--borda);
}

.cabecalho {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 16px;
}

.cabecalho__nav {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
}

.cabecalho__nav a {
  text-decoration: none;
  color: var(--texto-secundario);
  transition: color var(--transicao);
}

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

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Entrar" some abaixo de 860 px. Verificado causando rolagem horizontal: os dois
   botões de texto mais o hambúrguer não cabem em 375 px. "Entrar" reaparece dentro do
   menu em tela cheia.

   O seletor usa DUAS classes (`.cabecalho__acoes .cabecalho__acoes-entrar`), não uma —
   por um motivo verificado, não por estilo. `.botao` também define `display` (mais
   abaixo neste arquivo, na ordem de origem), e as duas regras têm a mesma
   especificidade de uma classe só: quem vence o empate é a última declarada no
   arquivo, que é `.botao`. Com uma classe só, este `display: none` era descartado em
   silêncio e "Entrar" continuava visível — foi exatamente esse bug que a rolagem
   horizontal em 375 px expôs. */
.cabecalho__acoes .cabecalho__acoes-entrar {
  display: none;
}

/* O botão principal encolhe no celular — cabe ao lado do hambúrguer sem precisar
   remover a chamada de ação mais importante do cabeçalho. */
.cabecalho__acoes .botao--primario {
  padding-inline: 14px;
  font-size: 14px;
}

/* O menu abre em tela cheia no celular, e não como um painel estreito: um menu de
   navegação institucional tem poucos itens, e um painel lateral apertado não ganha nada
   sobre uma tela inteira — só complica o toque. */
.cabecalho__menu-movel {
  position: fixed;
  inset: 68px 0 0 0;
  background: var(--fundo);
  padding: 24px 20px;
  display: none;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.cabecalho__menu-movel.esta-aberto {
  display: flex;
}

.cabecalho__menu-movel a {
  padding: 14px 4px;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  color: var(--texto-principal);
  border-bottom: 1px solid var(--borda);
}

.cabecalho__alterna {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--texto-principal);
}

.cabecalho__alterna svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 860px) {
  .cabecalho__nav {
    display: flex;
  }
  /* Mesma especificidade da regra que esconde (duas classes) — com uma só, esta
     perderia o empate contra ela e "Entrar" ficaria escondido mesmo no desktop. */
  .cabecalho__acoes .cabecalho__acoes-entrar {
    display: inline-flex;
  }
  .cabecalho__acoes .botao--primario {
    padding-inline: 22px;
    font-size: 15px;
  }
  .cabecalho__alterna {
    display: none;
  }
  .cabecalho__menu-movel {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding-inline: 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
  white-space: nowrap;
}

.botao:active {
  transform: translateY(1px);
}

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

.botao--primario:hover {
  background: var(--cor-primaria-escura);
}

.botao--fantasma {
  background: transparent;
  color: var(--texto-principal);
  border-color: var(--borda);
}

.botao--fantasma:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.botao--grande {
  height: 52px;
  padding-inline: 28px;
  font-size: 16px;
}

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

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  padding-block: 56px 64px;
}

.hero__grade {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 960px) {
  .hero__grade {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.hero__titulo {
  font-size: clamp(30px, 5.5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hero__titulo em {
  font-style: normal;
  color: var(--cor-primaria);
}

.hero__texto {
  margin-top: 18px;
  font-size: 18px;
  color: var(--texto-secundario);
  max-width: 46ch;
}

.hero__acoes {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__aviso {
  margin-top: 14px;
  font-size: 14px;
  color: var(--texto-terciario);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero__aviso svg {
  width: 16px;
  height: 16px;
  color: var(--cor-sucesso);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Reprodução do painel (não é uma captura de tela: é o mesmo layout, cores e dados
   reais de uma empresa de demonstração, redesenhado em HTML/CSS — leve e nítido em
   qualquer resolução, sem o peso de uma imagem).
   ------------------------------------------------------------------------- */
.maquete {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
}

.maquete__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--fundo-alternado);
  border-bottom: 1px solid var(--borda);
}

.maquete__bolha {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--borda);
}

.maquete__corpo {
  padding: 20px;
}

.maquete__saudacao {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-bottom: 14px;
}

.maquete__saudacao strong {
  color: var(--texto-principal);
}

.maquete__indicadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (min-width: 480px) {
  .maquete__indicadores {
    grid-template-columns: repeat(4, 1fr);
  }
}

.maquete__indicador {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 10px 12px;
}

.maquete__indicador-rotulo {
  font-size: 11px;
  color: var(--texto-secundario);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.maquete__indicador-rotulo svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.maquete__indicador-valor {
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
}

.maquete__indicador--vencido .maquete__indicador-rotulo,
.maquete__indicador--vencido .maquete__indicador-valor {
  color: var(--cor-vencido);
}

.maquete__indicador--atencao .maquete__indicador-rotulo,
.maquete__indicador--atencao .maquete__indicador-valor {
  color: var(--cor-atencao);
}

.maquete__indicador--proximo .maquete__indicador-valor {
  color: var(--cor-primaria);
}

.maquete__indicador--concluido .maquete__indicador-rotulo,
.maquete__indicador--concluido .maquete__indicador-valor {
  color: var(--cor-sucesso);
}

.maquete__lista-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 8px;
}

.maquete__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--borda);
}

.maquete__item-info {
  min-width: 0;
}

.maquete__item-titulo {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maquete__item-detalhe {
  font-size: 12px;
  color: var(--texto-terciario);
  margin-top: 2px;
}

.maquete__etiqueta {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.maquete__etiqueta--vencido {
  color: var(--cor-vencido);
  background: #fce8e8;
}

.maquete__etiqueta--atencao {
  color: var(--cor-atencao);
  background: var(--cor-atencao-fundo);
}

.maquete__etiqueta--proximo {
  color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
}

.maquete__legenda {
  margin-top: 12px;
  font-size: 12px;
  color: var(--texto-terciario);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Cartões de problema / como funciona / diferencial
   ------------------------------------------------------------------------- */
.grade {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grade--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .grade--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grade--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cartao {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
}

.secao--alternada .cartao {
  background: var(--fundo);
}

.cartao__icone {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
  margin-bottom: 16px;
}

.cartao__icone svg {
  width: 22px;
  height: 22px;
}

.cartao__titulo {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}

.cartao__texto {
  font-size: 15px;
  color: var(--texto-secundario);
}

.cartao--passo {
  position: relative;
}

.cartao__numero {
  font-size: 13px;
  font-weight: 700;
  color: var(--cor-primaria);
  margin-bottom: 8px;
}

/* -------------------------------------------------------------------------
   Diferencial (Tocka × ERP)
   ------------------------------------------------------------------------- */
.comparativo {
  display: grid;
  gap: 20px;
}

@media (min-width: 720px) {
  .comparativo {
    grid-template-columns: 1fr 1fr;
  }
}

.comparativo__coluna {
  border-radius: var(--raio);
  padding: 28px;
  border: 1px solid var(--borda);
}

.comparativo__coluna--destaque {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
}

.comparativo__titulo {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  color: var(--texto-secundario);
}

.comparativo__coluna--destaque .comparativo__titulo {
  color: var(--cor-primaria-escura);
}

.comparativo__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
}

.comparativo__lista svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--texto-terciario);
}

.comparativo__coluna--destaque .comparativo__lista svg {
  color: var(--cor-primaria);
}

/* -------------------------------------------------------------------------
   Preços
   ------------------------------------------------------------------------- */
.precos__toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  margin-bottom: 32px;
}

.precos__toggle-opcao {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.precos__toggle-opcao.esta-ativo {
  background: var(--cor-primaria);
  color: #fff;
}

.precos__grade {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .precos__grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .precos__grade {
    grid-template-columns: repeat(4, 1fr);
  }
}

.plano-card {
  display: flex;
  flex-direction: column;
}

.plano-card__nome {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-secundario);
}

.plano-card__preco {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.plano-card__periodo {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-secundario);
}

.plano-card__desconto {
  font-size: 13px;
  color: var(--cor-sucesso);
  margin-bottom: 8px;
}

.plano-card__lista {
  margin-top: 12px;
  margin-bottom: 20px;
  flex-grow: 1;
}

.plano-card__lista li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--texto-secundario);
}

.plano-card__lista li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--cor-primaria-clara);
}

.plano-card__botao {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   Confiança
   ------------------------------------------------------------------------- */
.confianca__item {
  display: flex;
  gap: 14px;
}

.confianca__icone {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-primaria);
}

.confianca__icone svg {
  width: 20px;
  height: 20px;
}

.confianca__titulo {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.confianca__texto {
  font-size: 14px;
  color: var(--texto-secundario);
}

.confianca__texto a {
  color: var(--cor-primaria);
  text-decoration: none;
}

.confianca__texto a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Público-alvo (etiquetas)
   ------------------------------------------------------------------------- */
.publico {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.publico__etiqueta {
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  color: var(--texto-secundario);
}

/* -------------------------------------------------------------------------
   CTA final
   ------------------------------------------------------------------------- */
.cta-final {
  background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
  border-radius: 20px;
  padding: 48px 32px;
  text-align: center;
  color: #fff;
}

.cta-final__titulo {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cta-final__texto {
  margin-top: 10px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
}

.cta-final__acoes {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-final .botao--fantasma {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.cta-final .botao--fantasma:hover {
  border-color: #fff;
  color: #fff;
}

.cta-final .botao--primario {
  background: #fff;
  color: var(--cor-primaria-escura);
}

.cta-final .botao--primario:hover {
  background: #f0f4fa;
}

/* -------------------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--borda);
  padding-block: 40px;
  background: var(--fundo-alternado);
}

.rodape__topo {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 720px) {
  .rodape__topo {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.rodape__tagline {
  margin-top: 10px;
  font-size: 14px;
  color: var(--texto-secundario);
  max-width: 32ch;
}

.rodape__colunas {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.rodape__coluna-titulo {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-terciario);
  margin-bottom: 12px;
}

.rodape__coluna li {
  margin-bottom: 8px;
}

.rodape__coluna a {
  font-size: 14px;
  color: var(--texto-secundario);
  text-decoration: none;
}

.rodape__coluna a:hover {
  color: var(--cor-primaria);
}

.rodape__base {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--borda);
  font-size: 13px;
  color: var(--texto-terciario);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* -------------------------------------------------------------------------
   Página de Privacidade (conteúdo simples, sem exigir a folha inteira)
   ------------------------------------------------------------------------- */
.pagina-simples {
  padding-block: 56px;
  max-width: 760px;
  margin-inline: auto;
}

.pagina-simples h1 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 8px;
}

.pagina-simples .atualizado {
  font-size: 14px;
  color: var(--texto-terciario);
  margin-bottom: 32px;
}

.pagina-simples h2 {
  font-size: 19px;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 10px;
}

.pagina-simples p,
.pagina-simples li {
  font-size: 15px;
  color: var(--texto-secundario);
  margin-bottom: 12px;
}

.pagina-simples ul {
  list-style: disc;
  padding-left: 20px;
}

.formulario-contato {
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--raio);
  background: var(--fundo-alternado);
  border: 1px solid var(--borda);
}

.formulario-contato__titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--texto-principal);
  margin-bottom: 4px;
}

.formulario-contato__texto {
  font-size: 14px;
  color: var(--texto-secundario);
  margin-bottom: 16px;
}

.formulario-contato label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-principal);
  margin-bottom: 6px;
}

.formulario-contato input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto-principal);
  margin-bottom: 14px;
}

.formulario-contato input:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 1px;
}

.pagina-simples .aviso {
  margin-top: 32px;
  padding: 16px 20px;
  border-radius: var(--raio);
  background: var(--cor-atencao-fundo);
  color: #6b4d00;
  font-size: 14px;
  border: 1px solid #f0dca0;
}

/* -------------------------------------------------------------------------
   Revelação suave ao rolar — puramente cosmética, nunca esconde conteúdo.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .revela {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  .revela.esta-visivel {
    opacity: 1;
    transform: none;
  }
}

/* Sem JavaScript ou com o movimento reduzido pelo usuário, o conteúdo já nasce visível —
   uma seção que só aparece com script é uma seção que pode nunca aparecer. */
.sem-js .revela,
.reduz-movimento .revela {
  opacity: 1;
  transform: none;
}