/* ==========================================================================
   SITE DO LAÇOS — folha única.
   Mobile primeiro. Três degraus, os da referência: 640 / 768 / 1024 (§1 do arquivo
   de decisões) — e 1200 só para a órbita, declarado em css/pecas.css.
   Cada bloco cita o mecanismo de docs/site-referencia-decisoes.md §7 que aplica.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WCAG 2.4.11: nada focado ou ancorado fica escondido sob o header sticky (65px) */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font-ui);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

::selection { background: rgba(243, 106, 33, 0.3); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- MECANISMO 6: glow como luz ambiente, não como sombra.
       Elipses de baixa opacidade com blur enorme, fixas atrás de tudo. --- */
.ambiente {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambiente span {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.ambiente .luz-1 {
  top: -18vh; left: 50%;
  width: min(800px, 150vw); height: min(500px, 60vh);
  transform: translateX(-50%);
  background: var(--acento-10);
  filter: blur(120px);
}
.ambiente .luz-2 {
  right: -20vw; bottom: -10vh;
  width: min(600px, 110vw); height: min(600px, 60vh);
  background: rgba(33, 97, 79, 0.22);
  filter: blur(100px);
}
.ambiente .luz-3 {
  left: -15vw; top: 45vh;
  width: min(420px, 90vw); height: min(420px, 45vh);
  background: rgba(243, 106, 33, 0.05);
  filter: blur(110px);
}

/* grade tênue — dá textura sem virar padrão visível */
.ambiente .grade {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image:
    linear-gradient(to right, rgba(228, 237, 229, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(228, 237, 229, 0.022) 1px, transparent 1px);
  background-size: 24px 24px;
  filter: none;
}

.pagina { position: relative; z-index: 1; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-mob);
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--gutter); }
}

/* ==========================================================================
   TIPOGRAFIA — MECANISMOS 1 e 2
   Razão de escala 6:1 e display gigante em peso leve.
   ========================================================================== */

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--track-display);
  line-height: var(--lh-h1);
  text-wrap: balance;
  color: var(--texto);
}
h1.display { font-size: var(--t-h1); }
h2.display { font-size: var(--t-h2); line-height: var(--lh-h2); }
h3.display { font-size: var(--t-h3); line-height: 1.2; font-weight: 400; }

/* Oswald é condensada: em corpos pequenos o peso 300 fecha demais.
   Do h3 para baixo o display sobe para 400. Medido em tools/contraste.mjs. */
.display--forte { font-weight: 400; }

.olho {
  margin: 0 0 var(--esp-4);
  font-size: var(--t-peq);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}

.display + .lead,
.display + .corpo,
.display + p { margin-top: var(--esp-4); }

.lead {
  margin: 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--texto-3);
}
@media (min-width: 768px) {
  .lead { font-size: var(--t-grande); line-height: 1.55; }
}

.corpo { margin: 0; color: var(--texto-3); }
/* Quatro .corpo seguidos viravam um bloco unico e ilegivel no posicionamento. */
.corpo + .corpo,
.lead + .corpo,
.corpo + .lead { margin-top: var(--esp-4); }
.corpo strong { color: var(--texto); font-weight: 600; }

.nota {
  margin: 0;
  font-size: var(--t-peq);
  line-height: 1.5;
  color: var(--texto-4);
}

.acento { color: var(--acento-claro); }

/* MECANISMO 1 na prática: o número gigante contra a UI miúda */
.numerao {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.2rem + 7vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--texto);
  white-space: nowrap;
}

/* ==========================================================================
   MECANISMO 4 — borda de 1px em gradiente, por mask-composite.
   É o detalhe que separa "div com borda" de "peça".
   ========================================================================== */
.borda-gradiente {
  position: relative;
  isolation: isolate;
}
.borda-gradiente::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(228, 237, 229, 0) 0%,
    rgba(228, 237, 229, 0.16) 42%,
    rgba(243, 106, 33, 0.22) 58%,
    rgba(228, 237, 229, 0) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   MECANISMO 3 — superfície por transparência, nunca por cor própria.
   ========================================================================== */
.cartao {
  position: relative;
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  padding: var(--esp-5);
  box-shadow: 0 0 0 1px var(--borda);   /* nível cartão: anel sólido (referência: border-white/10) */
}
@media (min-width: 1024px) {
  .cartao { padding: var(--esp-7); }
}

.caixa {
  border-radius: var(--raio-caixa);
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--borda);   /* era borda sutil + .borda-gradiente por cima: borda dupla */
  padding: var(--esp-4);
}

/* ==========================================================================
   MECANISMO 10 — a pílula dominante.
   ========================================================================== */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 6px 14px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--superficie);
  font-size: var(--t-peq);
  font-weight: 500;
  color: var(--texto-2);
  line-height: 1.4;
}
.pilula .ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acento);
  flex: none;
}

/* MECANISMO 5 — o acento é racionado. O botão primário é um por dobra. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--toque);
  padding: 12px 26px;
  border: 0;
  border-radius: var(--raio-pilula);
  font-family: var(--font-ui);
  font-size: var(--t-ui);
  font-weight: 500;   /* referência: font-medium; o tamanho faz o peso */
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-hover) var(--curva-entrada),
              box-shadow var(--dur-hover) ease,
              background-color var(--dur-hover) ease,
              color var(--dur-hover) ease;
}

.btn--primario {
  color: #1f0b02;
  background: linear-gradient(180deg, #ff9a5c 0%, var(--acento) 62%, #d9540f 100%);
  /* relevo: fio de luz no topo, como todo botão de gradiente da referência */
  box-shadow: inset 0 1px 0 rgba(252, 250, 247, 0.35), var(--glow-2);
}
.btn--primario:hover { transform: scale(1.03); box-shadow: inset 0 1px 0 rgba(252, 250, 247, 0.45), var(--glow-3); }

.btn--claro {
  color: var(--ink);
  background: var(--cream);
}
.btn--claro:hover { background: #ffffff; transform: scale(1.02); }

.btn--fantasma {
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.btn--fantasma:hover { background: var(--superficie-forte); border-color: var(--borda-forte); }

.btn[disabled] { opacity: 0.42; cursor: not-allowed; transform: none !important; box-shadow: none; }
.btn--largo { width: 100%; }

/* ==========================================================================
   NAV
   ========================================================================== */
.topo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 33, 30, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda-sutil);
}
.topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 62px;
  padding-block: 10px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--texto);
}
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca span {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}
.topo .btn { padding: 10px 18px; }

/* ==========================================================================
   SEÇÕES — MECANISMO 3 + 4: uma casca, vários conteúdos (§6 da referência)
   ========================================================================== */
.secao {
  margin-block: var(--secao);
  scroll-margin-top: 80px;
}
.secao--casca {
  border-radius: var(--raio-cartao);
  background: linear-gradient(160deg, rgba(228, 237, 229, 0.045), rgba(228, 237, 229, 0.012));
  padding: var(--esp-5) var(--esp-4);
}
@media (min-width: 1024px) {
  .secao--casca { padding: var(--esp-7); }
}
/* Casca que encolhe ate a largura do conteudo. Usada onde nao ha peca real
   para o outro lado — melhor um cartao estreito e cheio que um largo e vazio. */
.secao--casca--estreita { max-width: 760px; margin-inline: auto; }
#funil[data-estado="capa"] .secao--casca { max-width: 760px; margin-inline: auto; }
/* A etapa do e-mail e um formulario de 460px numa casca de 1.230: 63% do funil
   vazio, na tela que decide o lead (gate-funil-visitante, 07/09/2026). Mesma
   regra da capa: a casca encolhe ate o conteudo. */
#funil[data-etapa="3"] .secao--casca { max-width: 760px; margin-inline: auto; }

.secao__cabeca { max-width: 62ch; margin-bottom: var(--esp-6); }
.funil[data-fase="pronto"] .secao__cabeca,
.funil[data-fase="pronto"] .passos { display: none; }
@media (min-width: 1024px) {
  .secao__cabeca { margin-bottom: var(--esp-7); }
}

/* ==========================================================================
   HERO — MECANISMO 9: densidade de produto na primeira dobra.
   Não tem ilustração. Tem a conversa real rodando.
   ========================================================================== */
.hero { padding-block: var(--esp-5) var(--esp-6); }
.hero__grade { display: grid; gap: var(--esp-6); }
@media (min-width: 1024px) {
  .hero { padding-block: var(--esp-6) var(--esp-2); }
  .hero__grade {
    grid-template-columns: 7fr 5fr;   /* referência §1: split 7/5 */
    gap: var(--esp-6);
    /* start, nao center: com center a conversa (bem mais alta) empurrava o texto
       para baixo e o titulo caia abaixo da dobra em 1440, com o paragrafo cortado. */
    align-items: start;
  }
  /* A conversa do hero rola por dentro em vez de esticar a secao. A animacao
     mantem a bolha nova a vista (js/conversa.js). A conversa inteira, sem corte
     nenhum, continua na secao #prova. */
  .hero .conversa__fio,
  .diagnostico__lado .conversa__fio {
    max-height: 58vh;
    overflow-y: auto;
    scrollbar-width: thin;
    /* esmaece nas duas pontas: sem o topo, a bolha que ja rolou aparecia
       cortada na horizontal, como se estivesse quebrada. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, transparent 100%);
  }
  /* No diagnostico a conversa e a peca de apoio ao lado da conta: solta, ela
     tinha 2.077px contra 797 da coluna da esquerda — 62% de desnivel e mais de
     mil pixels de vazio do lado. Aqui o teto e menor que o do hero. */
  .diagnostico__lado .conversa__fio { max-height: 420px; }
}
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
@media (min-width: 1024px) { .hero__texto { gap: var(--esp-5); } }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.hero__selos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
/* no mobile os selos descem para depois da conversa: a prova sobe uma dobra */
@media (max-width: 1023px) {
  .hero__grade { display: flex; flex-direction: column; }
  .hero__texto { order: 1; }
  .hero__prova { order: 2; }   /* o wrapper, não a conversa: sem isso ele fica com
                                  order 0 e a prova sobe na frente do título */
  .hero__selos { order: 3; margin-top: calc(var(--esp-4) * -1); }
}

/* ==========================================================================
   RECORTE DE CONVERSA — maior peso visual da página (Fase 3).
   Forma copiada de ~/boomer/infra/criativos/recorte-conversa.css e
   reescrita para fluido/mobile. Cores idênticas às dos criativos.
   ========================================================================== */
.conversa {
  border-radius: var(--raio-cartao);
  background: var(--fundo-cartao);
  padding: var(--esp-4);
  box-shadow: 0 0 0 1px var(--borda), 0 18px 50px rgba(11, 33, 30, 0.4);   /* anel + a sombra dos criativos */
}
@media (min-width: 768px) { .conversa { padding: var(--esp-5); } }

.conversa__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding-bottom: var(--esp-3);
  margin-bottom: var(--esp-4);
  border-bottom: 1px solid var(--borda-sutil);
}
.conversa__etiqueta {
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-4);
}
.conversa__delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--acento-claro);
}

.conversa__fio { display: grid; gap: var(--esp-3); }

.balao {
  position: relative;
  width: fit-content;
  max-width: min(92%, 460px);
  padding: 12px 14px 10px;
  border-radius: var(--raio-controle);
}
.balao--cliente {
  justify-self: start;
  color: var(--ink);
  background: var(--cream);
  border-bottom-left-radius: 4px;
}
.balao--ia {
  justify-self: end;
  color: var(--cream);
  background: var(--green-2);
  border-bottom-right-radius: 4px;
}
.balao__autor {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  line-height: 1;
}
.balao--cliente .balao__autor { color: var(--forest); }
.balao--ia .balao__autor { color: var(--sage-soft); }
.balao__texto {
  margin: 8px 0 8px;
  font-size: var(--t-ui);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.balao__hora {
  display: block;
  text-align: right;
  font-size: var(--t-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.balao--cliente .balao__hora { color: var(--forest); }
.balao--ia .balao__hora { color: var(--sage-soft); }

.conversa__notas {
  display: grid;
  gap: 6px;
  margin: var(--esp-4) 0 0;
  padding: 0;
  list-style: none;
}
.conversa__notas li {
  position: relative;
  padding-left: 20px;
  font-size: var(--t-peq);
  font-weight: 500;
  color: var(--texto-3);
  line-height: 1.4;
}
.conversa__notas li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 12px; height: 1px;
  background: var(--sage);
}
.conversa__notas li::after {
  content: "";
  position: absolute;
  left: 12px; top: calc(0.52em - 2px);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sage);
}

.conversa__rodape {
  margin: var(--esp-4) 0 0;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda-sutil);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--texto-4);
}

/* ==========================================================================
   FUNIL — 3 interações. Estado no cliente.
   ========================================================================== */
.funil { scroll-margin-top: 76px; }

.passos {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  padding: 0;
  list-style: none;
}
.passos li {
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-4);
  transition: color var(--dur-hover) ease;
}
.passos li::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: var(--raio-pilula);
  background: var(--borda);
  transition: background-color 420ms var(--curva-entrada);
}
.passos li[data-estado="ativo"] { color: var(--texto); }
.passos li[data-estado="ativo"]::before { background: var(--acento); }
.passos li[data-estado="feito"] { color: var(--texto-3); }
.passos li[data-estado="feito"]::before { background: var(--green-2); }

.etapa { display: grid; gap: var(--esp-5); }
.etapa[hidden] { display: none; }

.escolhas {
  display: grid;
  gap: var(--esp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .escolhas { grid-template-columns: 1fr 1fr; }
}

.escolha {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 76px;
  padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--borda);
  border-radius: var(--raio-caixa);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              transform var(--dur-hover) var(--curva-entrada);
}
.escolha:hover {
  background: var(--superficie-forte);
  border-color: var(--borda-forte);
  transform: translateY(-2px);
}
/* aria-CHECKED, não aria-pressed: as opções viraram radiogroup e o seletor antigo
   deixou de casar com qualquer elemento — a escolha marcada ficou sem nenhum
   estado visual. O anel interno soma um segundo sinal além da cor, e por ser
   box-shadow não empurra o texto como uma borda mais grossa faria. */
.escolha[aria-checked="true"] {
  border-color: var(--borda-acento);
  background: var(--acento-10);
  box-shadow: inset 0 0 0 1px var(--borda-acento);
}
.escolha[aria-checked="true"] .escolha__rotulo::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: 0.12em;
}
.escolha__rotulo { font-size: var(--t-grande); font-weight: 500; line-height: 1.25; }
.escolha__detalhe { font-size: var(--t-peq); color: var(--texto-3); line-height: 1.45; }

.form-lista { display: grid; gap: var(--esp-4); max-width: 520px; }
.campo { display: grid; gap: 6px; }
.campo label {
  font-size: var(--t-peq);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}
.campo input {
  min-height: var(--toque);
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  background: rgba(11, 33, 30, 0.55);
  color: var(--texto);
  font-family: var(--font-ui);
  font-size: 1rem;   /* 16px: abaixo disso o iOS dá zoom no foco */
}
.campo input::placeholder { color: var(--texto-4); }
.campo input:focus { border-color: var(--borda-acento); }
.campo--isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-erro {
  margin: 0;
  font-size: var(--t-ui);
  font-weight: 600;
  color: #ffb08a;
}

/* --- diagnóstico --- */
.diagnostico { display: grid; gap: var(--esp-5); }
.diagnostico__marca {
  display: block;
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--acento-claro);
}
.diagnostico__grade { display: grid; gap: var(--esp-5); }
@media (min-width: 1024px) {
  .diagnostico__grade { grid-template-columns: 7fr 5fr; align-items: start; }
}
.diagnostico__numero { display: grid; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.diagnostico__natureza {
  display: inline-flex;
  width: fit-content;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}
.lista-muda { display: grid; gap: var(--esp-3); margin: var(--esp-5) 0 0; padding: 0; list-style: none; }
.lista-muda li {
  position: relative;
  padding-left: 22px;
  font-size: var(--t-ui);
  line-height: 1.5;
  color: var(--texto-2);
}
.lista-muda li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--acento);
}
.limite {
  margin: var(--esp-5) 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--acento);
  font-size: var(--t-grande);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto);
}

.whitelist-ok {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-5);
  border-radius: var(--raio-caixa);
  border: 1px solid var(--borda-acento);
  background: var(--acento-10);
}
.whitelist-ok__selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 12px;
  border-radius: var(--raio-pilula);
  background: var(--acento);
  box-shadow: inset 0 1px 0 rgba(252, 250, 247, 0.35);
  color: #1f0b02;
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
}

/* ==========================================================================
   CONTEÚDO
   ========================================================================== */
.prova-lista { display: grid; gap: var(--esp-5); }
@media (min-width: 1024px) {
  /* duas conversas desde 21/09/2026: com repeat(3) a terceira coluna ficava vazia */
  .prova-lista { grid-template-columns: repeat(2, 1fr); gap: var(--esp-4); align-items: start; }
}

.duas-colunas { display: grid; gap: var(--esp-5); }
@media (min-width: 1024px) {
  .duas-colunas { grid-template-columns: 1fr 1fr; gap: var(--esp-7); }
  /* a cabeca nao estica o cartao ate a altura dela */
  .duas-colunas--cabeca { align-items: start; }
}

.faz-nao-faz { display: grid; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.faz-nao-faz li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--esp-3);
  align-items: start;
  font-size: var(--t-ui);
  line-height: 1.5;
  color: var(--texto-2);
}
.faz-nao-faz .sinal {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.faz-nao-faz .sinal--sim { background: rgba(33, 97, 79, 0.55); color: var(--sage-soft); }
.faz-nao-faz .sinal--nao { background: var(--acento-20); color: var(--acento-claro); }

.numeros { display: grid; gap: var(--esp-5); }
@media (min-width: 768px) { .numeros { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .numeros { grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); } }
.numeros .caixa { display: grid; gap: var(--esp-2); align-content: start; }
.numeros .fonte {
  margin: 0;
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--texto-4);
}
.numeros .numerao { font-size: clamp(2rem, 1rem + 4.4vw, 3rem); }

.local { display: grid; gap: var(--esp-4); }
/* Os tres clientes ocupam a largura toda em blocos, em vez de virarem uma lista
   estreita numa coluna com o cartao esticado do lado. */
.locais {
  display: grid; gap: var(--esp-4);
  margin: var(--esp-6) 0 0; padding: 0; list-style: none;
}
@media (min-width: 768px) { .locais { grid-template-columns: repeat(3, 1fr); gap: var(--esp-5); } }
.locais__item {
  padding: var(--esp-4);
  border-radius: var(--raio-caixa);
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--borda);
}
.locais__nome { margin: 0; font-size: var(--t-ui); font-weight: 600; color: var(--texto-1); }
.locais__onde { margin: 4px 0 0; font-size: var(--t-peq); color: var(--acento-claro); }
.locais__nota { margin: 10px 0 0; font-size: var(--t-peq); line-height: 1.55; color: var(--texto-3); }

.rodape {
  margin-top: var(--secao);
  padding-block: var(--esp-6);
  border-top: 1px solid var(--borda-sutil);
}
.rodape .container {
  display: grid;
  gap: var(--esp-4);
}
@media (min-width: 768px) {
  .rodape .container { grid-template-columns: 1fr auto; align-items: center; }
}

/* Rodapé legal (21/09/2026): razão social, CNPJ, endereço e os três links, em todas as
   páginas. O texto sai de tools/legal.mjs. Ocupa a linha inteira nos dois rodapés. */
.rodape-legal {
  grid-column: 1 / -1;
  display: grid;
  /* era 2px: razão social e endereço ficavam colados (medida I do gate-visual, vão < 8px) */
  gap: var(--esp-2);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda-sutil);
  font-size: var(--t-peq);
  line-height: 1.6;
  color: var(--texto-3);
}
.rodape-legal p { margin: 0; overflow-wrap: anywhere; }
.rodape-legal__links { margin-top: var(--esp-2) !important; }
.rodape-legal a {
  display: inline-block;
  padding-block: 4px;
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rodape-legal a:hover { color: var(--acento-claro); }
.rodape-legal a:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 2px; border-radius: 4px; }

/* Movimento: ver css/movimento.css — as 10 animações do inventário da referência.
   Peças (painel, sparkline, tabela viva, órbita, conector): ver css/pecas.css.
   Conversa que se monta: ver css/conversa.css. */

.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   LINKS DE CONTEÚDO — a cor do sistema, nunca o azul do navegador
   Dois links tinham ficado em rgb(0,0,238) por não terem regra própria.
   Esta regra pega qualquer link de texto; o que é botão, marca ou nav fica fora.
   ========================================================================== */
a:not(.btn):not(.marca):not(.pula-para):not(.painel__nav a):not(.marca-mini) {
  color: var(--acento-claro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}
a:not(.btn):not(.marca):not(.pula-para):not(.painel__nav a):hover { color: var(--cream); }
.painel__nav a, .marca, .marca-mini, .btn, .pula-para { text-decoration: none; }

/* ==========================================================================
   ACESSO — pular para o conteúdo, e foco visível em tudo que recebe foco
   ========================================================================== */
.pula-para {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--raio-controle);
  background: var(--acento);
  color: #1f0b02;
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms ease;
}
.pula-para:focus { top: 8px; }

/* um anel de foco que aparece em QUALQUER fundo desta página */
a:focus-visible, button:focus-visible, input:focus-visible,
[role="radio"]:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--acento-claro);
  outline-offset: 3px;
  border-radius: var(--raio-controle);
}
.escolha:focus-visible { outline-offset: 2px; }
#diagnostico:focus { outline: none; }
#diagnostico:focus-visible { outline: 3px solid var(--acento-claro); outline-offset: 8px; }

/* ==========================================================================
   FUNIL — capa, retomada, ações do diagnóstico
   ========================================================================== */
.funil__capa { display: grid; gap: var(--esp-4); justify-items: start; max-width: 62ch; }
.funil__capa .btn { margin-top: var(--esp-3); }
.funil__promessa { display: grid; gap: 10px; margin: var(--esp-2) 0 0; padding: 0; list-style: none; }
.funil__promessa li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-ui); color: var(--texto-2);
}
.funil__promessa svg { width: 16px; height: 16px; color: var(--acento); flex: none; }

.funil__retomada {
  margin: 0 0 var(--esp-4);
  padding: 10px 14px;
  border-radius: var(--raio-controle);
  border: 1px solid var(--borda-acento);
  background: var(--acento-10);
  font-size: var(--t-peq);
  color: var(--texto-2);
}

.diagnostico__acoes {
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--borda-sutil);
}

.campo__opcional { text-transform: none; font-weight: 400; color: var(--texto-4); }
.nota--pe-secao { margin-top: var(--esp-5); max-width: 62ch; opacity: .72; }
.privacidade-resumo > .corpo { max-width: 68ch; margin-bottom: var(--esp-2); }
.privacidade-detalhe { margin-top: var(--esp-4); border-top: 1px solid var(--borda); padding-top: var(--esp-3); }
.privacidade-detalhe > summary {
  cursor: pointer; display: inline-block; padding: 6px 2px;
  font-size: var(--t-peq); color: var(--texto-3); list-style: none;
}
.privacidade-detalhe > summary::-webkit-details-marker { display: none; }
.privacidade-detalhe > summary::before { content: "+ "; }
.privacidade-detalhe[open] > summary::before { content: "− "; }
.privacidade-detalhe > summary:hover { color: var(--texto); }
.privacidade-detalhe > summary:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; border-radius: 4px; }
.privacidade-detalhe .privacidade { margin-top: var(--esp-4); }

.nota--privacidade { position: relative; display: block; padding-left: 21px; max-width: 58ch; }
/* era flex: o texto solto e o <a> viravam itens separados e o link "Como tratamos
   seus dados" quebrava numa coluna de uma palavra por linha ao lado do texto */
.nota--privacidade svg { position: absolute; left: 0; top: 3px; width: 13px; height: 13px; color: var(--sage); }
.nota--privacidade a { color: var(--acento-claro); }

/* ==========================================================================
   J — a seção que sangra. Sem casca, largura toda, fundo próprio.
   Não usa 100vw: a faixa já é filha de um bloco de largura total, então
   width:100% não conta a barra de rolagem e não cria rolagem horizontal.
   ========================================================================== */
.secao--sangra { margin-block: calc(var(--secao) * 1.15); }
.sangra__faixa {
  width: 100%;
  margin-block: var(--esp-6);
  padding-block: var(--esp-7);
  padding-inline: 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(243, 106, 33, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(16, 43, 38, 0.85), rgba(11, 33, 30, 0.4));
  border-block: 1px solid var(--borda-sutil);
}
@media (max-width: 767px) {
  .sangra__faixa > .container { padding-inline: var(--esp-3); }
}
.prova__rodape { display: grid; gap: var(--esp-5); margin-top: var(--esp-5); }
@media (min-width: 768px) { .prova__rodape { grid-template-columns: 1fr 1fr; gap: var(--esp-7); } }
.prova__rodape p { margin: 0; font-size: var(--t-peq); line-height: 1.6; color: var(--texto-3); max-width: 52ch; }
.prova__rodape-titulo {
  margin: 0 0 8px;
  font-size: var(--t-micro);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--texto-4);
}

/* ==========================================================================
   PRIVACIDADE
   ========================================================================== */
.secao--miuda { margin-block: var(--secao) var(--esp-6); }
.display--pequeno { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.privacidade { display: grid; gap: var(--esp-5); align-items: start; }
@media (min-width: 768px) { .privacidade { grid-template-columns: 1fr 1fr; gap: var(--esp-5) var(--esp-7); } }
@media (min-width: 1024px) { .privacidade { grid-template-columns: repeat(3, 1fr); } }
.privacidade h3 {
  margin: 0 0 6px;
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--texto);
}
.privacidade p { margin: 0; font-size: var(--t-peq); line-height: 1.6; color: var(--texto-3); }
.privacidade a { color: var(--acento-claro); }