/* ============================================================
   TexEducacao: site de vendas (texeducacao.com.br).

   Mesma identidade do aplicativo, mesmos tokens: base #0c1322, primaria
   #2563eb, tinta #1d4ed8, fundo #f8fafc, Inter. O site e a primeira tela do
   produto, e quem entra nele depois de assinar precisa reconhecer o lugar.

   Sem framework e sem fonte externa: a CSP do Caddy e 'self', e carregar CSS
   de terceiro num site de vendas custa o primeiro segundo da visita, que e o
   unico que a maioria das pessoas da.
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("/assets/inter-var.woff2?v=20261010a") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --primaria:#2563eb;
  --tinta:#1d4ed8;
  --hover:#1e40af;
  --clara:#93c5fd;
  --veu:rgba(37,99,235,.10);
  --base:#0c1322;
  --base-2:#141d33;
  --apoio:#94a3b8;
  --fundo:#f8fafc;
  --fundo-2:#f1f5f9;
  --cartao:#ffffff;
  --texto:#0c1322;
  --texto-fraco:#475569;
  --linha:#e2e8f0;
  --borda-campo:#7b879b;
  --ok:#15803d;
  --raio:12px;
  --sombra:0 1px 2px rgba(12,19,34,.06),0 8px 28px rgba(12,19,34,.07);
  --fonte:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
@supports (-webkit-text-size-adjust:100%){html{-webkit-text-size-adjust:100%}}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--fonte);font-size:17px;line-height:1.6;
  color:var(--texto);background:var(--fundo);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:var(--tinta)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:3px solid var(--primaria);outline-offset:3px;border-radius:4px}

.faixa{width:100%;padding:0 20px}
.interno{max-width:1120px;margin:0 auto}

/* ---------- barra ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(12,19,34,.96);border-bottom:1px solid rgba(148,163,184,.22)}
.topo__inner{display:flex;align-items:center;gap:16px;min-height:72px}
.topo__marca{display:inline-flex;align-items:center;min-height:44px}
.topo__marca img{height:30px;width:auto}
.topo__nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.topo__nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;
  color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;
}
.topo__nav a:hover{background:rgba(248,250,252,.10);color:#fff}
.topo__nav .btn{margin-left:8px}
/* ABAIXO DE 860px o menu do topo sumia INTEIRO, menos o botao: quem abre no
   celular, que e a maioria de quem recebe o link por WhatsApp, nao tinha como
   chegar em Preco nem em Perguntas sem rolar a pagina toda. Agora o menu vira
   um `details`, que abre e fecha sem JavaScript. */
/* A regra base vem ANTES da media query. Estava depois, e por isso o
   `display:none` dela vencia o `display:block` do celular (mesma
   especificidade, ganha a ultima): o menu do celular existia no HTML, passava
   no portao e nao aparecia para ninguem. */
.topo__menu-fone{display:none;position:relative;margin-left:auto;order:2}
@media (max-width:860px){
  .topo__nav a:not(.btn){display:none}
  .topo__inner{min-height:64px}
  .topo__menu-fone{display:block}
}
/* Abaixo de 480px o botao de ação sai da barra: com logomarca,
   botao e menu na mesma linha de 390px, a logomarca ficava ilegivel, e e ela
   que diz de quem e a pagina. A acao continua no menu e no heroi, que esta a
   uma tela de distancia. */
@media (max-width:480px){
  .topo__nav{display:none}
  .topo__marca img{height:26px}
}
.topo__menu-fone summary{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 14px;border-radius:10px;cursor:pointer;list-style:none;
  border:1px solid rgba(148,163,184,.4);color:#e2e8f0;font-size:15px;font-weight:600}
.topo__menu-fone summary::-webkit-details-marker{display:none}
.topo__menu-fone nav{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:220px;
  display:flex;flex-direction:column;padding:8px;border-radius:12px;
  background:var(--base-2);border:1px solid rgba(148,163,184,.3);box-shadow:0 18px 40px rgba(12,19,34,.45)}
.topo__menu-fone nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;
  color:#e2e8f0;text-decoration:none;font-size:16px}
.topo__menu-fone nav a:hover{background:rgba(248,250,252,.1);color:#fff}
@media (max-width:860px){.topo__nav{margin-left:0}}

/* Pular para o conteudo: primeiro foco da pagina, visivel so quando focado. */
.pular{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;border-radius:0 0 10px 0;
  background:var(--tinta);color:#fff;text-decoration:none;font-weight:700}
.pular:focus{left:0}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;border-radius:10px;border:1px solid transparent;
  font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn--primario{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.btn--primario:hover{background:var(--hover);border-color:var(--hover);color:#fff}
.btn--claro{background:transparent;color:#fff;border-color:rgba(248,250,252,.45)}
.btn--claro:hover{background:rgba(248,250,252,.12);color:#fff}
.btn--secundario{background:var(--cartao);color:var(--texto);border-color:var(--borda-campo)}
.btn--secundario:hover{background:var(--fundo-2)}
.btn--bloco{width:100%}

/* ---------- heroi imersivo ----------
   Anatomia da familia Tex (texrh.com.br, 30/09/2026): FOTO REAL sangrando na
   secao inteira, veu escuro por cima para o texto ler, e o conteudo numa
   coluna a esquerda. A professora da foto fica a 75% da largura, fora do veu
   mais denso, e e ela que diz do que a pagina trata antes de qualquer palavra.

   O que NAO entra aqui, porque e o que da "cara de inteligencia artificial"
   (regra do dono, 26/09/2026): orbe desfocada, malha de gradiente, caixa de
   vidro e rotulo em caixa alta sobre CADA titulo. O rotulo existe uma vez, no
   heroi, e as secoes tem titulo em frase. */
.heroi{position:relative;background:var(--base);color:#f8fafc;isolation:isolate;
  display:flex;align-items:center;min-height:clamp(520px,66vh,680px);padding:96px 0 72px}
.heroi__cena{position:absolute;inset:0;z-index:-2}
/* O recorte comeca no TOPO da foto (0% na vertical). O eixo de herois do
   portao mediu 62% 38% e reprovou em seis tamanhos: o cabelo da professora
   ficava cortado pela borda de cima, porque a imagem ja nasce com pouca folga
   acima da cabeca. O `simular-posicao-heroi.py` testou 38%, 20%, 10% e 0% nas
   caixas MEDIDAS, e so o 0% passa em todas. Corte embaixo e enquadramento;
   corte na cabeca e defeito. */
.heroi__cena img{width:100%;height:100%;object-fit:cover;object-position:62% 0%}
/* Dois veus: um horizontal, que abre espaco para o texto sem apagar a pessoa,
   e um de baixo para cima, que prende o heroi na secao seguinte. */
.heroi::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(12,19,34,.96) 0%,rgba(12,19,34,.92) 34%,rgba(12,19,34,.55) 62%,rgba(12,19,34,.18) 100%)}
.heroi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:-1;
  background:linear-gradient(to top,rgba(12,19,34,.85),transparent)}
/* O conteudo do heroi usa a MESMA grade do resto da pagina (a classe
   `.interno`, de 1120px centrados), e o texto dentro dela e que tem largura de
   leitura. Dar `max-width:640px` na propria `.interno` fazia o bloco inteiro
   ser CENTRADO pelo `margin:0 auto` da classe, e o titulo nascia 240px a
   direita da logomarca: a pagina parecia desalinhada sem motivo visivel. */
.heroi__conteudo>*{max-width:660px}
.heroi__conteudo>.heroi__acoes{max-width:none}
.heroi__selo{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;
  background:rgba(37,99,235,.28);border:1px solid rgba(147,197,253,.4);color:#dbeafe;font-size:14px;font-weight:600}
.heroi h1{font-size:clamp(30px,4vw,46px);margin:18px 0 16px;color:#fff;line-height:1.1;text-wrap:balance}
.heroi h1 em{font-style:normal;color:var(--clara)}
.heroi__apoio{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:#e2e8f0;max-width:52ch}
.heroi__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.heroi__nota{margin-top:16px;font-size:14.5px;color:#cbd5e1}

/* Celular e tablet em retrato: o texto vem PRIMEIRO, sobre o fundo escuro, e a
   foto vira um bloco proprio com recorte 4:5. Texto sobre foto em 390px nao
   tem contraste nem espaco, e a professora saia cortada. */
@media (max-width:820px){
  /* `flex-direction:column` com `order`, e nao `display:block`: no bloco a foto
     fica onde o HTML a poe, que e ANTES do texto, e quem abre pelo celular via
     uma foto sem titulo. O texto primeiro, a foto como bloco proprio depois. */
  .heroi{display:flex;flex-direction:column;min-height:0;padding:28px 0 0}
  .heroi__conteudo{order:1}
  .heroi__cena{order:2;position:relative;inset:auto;z-index:0;margin-top:28px;height:clamp(280px,85vw,460px)}
  .heroi__cena img{object-position:70% 0%}
  .heroi::before{background:none}
  .heroi::after{display:none}
  .heroi__conteudo{max-width:none}
  .heroi__acoes .btn{width:100%}
}

/* ---------- faixa de provas do heroi ---------- */
.provas{background:var(--base-2);color:#cbd5e1;padding:26px 0;border-bottom:1px solid rgba(148,163,184,.16)}
.provas__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.provas__grade div{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:2px solid var(--primaria)}
.provas strong{color:#fff;font-size:15.5px}
.provas span{font-size:14.5px}
@media (max-width:820px){.provas__grade{grid-template-columns:1fr;gap:16px}}

/* ---------- blocos ---------- */
.bloco{padding:72px 20px}
.bloco--claro{background:var(--cartao)}
.bloco--fundo{background:var(--fundo-2)}
.bloco__titulo{font-size:clamp(26px,3vw,36px);max-width:22ch}
.bloco__apoio{margin-top:14px;font-size:18px;color:var(--texto-fraco);max-width:62ch}
.bloco__cabeca{margin-bottom:40px}

.grade{display:grid;gap:20px}
.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.grade--3,.grade--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grade--2,.grade--3,.grade--4{grid-template-columns:1fr}}

.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:24px;box-shadow:var(--sombra)}
.bloco--claro .cartao{background:var(--fundo)}
.cartao__ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;
  background:var(--veu);color:var(--tinta);margin-bottom:14px}
.cartao h3{font-size:18px;margin-bottom:8px}
.cartao p{color:var(--texto-fraco);font-size:16px}
/* `.cartao__num` (o circulo com 1, 2, 3, 4) foi REMOVIDO em 10/10/2026.
   Numeracao decorativa e um dos sinais de pagina feita por maquina, e a casa
   ja tinha decidido isso no site da Liberatus (03/10/2026): a sequencia se diz
   com a ordem e com o titulo, nao com um numero dentro de uma bolinha. */

/* ---------- perfis ---------- */
.perfil{display:flex;flex-direction:column;gap:10px}
.perfil ul{margin:8px 0 0;padding-left:20px;color:var(--texto-fraco);font-size:16px}
.perfil li{margin-bottom:6px}

/* ---------- preco ---------- */
.plano{display:flex;flex-direction:column;background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--raio);padding:28px 24px;box-shadow:var(--sombra)}
.plano--destaque{border-color:var(--primaria);box-shadow:0 0 0 1px var(--primaria),var(--sombra)}
.plano__selo{align-self:flex-start;min-height:26px;padding:2px 10px;border-radius:999px;background:var(--veu);
  color:var(--tinta);font-size:13px;font-weight:700;margin-bottom:12px}
.plano h3{font-size:20px}
.plano__preco{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.plano__valor{font-size:38px;font-weight:800;letter-spacing:-.03em}
.plano__por{color:var(--texto-fraco);font-size:15px}
.plano__limite{color:var(--texto-fraco);font-size:15px}
.plano ul{margin:18px 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.plano li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;color:var(--texto-fraco)}
.plano li svg{flex:none;margin-top:3px;color:var(--ok)}
.plano .btn{margin-top:auto}

/* ---------- marca de etapa ----------
   O que ainda vai entrar fica MARCADO, e nao escondido. Material de venda que
   promete modulo inexistente vincula (CDC art. 30 e 35), e a escola descobre
   na implantacao, que e o pior momento possivel. */
.emBreve{
  display:inline-flex;align-items:center;min-height:22px;padding:1px 8px;margin-left:4px;
  border-radius:999px;background:#f1f5f9;border:1px solid var(--linha);
  color:var(--texto-fraco);font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.plano .emBreve,.cartao .emBreve{font-size:11px}
/* Cor da PALETA declarada, nao uma cor nova.
   Este bloco usava #1e3a8a (azul 900) e #eff4ff / #c7d7fe, tres tons que nao
   estao na paleta do produto: o portao de qualidade reprovou, e com razao, que
   cada aviso novo traga um azul proprio. O texto passa a usar --hover (#1e40af,
   declarado) e o fundo e a borda vem de --dbeafe/--clara, que ja existem. */
.aviso-etapa{
  margin:0 0 28px;padding:14px 18px;border-radius:var(--raio);
  background:#dbeafe;border:1px solid #93c5fd;color:#1e40af;font-size:15.5px;line-height:1.6;
}

/* ---------- perguntas ---------- */
.pergunta{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:12px;overflow:hidden}
.pergunta summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;
  padding:14px 20px;font-weight:700;font-size:17px;cursor:pointer;list-style:none}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--texto-fraco);
  border-bottom:2px solid var(--texto-fraco);transform:rotate(45deg);transition:transform .18s ease}
.pergunta[open] summary::after{transform:rotate(225deg)}
.pergunta__corpo{padding:0 20px 20px;color:var(--texto-fraco);font-size:16px}
.pergunta__corpo p+p{margin-top:10px}

/* ---------- formulario ---------- */
.contato{background:var(--base);color:#f8fafc;padding:72px 20px;
  background-image:radial-gradient(ellipse at 85% 0%,rgba(37,99,235,.24),transparent 60%)}
.contato__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:start}
.contato h2{font-size:clamp(26px,3vw,36px);color:#fff}
.contato p{color:#cbd5e1;font-size:18px;margin-top:14px;max-width:48ch}
.contato__lista{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.contato__lista li{display:flex;align-items:flex-start;gap:10px;color:#cbd5e1;font-size:16px}
.contato__lista svg{flex:none;margin-top:4px;color:var(--clara)}
.formulario{background:var(--cartao);border-radius:var(--raio);padding:28px 24px;box-shadow:var(--sombra)}
.formulario h3{font-size:20px;color:var(--texto)}
.campo{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.campo label{font-size:14px;font-weight:700;color:var(--texto)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--borda-campo);border-radius:10px;
  background:var(--cartao);color:var(--texto);font:inherit;font-size:16px;
}
.campo textarea{min-height:92px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--base);box-shadow:0 0 0 3px var(--veu)}
.campo--consent{position:relative;flex-direction:row;align-items:flex-start;gap:10px;min-height:44px}
.campo--consent input{
  /* 24px de desenho e 44px de AREA SENSIVEL (o ::after abaixo).
     `min-height` sozinho nao resolve, e foi o que o portao mediu em 10/10/2026:
     a caixa media 13x22 porque o flex a encolhia, e o toque a 21px do centro
     cai fora dela. `flex:none` impede o encolhimento e o ::after estende o
     alcance sem inchar o desenho. O aceite da LGPD e o campo mais importante
     deste formulario: errar o toque aqui e nao conseguir pedir demonstracao. */
  position:relative;flex:none;width:24px;height:24px;min-height:0;margin-top:2px;
  accent-color:var(--tinta);
}
.campo--consent input::after{
  content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);
}
/* O rotulo do aceite e TEXTO CORRIDO com um link no meio: em `display:flex` o
   link virava um item da linha e era empurrado para a direita, com o ponto
   final sobrando sozinho na borda. Bloco com padding mantem os 44px de alvo e
   deixa a frase quebrar como frase. */
.campo--consent label{font-weight:500;font-size:14px;color:var(--texto-fraco);line-height:1.5;
  min-height:44px;display:block;padding-top:4px}
.formulario .btn{margin-top:20px}
.formulario__retorno{margin-top:14px;font-size:15px;padding:12px 14px;border-radius:10px;display:none}
.formulario__retorno--ok{display:block;background:#eff6f1;color:var(--ok)}
.formulario__retorno--erro{display:block;background:#faefef;color:#7f1d1d}
/* Armadilha de robo: campo invisivel que pessoa nenhuma preenche. Fica fora da
   ordem do Tab e some do leitor de tela. */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){.contato__grade{grid-template-columns:1fr;gap:32px}}

/* ---------- rodape ---------- */
.rodape{background:var(--base-2);color:#cbd5e1;padding:48px 20px 32px;font-size:15px}
.rodape__grade{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px}
.rodape img{height:28px;width:auto;margin-bottom:14px}
.rodape h4{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--apoio);margin:0 0 12px}
.rodape ul{margin:0;padding:0;list-style:none}
.rodape li{margin-bottom:4px}
/* 44px nos DOIS lados, nao so na altura: o link "Termos" media 41x44 e
   reprovava por 3px de largura. `min-width` com centro resolve sem mexer no
   texto. Medido em 10/10/2026. */
.rodape a{display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;min-width:44px;color:#cbd5e1;text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape__fim{margin-top:36px;padding-top:20px;border-top:1px solid rgba(148,163,184,.22);
  display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--apoio);font-size:13.5px}
@media (max-width:760px){.rodape__grade{grid-template-columns:1fr}}

/* ---------- funcao: texto e TELA REAL, alternando o lado ----------
   O padrao da familia Tex: um problema escrito em uma frase, o que o sistema
   faz em marcadores curtos, e ao lado a tela de verdade. O que ESTAVA aqui era
   uma grade de oito cartoes iguais com icone de contorno, que e a vitrine
   generica que toda pagina feita por maquina tem, e que nao mostra o produto. */
.funcao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center;
  padding:40px 0;border-top:1px solid var(--linha)}
.funcao:first-of-type{border-top:0;padding-top:8px}
.funcao:nth-child(even) .funcao__texto{order:2}
.funcao h3{font-size:clamp(21px,2.2vw,26px)}
.funcao__problema{margin:12px 0 16px;padding-left:14px;border-left:3px solid var(--clara);
  color:var(--texto-fraco);font-size:17px;line-height:1.55}
.funcao__texto ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.funcao__texto li{position:relative;padding-left:26px;color:var(--texto-fraco);font-size:16.5px;line-height:1.5}
.funcao__texto li::before{content:"";position:absolute;left:4px;top:7px;width:7px;height:12px;
  border-right:2.5px solid var(--tinta);border-bottom:2.5px solid var(--tinta);transform:rotate(42deg)}

.tela{margin:0}
.tela__ampliar{position:relative;display:block;border-radius:var(--raio);overflow:hidden;
  border:1px solid var(--linha);box-shadow:var(--sombra);background:var(--cartao)}
.tela__ampliar img{width:100%;height:auto;display:block}
.tela__dica{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;
  min-height:32px;padding:0 12px;border-radius:999px;background:rgba(12,19,34,.82);color:#fff;
  font-size:13px;font-weight:700}
/* Documento e celular sao ALTOS: a imagem inteira em duas colunas empurraria o
   texto para longe. Teto de altura com o topo visivel, e o "Ampliar" abre o
   arquivo grande. */
.tela--documento .tela__ampliar,.tela--fone .tela__ampliar{max-height:560px}
.tela--documento img,.tela--fone img{object-fit:cover;object-position:top center;max-height:560px}
.tela--fone .tela__ampliar{max-width:300px;margin:0 auto}
/* A chamada aparece nas DUAS telas, lado a lado: e a mesma funcao no
   computador e no celular, e mostrar as duas juntas diz isso sem uma linha de
   texto a mais. O celular entra menor, encostado na borda da captura grande. */
.tela--dupla{position:relative}
.tela--dupla .tela__fone{position:absolute;right:-14px;bottom:-26px;width:148px;border-radius:14px;
  border:3px solid var(--cartao);box-shadow:0 14px 34px rgba(12,19,34,.28);overflow:hidden}
.tela--dupla .tela__fone img{max-height:300px;object-fit:cover;object-position:top center}
.tela figcaption{margin-top:12px;color:var(--texto-fraco);font-size:14px}
.tela--dupla figcaption{margin-top:34px}
.tela--larga{margin-top:32px}
@media (max-width:900px){
  .tela--dupla .tela__fone{position:static;width:140px;margin:14px auto 0;display:block}
  .tela--dupla figcaption{margin-top:12px}
}
@media (max-width:900px){
  .funcao{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .funcao:nth-child(even) .funcao__texto{order:0}
  /* No celular a tela entra com o TOPO visivel e altura limitada: dez capturas
     inteiras, uma embaixo da outra, faziam a pagina passar de 24 telas de
     rolagem. Quem quiser ver o resto toca em Ampliar. */
  .tela__ampliar{max-height:360px}
  .tela img{object-fit:cover;object-position:top center;max-height:360px}
  .tela--fone .tela__ampliar{max-width:220px}
}

/* ---------- bloco escuro (como funciona) ---------- */
.bloco--escuro{background:var(--base);color:#e2e8f0}
.bloco--escuro .bloco__titulo{color:#fff}
.bloco--escuro .bloco__apoio{color:#cbd5e1}
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.passo{padding-top:18px;border-top:3px solid var(--primaria)}
.passo h3{font-size:19px;color:#fff;margin-bottom:10px}
.passo p{color:#cbd5e1;font-size:16.5px;line-height:1.6}
@media (max-width:900px){.passos{grid-template-columns:1fr;gap:22px}}

/* ---------- fatos medidos ----------
   Tabela de duas colunas, rotulo com dois-pontos e valor. Nao e cartao: numero
   da casa nao e selo de confianca, e sim medicao com data. */
.fatos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin:0}
.fatos>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 0;border-bottom:1px solid var(--linha)}
.fatos dt{font-weight:700;font-size:16px;color:var(--texto)}
.fatos dd{margin:0;color:var(--texto-fraco);font-size:16px;line-height:1.55}
.fatos strong{color:var(--tinta);font-size:17px}
@media (max-width:820px){.fatos{grid-template-columns:1fr}}

/* ---------- quando nao e a escolha certa ---------- */
.nao-e{margin-top:36px;padding:24px 26px;border-radius:var(--raio);
  background:var(--fundo-2);border:1px solid var(--linha)}
.bloco--claro .nao-e{background:var(--fundo)}
.nao-e h3{font-size:18px;margin-bottom:12px}
.nao-e ul{margin:0;padding-left:20px;color:var(--texto-fraco);font-size:16.5px;line-height:1.6}
.nao-e li+li{margin-top:10px}

/* ---------- canais e lista do contato ---------- */
.contato__lista li{position:relative;padding-left:26px}
.contato__lista li::before{content:"";position:absolute;left:4px;top:5px;width:7px;height:12px;
  border-right:2.5px solid var(--clara);border-bottom:2.5px solid var(--clara);transform:rotate(42deg)}
.contato__canais{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px}
.contato__canais a{display:inline-flex;align-items:center;min-height:44px;color:var(--clara);
  text-decoration:none;font-weight:600;font-size:16px}
.contato__canais a:hover{color:#fff;text-decoration:underline}

/* ---------- marcador das listas de plano ---------- */
.plano li{position:relative;padding-left:24px}
.plano li::before{content:"";position:absolute;left:2px;top:6px;width:6px;height:11px;
  border-right:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(42deg)}

/* ---------- chamada final ---------- */
.final{background:var(--base-2);color:#e2e8f0;padding:64px 0;text-align:center}
.final h2{font-size:clamp(24px,2.8vw,34px);color:#fff;max-width:24ch;margin:0 auto}
.final p{margin-top:14px;color:#cbd5e1;font-size:17.5px;max-width:60ch;margin-left:auto;margin-right:auto}
.final__acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* ---------- rodape: linhas novas ---------- */
.rodape__atualizado{margin-top:10px;color:var(--apoio);font-size:13.5px}
.rodape__credito{margin-top:28px;color:var(--apoio);font-size:13.5px;line-height:1.6}
.rodape p{color:#cbd5e1;line-height:1.6}

/* ---------- documento legal ---------- */
.documento{max-width:780px;margin:0 auto;padding:56px 20px 72px}
.documento h1{font-size:clamp(28px,3.4vw,38px);margin-bottom:8px}
.documento h2{font-size:21px;margin:32px 0 10px}
.documento p,.documento li{color:var(--texto-fraco);font-size:17px}
.documento p+p{margin-top:12px}
.documento ul{padding-left:22px}
.documento li{margin-bottom:8px}
.documento__data{color:var(--texto-fraco);font-size:14.5px;margin-bottom:28px}

@media (pointer:coarse){
  .topo__nav a,.rodape a,.pergunta summary{min-height:44px}
  .topo__nav a,.rodape a{min-width:44px}
}
@media print{.topo,.contato,.rodape{display:none}}