/* ===== estilo/base.css ===== */
/* ============================================================
   BASE · pesquisa BORA Kids · Lagoa da Prata (09/09/2026)

   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: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)}
.abertura .palco,
.pesquisa .palco,
.obrigado .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.css ===== */
/* ============================================================
   ABERTURA (tela 1, centrada)

   Diagramação da referência que ele mandou em 09/09: bloco de texto
   centrado em cima, arte grande ocupando a base, botão largo por
   último. A tela tenta caber inteira no celular, que é onde a
   pesquisa vai ser respondida.

   É a ÚNICA parte centrada da página: da pesquisa em diante, tudo
   alinha à esquerda (pedido dele na mesma mensagem).
   ============================================================ */

/* align-items:stretch (o padrão) e não center: com `center` a grade
   não recebia a altura da tela, então o `flex:1` do raio não tinha
   sobra nenhuma para comer e ele ficava do tamanho do min-height, um
   selinho no meio do branco. Quem centra o conteúdo é o
   justify-content da grade. */
.abertura{position:relative;display:flex;
  min-height:100svh;
  padding-block:clamp(1.6rem,4vh,2.6rem) clamp(1.4rem,3vh,2rem);
  overflow:clip}
.abertura[hidden]{display:none}

.abertura__grade{position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;width:100%}

.abertura__marca{margin:0 0 clamp(1rem,3vh,1.6rem)}
.abertura__marca img{height:clamp(2rem,3vw,2.6rem);width:auto}

/* ============ o selo ============
   Preto sobre neon: a única combinação de marca que passa AA no
   branco (11,5:1 no DS). Ele responde, antes da primeira pergunta, a
   dúvida que faz gente não começar: quanto isso vai me custar. */
.selo{display:inline-flex;align-items:center;
  margin:0 0 clamp(.9rem,2.6vh,1.4rem);
  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}

.abertura__titulo{margin:0;font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem);
  line-height:var(--display-lh);letter-spacing:var(--display-ls);
  font-weight:var(--peso-extrabold);color:var(--cor-texto)}

/* o subtítulo em duas camadas (mix de pesos, aprovado em 22/07):
   a linha que informa vem cheia, a que convida vem rebaixada */
.abertura__sub{margin:clamp(.8rem,2.4vh,1.2rem) 0 0;
  display:flex;flex-direction:column;gap:var(--esp-2xs);
  align-items:center;text-wrap:pretty}
.abertura__sub-forte{max-width:28rem;font-size:var(--txt-md);
  line-height:var(--lh-media);font-weight:var(--peso-bold);
  color:var(--cor-texto)}
.abertura__sub-fraco{max-width:31rem;font-size:var(--txt-base);
  line-height:var(--lh-media);color:var(--cor-texto-sutil)}

/* ============ o raio ============
   GIGANTE E CORTADO, por pedido dele em 09/09: "se é muito grande,
   ficar também pra fora da visualização, pra que só apareça um pedaço
   do grafismo". Ele saiu do fluxo e virou fundo — ancorado na base,
   mais largo que a tela e sangrando pelos três lados.

   Em neon cheio, porque aqui ele é figura e não textura, e porque não
   tem texto de leitura por cima dele: o bloco de texto acaba acima da
   linha onde ele começa. O que se sobrepõe a ele é só o botão, que
   por isso ficou preto.

   A largura é maior que a tela DE PROPÓSITO (115vw): é o corte que
   faz o desenho continuar fora do quadro em vez de parecer um selo
   centralizado. */
/* ANCORADO PELO TOPO, e não pela base: com `bottom` negativo o
   desenho subia junto com o próprio tamanho e, na primeira tentativa,
   as linhas passaram por cima do subtítulo (medido em 390px). Preso
   pelo topo em 56% da tela, ele começa sempre DEPOIS do texto e
   transborda pela base, que é o corte que ele pediu. */
.abertura__raio{position:absolute;z-index:0;pointer-events:none;
  left:50%;top:56%;
  /* MEDIDO em 1440 (09/09): sem teto, 104vw dava 1497px de largura e a
     única coisa visível eram as curvas de cima — virava um arco, e o
     raio deixava de ser reconhecível. Com teto de 46rem, a parte que
     aparece já contém o miolo do desenho. O piso de 104vw é o que
     garante o corte lateral no celular. */
  width:clamp(20rem,104vw,46rem);aspect-ratio:750/840;
  transform:translateX(-50%);
  background:var(--cor-grafico);
  -webkit-mask:url("marca/bora-pattern.svg") center bottom/contain no-repeat;
          mask:url("marca/bora-pattern.svg") center bottom/contain no-repeat}

/* o vão empurra o botão para perto da base e abre o espaço onde o
   raio aparece. `flex:1` faz ele comer a sobra da tela: em tela alta
   cresce, em tela baixa encolhe, e o botão nunca sai da vista. */
.abertura__vao{flex:1 1 auto;min-height:clamp(5rem,16vh,12rem)}

/* a foto, quando ela existir, ocupa o mesmo lugar do raio */
.topo__foto{width:min(34rem,100%);margin:clamp(1rem,3vh,1.8rem) 0 0}
.topo__foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--raio-xl)}

.abertura__acao{position:relative;z-index:1;width:100%;max-width:26rem;margin:0}

/* o botão largo das duas referências: ele é a única ação da tela e
   ocupa a medida inteira do bloco */
.btn--largo{width:100%}

/* ============ o botão de contraste ============
   Preto com branco: o par invertido da marca, 21:1, usado só onde o
   fundo deixou de ser branco. Ele existe porque o raio neon tomou a
   base da tela e um botão neon ali seria mais uma mancha da mesma
   cor — o próprio Patrick antecipou isso ao pedir o grafismo maior. */
.btn--contraste{background:var(--cor-texto);color:var(--cor-fundo)}
.btn--contraste:hover{background:var(--neutro-700)}


/* ===== estilo/form.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.
   ============================================================ */

.pesquisa{padding-block:clamp(1.6rem,5vh,2.6rem) clamp(2.4rem,7vh,4rem)}
.pesquisa[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}


/* ===== estilo/obrigado.css ===== */
/* ============================================================
   OBRIGADO · a tela que substitui a página (chão branco)

   Mesmo idioma do topo, para a pessoa saber que continua no mesmo
   lugar: escrita da marca, título, uma frase e um botão. O botão do
   grupo é a única saída, e por isso é o botão neon da casa.
   ============================================================ */

.obrigado{position:relative;overflow:clip;
  padding-block:clamp(2.4rem,7vh,4rem) clamp(3rem,9vh,5rem);
  min-height:min(70svh,38rem);display:flex;align-items:center}
.obrigado[hidden]{display:none}

.obrigado__grade{display:flex;flex-direction:column;align-items:center;
  text-align:center}

.obrigado__marca{margin:0 0 clamp(1rem,3vh,1.6rem)}
.obrigado__marca img{height:clamp(2rem,3vw,2.6rem);width:auto}

.obrigado__titulo{margin:0;font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem);
  line-height:var(--display-lh);letter-spacing:var(--display-ls);
  font-weight:var(--peso-extrabold);color:var(--cor-texto)}
/* o filete neon vira selo aqui também, para a tela de obrigado falar
   o mesmo idioma do topo */
.obrigado__selo{display:inline-flex;align-items:center;
  margin:0 0 clamp(1rem,3vh,1.6rem);
  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}

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

.obrigado__acao{margin:var(--esp-md) 0 0;width:100%;max-width:26rem}
.obrigado__micro{margin:var(--esp-2xs) 0 0;font-size:var(--txt-sm);
  color:var(--cor-texto-sutil)}

/* a pendência do link do grupo: enquanto o config não trouxer o
   link, é isto que aparece no FONTE, e o publicador se recusa a
   subir a página. Na vitrine ela nunca chega. */
.obrigado__pendencia{margin:var(--esp-md) 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:30rem}

/* o botão do grupo antes de o link existir: ele aparece no link de
   revisão para o desenho da tela poder ser julgado inteiro, e não
   clica. Some sozinho no dia em que o link entrar no config.

   Os tokens de desabilitado da casa (neutro-300 com neutro-400 por
   cima) dão 1,6:1 e não se leem: aqui o botão em espera usa a
   superfície sutil com o texto sutil, que passa AA e continua
   dizendo claramente que não é o botão de verdade. */
.btn--desligado{background:var(--cor-superficie-sutil);
  color:var(--cor-texto-sutil);border:1.5px solid var(--cor-borda);
  cursor:not-allowed;pointer-events:none}


/* ===== 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/responsivo.css ===== */
/* ============================================================
   CELULAR E TABLET · bloco único, no fim da folha

   Lei da casa (10/08): o responsivo mora num bloco só, no fim, e
   nunca espalhado seção a seção. Assim dá para provar por computed
   style que o desktop não mudou.

   A página é uma coluna em qualquer largura, então aqui só entra o
   que a medida estreita realmente quebra.
   ============================================================ */

@media (max-width:560px){

  .abertura__titulo{font-size:clamp(2.2rem,1.4rem + 4vw,2.8rem)}
  .abertura__sub-forte{font-size:var(--txt-base)}
  .obrigado__titulo{font-size:var(--txt-2xl)}
  .obrigado__sub{font-size:var(--txt-base)}

  /* o botão ocupa a largura da tela: é a única ação, e o alvo de
     toque tem que ser o maior possível no polegar */
  .abertura__acao,
  .obrigado__acao{max-width:none}

  /* as faixas de preço voltam para uma coluna: em 390px, duas
     colunas davam ~150px por pílula e "Depende do que incluir"
     quebrava em duas linhas dentro da pílula */
  .pastilhas--grade{grid-template-columns:1fr}

  /* uma idade por linha no estreito. MEDIDO em 390px: com a grade
     automática cabiam duas por fileira, então três filhos viravam
     "duas em cima, uma embaixo" — alinhado, mas torto de ler. Em
     coluna única os três nascem na mesma medida. */
  .idades{grid-template-columns:1fr}

  .obrigado{min-height:auto}
}


/* ===== estilo/coerencia.css ===== */
/* ============================================================
   FOLHA DE COERÊNCIA · entra por último

   Aqui mora só o que a conferência da página inteira encontrar:
   divergência entre o que a lei da página diz e o que o navegador
   mede. Correção de conferência é bug, não gosto, e nunca se
   espalha nas folhas de seção.

   Vazia até a primeira medição.
   ============================================================ */