/* ===========================================================================
   teste.css — estilos da página de captação /teste
   ---------------------------------------------------------------------------
   Esta página NÃO carrega o Tailwind (header.php recebe $sem_tailwind = true).
   O CDN do Tailwind compila o CSS dentro do navegador do visitante e custa
   tempo justamente no primeiro carregamento — o único que uma página de
   anúncio tem. Todo estilo daqui é estático.

   Convenção: TODA classe começa com "lp-". O assets/style.css continua sendo
   carregado (é dele que vem o painel de acessibilidade), e ele já define
   .hero-grid — sem o prefixo, as duas regras brigariam.

   CONTRASTE — o laranja da marca foi conferido e reprova em AA:
     #D65E1E sobre creme .............. 3,49:1  (só serve em texto >= 24px)
     branco sobre #D65E1E ............. 3,83:1  (reprova em botão)
   Por isso existem três tokens de laranja. Não unifique: trocar --lp-laranja-btn
   de volta para #D65E1E derruba o botão principal abaixo do mínimo legal.
   =========================================================================== */

:root{
  --lp-creme:#F7F4ED;
  --lp-marinho:#172E4B;
  --lp-branco:#fff;
  --lp-laranja:#D65E1E;      /* acento — SÓ em texto grande (>=24px) */
  --lp-laranja-btn:#BF5018;  /* 4,80:1 com branco — preenchimento de botão */
  --lp-laranja-txt:#B84B16;  /* 4,71:1 sobre creme — texto laranja pequeno */
  --lp-cinza:#4A5A6E;        /* 6,42:1 sobre creme */
  --lp-azul-claro:#E7F0F5;
  --lp-grad-a:#1C4169;
  --lp-grad-b:#0B3F8D;
  --lp-borda:#E3DED3;
  --lp-erro:#A3170F;
  --lp-radius:24px;
}

/* A página é de tema único de propósito: espelha a identidade dos posts e não
   tem modo escuro. Fundo pintado explicitamente. */
body.lp{
  background:var(--lp-creme);
  color:var(--lp-marinho);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;              /* abaixo de 16px o iOS dá zoom ao focar campo */
  line-height:1.6;
  margin:0;
}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp img{max-width:100%;display:block}
.lp h1,.lp h2,.lp h3{line-height:1.08;font-weight:800;letter-spacing:-.015em;margin:0;text-wrap:balance}
.lp p,.lp ul,.lp ol{margin:0}
.lp :is(a,button,summary,input,select):focus-visible{outline:3px solid var(--lp-marinho);outline-offset:2px}

.lp-wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.lp-dots{background-image:radial-gradient(rgba(23,46,75,.07) 1px,transparent 1px);background-size:22px 22px}
.lp-branca{background:var(--lp-branco)}
.lp-sec{padding-block:60px}
.lp-sec-title{font-size:clamp(27px,4vw,40px);margin-top:16px}
.lp-kicker{display:inline-flex;align-items:center;gap:9px;background:var(--lp-azul-claro);color:var(--lp-marinho);
  font-weight:800;font-size:12px;letter-spacing:.15em;text-transform:uppercase;padding:8px 15px;border-radius:999px}
.lp-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lp-laranja)}

/* ---------- 1. topo enxuto (markup em includes/header.php) ---------- */
.lp-topo{background:var(--lp-creme);border-bottom:1px solid var(--lp-borda)}
.lp-topo .lp-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
.lp-topo img{height:34px;width:auto}
.lp-conta{font-size:14px;color:var(--lp-cinza);text-decoration:none;min-height:44px;display:flex;align-items:center}
.lp-conta:hover{color:var(--lp-laranja-txt);text-decoration:underline}

/* ---------- 2. dobra principal ----------
   No celular a ordem é título → subtítulo → provas → formulário, e nenhuma
   imagem antes do formulário: imagem grande no topo empurra o primeiro campo
   para fora da tela. Medido em 390x844: o card começa em 449px e três campos
   aparecem sem rolar. Ao mexer em tamanho de fonte ou espaçamento daqui,
   medir de novo — é o requisito mais fácil de quebrar sem perceber. */
.lp-hero{padding-block:22px 48px}
.lp-hero-grid{display:grid;gap:22px;align-items:start}
.lp-hero h1{font-size:clamp(27px,5.1vw,50px);margin:13px 0 11px}
.lp-hero h1 .lp-ac{color:var(--lp-laranja)}
.lp-sub{font-size:clamp(15.5px,2vw,19px);color:var(--lp-cinza);max-width:31em}
.lp-provas{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;list-style:none;padding:0}
.lp-provas li{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800}
.lp-provas svg{width:15px;height:15px;flex:none;color:var(--lp-laranja-txt)}
@media(min-width:960px){
  .lp-hero{padding-block:60px 72px}
  .lp-hero-grid{grid-template-columns:1.02fr .98fr;gap:52px}
  .lp-provas{gap:10px;margin-top:24px}
  .lp-provas li{background:var(--lp-branco);border:1px solid var(--lp-borda);border-radius:999px;padding:9px 15px;font-size:14px;gap:8px}
  .lp-provas svg{width:17px;height:17px}
}

/* ---------- formulário ---------- */
.lp-card{background:var(--lp-branco);border-radius:var(--lp-radius);box-shadow:0 18px 44px rgba(23,46,75,.13);
  padding:20px 18px 22px;border-top:5px solid var(--lp-laranja)}
@media(min-width:960px){.lp-card{padding:30px 28px 26px}}
.lp-card h2{font-size:19px;margin-bottom:4px}
.lp-card-sub{font-size:13.5px;color:var(--lp-cinza);margin-bottom:15px}
.lp-campo{margin-bottom:13px}
/* Rótulo acima do campo e sempre visível. Placeholder não serve de rótulo:
   some assim que a pessoa começa a digitar. */
.lp-campo label{display:block;font-size:13.5px;font-weight:800;margin-bottom:6px}
.lp-opt{font-weight:400;color:var(--lp-cinza)}
.lp-campo input,.lp-campo select{width:100%;height:50px;font-size:16px;font-family:inherit;color:var(--lp-marinho);
  background:#fff;border:1.5px solid #CFD8E3;border-radius:11px;padding:0 13px}
.lp-campo select{cursor:pointer}
.lp-erro{font-size:13px;color:var(--lp-erro);margin-top:5px;font-weight:800}
.lp-erro:empty{display:none}
.lp-campo[data-invalido] input,.lp-campo[data-invalido] select{border-color:var(--lp-erro)}
.lp-box-erro{background:#FDECEA;border:1.5px solid #E5A29B;color:#8C1D18;border-radius:11px;
  padding:11px 13px;font-size:14px;font-weight:800;margin-bottom:13px}
.lp-box-erro:empty{display:none}
.lp-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;
  background:var(--lp-laranja-btn);color:#fff;font-family:inherit;font-size:17px;font-weight:800;
  border:0;border-radius:12px;cursor:pointer}
.lp-btn:hover:not(:disabled){background:#A84212}
.lp-btn:disabled{opacity:.72;cursor:progress}
/* Giro do estado de carregamento. O botão fica desabilitado no envio para
   evitar cadastro duplicado por duplo toque. */
.lp-spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:lp-girar .7s linear infinite}
@keyframes lp-girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lp-spin{animation-duration:2.4s}}
.lp-micro{font-size:13px;color:var(--lp-cinza);text-align:center;margin-top:11px}
.lp-check{display:flex;gap:10px;align-items:center;min-height:44px;margin:12px 0 2px;
  font-size:13.5px;color:var(--lp-cinza);cursor:pointer}
.lp-check input{width:24px;height:24px;flex:none;accent-color:var(--lp-laranja-btn)}
.lp-legal{font-size:13px;color:var(--lp-cinza);line-height:1.5;margin-top:14px;padding-top:14px;border-top:1px solid var(--lp-borda)}
.lp-legal a{color:var(--lp-laranja-txt);font-weight:800}

/* ---------- 3. prova social ---------- */
.lp-social{background:var(--lp-azul-claro);padding-block:34px;text-align:center}
.lp-num{font-size:clamp(38px,6vw,54px);font-weight:800;color:var(--lp-laranja);line-height:1;font-variant-numeric:tabular-nums}
.lp-num-l{font-size:16px;color:var(--lp-marinho);font-weight:800;margin-top:6px}
.lp-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:20px;list-style:none;padding:0}
.lp-chips li{background:rgba(255,255,255,.75);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:800}

/* ---------- 4. problema ---------- */
.lp-probs{display:grid;gap:16px;margin-top:32px}
@media(min-width:860px){.lp-probs{grid-template-columns:repeat(3,1fr)}}
.lp-prob{position:relative;overflow:hidden;background:var(--lp-branco);border-radius:var(--lp-radius);
  padding:26px 22px;border-left:5px solid var(--lp-laranja);box-shadow:0 5px 18px rgba(23,46,75,.06)}
.lp-prob-n{position:absolute;right:14px;top:2px;font-size:58px;font-weight:800;color:rgba(23,46,75,.055);line-height:1}
.lp-prob p{position:relative;font-size:16.5px}

/* ---------- 5. como funciona ---------- */
.lp-passos{display:grid;gap:18px;margin-top:32px}
@media(min-width:860px){.lp-passos{grid-template-columns:repeat(3,1fr)}}
.lp-passo{background:var(--lp-branco);border:1px solid var(--lp-borda);border-radius:var(--lp-radius);padding:24px 22px}
.lp-passo-n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;background:var(--lp-marinho);color:#fff;font-weight:800;font-size:17px;margin-bottom:14px}
.lp-passo h3{font-size:17.5px;margin-bottom:7px}
.lp-passo p{font-size:15px;color:var(--lp-cinza)}
.lp-shot{margin:30px 0 0;background:var(--lp-azul-claro);border-radius:var(--lp-radius);padding:15px}
.lp-janela{background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 10px 30px rgba(23,46,75,.14)}
.lp-barra{display:flex;gap:6px;align-items:center;padding:11px 14px;background:#EDF1F6;border-bottom:1px solid #DDE5EE}
.lp-barra i{width:10px;height:10px;border-radius:50%;background:#CBD5E1;display:block}
/* aspect-ratio + width/height no <img> evitam deslocamento de layout quando a
   imagem chega — a altura já está reservada desde a primeira pintura. */
.lp-shot img{width:100%;height:auto;aspect-ratio:1906/844;background:#F4F7FA}
.lp-shot figcaption{margin-top:11px;font-size:13px;color:var(--lp-cinza);text-align:center}

/* ---------- 6. entrega ---------- */
.lp-ent{display:grid;gap:18px;margin-top:32px}
@media(min-width:860px){.lp-ent{grid-template-columns:1fr 1fr}}
.lp-lista{background:var(--lp-creme);border-radius:var(--lp-radius);padding:25px 23px}
.lp-lista h3{font-size:17px;margin-bottom:14px}
.lp-lista ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}
.lp-lista li{background:#fff;border:1px solid var(--lp-borda);border-radius:999px;padding:7px 13px;font-size:14px;font-weight:800}
.lp-farol{margin-top:18px;background:var(--lp-marinho);color:#fff;border-radius:var(--lp-radius);padding:25px 23px}
.lp-farol h3{font-size:18px;margin-bottom:9px}
.lp-farol p{color:#C3D2E4;font-size:15px}
.lp-luzes{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap;list-style:none;padding:0}
.lp-luz{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800}
.lp-luz i{width:13px;height:13px;border-radius:50%;display:block;flex:none}
/* A ressalva de decisão humana não é enfeite: é o que separa a LegislaIA de
   "mais um ChatGPT" na cabeça de quem trabalha com técnica legislativa. */
.lp-ressalva{margin-top:18px;background:var(--lp-creme);border-left:5px solid var(--lp-laranja);
  border-radius:14px;padding:19px 21px;font-size:16px;font-weight:800}

/* ---------- 7. FAQ ---------- */
.lp-faq{margin-top:30px;display:grid;gap:11px}
.lp-faq details{background:var(--lp-branco);border:1px solid var(--lp-borda);border-radius:15px}
.lp-faq summary{cursor:pointer;list-style:none;padding:17px 19px;font-weight:800;font-size:16.5px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:44px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font-size:23px;color:var(--lp-laranja-txt);flex:none;line-height:1}
.lp-faq details[open] summary::after{content:"\2013"}
.lp-faq summary:focus-visible{outline-offset:-3px;border-radius:15px}
.lp-faq p{padding:0 19px 18px;color:var(--lp-cinza);font-size:15.5px}

/* ---------- 8. segunda chamada (modo escuro) ---------- */
.lp-cta{background:linear-gradient(135deg,var(--lp-grad-a),var(--lp-grad-b));color:#fff;padding-block:62px;text-align:center}
.lp-cta h2{font-size:clamp(27px,4.2vw,40px);max-width:16em;margin:16px auto 12px}
.lp-cta h2 .lp-ac{color:#FF9B57}
.lp-cta p{color:#C3D2E4;max-width:34em;margin:0 auto 26px}
.lp-cta .lp-kicker{background:rgba(255,255,255,.16);color:#fff}
.lp-btn-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;
  background:var(--lp-laranja-btn);color:#fff;font-size:17px;font-weight:800;border-radius:12px;text-decoration:none}
.lp-btn-cta:hover{background:#A84212}
.lp-cta .lp-micro{color:#C3D2E4;margin-top:13px}

/* ---------- 9. rodapé mínimo ---------- */
.lp-rodape{background:var(--lp-marinho);color:#C3D2E4;padding-block:26px;font-size:14px;line-height:1.7}
.lp-rodape .lp-wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;align-items:center}
.lp-rodape a{color:#fff;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.lp-rodape a:hover{text-decoration:underline}
.lp-rodape nav{display:flex;gap:24px;flex-wrap:wrap}

/* ---------- página de confirmação (/teste/confirmado) ---------- */
.lp-ok{padding-block:52px 64px}
.lp-ok-card{background:var(--lp-branco);border-radius:var(--lp-radius);box-shadow:0 18px 44px rgba(23,46,75,.10);
  padding:30px 22px;max-width:660px;margin:0 auto;border-top:5px solid var(--lp-laranja)}
@media(min-width:720px){.lp-ok-card{padding:38px 36px}}
.lp-ok-selo{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;
  background:#E6F4EC;color:#1F7A4D;margin-bottom:18px}
.lp-ok-card h1{font-size:clamp(25px,3.6vw,34px);margin-bottom:10px}
.lp-ok-card > p{color:var(--lp-cinza);font-size:16.5px}
.lp-destino{display:inline-block;background:var(--lp-creme);border:1px solid var(--lp-borda);border-radius:9px;
  padding:3px 9px;font-weight:800;color:var(--lp-marinho);word-break:break-all}
.lp-proximos{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.lp-proximos li{display:flex;gap:12px;align-items:flex-start;background:var(--lp-creme);border-radius:14px;padding:15px 16px}
.lp-proximos b{display:block;margin-bottom:2px}
.lp-proximos span{font-size:14.5px;color:var(--lp-cinza)}
.lp-passo-n-sm{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
  border-radius:9px;background:var(--lp-marinho);color:#fff;font-weight:800;font-size:14px}
.lp-zap{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 24px;
  margin-top:22px;background:#1F7A4D;color:#fff;font-weight:800;border-radius:12px;text-decoration:none}
.lp-zap:hover{background:#17603C}