/*
  Equipe Pronta: sistema visual compartilhado
  =============================================
  Usado pelas páginas de venda (vendas, upsell, downsell, obrigado, instalacao),
  pela matéria (materia.html, com a camada .materia no fim) e, depois, pela
  área do comprador (area/). Mobile primeiro: os estilos base são do celular
  e as regras @media (min-width: ...) ampliam para tela maior.

  Fontes (carregar no <head> de cada página, Google Fonts):
    Bricolage Grotesque 700 e 800 (títulos), Figtree 400 a 700 (corpo),
    Source Serif 4 400, 600 e itálico (só no corpo da materia.html).

  CORES E MEDIDAS: todas em :root, logo abaixo. Para mudar a cara do site,
  mude as variáveis, não as classes.

  CLASSES PRINCIPAIS
  Estrutura
    .wrap              coluna central (até 1120px) com respiro lateral de 20px
    .wrap--estreito    coluna de leitura (até 720px)
    .secao             bloco vertical da página; .secao--alt fundo papel escuro;
                       .secao--linhas fundo de caderno pautado; .secao--tinta fundo tinta (sem brilho)
    .grade-2           duas colunas a partir de 900px (empilha no celular)
    .pilha > * + *     espaço vertical regular entre filhos
  Texto
    .sobretitulo       linha curta acima do título (sem caixa alta mono)
    .titulo-1/2/3      títulos em Bricolage; .lead texto de abertura maior
    .marca-texto       marca-texto amarelo em palavra-chave (usar pouco)
    .microtexto        texto pequeno abaixo de botão
    .texto-suave       cor tinta-2
  Ações
    .btn               botão laranja grande; .btn--bloco largura total;
    .btn--contorno     botão secundário com borda; .btn--ok verde
    .link-nao          link discreto do "não, obrigado"
    .copiar            botão de copiar (vira verde com .copiar.is-copiado)
                       uso: <button class="copiar" data-copiar="#id-do-texto">Copiar</button>
  Componentes
    .faixa-topo        faixa fina no topo da página
    .topo / .logo      cabeçalho com a marca
    .cartao            caixa branca com borda fina; .cartao--destaque borda laranja
    .lista-check       lista com visto verde; .lista-x lista com x
    .passos            lista numerada grande (ol)
    .chat, .chat__msg  conversa de IA (bolhas); ver bloco DEMO
    .demo              conversa animada com seletor (assets/site.js)
    .cartao-assistente anatomia de um assistente (reutilizável na área)
    .indice-areas      lista numerada das 12 áreas
    .comparacao        tabela que vira blocos no celular (td com data-rotulo)
    .comanda           caixa da oferta com cara de bloco de pedido
    .carimbo           selo desenhado da garantia (desenho próprio)
    .faq               perguntas com <details>
    .abas              abas acessíveis (role=tablist), assets/site.js
    .video-espaco      espaço marcado para vídeo
    .aviso             caixa de aviso; .aviso--ok verde
    .rodape            rodapé legal
    .cta-fixo          botão fixo no rodapé do celular (assets/site.js mostra e esconde)
  Estados
    .is-visivel, .is-ativo, .is-copiado
*/

:root {
  --papel: #fbf8f2;
  --papel-2: #f3eee4;
  --papel-3: #ebe4d6;
  --branco: #ffffff;
  --tinta: #1c1a17;
  --tinta-2: #55504a;
  --tinta-3: #77706a;
  --linha: #e7e1d6;
  --linha-forte: #d6cdbd;
  --acao: #e4572e;
  --acao-hover: #c2441f;
  --acao-suave: #fbe3da;
  --ok: #1f7a4d;
  --ok-suave: #e1f1e8;
  --marca: #ffd166;

  --fonte-titulo: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --fonte-corpo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-serifa: "Source Serif 4", Georgia, "Times New Roman", serif;

  --corpo: 18px;
  --raio: 14px;
  --raio-g: 22px;
  --sombra: 0 1px 0 rgba(28, 26, 23, .04), 0 10px 30px -12px rgba(28, 26, 23, .18);
  --sombra-forte: 0 2px 0 rgba(28, 26, 23, .06), 0 24px 50px -20px rgba(28, 26, 23, .35);
  --larg: 1120px;
  --larg-leitura: 720px;
  --respiro: 20px;
}

@media (min-width: 900px) {
  :root { --corpo: 19px; --respiro: 32px; }
}

/* Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--corpo);
  line-height: 1.6;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--acao-hover); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Estrutura -------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--larg); margin: 0 auto; padding: 0 var(--respiro); }
.wrap--estreito { max-width: calc(var(--larg-leitura) + 2 * var(--respiro)); }
.secao { padding: 64px 0; }
.secao--alt { background: var(--papel-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.secao--linhas {
  background-color: var(--papel);
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, #f0eadf 35px 36px);
}
.secao--tinta { background: var(--tinta); color: var(--papel); }
.secao--tinta .texto-suave { color: #cfc8bd; }
@media (min-width: 900px) { .secao { padding: 96px 0; } }
.grade-2 { display: grid; gap: 32px; }
@media (min-width: 900px) { .grade-2 { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
.pilha > * + * { margin-top: 16px; }
.centro { text-align: center; }

/* Texto ------------------------------------------------------------ */
.titulo-1, .titulo-2, .titulo-3, h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  color: inherit;
}
.titulo-1 { font-size: clamp(34px, 8.6vw, 60px); }
.titulo-2 { font-size: clamp(28px, 6.4vw, 44px); }
.titulo-3 { font-size: clamp(21px, 4.6vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.sobretitulo {
  display: inline-block;
  font-weight: 700;
  font-size: 16px;
  color: var(--acao-hover);
  margin: 0 0 12px;
}
.sobretitulo::before {
  content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 2px;
  background: var(--acao); vertical-align: middle; margin-right: 10px; transform: translateY(-2px);
}
.lead { font-size: 1.12em; color: var(--tinta-2); line-height: 1.55; }
.texto-suave { color: var(--tinta-2); }
.marca-texto {
  background: linear-gradient(transparent 52%, var(--marca) 52%, var(--marca) 92%, transparent 92%);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.microtexto { font-size: 15px; color: var(--tinta-2); margin-top: 12px; line-height: 1.45; }
.citacao {
  margin: 20px 0; padding: 16px 18px; background: var(--branco);
  border-left: 4px solid var(--ok); border-radius: 0 var(--raio) var(--raio) 0;
  font-size: .98em;
}

/* Botões ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 14px 28px;
  background: var(--acao); color: #fff;
  font-family: var(--fonte-corpo); font-size: 19px; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 0; border-radius: 12px; cursor: pointer;
  box-shadow: 0 3px 0 var(--acao-hover);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--acao-hover); color: #fff; transform: translateY(1px); box-shadow: 0 2px 0 #9c3517; }
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn__seta { width: 20px; height: 20px; flex: none; }
.btn--bloco { display: flex; width: 100%; }
.btn--contorno { background: transparent; color: var(--tinta); border: 2px solid var(--tinta); box-shadow: none; }
.btn--contorno:hover { background: var(--tinta); color: var(--papel); box-shadow: none; }
.btn--ok { background: var(--ok); box-shadow: 0 3px 0 #155a38; }
.btn--ok:hover { background: #155a38; }
.btn-area { margin-top: 28px; }
.link-nao {
  display: inline-block; margin-top: 18px; padding: 8px 4px;
  color: var(--tinta-2); font-size: 16px; text-decoration: underline;
}
.link-nao:hover { color: var(--tinta); }

.copiar {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  font: 700 16px/1 var(--fonte-corpo);
  color: var(--tinta); background: var(--branco);
  border: 2px solid var(--tinta); border-radius: 10px; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.copiar:hover { background: var(--tinta); color: var(--papel); }
.copiar svg { width: 18px; height: 18px; }
.copiar.is-copiado { background: var(--ok); border-color: var(--ok); color: #fff; }

/* Faixa e topo ----------------------------------------------------- */
.faixa-topo {
  background: var(--tinta); color: var(--papel);
  font-size: 15px; font-weight: 600; text-align: center;
  padding: 9px var(--respiro); line-height: 1.4;
}
.topo { border-bottom: 1px solid var(--linha); background: var(--papel); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 21px; letter-spacing: -0.02em;
  color: var(--tinta); text-decoration: none;
}
.logo svg { width: 34px; height: 34px; flex: none; }
.topo__link { font-weight: 700; font-size: 16px; color: var(--tinta); white-space: nowrap; }

/* Cartões e listas ------------------------------------------------- */
.cartao {
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g);
  padding: 24px; box-shadow: var(--sombra);
}
.cartao--destaque { border: 2px solid var(--acao); }
.cartao--plano { box-shadow: none; }
.lista-check, .lista-x { list-style: none; padding: 0; margin: 0; }
.lista-check li, .lista-x li { position: relative; padding-left: 38px; margin-bottom: 14px; }
.lista-check li::before, .lista-x li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 14px;
}
.lista-check li::before {
  background-color: var(--ok-suave);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231f7a4d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lista-x li::before {
  background-color: var(--papel-3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%2355504a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.passos { list-style: none; counter-reset: passo; padding: 0; margin: 0; }
.passos > li { counter-increment: passo; position: relative; padding-left: 64px; margin-bottom: 28px; }
.passos > li::before {
  content: counter(passo);
  position: absolute; left: 0; top: -2px;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px;
  background: var(--tinta); color: var(--papel);
}
.passos > li > strong:first-child { display: block; font-size: 1.08em; margin-bottom: 4px; }

.aviso {
  border: 1px solid var(--linha-forte); background: var(--papel-2);
  border-radius: var(--raio); padding: 16px 18px; font-size: 16px; color: var(--tinta-2);
}
.aviso--ok { background: var(--ok-suave); border-color: #b9dcc8; color: #17402b; }
.aviso strong { color: var(--tinta); }

/* Vídeo ------------------------------------------------------------ */
.video-espaco {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border: 2px dashed var(--linha-forte); border-radius: var(--raio-g);
  background: repeating-linear-gradient(135deg, var(--papel-2) 0 14px, var(--papel) 14px 28px);
  display: grid; place-items: center; text-align: center; padding: 20px;
  color: var(--tinta-2); font-size: 16px;
}
.video-espaco--vertical { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
.video-espaco__play {
  width: 64px; height: 64px; border-radius: 50%; background: var(--tinta); margin: 0 auto 12px;
  display: grid; place-items: center;
}
.video-espaco__play::after {
  content: ""; border-left: 20px solid var(--papel); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px;
}

/* DEMO: conversa de IA -------------------------------------------- */
.demo { position: relative; }
.demo__seletor {
  display: flex; gap: 8px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.demo__seletor::-webkit-scrollbar { display: none; }
.demo__opcao {
  flex: none; min-height: 44px; padding: 8px 16px;
  font: 600 16px/1.2 var(--fonte-corpo); color: var(--tinta-2);
  background: transparent; border: 1px solid var(--linha-forte); border-radius: 10px; cursor: pointer;
}
.demo__opcao:hover { color: var(--tinta); border-color: var(--tinta); }
.demo__opcao.is-ativo, .demo__opcao[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.demo__legenda { font-size: 14px; color: var(--tinta-2); margin: 12px 2px 0; line-height: 1.45; }
.demo__repetir {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: 700 15px var(--fonte-corpo); color: var(--acao-hover); text-decoration: underline; text-underline-offset: 3px;
}

.chat {
  background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 26px;
  box-shadow: var(--sombra-forte); overflow: hidden; display: flex; flex-direction: column;
}
.chat__topo {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--linha); background: var(--papel);
  font-weight: 700; font-size: 16px;
}
.chat__topo small { font-weight: 500; color: var(--tinta-2); font-size: 14px; margin-left: auto; }
.chat__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-suave); }
.chat__corpo {
  height: 470px; overflow-y: auto; padding: 18px 14px 22px; scroll-behavior: smooth;
  display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain;
}
@media (min-width: 900px) { .chat__corpo { height: 540px; padding: 22px 20px 26px; } }
.chat__corpo { position: relative; }
.chat__conversa { display: flex; flex-direction: column; gap: 14px; }
.chat__conversa[hidden], .chat__msg[hidden] { display: none; }
.chat__entrada {
  display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 10px 10px 10px 16px;
  border: 1px solid var(--linha-forte); border-radius: 16px; color: var(--tinta-3); font-size: 16px;
}
.chat__entrada span:first-child { flex: 1; }
.chat__enviar { width: 36px; height: 36px; border-radius: 50%; background: var(--tinta); display: grid; place-items: center; flex: none; }
.chat__enviar svg { width: 16px; height: 16px; }

.chat__msg {
  max-width: 92%; padding: 12px 15px; border-radius: 18px; font-size: 16.5px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.chat__msg p { margin: 0 0 .55em; }
.chat__msg p:last-child, .chat__msg ol:last-child, .chat__msg ul:last-child { margin-bottom: 0; }
.chat__msg ol, .chat__msg ul { margin: 0 0 .55em; padding-left: 1.3em; }
.chat__msg li { margin-bottom: .3em; }
.chat__msg--pessoa { align-self: flex-end; background: var(--papel-3); border-bottom-right-radius: 6px; }
.chat__msg--ia { align-self: flex-start; background: var(--branco); border: 1px solid var(--linha); border-bottom-left-radius: 6px; }
.chat__msg--colado { background: var(--tinta); color: var(--papel); }
.chat__rotulo { display: block; font-size: 13px; font-weight: 700; color: var(--tinta-2); margin-bottom: 4px; }
.chat__msg--colado .chat__rotulo { color: var(--marca); }
.chat__msg--colado p { color: #e9e3d8; font-size: 15px; }
.chat__resultado {
  border: 2px solid var(--ok); background: #fcfffd; border-radius: 14px; padding: 12px 14px; margin: 6px 0 10px;
}
.chat__resultado b:first-child { display: block; margin-bottom: 2px; }
.chat__quando { font-size: 14.5px; color: var(--tinta-2); margin-top: 6px !important; }
.chat__resultado .copiar { margin-top: 10px; min-height: 38px; padding: 6px 14px; font-size: 15px; }
.chat__linha-post { padding: 8px 0; border-top: 1px dashed var(--linha-forte); }
.chat__linha-post:first-child { border-top: 0; padding-top: 0; }
.chat__linha-post small { display: block; color: var(--tinta-2); font-size: 14px; }
.chat__digitando { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; border-bottom-left-radius: 6px; }
.chat__digitando i { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); animation: pulinho 1s infinite ease-in-out; }
.chat__digitando i:nth-child(2) { animation-delay: .15s; }
.chat__digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulinho { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
.chat__msg.entra { animation: entra .38s cubic-bezier(.2, .8, .2, 1) both; }
.chat__msg .surge { animation: entra .35s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .chat__msg.entra, .chat__msg .surge { animation: none; }
  .chat__digitando i { animation: none; opacity: .7; }
}

/* Cartão de assistente (reutilizável na área) ---------------------- */
.cartao-assistente {
  background: var(--branco); border: 1px solid var(--linha-forte); border-radius: var(--raio-g);
  overflow: hidden; box-shadow: var(--sombra);
}
.cartao-assistente__cabeca { padding: 20px 22px 16px; border-bottom: 1px solid var(--linha); }
.cartao-assistente__codigo { font-weight: 700; font-size: 14px; color: var(--tinta-2); }
.cartao-assistente__nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 24px; line-height: 1.15; margin: 4px 0 6px; }
.cartao-assistente__meta { font-size: 15px; color: var(--tinta-2); margin: 0; }
.cartao-assistente__parte { padding: 14px 22px; border-bottom: 1px solid var(--linha); font-size: 16px; }
.cartao-assistente__parte:last-child { border-bottom: 0; }
.cartao-assistente__parte h4 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--acao-hover); }
.cartao-assistente__parte p { margin: 0; }
.cartao-assistente__bloco {
  background: var(--papel-2); border-radius: 12px; padding: 14px; font-size: 15px; color: var(--tinta-2);
  max-height: 120px; overflow: hidden; position: relative; margin-bottom: 12px;
}
.cartao-assistente__bloco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(transparent, var(--papel-2)); }

/* Índice das 12 áreas --------------------------------------------- */
.indice-areas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.indice-areas li {
  display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; padding: 18px 0;
  border-bottom: 1px solid var(--linha-forte);
}
.indice-areas__num { font-family: var(--fonte-titulo); font-weight: 800; font-size: 30px; line-height: 1; color: var(--acao); grid-row: span 2; }
.indice-areas__nome { font-family: var(--fonte-titulo); font-weight: 700; font-size: 21px; line-height: 1.2; }
.indice-areas__itens { font-size: 16px; color: var(--tinta-2); line-height: 1.5; }
@media (min-width: 900px) {
  .indice-areas { grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 0; }
  .indice-areas li:nth-child(-n+2) { border-top: 2px solid var(--tinta); }
}

/* Comparação ------------------------------------------------------ */
.comparacao { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.comparacao caption { text-align: left; }
.comparacao th, .comparacao td { text-align: left; vertical-align: top; }
.comparacao thead { display: none; }
.comparacao tr { display: block; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 12px; }
.comparacao tbody th { display: block; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 700; margin-bottom: 8px; line-height: 1.25; }
.comparacao td { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--linha); }
.comparacao td::before { content: attr(data-rotulo); font-weight: 600; color: var(--tinta-2); font-size: 14.5px; }
.comparacao td.nosso { color: var(--tinta); font-weight: 700; }
.comparacao td.nosso::before { color: var(--acao-hover); }
@media (min-width: 900px) {
  .comparacao { display: table; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-g); overflow: hidden; }
  .comparacao thead { display: table-header-group; }
  .comparacao tr { display: table-row; background: none; border: 0; padding: 0; margin: 0; }
  .comparacao th, .comparacao td { display: table-cell; padding: 16px 18px; border-top: 1px solid var(--linha); }
  .comparacao td::before { content: none; }
  .comparacao thead th { border-top: 0; font-family: var(--fonte-titulo); font-size: 18px; background: var(--papel-2); }
  .comparacao tbody th { font-family: var(--fonte-corpo); font-size: 16px; font-weight: 700; margin: 0; width: 28%; }
  .comparacao .nosso { background: #fff6f2; box-shadow: inset 2px 0 0 var(--acao), inset -2px 0 0 var(--acao); }
  .comparacao thead .nosso { background: var(--acao); color: #fff; box-shadow: none; }
}

/* Comanda (caixa da oferta) --------------------------------------- */
.comanda {
  position: relative; background: var(--branco); border-radius: 6px; padding: 34px 22px 28px;
  box-shadow: var(--sombra-forte); max-width: 640px; margin: 0 auto;
}
.comanda::before, .comanda::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background: radial-gradient(circle at 8px 0, transparent 7px, var(--branco) 7.5px) repeat-x;
  background-size: 16px 12px;
}
.comanda::before { top: -11px; transform: scaleY(-1); }
.comanda::after { bottom: -11px; }
.comanda__titulo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 26px; line-height: 1.15; margin: 0 0 4px; }
.comanda__item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--linha-forte); }
.comanda__item:last-of-type { border-bottom: 0; }
.comanda__item b { display: block; }
.comanda__item span { color: var(--tinta-2); font-size: 16px; }
.comanda__marca { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--ok); display: grid; place-items: center; margin-top: 2px; }
.comanda__marca::after { content: ""; width: 10px; height: 6px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg) translate(1px, -1px); }
.comanda__sub { font-weight: 700; margin: 22px 0 4px; padding-top: 18px; border-top: 2px solid var(--tinta); }
.comanda__total { text-align: center; padding: 24px 0 6px; border-top: 2px solid var(--tinta); margin-top: 12px; }
.comanda__preco { font-family: var(--fonte-titulo); font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -0.03em; }
.comanda__preco small { font-size: 30px; vertical-align: 28px; margin-right: 4px; letter-spacing: 0; }
@media (min-width: 900px) { .comanda { padding: 44px 44px 36px; } }

/* Carimbo da garantia (desenho próprio) --------------------------- */
.carimbo {
  width: 190px; height: 190px; border-radius: 50%; flex: none;
  border: 3px solid var(--ok); color: var(--ok);
  display: grid; place-items: center; text-align: center; transform: rotate(-8deg);
  box-shadow: inset 0 0 0 6px var(--papel), inset 0 0 0 8px var(--ok);
  background: var(--papel);
}
.carimbo b { display: block; font-family: var(--fonte-titulo); font-size: 64px; line-height: .9; }
.carimbo span { display: block; font-weight: 700; font-size: 16px; line-height: 1.2; }
.garantia { display: grid; gap: 28px; justify-items: center; }
@media (min-width: 900px) { .garantia { grid-template-columns: auto 1fr; align-items: center; gap: 48px; justify-items: start; } }

/* FAQ -------------------------------------------------------------- */
.faq { border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--linha-forte); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-weight: 700; font-size: 1.02em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  background: var(--papel-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%231c1a17' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 20px; color: var(--tinta-2); }

/* Abas ------------------------------------------------------------- */
.abas__lista { display: flex; gap: 6px; border-bottom: 2px solid var(--tinta); margin-bottom: 28px; }
.abas__aba {
  flex: 1; min-height: 54px; padding: 10px 8px;
  font: 700 17px/1.2 var(--fonte-corpo); color: var(--tinta-2);
  background: var(--papel-2); border: 1px solid var(--linha-forte); border-bottom: 0;
  border-radius: 12px 12px 0 0; cursor: pointer;
}
.abas__aba:hover { color: var(--tinta); }
.abas__aba[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
@media (min-width: 900px) { .abas__aba { flex: 0 0 auto; padding: 10px 28px; font-size: 18px; } }
.abas__painel[hidden] { display: none; }
.js-sem .abas__painel[hidden] { display: block; }

/* Rodapé ----------------------------------------------------------- */
.rodape { background: var(--papel-2); border-top: 1px solid var(--linha); padding: 48px 0 40px; font-size: 15px; color: var(--tinta-2); line-height: 1.6; }
.rodape p { max-width: 820px; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0; padding: 0; list-style: none; }
.rodape__links a { color: var(--tinta); font-weight: 600; }
.rodape__empresa { color: var(--tinta); font-weight: 600; }

/* CTA fixo no celular --------------------------------------------- */
.cta-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 248, 242, .97); border-top: 1px solid var(--linha-forte);
  box-shadow: 0 -8px 24px -12px rgba(28, 26, 23, .3);
  transform: translateY(110%); transition: transform .25s ease;
}
.cta-fixo.is-visivel { transform: none; }
.cta-fixo__preco { font-size: 14px; line-height: 1.2; color: var(--tinta-2); white-space: nowrap; }
.cta-fixo__preco b { display: block; font-family: var(--fonte-titulo); font-size: 24px; color: var(--tinta); }
.cta-fixo .btn { flex: 1; min-height: 52px; padding: 10px 14px; font-size: 17px; }
body.tem-cta-fixo { padding-bottom: 84px; }
@media (min-width: 900px) { .cta-fixo { display: none; } body.tem-cta-fixo { padding-bottom: 0; } }

/* =================================================================
   PÁGINA DE VENDAS (vendas.html)
   ================================================================= */
.heroi { padding: 36px 0 56px; }
.heroi__grade { display: grid; gap: 40px; }
.heroi .titulo-1 { margin-bottom: 18px; }
.heroi__compat { font-size: 15px; color: var(--tinta-2); margin-top: 18px; }
@media (min-width: 980px) {
  .heroi { padding: 64px 0 88px; }
  .heroi__grade { grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; }
}

.relogio {
  font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(72px, 22vw, 150px);
  line-height: .9; letter-spacing: -0.04em; color: var(--acao); margin: 0 0 20px;
}
.relogio small { display: block; font-size: 18px; letter-spacing: 0; color: var(--papel); font-weight: 700; margin-top: 10px; font-family: var(--fonte-corpo); }
.cena p { font-size: 1.08em; }
.secao--tinta .cena p { color: #ece6db; }
.secao--tinta .marca-texto { color: var(--tinta); }

.resposta-robo {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 18px; border-bottom-left-radius: 6px;
  padding: 18px; color: var(--tinta-3); font-size: 16px; position: relative; max-width: 460px;
}
.resposta-robo p { margin-bottom: .6em; }
.resposta-robo__carimbo {
  position: absolute; right: 14px; bottom: 14px; transform: rotate(-9deg);
  border: 2px solid var(--acao); color: var(--acao); border-radius: 8px;
  font-weight: 800; font-size: 15px; padding: 4px 10px; background: rgba(255, 255, 255, .9);
}

.passo-figura {
  height: 150px; border-radius: var(--raio); background: var(--papel-2); border: 1px solid var(--linha);
  display: grid; place-items: center; margin-bottom: 18px; padding: 16px; overflow: hidden;
}
.fig-busca { width: 100%; max-width: 280px; background: var(--branco); border: 2px solid var(--tinta); border-radius: 12px; padding: 12px 14px; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.fig-busca::after { content: ""; width: 2px; height: 20px; background: var(--acao); animation: pisca 1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.fig-busca svg { width: 20px; height: 20px; flex: none; }
.fig-colar { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 260px; }
.fig-colar span { align-self: flex-start; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 6px 12px; font-size: 14px; }
.fig-colar span:last-child { align-self: flex-end; background: var(--papel-3); border: 0; }
.passos-tres { display: grid; gap: 36px; counter-reset: passo; }
.passos-tres > div { counter-increment: passo; }
.passos-tres h3::before { content: counter(passo) ". "; color: var(--acao); }
@media (min-width: 900px) { .passos-tres { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.exemplo { padding: 28px 0; border-top: 2px solid var(--tinta); }
.exemplo:first-of-type { border-top: 0; }
.exemplo__grade { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .exemplo__grade { grid-template-columns: .85fr 1.15fr; gap: 28px; } }
.exemplo__lado { border-radius: var(--raio-g); padding: 20px; font-size: 16.5px; }
.exemplo__lado--antes { background: var(--papel-2); border: 1px dashed var(--linha-forte); color: var(--tinta-2); }
.exemplo__lado--depois { background: var(--branco); border: 2px solid var(--ok); }
.exemplo__rotulo { font-weight: 800; font-size: 15px; margin: 0 0 10px; display: block; }
.exemplo__lado--antes .exemplo__rotulo { color: var(--tinta-2); }
.exemplo__lado--depois .exemplo__rotulo { color: var(--ok); }
.exemplo__pedido { display: inline-block; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 8px 12px; margin-bottom: 12px; color: var(--tinta); font-size: 15.5px; }
.exemplo__lado .citacao { margin: 14px 0 0; background: var(--ok-suave); border-left-color: var(--ok); }

.servir { display: grid; gap: 24px; }
@media (min-width: 900px) { .servir { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* =================================================================
   UPSELL, DOWNSELL, OBRIGADO
   ================================================================= */
.passo-funil { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--ok); }
.passo-funil::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; flex: none; }
.lista-profissoes { columns: 1; padding-left: 1.2em; margin: 0; font-size: 17px; }
.lista-profissoes li { margin-bottom: 6px; break-inside: avoid; }
@media (min-width: 640px) { .lista-profissoes { columns: 2; column-gap: 40px; } }
.preco-funil { font-family: var(--fonte-titulo); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.03em; margin: 8px 0 4px; }
.preco-funil small { font-size: 24px; vertical-align: 22px; margin-right: 4px; letter-spacing: 0; }
.decisao { text-align: center; padding: 28px 0 8px; }
.decisao .btn { width: 100%; max-width: 520px; }

/* =================================================================
   INSTALAÇÃO
   ================================================================= */
.passos--instalacao > li { padding-bottom: 6px; }
.passos--instalacao p { margin: 4px 0 0; color: var(--tinta-2); }
.tecla { display: inline-block; font: 700 15px/1 var(--fonte-corpo); padding: 4px 8px; border: 1px solid var(--linha-forte); border-bottom-width: 3px; border-radius: 6px; background: var(--branco); color: var(--tinta); white-space: nowrap; }
.caminho { font-weight: 700; color: var(--tinta); }

/* =================================================================
   MATÉRIA (materia.html): visual editorial neutro, sem a marca no topo
   ================================================================= */
.materia { background: var(--branco); color: #222; }
.materia__barra { border-bottom: 1px solid #e3e3e3; background: var(--branco); }
.materia__barra .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; }
.materia__editoria { font-weight: 700; font-size: 15px; color: #333; }
.materia__menu { width: 26px; height: 18px; display: grid; gap: 5px; }
.materia__menu i { display: block; height: 2px; background: #333; border-radius: 2px; }
.materia__publi {
  background: #ececec; color: #1c1c1c; text-align: center;
  font-weight: 800; font-size: 14px; letter-spacing: .14em; padding: 8px 12px;
  border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
}
.materia__cabeca { padding: 28px 0 8px; }
.materia__titulo { font-family: var(--fonte-corpo); font-weight: 800; font-size: clamp(29px, 7.2vw, 46px); line-height: 1.12; letter-spacing: -0.015em; margin: 14px 0 14px; color: #111; }
.materia__linha-fina { font-family: var(--fonte-corpo); font-size: 1.08em; line-height: 1.45; color: #444; font-weight: 500; margin: 0 0 18px; }
.materia__nota { font-family: var(--fonte-serifa); font-style: italic; font-size: 18px; color: #333; background: #f6f6f6; border-left: 3px solid #999; padding: 12px 14px; margin: 0 0 18px; }
.materia__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: #555; padding: 12px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.materia__meta b { color: #222; }
.materia__destaque { margin: 22px 0 8px; }
.materia__destaque svg { width: 100%; border-radius: 4px; }
.materia__legenda { font-size: 14px; color: #666; margin: 8px 0 0; }
.materia__corpo { font-family: var(--fonte-serifa); font-size: 20px; line-height: 1.7; color: #1f1f1f; padding: 18px 0 8px; }
.materia__corpo p { margin: 0 0 1.15em; }
.materia__corpo h2 { font-family: var(--fonte-corpo); font-weight: 800; font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; margin: 1.6em 0 .6em; color: #111; }
.materia__corpo a { color: #0b57a4; font-weight: 600; text-decoration-thickness: 2px; }
.materia__corpo a:hover { color: #083e75; }
.materia__chamada { font-family: var(--fonte-corpo); font-size: 18px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 14px 0; margin: 1.4em 0; }
.materia__chamada span { display: block; font-size: 14px; font-weight: 700; color: #666; margin-bottom: 2px; }
.materia__fim { font-family: var(--fonte-corpo); text-align: center; background: #f7f7f5; border: 1px solid #e6e6e6; border-radius: 10px; padding: 26px 18px; margin: 28px 0 40px; }
.materia__fim .btn { width: 100%; max-width: 460px; }
.materia .rodape { background: #f4f4f4; border-top-color: #e3e3e3; color: #555; }
@media (min-width: 900px) { .materia__corpo { font-size: 21px; } }

/* Ajustes de 15/10/2026 (referência Acervo Vibehub) ---------------- */
.secao--curta { padding: 48px 0; }
@media (min-width: 900px) { .secao--curta { padding: 72px 0; } }

/* Sem e com */
.semcom { display: grid; gap: 14px; }
.semcom__lado { border-radius: var(--raio-g); padding: 24px 22px; }
.semcom__lado--sem { background: var(--papel-2); border: 1px solid var(--linha); }
.semcom__lado--com { background: var(--branco); border: 2px solid var(--acao); box-shadow: var(--sombra); }
.semcom__rotulo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 22px; margin: 0 0 14px; }
.semcom__lado--sem .semcom__rotulo { color: var(--tinta-2); }
.semcom__lado--com .semcom__rotulo { color: var(--acao-hover); }
.semcom__lista { list-style: none; margin: 0; padding: 0; }
.semcom__lista li { position: relative; padding: 10px 0 10px 34px; border-top: 1px solid var(--linha); }
.semcom__lista li:first-child { border-top: 0; }
.semcom__lista li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 22px; height: 22px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.semcom__lado--sem li::before { background-color: #e2dccf; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3L3 9' stroke='%2355504a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.semcom__lado--com li::before { background-color: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.semcom__lista b { display: block; line-height: 1.3; }
.semcom__lista span { display: block; font-size: 16px; color: var(--tinta-2); line-height: 1.45; }
.semcom__lado--sem b { color: var(--tinta-2); }
.semcom__vs {
  justify-self: center; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tinta); color: var(--papel); font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px;
}
@media (min-width: 900px) {
  .semcom { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
  .semcom__lado { padding: 30px 30px; }
}
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.numeros div { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.numeros b { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: 34px; line-height: 1; color: var(--acao); }
.numeros span { display: block; font-size: 15px; color: var(--tinta-2); margin-top: 6px; line-height: 1.35; }
@media (min-width: 900px) { .numeros { grid-template-columns: repeat(4, 1fr); gap: 16px; } .numeros b { font-size: 44px; } }

/* Pensamentos do cliente */
.pensamentos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.pensamentos li {
  position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: 18px 18px 18px 4px;
  padding: 16px 20px; font-weight: 600; line-height: 1.4; box-shadow: var(--sombra);
}
@media (min-width: 700px) { .pensamentos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pensamentos { grid-template-columns: 1fr 1fr 1fr; gap: 16px; } }

/* Vitrine da área do comprador */
.secao--tinta .sobretitulo { color: var(--marca); }
.vitrine {
  margin-top: 32px; background: var(--papel); color: var(--tinta); border-radius: var(--raio-g);
  overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); border: 1px solid #3a352f;
}
.vitrine__barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--papel-3); border-bottom: 1px solid var(--linha-forte); }
.vitrine__barra i { width: 11px; height: 11px; border-radius: 50%; background: var(--linha-forte); }
.vitrine__barra span { margin-left: 10px; font-size: 13px; color: var(--tinta-2); background: var(--papel); border-radius: 999px; padding: 3px 14px; }
.vitrine__app { display: grid; }
.vitrine__menu { display: none; }
.vitrine__conteudo { padding: 22px 18px 24px; min-width: 0; }
.vitrine__titulo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 26px; line-height: 1.15; margin: 0 0 14px; }
.vitrine__busca {
  display: flex; align-items: center; gap: 10px; border: 2px solid var(--tinta); border-radius: 12px;
  background: var(--branco); padding: 11px 14px; font-size: 16px; color: var(--tinta-3);
}
.vitrine__busca svg { width: 18px; color: var(--tinta); flex: none; }
.vitrine__filtros { display: flex; gap: 8px; margin: 14px 0 6px; overflow: hidden; flex-wrap: nowrap; }
.vitrine__filtros span {
  flex: none; font-size: 14px; font-weight: 600; border: 1px solid var(--linha-forte); border-radius: 999px; padding: 5px 12px; background: var(--branco);
}
.vitrine__filtros span.is-ativo { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.vitrine__lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.vitrine__lista li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center;
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px;
}
.vitrine__cod { grid-column: 1; font-size: 12px; font-weight: 700; color: var(--acao-hover); letter-spacing: .02em; }
.vitrine__lista b { grid-column: 1; font-size: 16px; line-height: 1.3; }
.vitrine__lista small { grid-column: 1; font-size: 14px; color: var(--tinta-2); }
.vitrine__copiar {
  grid-column: 2; grid-row: 1 / span 3; font-size: 14px; font-weight: 700; color: #fff; background: var(--acao);
  border-radius: 10px; padding: 8px 14px;
}
.vitrine__lista li:nth-child(n+5) { display: none; }
@media (min-width: 900px) {
  .vitrine__app { grid-template-columns: 220px 1fr; }
  .vitrine__menu {
    display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; background: var(--papel-2); border-right: 1px solid var(--linha);
    font-size: 16px; font-weight: 500;
  }
  .vitrine__menu span { padding: 9px 12px; border-radius: 10px; }
  .vitrine__menu span.is-ativo { background: var(--papel-3); font-weight: 700; }
  .vitrine__logo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px; margin-bottom: 10px; }
  .vitrine__conteudo { padding: 32px 36px 36px; }
  .vitrine__titulo { font-size: 34px; }
  .vitrine__lista { grid-template-columns: 1fr 1fr; }
  .vitrine__lista li:nth-child(n+5) { display: grid; }
}
.vitrine__pontos { display: grid; gap: 18px; margin-top: 32px; }
.vitrine__pontos b { display: block; font-size: 19px; color: var(--papel); }
.vitrine__pontos span { display: block; color: #cfc8bd; font-size: 16px; line-height: 1.5; margin-top: 2px; }
@media (min-width: 900px) { .vitrine__pontos { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

/* Captura antes do checkout */
.captura {
  border: 0; padding: 0; background: transparent; width: min(460px, calc(100% - 24px)); max-height: calc(100% - 24px);
  color: var(--tinta);
}
.captura::backdrop { background: rgba(28, 26, 23, .62); }
.captura__caixa { position: relative; background: var(--papel); border-radius: var(--raio-g); padding: 28px 22px 22px; box-shadow: var(--sombra-forte); }
@media (min-width: 600px) { .captura__caixa { padding: 34px 32px 26px; } }
.captura__fechar {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-2); cursor: pointer; display: grid; place-items: center;
}
.captura__fechar:hover { background: var(--papel-2); color: var(--tinta); }
.captura__fechar svg { width: 18px; }
.captura .sobretitulo { margin-bottom: 6px; }
.captura__texto { color: var(--tinta-2); font-size: 16px; margin: 6px 0 16px; }
.captura__campo { display: block; margin-bottom: 12px; }
.captura__campo span { display: block; font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.captura__campo input {
  width: 100%; font: inherit; font-size: 17px; padding: 12px 14px; border: 1.5px solid var(--linha-forte);
  border-radius: 12px; background: var(--branco); color: var(--tinta);
}
.captura__campo input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--papel-3); }
.captura__erro { color: var(--acao-hover); font-weight: 600; font-size: 15px; margin: 4px 0 10px; }
.captura .btn { margin-top: 6px; }
.captura .btn:disabled { opacity: .7; cursor: wait; }
.captura__aviso { font-size: 13px; color: var(--tinta-3); margin: 12px 0 0; line-height: 1.45; }