/* ============================================================
   MANDATO ONLINE - Folha de estilo principal
   Paleta: azul institucional + ouro
   ============================================================ */

/* ---------- 1. Variáveis ---------- */
:root{
  --azul:#0B2545;
  --azul2:#13315C;
  --azul-escuro:#071A32;
  --ouro:#C9A227;
  --ouro-claro:#E8C95A;
  --ouro-escuro:#B8931F;
  --bg:#F7F8FA;
  --branco:#fff;
  --texto:#1B2430;
  --cinza:#5B6672;
  --cinza-claro:#8FA3BA;
  --borda:#E3E7EC;
  --verde:#1A7D50;

  /* ----------------------------------------------------------
     AS DUAS VARIANTES DE CADA COR, E POR QUE ELAS EXISTEM

     O ouro e o cinza-claro desta página funcionam sobre o azul-escuro
     do topo e do rodapé, e reprovavam no contraste quando usados como
     texto sobre fundo claro. Medidos: o ouro dava 2,42 sobre branco e
     o cinza-claro dava 2,59. O mínimo da WCAG 2.1 AA para texto normal
     é 4,5.

     Não dá para simplesmente escurecer as cores originais: elas são a
     marca, e sobre o azul do topo a versão escurecida some. Por isso
     cada uma tem agora uma variante para fundo claro, e o CSS escolhe
     conforme o lugar.

     Isto não é preciosismo de designer. A Lei 13.146, artigo 63,
     obriga acessibilidade em site de agente público, e o cliente que
     lê esta página é agente público avaliando se compra de nós.
     ---------------------------------------------------------- */

  /* O ouro quando ele vira texto sobre fundo claro. Contraste 4,86. */
  --ouro-texto:#8A6E19;

  /* O cinza de apoio sobre fundo claro. O `--cinza-claro` acima
     continua valendo, e só, sobre o azul.

     O primeiro valor que escolhi aqui, #667586, passava sobre o branco
     com 4,72 e reprovava sobre o #F7F8FA das seções alternadas com
     4,44. O teste pegou, e a lição é a de sempre: contraste se mede
     contra o fundo real, e este cinza é usado nos dois. O valor atual
     dá 5,20 sobre branco e 4,90 sobre o fundo alternado. */
  --cinza-fraco:#616E7D;

  --radius:14px;
  --max:1120px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- 2. Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  color:var(--texto);
  background:var(--branco);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- 3. Tipografia ---------- */
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{color:var(--cinza)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:88px 0}
.center{text-align:center;max-width:730px;margin:0 auto 56px}
.center p{font-size:1.06rem;margin-top:16px}
/* O rótulo de seção é miúdo, em caixa alta e com espaçamento entre
   letras, que é a combinação mais difícil de ler que existe. Sobre
   fundo claro ele usa a variante escura do ouro; sobre o azul das
   seções escuras, a regra logo abaixo devolve o ouro original. */
.eyebrow{
  color:var(--ouro-texto);font-weight:800;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;
}

/* As quatro seções de fundo azul. `.fund` e `.faq` ficam de fora de
   propósito: apesar do nome, as duas têm fundo claro. */
.hero .eyebrow,
.passos .eyebrow,
.campanha .eyebrow,
.form-sec .eyebrow{color:var(--ouro)}

/* ---------- 4. Logotipo ---------- */
.logo{
  display:inline-flex;align-items:baseline;gap:1px;
  text-decoration:none;font-weight:800;font-size:1.22rem;
  letter-spacing:-.035em;color:#fff;
}
.logo .a{color:#fff}
.logo .b{color:var(--ouro)}
.logo .rule{
  display:inline-block;width:22px;height:2px;
  background:var(--ouro);margin-left:8px;transform:translateY(-5px);
}
.logo--escuro .a{color:var(--azul)}

/* ---------- 5. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:10px;font-weight:700;font-size:1rem;
  text-decoration:none;border:0;cursor:pointer;transition:.18s;white-space:nowrap;
  font-family:var(--font);
}
.btn-ouro{background:var(--ouro);color:#1B1400;box-shadow:0 6px 18px rgba(201,162,39,.3)}
.btn-ouro:hover{background:var(--ouro-escuro);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-dark{background:var(--azul);color:#fff}
.btn-dark:hover{background:var(--azul2)}
.btn-sm{padding:11px 20px;font-size:.9rem}
.btn-block{width:100%}

/* ---------- 6. Cabeçalho ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,37,69,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{color:#C8D3E0;text-decoration:none;font-size:.92rem;font-weight:500}
.navlinks a:hover{color:#fff}
@media(max-width:880px){.navlinks{display:none}}

/* ---------- 7. Hero ---------- */
.hero{background:var(--azul);color:#fff;padding:80px 0 90px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 460px at 82% -10%,rgba(201,162,39,.16),transparent 62%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{color:#fff}
.hero .sub{color:#C8D3E0;font-size:1.13rem;margin:20px 0 32px;max-width:560px}
.hero strong{color:#fff}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero .micro{margin-top:18px;color:var(--cinza-claro);font-size:.86rem}
.tag{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.4);
  color:var(--ouro-claro);padding:7px 15px;border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;margin-bottom:22px;
}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--ouro-claro);display:block}

/* ---------- 8. Mockup do produto ---------- */
.mock{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);display:block}
.mock-link{text-decoration:none;color:inherit;position:relative;transition:.2s;cursor:pointer}
.mock-link:hover{transform:translateY(-4px);box-shadow:0 38px 80px rgba(0,0,0,.48)}
.mock-cta{
  display:block;background:var(--ouro);color:#1B1400;text-align:center;
  padding:11px;font-size:.82rem;font-weight:800;letter-spacing:.02em;
}
.mock-link:hover .mock-cta{background:var(--ouro-claro)}
.mock .bar{
  background:#EDF0F4;padding:10px 14px;display:flex;align-items:center;gap:7px;
  border-bottom:1px solid var(--borda);
}
.mock .dot{width:10px;height:10px;border-radius:50%}
.mock .url{
  flex:1;background:#fff;border:1px solid var(--borda);border-radius:6px;
  padding:5px 10px;font-size:.74rem;color:var(--cinza);margin-left:8px;
  display:flex;align-items:center;gap:6px;
}
.mock-head{background:var(--azul2);color:#fff;padding:20px 18px}
.mock-head .nome{font-weight:800;font-size:1.05rem}
.mock-head .cargo{font-size:.72rem;color:#A9BDD4;letter-spacing:.09em;text-transform:uppercase}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--borda)}
.mock-stats div{background:#fff;padding:16px 8px;text-align:center}
.mock-stats .n{font-size:1.5rem;font-weight:800;color:var(--azul)}
.mock-stats .l{font-size:.66rem;color:var(--cinza);text-transform:uppercase;letter-spacing:.06em}
.mock-list{padding:14px 18px 20px}
.mock-item{
  display:flex;gap:10px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--borda);font-size:.82rem;
}
.mock-item:last-child{border:0}
.pill{
  font-size:.6rem;font-weight:700;padding:3px 8px;border-radius:5px;
  background:#E8F3EE;color:var(--verde);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.04em;
}
.pill.b{background:#EAF0F8;color:var(--azul2)}

/* ---------- 9. Faixa de prova ---------- */
.prova{background:var(--bg);padding:30px 0;border-bottom:1px solid var(--borda)}
.prova .wrap{display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap;text-align:center}
.prova span{color:var(--cinza);font-size:.87rem;font-weight:600}
.prova b{color:var(--azul);font-size:1.45rem;display:block;font-weight:800;letter-spacing:-.02em}

/* ---------- 10. Ícones ---------- */
.ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;background:var(--azul)}
.ico svg{width:21px;height:21px;stroke:var(--ouro-claro);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card .ico{background:#FBF4DF}
.card .ico svg{stroke:#9A7B12}

/* ---------- 11. Grades ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}

/* ---------- 12. Blocos de dor ---------- */
.dor{background:var(--bg)}
.card{background:#fff;border:1px solid var(--borda);border-radius:var(--radius);padding:28px}
.card h3{margin-bottom:8px}
.card p{font-size:.95rem}

/* ---------- 13. Recursos ---------- */
.feat{border:1px solid var(--borda);border-radius:var(--radius);padding:28px;transition:.2s}
.feat:hover{border-color:var(--ouro);box-shadow:0 12px 30px rgba(11,37,69,.08);transform:translateY(-3px)}
.feat h3{margin-bottom:8px}
.feat p{font-size:.95rem}

/* ---------- 14. Como funciona ---------- */
.passos{background:var(--azul);color:#fff}
.passos h2,.passos h3{color:#fff}
.passos p{color:#B8C7D9}
.passo .num{
  width:46px;height:46px;border-radius:50%;background:var(--ouro);color:#1B1400;
  display:grid;place-items:center;font-weight:900;font-size:1.15rem;margin-bottom:18px;
}

/* ---------- 14b. Roteiro de configuração ---------- */
.setup{
  margin-top:64px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:40px;
}
.setup h3{font-size:1.25rem;margin-bottom:10px}
.setup-intro{max-width:640px;margin-bottom:30px}
.setup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 24px}
@media(max-width:900px){.setup-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.setup-grid{grid-template-columns:1fr}.setup{padding:28px 22px}}
.setup-item{display:flex;gap:12px;align-items:flex-start}
.setup-n{
  color:var(--ouro);font-weight:800;font-size:.78rem;letter-spacing:.06em;
  padding-top:3px;flex-shrink:0;
}
.setup-item b{color:#fff;font-size:.95rem;display:block;margin-bottom:3px}
.setup-item p{font-size:.85rem;color:#9FB2C7;line-height:1.5}
.setup-nota{
  margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.9rem;color:#9FB2C7;
}

/* ---------- 15. Programa fundador ---------- */
.fund{background:var(--bg)}
.fund-box{
  background:#fff;border:1px solid var(--borda);border-left:4px solid var(--ouro);
  border-radius:var(--radius);padding:40px;max-width:860px;margin:0 auto;
}
.fund-box h3{margin-bottom:14px;font-size:1.35rem}

/* ---------- O marcador sai do fluxo, e o texto fica inteiro ----------

   Estas quatro listas usavam `display:flex` no `li`, com o marcador em
   `::before`. Parece inofensivo e não é: **flex transforma cada filho
   em item, inclusive o `<b>` do começo e o texto que vem depois**. Os
   dois viram colunas lado a lado.

   Em tela larga sobra espaço e ninguém nota. No celular a coluna do
   `<b>` espreme, e "Preço travado para sempre:" quebra em quatro
   linhas com a descrição inteira ao lado. Foi assim que apareceu, em
   um iPhone, com o site já no ar.

   A correção tira o flex e põe o marcador em posição absoluta. O texto
   volta a ser um parágrafo só, que quebra onde tem de quebrar, e o
   recuo continua alinhando as linhas seguintes debaixo da primeira.

   Vale para as quatro, e não só para a que quebrou: as outras três não
   têm `<b>` hoje, e teriam o mesmo defeito no dia em que alguém
   acrescentar um. */
.fund-list{list-style:none;margin:24px 0 28px}
.fund-list li{padding:9px 0 9px 19px;position:relative;font-size:.97rem;color:var(--texto)}
.fund-list li b{color:var(--azul)}
.fund-list li::before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;border-radius:50%;background:var(--ouro)}
.fund-nota{font-size:.87rem;color:var(--cinza);border-top:1px solid var(--borda);padding-top:18px}
@media(max-width:600px){.fund-box{padding:28px 22px}}

/* ---------- 16. Planos ---------- */
.planos{background:#fff}
.toggle{display:flex;justify-content:center;margin-bottom:40px}
.toggle button{
  padding:11px 26px;border:1px solid var(--borda);background:#fff;cursor:pointer;
  font-weight:700;font-size:.9rem;color:var(--cinza);font-family:var(--font);transition:.15s;
}
.toggle button:first-child{border-radius:9px 0 0 9px}
.toggle button:last-child{border-radius:0 9px 9px 0;border-left:0}
.toggle button.on{background:var(--azul);color:#fff;border-color:var(--azul)}

.planos-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:26px;
  align-items:start;max-width:820px;margin:0 auto;
}
@media(max-width:820px){.planos-grid{grid-template-columns:1fr;max-width:430px}}
.plano{background:#fff;border:1px solid var(--borda);border-radius:var(--radius);padding:34px 28px;position:relative}
.plano.dest{border:2px solid var(--ouro);box-shadow:0 20px 50px rgba(11,37,69,.12)}
.badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ouro);color:#1B1400;padding:5px 16px;border-radius:999px;
  font-size:.71rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.plano .nome{font-weight:800;font-size:1.15rem;margin-bottom:4px}
.plano .quem{font-size:.84rem;color:var(--cinza);margin-bottom:20px}
.preco{font-size:2.7rem;font-weight:800;color:var(--azul);letter-spacing:-.03em}
.preco small{font-size:.95rem;font-weight:600;color:var(--cinza)}
.plano ul{list-style:none;margin:24px 0}
.plano li{padding:8px 0 8px 20px;position:relative;font-size:.92rem}
.plano li::before{content:"\2713";position:absolute;left:0;top:8px;color:var(--verde);font-weight:900}
.plano li.no{color:#A6AEB8}
.plano li.no::before{content:"\00B7";color:#C8CFD6}
/* ---------- O que ainda não existe ----------

   Separado da lista principal, com marca própria e sem o visto verde.
   A tentação seria misturar tudo com um "em breve" pequeno ao lado, e
   é exatamente isso que faz o cliente ler a lista inteira como
   promessa cumprida. Aqui as duas listas não se parecem. */
.em-construcao{
  margin-top:-8px;padding:14px 16px;
  background:#F7F8FA;border:1px dashed var(--borda);border-radius:10px;
}
.em-construcao .rotulo{
  display:block;margin-bottom:8px;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--cinza-fraco);
}
.em-construcao ul{margin:0;list-style:none}
.em-construcao li{padding:5px 0 5px 16px;position:relative;font-size:.86rem;color:var(--cinza)}
.em-construcao li::before{content:"\00B7";position:absolute;left:0;top:5px;color:var(--cinza-fraco);font-weight:900}

.planos-nota{text-align:center;font-size:.9rem;color:var(--cinza);margin-top:32px}

.planos-honestidade{
  max-width:720px;margin:14px auto 0;text-align:center;
  font-size:.86rem;line-height:1.65;color:var(--cinza-fraco);
}
.planos-honestidade b{color:var(--cinza)}

/* O cartão de campanha tem fundo branco, ao contrário da seção em
   volta. Texto claro aqui desapareceria. */
.camp-como{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--borda);
  font-size:.84rem;line-height:1.6;color:var(--cinza);
}

/* ---------- 16b. Pacote de campanha ---------- */
.campanha{background:var(--azul);color:#fff;padding:80px 0}
.campanha h2{color:#fff;margin-bottom:16px}
.camp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:940px){.camp-grid{grid-template-columns:1fr;gap:40px}}
.camp-lead{color:#C8D3E0;font-size:1.05rem;margin-bottom:28px}
.camp-obs{color:#8FA3BA;font-size:.9rem;font-style:italic}

.camp-prazo{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.camp-prazo-item{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:11px;padding:16px 20px;flex:1;min-width:190px;
}
.camp-prazo-item b{display:block;color:var(--ouro-claro);font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.camp-prazo-item span{font-size:.82rem;color:#A9BDD4;display:block;margin-top:3px}

.camp-card{
  background:#fff;color:var(--texto);border-radius:var(--radius);
  padding:34px 28px;position:relative;box-shadow:0 26px 60px rgba(0,0,0,.34);
}
.camp-selo{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ouro);color:#1B1400;padding:5px 16px;border-radius:999px;
  font-size:.71rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.camp-card .nome{font-weight:800;font-size:1.15rem;margin-bottom:4px}
.camp-card .quem{font-size:.84rem;color:var(--cinza);margin-bottom:18px}
.camp-card .preco{font-size:2.7rem;font-weight:800;color:var(--azul);letter-spacing:-.03em}
.camp-card .preco small{font-size:.95rem;font-weight:600;color:var(--cinza)}
.camp-preco-obs{font-size:.84rem;color:var(--cinza);margin:10px 0 4px;line-height:1.5}
.camp-card ul{list-style:none;margin:20px 0 24px}
.camp-card li{padding:7px 0 7px 20px;position:relative;font-size:.91rem}
.camp-card li::before{content:"\2713";position:absolute;left:0;top:7px;color:var(--verde);font-weight:900}
.camp-ver{
  display:block;text-align:center;margin-top:14px;font-size:.88rem;
  font-weight:700;color:var(--azul2);text-decoration:none;
}
.camp-ver:hover{color:var(--ouro-escuro);text-decoration:underline}

.camp-eleito{
  margin-top:44px;background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.35);
  border-left:4px solid var(--ouro);border-radius:0 12px 12px 0;
  padding:24px 28px;font-size:.96rem;color:#DCE5EF;line-height:1.7;
}
.camp-eleito b{color:var(--ouro-claro)}
@media(max-width:600px){.camp-card{padding:28px 22px}.camp-eleito{padding:20px 22px}}

/* ---------- 17. FAQ ---------- */
.faq{background:var(--bg)}
.faq-wrap{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--borda)}
.faq-q{
  width:100%;text-align:left;background:none;border:0;padding:22px 0;
  font-size:1.02rem;font-weight:700;cursor:pointer;display:flex;
  justify-content:space-between;gap:20px;font-family:var(--font);color:var(--texto);
}
.faq-q span{color:var(--ouro-texto);font-size:1.4rem;line-height:1;transition:.2s;flex-shrink:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding-bottom:22px;font-size:.97rem}
.faq-item.open .faq-a{max-height:460px}
.faq-item.open .faq-q span{transform:rotate(45deg)}

/* ---------- 18. Formulário ---------- */
.form-sec{background:var(--azul);color:#fff}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:940px){.form-grid{grid-template-columns:1fr;gap:36px}}
.form-sec h2{color:#fff}
.form-sec .lead{color:#C8D3E0;font-size:1.05rem;margin:18px 0 26px}
.check{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;color:#DCE5EF;font-size:.95rem}
.check i{color:var(--ouro-claro);font-style:normal;font-weight:900}
form{background:#fff;border-radius:16px;padding:32px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
form h3{color:var(--azul);margin-bottom:6px}
form .fsub{font-size:.88rem;color:var(--cinza);margin-bottom:22px}
label{display:block;font-size:.82rem;font-weight:700;color:var(--texto);margin-bottom:6px}
input,select{
  width:100%;padding:13px 14px;border:1px solid var(--borda);border-radius:9px;
  font-size:.95rem;margin-bottom:15px;font-family:var(--font);background:#fff;color:var(--texto);
}
/* Sem `outline:0`: o anel de foco agora vem da regra global de
   `:focus-visible`, e a borda dourada fica como reforço visual. */
input:focus,select:focus{border-color:var(--ouro);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
input.erro,select.erro{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.campo-subdominio{display:flex;align-items:stretch;margin-bottom:15px}
.campo-subdominio input{
  margin:0;border-radius:9px 0 0 9px;border-right:0;
  text-transform:lowercase;font-weight:600;
}
.campo-subdominio span{
  display:flex;align-items:center;padding:0 13px;background:var(--bg);
  border:1px solid var(--borda);border-left:0;border-radius:0 9px 9px 0;
  font-size:.85rem;color:var(--cinza);white-space:nowrap;font-weight:600;
}
@media(max-width:400px){.campo-subdominio span{font-size:.74rem;padding:0 9px}}

/* Verificação de disponibilidade do endereço */
.campo-subdominio.checando input{border-color:var(--ouro)}
.campo-subdominio.livre input{border-color:var(--verde)}
.campo-subdominio.ocupado input{border-color:#C0392B}

.status-endereco{
  font-size:.8rem;font-weight:600;margin:-9px 0 14px;min-height:1.1em;
  display:flex;align-items:center;gap:6px;line-height:1.4;
}
.status-endereco:empty{margin:0;min-height:0}
.status-endereco.checando{color:var(--cinza)}
.status-endereco.livre{color:var(--verde)}
.status-endereco.ocupado{color:#C0392B}
.status-endereco .girando{
  width:12px;height:12px;border:2px solid var(--borda);border-top-color:var(--ouro);
  border-radius:50%;animation:girar .7s linear infinite;flex-shrink:0;
}
@keyframes girar{to{transform:rotate(360deg)}}

.alternativas{display:flex;flex-wrap:wrap;gap:7px;margin:-6px 0 14px}
.alternativas:empty{margin:0}
.alternativas .rotulo{font-size:.76rem;color:var(--cinza);width:100%;margin-bottom:2px}
.alternativas button{
  background:var(--bg);border:1px solid var(--borda);border-radius:7px;
  padding:5px 11px;font-size:.79rem;font-weight:600;color:var(--azul2);
  cursor:pointer;font-family:var(--font);transition:.15s;
}
/* O hover pintava o texto de #B8931F sobre #FBF4DF, que dá 2,64. Estes
   botões são as alternativas de endereço oferecidas quando o escolhido
   já está ocupado, e é o momento em que a pessoa mais precisa ler: ela
   acabou de perder o nome que queria e está decidindo o substituto. */
.alternativas button:hover{border-color:var(--ouro);background:#FBF4DF;color:var(--ouro-texto)}

.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px}
.consent input{width:auto;margin:3px 0 0}
.consent label{font-size:.8rem;font-weight:500;color:var(--cinza);line-height:1.5}
.consent a{color:var(--azul);font-weight:700}
.legal{font-size:.75rem;color:var(--cinza);margin-top:14px;text-align:center;line-height:1.5}
.ok{
  display:none;background:#E8F3EE;border:1px solid var(--verde);color:#12603C;
  padding:16px;border-radius:10px;font-size:.93rem;text-align:center;font-weight:600;
}
@media(max-width:600px){form{padding:26px 20px}}

/* ---------- 19. Rodapé ---------- */
footer{background:var(--azul-escuro);color:var(--cinza-claro);padding:56px 0 30px;font-size:.9rem}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px}
@media(max-width:760px){.f-grid{grid-template-columns:1fr}}
footer h3{color:#fff;font-size:.83rem;text-transform:uppercase;letter-spacing:.11em;margin-bottom:14px}
footer a{display:block;color:var(--cinza-claro);text-decoration:none;padding:4px 0}
footer a:hover{color:var(--ouro-claro)}
footer .desc{color:var(--cinza-claro);max-width:340px;margin-top:12px}
.f-bot{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;
}

/* ---------- 20. CTA fixo no mobile ---------- */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;background:#fff;
  border-top:1px solid var(--borda);padding:12px 16px;display:none;z-index:60;
  box-shadow:0 -4px 20px rgba(0,0,0,.1);
}
@media(max-width:880px){
  .sticky-cta{display:block}
  body{padding-bottom:74px}
}

/* ============================================================
   21. PÁGINAS LEGAIS (termos e privacidade)
   ============================================================ */
.legal-hero{background:var(--azul);color:#fff;padding:64px 0 56px}
.legal-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);color:#fff}
.legal-hero .atualizado{color:var(--cinza-claro);font-size:.9rem;margin-top:14px}

.legal-body{padding:56px 0 80px}
.legal-layout{display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start}
@media(max-width:900px){.legal-layout{grid-template-columns:1fr;gap:32px}}

.sumario{
  position:sticky;top:92px;background:var(--bg);border:1px solid var(--borda);
  border-radius:var(--radius);padding:22px;
}
@media(max-width:900px){.sumario{position:static}}
.sumario h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--cinza);margin-bottom:12px}
.sumario a{display:block;padding:6px 0;font-size:.88rem;color:var(--azul2);text-decoration:none;font-weight:500}
.sumario a:hover{color:var(--ouro-escuro)}

.legal-texto{max-width:760px}
.legal-texto h2{font-size:1.35rem;margin:44px 0 14px;scroll-margin-top:92px;color:var(--azul)}
.legal-texto h2:first-child{margin-top:0}
.legal-texto h3{font-size:1.02rem;margin:24px 0 8px}
.legal-texto p{margin-bottom:14px;font-size:.97rem}
.legal-texto ul,.legal-texto ol{margin:0 0 16px 20px}
.legal-texto li{margin-bottom:8px;font-size:.97rem;color:var(--cinza)}
.legal-texto strong{color:var(--texto)}
.legal-texto a{color:var(--azul2);font-weight:600}
.aviso{
  background:#FBF4DF;border-left:4px solid var(--ouro);border-radius:0 10px 10px 0;
  padding:18px 20px;margin:0 0 32px;font-size:.9rem;color:#5E4A0B;
}
.aviso strong{color:#3E3005}
.tabela{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:.9rem}
.tabela th,.tabela td{border:1px solid var(--borda);padding:11px 13px;text-align:left;vertical-align:top}
.tabela th{background:var(--bg);font-weight:700;color:var(--texto);font-size:.85rem}
.tabela td{color:var(--cinza)}
.voltar{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-weight:700;color:var(--azul2);text-decoration:none}
.voltar:hover{color:var(--ouro-escuro)}

/* Link para o exemplo daquele plano, logo abaixo do botão.

   Fica no cartão, e não em um lugar único da página, porque a dúvida
   "como fica na prática?" nasce olhando um plano específico. Um link
   só, no meio da seção, obrigaria o prospecto a descobrir sozinho qual
   dos dois exemplos corresponde ao que ele estava lendo. */
.ver-exemplo{
  display:block;text-align:center;margin-top:12px;
  font-size:.85rem;font-weight:700;color:var(--cinza);
  text-decoration:underline;text-underline-offset:3px;
}
.ver-exemplo:hover{color:var(--azul)}

/* ---------- Erro do formulário de pedido ----------

   Vermelho e acima do botão, e não abaixo: quem errou o endereço
   precisa ler a alternativa antes de tentar enviar de novo. */
.erro-envio{
  display:none;margin-top:14px;padding:12px 14px;
  background:#FDECEC;border-left:3px solid #C0392B;border-radius:0 8px 8px 0;
  font-size:.86rem;line-height:1.55;color:#8B2820;
}

/* ============================================================
   PASSO 2: ESCOLHA DE PLANO
   ============================================================

   A opção inteira é clicável, e não só o círculo do rádio. Num celular,
   acertar um alvo de 20 pixels com o polegar é o tipo de atrito que faz
   a pessoa desistir na última tela do funil, que é a pior de todas as
   telas para perder alguém. */
.escolha {
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 0 0 16px;
}

.escolha legend {
  font-size: .82rem;
  font-weight: 700;
  padding: 0 6px;
  color: var(--texto);
}

.escolha .opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 44 pontos é o piso de alvo de toque do projeto. Aqui ele vale
     ainda mais: é a tela onde o dinheiro acontece. */
  min-height: 44px;
  cursor: pointer;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   O RÁDIO PRECISA DESFAZER A REGRA GERAL DE CAMPO

   A regra `input,select { width:100% }` lá em cima foi escrita para
   campo de texto, e o seletor pega rádio e caixa de marcação junto. O
   resultado no formulário de venda era um rádio ocupando a linha
   inteira, com padding e borda de campo de texto, empurrando o nome do
   plano para fora da tela. No celular, a pessoa via dois círculos e
   nenhum rótulo legível, na tela onde ela decide pagar.

   `.consent input { width:auto }` já existia, e resolvia exatamente
   isto para as duas caixas de aceite. Só que a correção ficou local: os
   rádios de plano e de ciclo continuaram herdando a regra geral.

   `flex: none` no lugar de `flex-shrink: 0`: com largura de 100% e
   encolhimento proibido, o rádio ficava travado ocupando tudo. Zerar a
   largura sem zerar o encolhimento resolveria hoje e deixaria a
   armadilha montada.
   ------------------------------------------------------------------ */
.escolha .opcao input {
  width: auto;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--ouro);
}
.escolha .opcao em { font-style: normal; opacity: .75; }

#contratar { margin-top: 26px; }
#ok-pagamento .btn { margin: 12px 0 8px; }