/* ===== estilo/base.css ===== */
/* ============================================================
   BASE · Projeto Boston 2028 (09/11/2026), herdada do BORA Kids

   A lei visual é o CONTRATO.md do design system (Pulso Neon, rev.
   22/07). Aqui só entram tokens do índice fechado; o que é livre é
   layout, tratamento e assinatura.

   CHÃO ÚNICO, BRANCO, do topo ao rodapé (simplificação pedida por
   ele em 09/09/2026). A página não tem virada de contexto: tem
   título, pergunta e resposta. O neon aparece só onde ele trabalha,
   que é o filete de assinatura, a régua de etapas, a escolha marcada
   e o botão.
   ============================================================ */

@font-face{font-family:'Altone';font-weight:400;font-style:normal;font-display:swap;
  src:url("fontes/Altone-Regular.woff2") format("woff2")}
@font-face{font-family:'Altone';font-weight:500;font-style:normal;font-display:swap;
  src:url("fontes/Altone-Medium.woff2") format("woff2")}
@font-face{font-family:'Altone';font-weight:700;font-style:normal;font-display:swap;
  src:url("fontes/Altone-Bold.woff2") format("woff2")}
@font-face{font-family:'Altone';font-weight:800;font-style:normal;font-display:swap;
  src:url("fontes/Altone-ExtraBold.woff2") format("woff2")}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;
  background:var(--cor-fundo);
  color:var(--cor-texto);
  font-family:var(--fonte-texto);
  font-size:var(--txt-base);
  line-height:var(--lh-texto);
  -webkit-font-smoothing:antialiased}

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

/* o palco: a mesma calha da casa em todas as seções.

   MEDIDO em 09/09, 1440: com a calha padrão (1200px) e uma coluna só,
   sobravam mil pixels de branco à direita e a página lia como
   inacabada. Esta página é um documento de uma coluna, então a calha
   dela é estreita e centrada. É a única variação local, e ela vale
   para todas as seções ao mesmo tempo. */
.palco{max-width:var(--cont-padrao);margin-inline:auto;
  padding-inline:var(--margem-palco)}
.rodape .palco{max-width:42rem}

/* ============ o rótulo da casa (eyebrow) ============
   caixa alta, tracking de kicker, com o traço neon antes.
   No branco o texto do rótulo é PRETO (contrato, rev. 22/07:
   eyebrow no branco nunca é verde); o neon fica só no traço,
   que é decorativo e não carrega informação sozinho. */
.rotulo{display:inline-flex;align-items:center;gap:var(--esp-2xs);
  margin:0;font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--cor-texto)}
.rotulo::before{content:"";width:var(--traco-larg);height:var(--traco-alt);
  background:var(--cor-grafico);border-radius:var(--raio-xs);flex:none}

/* ============ o botão da casa ============
   pílula neon com rótulo preto, extrabold, caixa alta. É o mesmo
   componente das 7 CTAs da página de vendas: raio, peso, corpo,
   tracking, caixa e recuo idênticos. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--botao-alt-min);
  padding:var(--botao-pad-y) var(--botao-pad-x);
  border-radius:var(--botao-raio);
  background:var(--botao-primario-bg);color:var(--botao-primario-fg);
  font-family:var(--fonte-texto);font-weight:var(--botao-peso);
  font-size:var(--txt-sm);letter-spacing:var(--ls-caps);
  text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
  transition:background var(--dur-padrao) var(--ease-enfase),
             transform var(--dur-padrao) var(--ease-enfase)}
.btn:hover{background:var(--botao-primario-bg-hover);transform:translateY(-2px)}
.btn:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}

/* a linha miúda embaixo do botão (rev. 19/08, pedido dele: "embaixo
   de todos os botões, uma escrita bem pequenininha, tipo gratuito").
   Ela herda a tinta sutil do contexto, então funciona no branco, no
   escuro e dentro do neon sem regra nova. */
.micro-cta{margin:var(--esp-2xs) 0 0;font-size:var(--txt-sm);
  color:var(--cor-texto-sutil)}

/* o par fantasma + sólida: a manchete da casa. A linha de contexto
   entra em peso regular e tinta rebaixada, a de ênfase em bold e
   tinta cheia. Mesma régua do hero e do fecho da página de vendas. */
.manchete{margin:0;line-height:var(--display-lh);
  letter-spacing:var(--display-ls);font-weight:var(--titulo-peso-forte);
  color:var(--cor-texto);text-wrap:balance}
.manchete .linha{display:block}
.manchete .fantasma{font-weight:var(--titulo-peso-suave);
  color:var(--cor-texto-sutil)}

/* piso permanente: quem navega por teclado enxerga onde está, e
   quem pediu menos movimento recebe a página parada e inteira */
:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}


/* ===== estilo/s1-abertura.css ===== */
/* ============================================================
   S1 · ABERTURA · contexto verde

   Quatro coisas na dobra, além da marca: rótulo, manchete em mix de
   pesos (400 -> 700, sentence case, aprovado em 22/07), uma linha de
   apoio e o botão. A assinatura é o "2028" monumental, tonal, cortado
   pela base e pela direita: o tipo maior que o quadro (lei de 06/08:
   em dobra protagonista, alguma coisa sangra pela borda).

   O tonal mora na OPACIDADE do preto sobre o neon, não numa cor nova:
   é o mesmo jeito que o raio do Kids ficou "destaque sem ser o foco".
   ============================================================ */

.abertura{position:relative;overflow:clip;
  display:flex;flex-direction:column;
  min-height:100svh;
  padding-block:clamp(1.1rem,3vh,1.8rem) clamp(6rem,16vh,10rem);
  background:var(--cor-fundo);color:var(--cor-texto)}
.abertura[hidden]{display:none}

.abertura__topo{position:relative;z-index:2;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-sm)}
.abertura__marca{margin:0}
.abertura__marca img{height:clamp(1.35rem,1.9vw,1.75rem);width:auto}

/* o selo da casa (o mesmo "Leva 2 minutos" do Kids). No verde ele
   inverte sozinho pelo contexto: fundo preto, letra neon. */
.selo{display:inline-flex;align-items:center;margin:0;
  padding:.42rem var(--esp-sm);border-radius:var(--raio-pill);
  background:var(--cor-destaque);color:var(--cor-sobre-destaque);
  font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;white-space:nowrap}

.abertura__grade{position:relative;z-index:1;width:100%;
  margin-block:auto;padding-top:clamp(2.5rem,8vh,5rem)}

.abertura__rotulo{margin-bottom:clamp(1rem,2.6vh,1.6rem)}

/* a régua de display: entrelinha fechada por referência dele (loja do
   Lando, 09/08: "as linhas estão muito distantes"). O tamanho foi
   medido para "até a largada em Boston." fechar numa linha só a
   partir de 1280. */
.abertura__titulo{font-size:clamp(2.6rem,0.9rem + 5.2vw,5.4rem);
  line-height:.98;letter-spacing:var(--display-ls)}
.abertura__titulo .linha{display:block}

.abertura__sub{margin:clamp(1.1rem,2.8vh,1.6rem) 0 0;max-width:34rem;
  font-size:var(--txt-md);line-height:var(--lh-media);
  color:var(--cor-texto);text-wrap:pretty}

.abertura__acao{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--esp-2xs) var(--esp-md);margin:clamp(1.6rem,4vh,2.4rem) 0 0}
.abertura__acao .micro-cta{margin:0;font-size:var(--txt-sm);color:var(--cor-texto-sutil)}

/* ============ a assinatura: 2028 ============
   Ancorado na quina de baixo à direita e empurrado pra fora por
   posição negativa; o overflow:clip da seção faz o resto. Medido para
   não passar por baixo do texto em nenhuma largura (ver responsivo). */
.abertura__ano{position:absolute;z-index:0;right:-.05em;bottom:-.24em;
  font-size:clamp(9rem,27vw,27rem);font-weight:var(--peso-extrabold);
  line-height:1;letter-spacing:-.065em;font-variant-numeric:tabular-nums;
  color:var(--cor-texto);opacity:.08;
  pointer-events:none;user-select:none;white-space:nowrap}


/* ===== estilo/s2-como-funciona.css ===== */
/* ============================================================
   S2 · COMO FUNCIONA · contexto branco

   O idioma da S4 travada da página de vendas (11/08): selo numerado
   neon, filete entre os passos e o "quando" na direita como
   contrapeso. Seção de leitura: a moeda aqui é ORDEM (margem única,
   medida única, espaçamento constante), não gesto (lição de 02/08).
   ============================================================ */

.como{padding-block:var(--esp-secao)}
.como[hidden]{display:none}

.como__cabeca{max-width:46rem}
.como__titulo{margin-top:var(--esp-sm);font-size:var(--txt-2xl)}
.como__intro{margin:var(--esp-md) 0 0;max-width:32rem;
  font-size:var(--txt-md);line-height:var(--lh-media);
  color:var(--cor-texto-sutil);text-wrap:pretty}

/* ============ os passos ============ */
.passos-lista{list-style:none;margin:clamp(2.6rem,7vh,4.5rem) 0 0;padding:0;
  border-bottom:1px solid var(--cor-borda)}

.passo{display:grid;
  grid-template-columns:3.25rem minmax(0,1fr) minmax(9rem,auto);
  gap:var(--esp-md);align-items:start;
  padding-block:clamp(1.4rem,3.4vh,2.1rem);
  border-top:1px solid var(--cor-borda)}

.passo__num{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:var(--raio-pill);
  background:var(--cor-destaque);color:var(--cor-sobre-destaque);
  font-size:var(--txt-sm);font-weight:var(--peso-extrabold);
  font-variant-numeric:tabular-nums}

.passo__titulo{margin:.35rem 0 0;font-size:var(--txt-lg);
  font-weight:var(--peso-bold);line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo)}
.passo__texto{margin:var(--esp-2xs) 0 0;max-width:34rem;
  line-height:var(--lh-media);color:var(--cor-texto-sutil);text-wrap:pretty}

/* o contrapeso: o tempo, na direita, em peso leve. Só o destino
   ganha o peso cheio, porque é a única data que importa no fim. */
.passo__quando{margin:.35rem 0 0;text-align:right;white-space:nowrap;
  font-size:var(--txt-lg);font-weight:var(--peso-regular);
  line-height:var(--lh-titulo);letter-spacing:var(--ls-titulo);
  color:var(--cor-texto-sutil)}

.passo--destino .passo__num{background:var(--cor-texto);color:var(--cor-destaque)}
.passo--destino .passo__quando{font-weight:var(--peso-extrabold);color:var(--cor-texto)}

/* os cinco testes: pílula por mês, e o último em neon porque é o que
   fecha o bloco antes da maratona */
.testes{list-style:none;display:flex;flex-wrap:wrap;gap:var(--esp-2xs);
  margin:var(--esp-sm) 0 0;padding:0}
.teste{display:inline-flex;align-items:baseline;gap:.4em;
  padding:.45rem .95rem;border-radius:var(--raio-pill);
  background:var(--cor-superficie-sutil);
  font-size:var(--txt-sm);color:var(--cor-texto-sutil)}
.teste strong{font-weight:var(--peso-bold);color:var(--cor-texto)}
.teste--fim{background:var(--cor-destaque);color:var(--cor-sobre-destaque)}
.teste--fim strong{color:var(--cor-sobre-destaque)}

/* ============ como você é medido ============
   Sem caixa: filete em cima e duas colunas, a mesma ordem da lista.
   A régua de três níveis é o único desenho da seção, e ela é
   informação (do mais claro ao mais escuro = do "quase" ao "folga"). */
.niveis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:end;
  margin-top:clamp(3rem,8vh,5rem)}
.niveis__titulo{margin:0;font-size:var(--txt-xl);font-weight:var(--peso-bold);
  line-height:var(--lh-titulo);letter-spacing:var(--ls-titulo);text-wrap:balance}
.niveis__texto{margin:var(--esp-xs) 0 0;max-width:30rem;
  line-height:var(--lh-media);color:var(--cor-texto-sutil);text-wrap:pretty}

.regua{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-2xs)}
.regua__nivel{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.regua__barra{display:block;height:.7rem;border-radius:var(--raio-pill);
  margin-bottom:var(--esp-xs);background:var(--cor-destaque)}
.regua__nivel--rota .regua__barra{opacity:.4}
.regua__nivel--seguro .regua__barra{background:var(--cor-texto)}
.regua__nome{font-size:var(--txt-base);font-weight:var(--peso-bold);
  line-height:var(--lh-titulo)}
.regua__def{font-size:var(--txt-sm);line-height:var(--lh-media);
  color:var(--cor-texto-sutil)}

/* a prova, com o traço neon da casa na frente */
.como__prova{display:flex;align-items:center;gap:var(--esp-xs);
  margin:clamp(3rem,8vh,5rem) 0 0;
  font-size:var(--txt-md);font-weight:var(--peso-bold);line-height:var(--lh-media)}
.como__prova::before{content:"";flex:none;width:var(--traco-larg);height:var(--traco-alt);
  background:var(--cor-grafico);border-radius:var(--raio-xs)}

/* pendência no FONTE (a vitrine tira a linha inteira) */
.pendencia{margin:var(--esp-sm) 0 0;font-size:var(--txt-xs);line-height:var(--lh-media);
  color:var(--cor-texto);background:var(--sys-aviso-fundo);
  border-left:var(--traco-alt) solid var(--sys-aviso);
  padding:var(--esp-2xs) var(--esp-xs);border-radius:var(--raio-xs);max-width:40rem}


/* ===== estilo/s3-peneira.css ===== */
/* ============================================================
   A PESQUISA · cards, alinhada à esquerda

   Diagramação da segunda referência dele (09/09): cada pergunta no
   seu card, rótulo em cima, opções em pílulas dentro, contador de
   passo no alto e botão largo no fim.

   Nada aqui é centrado. Ele foi explícito: "as perguntas do
   formulário não têm que ser centralizado, a única coisa que vai ser
   centralizada é a primeira parte".

   E o corpo do texto das opções desceu um degrau ("achei que tem
   algumas escritas muito grandes na hora das respostas ali pra
   selecionar"): pílula em --txt-sm, rótulo de pergunta em --txt-base.

   Campo em caixa continua vetado (veredito de 03/08): o idioma é
   linha, com rótulo em cima e filete atravessando. O card é o que
   agrupa; a caixa não desce para dentro do campo.
   ============================================================ */

.peneira{padding-block:var(--esp-secao)}
.peneira[hidden]{display:none}

/* a coluna de trabalho: estreita o bastante para a linha de leitura
   e larga o bastante para sete dias caberem em duas fileiras */
.miolo{max-width:38rem}

/* ============ a barra de passo ============ */
.barra{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--esp-sm);margin-bottom:var(--esp-2xs)}
.barra__rotulo{margin:0;font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--cor-texto-sutil)}
.barra__conta{margin:0;font-size:var(--txt-sm);font-weight:var(--peso-bold);
  font-variant-numeric:tabular-nums;color:var(--cor-texto)}

/* O ESPAÇO DEPOIS DA RÉGUA MORA AQUI, e teve que morar aqui.
   MEDIDO em 09/09, duas vezes: com `margin-top` no próprio título a
   folga real era ZERO (margem em <legend> não empurra, quem o
   posiciona é o fieldset), e com `padding-top` no fieldset também,
   porque o legend é desenhado no topo da caixa, acima do padding. Quem
   abre o respiro é o elemento de cima. Era a margem que ele marcou em
   vermelho no print. */
.passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--esp-3xs);margin-bottom:clamp(1.8rem,5vh,2.6rem)}
.passos__marca{height:var(--traco-alt);border-radius:var(--raio-xs);
  background:var(--cor-borda);
  transition:background var(--dur-padrao) var(--ease-enfase)}
/* a etapa vencida vem rebaixada e a ATUAL é a que grita: onde a
   pessoa está é o que precisa aparecer */
.passos__marca[data-feito]{background:var(--cor-marca-texto)}
.passos__marca[data-agora]{background:var(--cor-destaque)}

/* ============ a etapa ============ */
.etapa{border:0;margin:0;padding:0;min-inline-size:0}
.etapa[hidden]{display:none}

/* a margem que ele pediu em 09/09: a régua de etapas estava encostada
   no título, e o bloco lia como uma coisa só. O respiro separa o
   indicador de progresso (que é interface) do título (que é conteúdo). */
.etapa__titulo{padding:0;margin:0;
  font-size:var(--txt-xl);line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo);font-weight:var(--peso-bold);
  color:var(--cor-texto);text-wrap:balance}
.etapa__sub{margin:var(--esp-3xs) 0 0;font-size:var(--txt-sm);
  line-height:var(--lh-media);color:var(--cor-texto-sutil)}

/* ============ o card ============
   O que dá a leitura de "bem diagramado" da referência é o card
   separando cada pergunta. Aqui ele é branco com filete, e não
   branco sobre cinza: o chão da página é branco por decisão dele em
   09/09, e o filete separa sem inventar um segundo tom. */
.cartao{margin-top:var(--esp-md);
  background:var(--cor-superficie);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio-lg);
  padding:clamp(1rem,3.4vw,1.4rem)}
.cartao__rotulo{margin:0 0 var(--esp-2xs);font-size:var(--txt-base);
  font-weight:var(--peso-bold);color:var(--cor-texto);
  line-height:var(--lh-titulo)}
/* segunda pergunta dentro do mesmo card (a idade depois do número de
   crianças): filete de separação, e não card novo, porque as duas são
   a mesma pergunta em dois tempos */
.cartao__parte{margin-top:var(--esp-sm);padding-top:var(--esp-sm);
  border-top:1px solid var(--cor-borda)}
.cartao__parte[hidden]{display:none}

/* ============ as pílulas ============ */
.pastilhas{display:flex;flex-wrap:wrap;gap:var(--esp-2xs)}
/* as faixas de preço em duas colunas: seis pílulas de larguras
   diferentes numa fileira só viravam uma escada irregular */
.pastilhas--grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

.past{position:relative;display:inline-flex;align-items:center;
  min-height:44px;padding:0;cursor:pointer}
.past input{position:absolute;opacity:0;width:0;height:0}
.past__corpo{display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:44px;text-align:center;
  padding:0 var(--esp-xs);border-radius:var(--raio-pill);
  background:var(--cor-superficie-sutil);
  border:1.5px solid transparent;
  font-weight:var(--peso-bold);font-size:var(--txt-sm);
  line-height:var(--lh-apertada);
  transition:border-color var(--dur-rapida) var(--ease-padrao),
             background var(--dur-rapida) var(--ease-padrao)}
.past:hover .past__corpo{border-color:var(--cor-borda-forte)}
.past input:focus-visible + .past__corpo{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}
.past input:checked + .past__corpo{background:var(--cor-marca);
  border-color:var(--cor-marca);color:var(--cor-sobre-destaque)}

/* ============ as idades, uma por filho ============
   GRADE, e não flex: em flex cada coluna ganhava a largura do próprio
   conteúdo, o rótulo mais longo quebrava em duas linhas e o seletor
   daquela coluna descia sozinho — os três ficavam em degrau (marcado
   por ele em 09/09). Com colunas de fração igual e os rótulos curtos,
   os três nascem na mesma linha de base. */
.idades{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));
  gap:var(--esp-sm) var(--esp-md);align-items:start}
.idade{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.idade__rotulo{font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;
  color:var(--cor-texto-sutil)}
.idade__campo{border:0;border-bottom:1px solid var(--cor-borda-forte);
  background:transparent;color:var(--cor-texto);
  font-family:var(--fonte-texto);font-size:var(--txt-sm);
  font-weight:var(--peso-bold);width:100%;
  min-height:var(--botao-alt-min);padding:0;border-radius:0}
.idade__campo:focus{outline:0;border-bottom-width:var(--traco-alt);
  border-bottom-color:var(--cor-marca-texto)}
.idade__campo:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}

/* ============ os campos ============ */
.campo{display:flex;flex-direction:column;gap:.15rem;margin:0}
/* MEDIDO em 09/09: com um filete separador aqui, cada campo ficava com
   DUAS linhas embaixo (a do próprio input e a do separador), a poucos
   pixels uma da outra. O filete do campo já separa; aqui só respiro. */
.campo + .campo{margin-top:var(--esp-md)}
.campo__rotulo{font-size:var(--txt-sm);font-weight:var(--peso-bold);
  color:var(--cor-texto)}
.campo__entrada{border:0;border-bottom:1px solid var(--cor-borda-forte);
  background:transparent;color:var(--cor-texto);
  font-family:var(--fonte-texto);font-size:var(--txt-base);
  min-height:var(--botao-alt-min);width:100%;
  padding:0;border-radius:0}
.campo__entrada::placeholder{color:var(--cor-texto-sutil)}
.campo__entrada:focus{outline:0;border-bottom-width:var(--traco-alt);
  border-bottom-color:var(--cor-marca-texto)}
.campo__entrada:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset)}
.campo__area{resize:vertical;line-height:var(--lh-media);
  min-height:3.2rem;padding-top:var(--esp-2xs)}
/* MEDIDO em 09/09: com --cor-texto-fraco esta linha dava 2,81:1 sobre o
   branco, abaixo do piso de 4,5 para texto pequeno. A tinta sutil dá
   7,34:1 e continua sendo claramente secundária. */
.campo__nota{font-size:var(--txt-xs);color:var(--cor-texto-sutil);
  margin-top:var(--esp-3xs)}

/* campo que ficou faltando: o filete acusa e o texto do erro diz o
   que fazer. Vermelho sozinho não informa quem não enxerga cor. */
.campo__entrada[data-falta],
.idade__campo[data-falta]{border-bottom-color:var(--cor-erro);
  border-bottom-width:var(--traco-alt)}
.past[data-falta] .past__corpo{border-color:var(--cor-erro)}

.form__erro{margin:var(--esp-md) 0 0;font-size:var(--txt-sm);
  color:var(--cor-erro);font-weight:var(--peso-bold)}
.form__erro[hidden]{display:none}

/* ============ a ação ============
   Botão largo, como nas duas referências. O Voltar é texto, embaixo:
   ele existe, e não pode parecer uma escolha equivalente ao avanço. */
.form__acao{display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--esp-2xs);margin:var(--esp-lg) 0 0}
.form__acao .btn--largo{width:100%}

.voltar{background:none;border:0;cursor:pointer;padding:.4rem 0;
  min-height:var(--botao-alt-min);
  font-family:var(--fonte-texto);font-size:var(--txt-sm);
  font-weight:var(--peso-bold);color:var(--cor-texto-sutil);
  text-decoration:underline;text-underline-offset:.24em;
  text-decoration-color:var(--cor-borda)}
.voltar:hover{color:var(--cor-texto)}
.voltar[hidden]{display:none}
.voltar:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset);border-radius:var(--raio-xs)}

.form__micro{margin:var(--esp-2xs) 0 0;font-size:var(--txt-xs);
  color:var(--cor-texto-sutil)}

/* enquanto o envio está no ar: o botão fica claramente ocupado, em
   vez de parecer que o clique não pegou (achado de 20/08). */
.btn[data-enviando]{opacity:.72;cursor:progress}
.form[data-enviando] .past,
.form[data-enviando] .campo__entrada{opacity:.6;pointer-events:none}

/* a armadilha de robô sai da tela sem sair do formulário */
.form__isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   O QUE A PENEIRA TEM A MAIS QUE O KIDS (09/11/2026)
   ============================================================ */

/* o chão da seção desce um tom: separa a lista (que é para ler) do
   formulário (que é para operar), e os cards brancos ganham
   contorno sem precisar de sombra */
.peneira{background:var(--cor-superficie-sutil)}

.peneira__cabeca{margin-bottom:clamp(2rem,5vh,3rem)}
.peneira__titulo{margin:var(--esp-sm) 0 0;font-size:var(--txt-2xl);
  font-weight:var(--peso-bold);line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo);text-wrap:balance}
.peneira__sub{margin:var(--esp-xs) 0 0;max-width:30rem;
  font-size:var(--txt-md);line-height:var(--lh-media);
  color:var(--cor-texto-sutil);text-wrap:pretty}

/* tempo e prova lado a lado: o tempo é curto, a prova é texto */
.marca{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);
  gap:var(--esp-md)}
.marca .campo + .campo{margin-top:0}
.past--solo{display:flex;margin-top:var(--esp-sm)}
.past--solo .past__corpo{width:auto}

/* "ainda não corri": os campos de cima apagam junto, para a pessoa
   ver que a marca saiu da conta */
.cartao[data-sem-marca] .marca{opacity:.35;pointer-events:none}

/* ============ no computador, duas colunas no MESMO eixo da S2 ============
   Medido em 1440 na primeira montagem: a lista de cima alinhava em
   x=192 e a coluna do formulário centrada começava em x=465. Dois eixos
   na mesma página. Aqui o cabeçalho volta para a margem da casa, fica
   preso enquanto a pessoa preenche, e o formulário mora na direita. */
@media (min-width:1024px){
  .peneira .palco.miolo{max-width:var(--cont-padrao);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36rem);
    column-gap:clamp(3rem,7vw,7rem);align-items:start}
  .peneira__cabeca{grid-column:1;grid-row:1 / span 3;
    position:sticky;top:clamp(2rem,10vh,5rem);margin-bottom:0}
  .peneira .barra,.peneira .passos,.peneira .form{grid-column:2}
}

/* ============================================================
   O CAMINHO DO LEAD (11/11/2026)
   ============================================================ */

/* o aceite (LGPD): frase inteira não cabe em pílula. A caixa aparece
   de verdade, à esquerda, e o texto corre normal ao lado, com o link
   da política sublinhado. */
.aceite{display:flex;align-items:flex-start;gap:var(--esp-xs);
  margin-top:var(--esp-md);cursor:pointer;min-height:0}
.aceite input{position:static;opacity:1;width:1.25rem;height:1.25rem;
  flex:none;margin:.12rem 0 0;accent-color:var(--cor-marca-texto);cursor:pointer}
.aceite .past__corpo,
.aceite:hover .past__corpo,
.aceite input:checked + .past__corpo{display:block;width:auto;min-height:0;
  padding:0;background:none;border:0;border-radius:0;text-align:left;
  font-weight:var(--peso-regular);font-size:var(--txt-sm);
  line-height:var(--lh-media);color:var(--cor-texto)}
.aceite a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.aceite[data-falta] input{outline:2px solid var(--cor-erro);outline-offset:2px}
.aceite[data-falta] .past__corpo{color:var(--cor-erro)}

/* a cidade que o CEP achou: confirma sem pedir nada */
.campo__nota[data-ok]{color:var(--cor-texto);font-weight:var(--peso-bold)}
.campo__nota[data-aviso]{color:var(--cor-erro);font-weight:var(--peso-bold)}

/* quem marcou "não treino em ponto de apoio" apaga o campo de cima */
.cartao__parte[data-sem-ponto] .campo:has(#c-ponto){opacity:.35;pointer-events:none}

/* a nota solta embaixo da marca (não mora dentro de um .campo): sem o
   bloco ela herdava a entrelinha do cartão e quebrava frouxa (medido em
   390 na montagem de 11/11) */
.cartao__parte > .campo__nota{display:block;line-height:1.45}


/* ===== estilo/obrigado.css ===== */
/* ============================================================
   OBRIGADO · contexto verde, o mesmo chão da abertura, com o 2028
   tonal fechando a página como abriu.
   ============================================================ */
.obrigado{position:relative;overflow:clip;min-height:100svh;
  display:flex;align-items:center;
  padding-block:clamp(3rem,9vh,5rem) clamp(6rem,16vh,10rem);
  background:var(--cor-fundo);color:var(--cor-texto)}
.obrigado[hidden]{display:none}
.obrigado__grade{position:relative;z-index:1;width:100%;
  display:flex;flex-direction:column;align-items:flex-start}
.obrigado__marca{margin:0 0 clamp(1.6rem,5vh,2.6rem)}
.obrigado__marca img{height:clamp(1.35rem,1.9vw,1.75rem);width:auto}
.obrigado__titulo{margin:var(--esp-md) 0 0;
  font-size:clamp(2.4rem,1.2rem + 4vw,4.4rem);font-weight:var(--peso-bold);
  line-height:.98;letter-spacing:var(--display-ls);text-wrap:balance}
.obrigado__sub{margin:var(--esp-sm) 0 0;max-width:30rem;
  font-size:var(--txt-md);line-height:var(--lh-media);text-wrap:pretty}
.obrigado__acao{margin:var(--esp-lg) 0 0;width:100%;max-width:24rem}
.obrigado__micro{margin:var(--esp-2xs) 0 0;font-size:var(--txt-sm);
  color:var(--cor-texto-sutil)}
.obrigado__pendencia{margin:var(--esp-md) 0 0;font-size:var(--txt-xs);
  background:var(--sys-aviso-fundo);border-left:var(--traco-alt) solid var(--sys-aviso);
  padding:var(--esp-2xs) var(--esp-xs);border-radius:var(--raio-xs);color:var(--cor-texto)}
.obrigado__ano{position:absolute;z-index:0;right:-.05em;bottom:-.24em;
  font-size:clamp(9rem,27vw,27rem);font-weight:var(--peso-extrabold);
  line-height:1;letter-spacing:-.065em;color:var(--cor-texto);opacity:.08;
  pointer-events:none;user-select:none;white-space:nowrap}

/* o botão do grupo antes do link existir: aparece para a tela ser
   julgada inteira, e não clica */
.btn--desligado{background:var(--preto-08);color:var(--cor-texto-sutil);
  border:1.5px solid var(--cor-borda);cursor:not-allowed;pointer-events:none}

/* ============ o que acontece agora (11/11) ============
   Três linhas no idioma da lista da S2: quando à esquerda, o quê à
   direita, filete entre elas. No celular o "quando" sobe para cima. */
.obrigado__passos{list-style:none;margin:var(--esp-lg) 0 0;padding:0;
  width:100%;max-width:34rem;border-top:1.5px solid var(--cor-texto)}
.obrigado__passo{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:var(--esp-2xs) var(--esp-md);padding:var(--esp-sm) 0;
  border-bottom:1px solid var(--cor-borda-forte)}
.obrigado__quando{font-size:var(--txt-xs);font-weight:var(--peso-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase;line-height:1.5}
.obrigado__oque{font-size:var(--txt-base);line-height:var(--lh-media);text-wrap:pretty}
@media (max-width:560px){
  .obrigado__passo{grid-template-columns:1fr}
}
/* com a lista, o "2028" de fundo encostava no último filete em 1440
   (medido em 11/11): o chão cresce para o número morar embaixo dela */
@media (min-width:900px){
  .obrigado:has(.obrigado__passos){padding-bottom:clamp(10rem,26vh,16rem)}
}


/* ===== estilo/rodape.css ===== */
/* ============================================================
   RODAPÉ · uma linha, chão branco

   Ele não converte, e é isso que tem que fazer. Filete em cima para
   separar do formulário, texto miúdo, dois links.
   ============================================================ */

.rodape{padding-block:clamp(1.4rem,4vh,2.2rem) clamp(2rem,5vh,3rem)}

/* centrado junto com o resto (09/09). Em coluna e centrado, e não em
   duas pontas: com a página inteira no eixo, o rodapé espalhado nas
   bordas era a única coisa fora dele. */
.rodape__linha{display:flex;flex-direction:column;align-items:center;
  gap:var(--esp-2xs);text-align:center;
  border-top:1px solid var(--cor-borda);
  padding-top:clamp(1rem,3vh,1.6rem)}

/* mesma correção de contraste de 09/09: 2,81:1 -> 7,34:1. O CNPJ é
   informação legal e não pode ser o texto mais apagado da página. */
.rodape__dados{margin:0;font-size:var(--txt-xs);color:var(--cor-texto-sutil)}

.rodape__links{margin:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:var(--esp-2xs) var(--esp-sm);
  font-size:var(--txt-xs)}

/* alvo de toque de 44px: em 19/08 estes links tinham 21px de altura
   no celular, menos da metade do mínimo. O texto continua no mesmo
   lugar dentro da caixa maior. */
.rodape a{display:inline-flex;align-items:center;min-height:var(--botao-alt-min);
  color:var(--cor-texto-sutil);text-decoration:underline;
  text-underline-offset:.24em;text-decoration-thickness:1px;
  text-decoration-color:var(--cor-borda);
  transition:text-decoration-color var(--dur-padrao) var(--ease-enfase)}
.rodape a:hover{color:var(--cor-texto);text-decoration-color:var(--cor-grafico)}
.rodape a:focus-visible{outline:var(--foco-anel) solid var(--cor-foco);
  outline-offset:var(--foco-offset);border-radius:var(--raio-xs)}


/* ===== estilo/movimento.css ===== */
/* ============================================================
   MOVIMENTO · uma folha só, um easing só (--ease-enfase)

   A abertura é protagonista e não se julga parada (lei de 06/08):
   as duas linhas da manchete sobem por máscara, uma depois da
   outra; rótulo, apoio e botão chegam em seguida; o 2028 sobe por
   último, devagar. Nada fica se mexendo depois (lei de 27/08: o
   movimento contínuo na dobra cansa).

   Daí pra baixo, cada bloco chega quando entra na tela. Sem JS, ou
   com menos movimento pedido, tudo nasce no lugar e inteiro.
   ============================================================ */
@keyframes sobe-linha{from{transform:translateY(108%)}}
@keyframes chega{from{opacity:0;transform:translateY(.9rem)}}
@keyframes ano-sobe{from{opacity:0;transform:translateY(22%)}}

.abertura__titulo .linha{overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}
.abertura__titulo .linha__miolo{display:block;
  animation:sobe-linha var(--dur-coreografia) var(--ease-enfase) both}
.abertura__titulo .linha + .linha .linha__miolo{animation-delay:110ms}

.entra{animation:chega var(--dur-chegada) var(--ease-enfase) both;
  animation-delay:calc(160ms + var(--atraso,0) * 90ms)}

.abertura__ano{animation:ano-sobe 1400ms var(--ease-enfase) 260ms both}

.js .revela{opacity:0;transform:translateY(1.1rem);
  transition:opacity var(--dur-chegada) var(--ease-enfase),
             transform var(--dur-chegada) var(--ease-enfase)}
.js .revela[data-visto]{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .revela{opacity:1;transform:none}
}


/* ===== estilo/responsivo.css ===== */
/* ============================================================
   CELULAR E TABLET · bloco único, no fim (lei de 10/08)
   ============================================================ */

@media (max-width:820px){
  /* o "quando" sobe para cima do título e vira rótulo: na coluna
     estreita, contrapeso na direita espremia o texto */
  .passo{grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem var(--esp-sm)}
  .passo__num{grid-row:1 / span 2;width:2.2rem;height:2.2rem;font-size:var(--txt-xs)}
  .passo__quando{grid-column:2;grid-row:1;margin:0;text-align:left;
    font-size:var(--txt-xs);font-weight:var(--peso-bold);
    letter-spacing:var(--ls-kicker);text-transform:uppercase;line-height:1.4}
  .passo--destino .passo__quando{font-weight:var(--peso-extrabold)}
  .passo__corpo{grid-column:2;grid-row:2}
  .passo__titulo{margin-top:.1rem}

  .niveis{grid-template-columns:1fr;align-items:start}
}

@media (max-width:560px){
  .abertura{padding-bottom:clamp(8rem,24vh,11rem)}
  .abertura__grade{padding-top:clamp(1.5rem,5vh,2.5rem)}
  .abertura__selo{font-size:.66rem;padding:.36rem .7rem}
  .abertura__titulo{font-size:clamp(2.3rem,1.2rem + 5vw,2.9rem)}
  .abertura__sub{font-size:var(--txt-base)}
  .abertura__acao .btn{width:100%}
  .abertura__ano,.obrigado__ano{font-size:clamp(9rem,54vw,15rem);bottom:-.2em}

  .regua{gap:.4rem}
  .regua__def{font-size:var(--txt-xs)}

  .marca{grid-template-columns:1fr;gap:0}
  .marca .campo + .campo{margin-top:var(--esp-md)}

  .obrigado__acao{max-width:none}
}


/* ===== estilo/coerencia.css ===== */
/* ============================================================
   FOLHA DE COERÊNCIA · entra por último. Só correção de conferência.
   Vazia até a primeira medição.
   ============================================================ */