/* Sistema de design do site — cores, tipografia e ritmo.
   Trazido do projeto de desenho da Lovable e reescrito em CSS puro:
   o site e estatico por construcao, sem framework no navegador. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');

:root{
 --tinta:#4a4a4a; --fundo:#fff; --suave:#6f7580;
 --marca:#12448a;                 /* azul institucional */
 --marca-clara:#eaf0f8;
 --superficie:#f4f6f9;            /* fundo de secao alternada */
 --linha:#dde3ec;
 --confirmado:#0d8f86; --pendente:#b56a1f;
 --raio:.375rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);
 font:300 1.0625rem/1.65 Rubik,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
 text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--marca);font-weight:500;line-height:1.25}
strong{font-weight:500;color:#333}
a{color:var(--marca)}
.faixa{max-width:60rem;margin:0 auto;padding:0 1.5rem}

/* --- barra de promessa: o que o site garante, antes de tudo --- */
.promessas{background:var(--marca);color:#fff;font-size:.8125rem;font-weight:400}
.promessas .faixa{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;padding-top:.6rem;padding-bottom:.6rem}
.promessas span{white-space:nowrap;opacity:.95}
.promessas span+span::before{content:"·";margin-right:1.25rem;opacity:.6}

/* --- cabecalho e navegacao --- */
header{border-bottom:1px solid var(--linha);background:var(--fundo)}
header .faixa{padding-top:1.5rem;padding-bottom:0}
.marca{display:inline-block;font-size:1.375rem;font-weight:500;color:var(--marca);
 text-decoration:none;letter-spacing:-.01em}
nav.principal{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin:1.1rem 0 0;padding-bottom:1rem}
nav.principal a{font-size:.95rem;color:var(--tinta);text-decoration:none;padding:.35rem 0;
 border-bottom:2px solid transparent}
nav.principal a:hover{color:var(--marca);border-bottom-color:var(--marca)}

/* --- corpo --- */
main{padding-bottom:1rem}
main .leitura,main>p,main>ul,main>ol,main>table,main>blockquote,main>h2,main>h3{max-width:46rem}
.acima{font-size:.875rem;color:var(--suave);margin:1.75rem 0 .35rem}
.acima a{color:var(--suave)}
h1{font-size:2.25rem;margin:.5rem 0 .35rem;letter-spacing:-.015em}
h1::after{content:"";display:block;width:3.5rem;height:3px;margin-top:.9rem;background:var(--marca)}
h2{font-size:1.375rem;margin:2.75rem 0 .75rem}
h2::after{content:"";display:block;width:3.5rem;height:3px;margin-top:.65rem;background:var(--marca)}
main h3{font-size:1.0625rem;margin:1.75rem 0 .35rem}
.resumo{font-size:1.1875rem;color:#5a5f68;margin:.75rem 0 1.75rem;max-width:46rem;font-weight:300}
.assinatura{font-size:.9375rem;color:var(--suave);margin:0 0 1.75rem}
.assinatura a{font-weight:400}
main p{margin:1.05rem 0}

/* --- capsula de resposta: a conclusao antes do texto --- */
.capsula{background:var(--marca-clara);border-left:4px solid var(--marca);
 padding:1.15rem 1.35rem;border-radius:0 var(--raio) var(--raio) 0;margin:0 0 2rem;
 font-size:1.0625rem;max-width:46rem}
.capsula strong{color:var(--marca);font-weight:500}

/* --- indice de ancoras --- */
ul.indice{list-style:none;padding:0;margin:1.5rem 0 2.5rem;display:flex;flex-wrap:wrap;gap:.5rem;max-width:46rem}
ul.indice li{margin:0}
ul.indice a{display:inline-block;font-size:.9rem;text-decoration:none;
 background:var(--superficie);border:1px solid var(--linha);border-radius:999px;padding:.3rem .85rem}
ul.indice a:hover{border-color:var(--marca)}

/* --- tabela: rola dentro da propria caixa e NUNCA esconde o cabecalho.
   Esconder cabecalho no celular tira informacao de quem le no telefone. --- */
main table{border-collapse:collapse;width:100%;font-size:.9375rem;margin:1.4rem 0;
 display:block;overflow-x:auto;max-width:100%}
main table thead,main table tbody{display:table;width:100%}
main th,main td{border-bottom:1px solid var(--linha);padding:.7rem .8rem;text-align:left;vertical-align:top}
main th{background:var(--superficie);color:var(--marca);font-weight:500;font-size:.875rem;
 border-bottom:2px solid var(--linha);white-space:nowrap}
main tbody tr:hover{background:#fafbfd}

blockquote{margin:1.5rem 0;padding:.85rem 1.25rem;border-left:4px solid var(--linha);
 background:var(--superficie);border-radius:0 var(--raio) var(--raio) 0;max-width:46rem}
blockquote p{margin:0;font-style:italic;color:#5a5f68}
.aviso{border-left:3px solid var(--pendente);padding:.5rem 0 .5rem 1rem;color:var(--pendente);font-size:1rem}
.limite{background:var(--superficie);padding:1rem 1.15rem;border-radius:var(--raio);font-size:1rem}

/* --- rodape --- */
footer{border-top:1px solid var(--linha);background:var(--superficie);margin-top:4rem;
 padding:2.25rem 0 3rem;font-size:.9375rem;color:var(--suave)}
footer a{margin-right:1.25rem;display:inline-block;margin-bottom:.4rem;color:var(--tinta);
 text-decoration:none;font-size:.9375rem}
footer a:hover{color:var(--marca)}
.declaracao{margin-top:1.35rem;font-size:.875rem;max-width:46rem;line-height:1.6}

@media (max-width:640px){
 h1{font-size:1.75rem}
 .faixa{padding:0 1.1rem}
 .promessas{font-size:.75rem}
 nav.principal{gap:.25rem 1.1rem}
}
@media (prefers-color-scheme:dark){
 :root{--tinta:#d8dce2;--fundo:#12161c;--suave:#98a0ab;--marca:#7fa8e0;
  --marca-clara:#1a2333;--superficie:#1a1f27;--linha:#2b3340}
 strong{color:#e8ebef}
 main tbody tr:hover{background:#171c24}
 .resumo,blockquote p{color:#b6bcc5}
}

/* --- PRODUTO NA TELA ---------------------------------------------
   Nasceu em 01/09/2026. O Andre olhou o site e disse: "parece um bloco
   de notas (...) cade a demonstracao dos outros produtos?". Estava certo:
   a pagina nao tinha uma imagem. Estes blocos existem para o produto
   aparecer, e para a PROVA do numero aparecer junto dele.            */
.vitrine{display:grid;gap:18px;margin:34px 0;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.cartao{border:1px solid var(--linha);border-radius:12px;overflow:hidden;
  background:var(--fundo);display:flex;flex-direction:column}
/* fundo branco fixo: a foto do fabricante ja vem em fundo branco, e no
   modo escuro um fundo escuro comeria o contorno do pote. */
.cartao .foto{background:#fff;aspect-ratio:1/1;display:flex;min-height:0;
  align-items:center;justify-content:center;padding:14px}
/* height:100% + object-fit e o que impede a foto de 900 px empurrar o
   cartao para 1.232 px de altura — medido na tela em 01/09/2026. */
.cartao .foto img{width:100%;height:100%;object-fit:contain;display:block}
.cartao .txt{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.cartao .marca-p{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fraco);font-weight:500}
.cartao h3{font-size:1rem;line-height:1.35;margin:0;font-weight:500}
.cartao .numeros{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;
  padding-top:9px;border-top:1px solid var(--linha)}
.cartao .numeros b{display:block;font-size:1.16rem;font-weight:600;color:var(--marca)}
.cartao .numeros span{font-size:.72rem;color:var(--fraco);
  letter-spacing:.05em;text-transform:uppercase}
.cartao .semdado b{color:var(--fraco)}
.cartao .nota-p{font-size:.79rem;color:var(--fraco);line-height:1.45}

/* A PROVA: a foto do rotulo ao lado da frase que ela sustenta. */
figure.prova{margin:30px 0;border:1px solid var(--linha);border-radius:12px;
  overflow:hidden;background:var(--superficie)}
figure.prova img{display:block;width:100%;height:auto}
figure.prova figcaption{padding:13px 16px 15px;font-size:.87rem;line-height:1.55;
  background:var(--fundo);border-top:1px solid var(--linha)}
figure.prova figcaption b{color:var(--marca)}
figure.prova .origem{display:block;margin-top:7px;font-size:.75rem;color:var(--fraco)}
.provas-lado{display:grid;gap:18px;margin:30px 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.provas-lado figure.prova{margin:0}
@media(max-width:520px){.vitrine{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}