/* =====================================================================
   Nowi — site institucional e tema do blog. Sem build, sem dependência
   externa: Manrope self-hosted (OFL), CSS único (copiado para
   blog/theme/site.css por scripts/site-layout.py). Identidade Suave:
   rosa #FF87AE, preto #111111 e off-white #F7F5F0; referência visual
   Clareza (docs/08-identidade-visual.md).
   ===================================================================== */

@font-face{font-family:Manrope;font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/fonts/manrope-variable.woff2?v=20261008) format('woff2')}

:root{
  --papel:#f7f5f0;      /* off-white da marca */
  --superficie:#ffffff;
  --tinta:#111111;      /* preto da marca */
  --tinta-suave:#595853;/* texto secundário: 6,6:1 sobre o papel */
  --rosa:#ff87ae;       /* rosa da marca: superfícies, destaques e o "o" do logo */
  --rosa-forte:#83354f; /* rosa escuro para texto/ênfase: 7,6:1 sobre o papel (AA) */
  --rosa-lavado:#fce1eb;
  --linha:#d6d3cc;
  --fundo-suave:#eeece6;/* painéis sobre o papel */
  --fonte:Manrope,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --medida:36rem;       /* ~65 caracteres */
  --raio:20px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--fonte);
  font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,svg{max-width:100%;height:auto}
a{color:var(--tinta);text-decoration-line:underline;text-decoration-color:var(--rosa);text-decoration-thickness:2px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--tinta)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--tinta);outline-offset:4px;border-radius:4px}
button{font-family:inherit}

h1,h2,h3,.jost{font-family:var(--fonte);font-weight:500}
h1{font-size:clamp(2.4rem,6.2vw,4.5rem);line-height:1.04;letter-spacing:-.06em;margin:0 0 1.1rem}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15;letter-spacing:-.04em;margin:0 0 1.4rem}
h3{font-size:1.2rem;font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:0 0 .35rem}
p{margin:0 0 1.1rem;max-width:var(--medida)}

.wrap{width:min(72rem,100% - 3rem);margin-inline:auto}
@media(max-width:640px){.wrap{width:min(72rem,100% - 2rem)}}


/* botão Entrar: o único elemento cheio de cor na página */
.entrar{
  font-family:var(--fonte);font-weight:400;font-size:.95rem;
  letter-spacing:.09em;text-transform:none;
  background:var(--rosa);color:#000;text-decoration:none;
  padding:.62rem 1.5rem;border-radius:999px;border:1px solid transparent;
  transition:background .15s ease;white-space:nowrap;
}
.entrar:hover{background:var(--rosa-forte);color:#fff}
.entrar.grande{font-size:1.05rem;padding:.85rem 2.1rem}
.secundario{
  font-family:var(--fonte);font-size:1.05rem;
  color:var(--tinta);text-decoration:none;padding:0 0 .22rem;
  border-bottom:1px solid var(--tinta);align-self:center;
}
.secundario:hover{color:var(--rosa-forte);border-color:var(--rosa-forte)}

/* ---------- hero ---------- */
.hero{padding:5.5rem 0 4.5rem}
.hero .wrap{display:grid;grid-template-columns:1fr .92fr;gap:4rem;align-items:center}
.hero p.chamada{font-size:1.2rem;color:var(--tinta-suave);max-width:30rem}
.acoes{display:flex;align-items:center;gap:2rem;margin-top:2.2rem;flex-wrap:wrap}
@media(max-width:900px){
  .hero{padding:3.5rem 0 3rem}
  .hero .wrap{grid-template-columns:1fr;gap:3rem}
}

/* anel desenhado à mão — o gesto do logo, usado como marcador */
.anel{display:inline-block;color:var(--rosa)}
.anel svg{display:block;overflow:visible;transform:rotate(-9deg)}
.canal-item .anel{margin-top:.15rem}

/* ---------- mock da caixa de entrada ---------- */
.caixa{
  background:var(--superficie);border:1px solid var(--linha);border-radius:14px;
  overflow:hidden;position:relative;z-index:1;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.35);
}
.caixa-topo{
  padding:.8rem 1.1rem;border-bottom:1px solid var(--linha);
  font-family:var(--fonte);font-size:.85rem;letter-spacing:.06em;color:var(--tinta-suave);
}
.conversa{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;
  padding:.95rem 1.1rem;border-bottom:1px solid var(--linha);align-items:start;
}
.conversa:last-child{border-bottom:0}
.conversa .quem{font-family:var(--fonte);font-weight:400;font-size:.98rem}
.conversa .texto{font-size:.95rem;color:var(--tinta-suave);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.conversa .canal{
  font-family:var(--fonte);font-size:.72rem;letter-spacing:.08em;
  color:var(--tinta-suave);border:1px solid var(--linha);border-radius:999px;
  padding:.12rem .55rem;margin-left:.5rem;white-space:nowrap;
}
.avatar{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--rosa-lavado);
  display:grid;place-items:center;font-family:var(--fonte);font-size:.85rem}
.conversa.aberta{background:var(--rosa-lavado)}

/* uma única entrada orquestrada, no load */
@media(prefers-reduced-motion:no-preference){
  .caixa .conversa{animation:chega .5s ease both}
  .caixa .conversa:nth-child(2){animation-delay:.10s}
  .caixa .conversa:nth-child(3){animation-delay:.20s}
  .caixa .conversa:nth-child(4){animation-delay:.30s}
  .caixa .conversa:nth-child(5){animation-delay:.40s}
  @keyframes chega{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---------- seções ---------- */
section{padding:4.5rem 0;border-top:1px solid var(--linha)}
.canais{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.6rem 4rem;margin-top:2.5rem}
.canal-item{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.canal-item p{margin:0;color:var(--tinta-suave);font-size:1rem}
@media(max-width:720px){.canais{grid-template-columns:1fr;gap:2rem}}

.passos{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:passo;
  display:grid;grid-template-columns:repeat(3,1fr);gap:3rem}
.passos li{counter-increment:passo;padding-top:1.2rem;border-top:2px solid var(--tinta)}
.passos li::before{content:counter(passo);display:block;
  font-family:var(--fonte);font-weight:500;font-size:2.6rem;line-height:1;
  margin-bottom:.6rem}
.passos p{margin:.3rem 0 0;color:var(--tinta-suave);font-size:1rem}
@media(max-width:720px){.passos{grid-template-columns:1fr;gap:2rem}}

.fecho{text-align:left}
.fecho .acoes{margin-top:1.8rem}

/* ---------- páginas de texto ---------- */
.doc{padding:4rem 0 5rem}
/* páginas de texto: o container encolhe junto com a medida, pra coluna
   parecer composta de propósito e não solta numa página larga */
.doc .wrap{width:min(48rem,100% - 3rem)}
@media(max-width:640px){.doc .wrap{width:min(48rem,100% - 2rem)}}
.doc h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:.6rem}
.doc .data{font-family:var(--fonte);font-size:.9rem;color:var(--tinta-suave);
  margin-bottom:3rem;display:block}
.doc h2{font-size:1.35rem;font-weight:400;margin:2.8rem 0 .9rem;max-width:var(--medida)}
.doc ul{max-width:var(--medida);padding-left:1.1rem}
.doc li{margin-bottom:.5rem}
.doc table{border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.98rem;width:100%;max-width:var(--medida)}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--linha)}
.doc th{font-family:var(--fonte);font-weight:400}


/* =====================================================================
   Páginas de produto (Plataforma, Múltiplas unidades) e ajustes da Home.
   Mesma linguagem: Manrope nos títulos e no texto, o rosa
   só no gesto e na ação principal.
   ===================================================================== */


/* sobretítulo */
.olho{display:block;font-family:var(--fonte);font-weight:400;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-forte);margin-bottom:1rem}

/* abertura das páginas internas */
.abertura{padding:5rem 0 3rem}
.abertura h1{max-width:18ch}
.abertura .chamada{font-size:1.2rem;color:var(--tinta-suave);max-width:36rem}
@media(max-width:900px){.abertura{padding:3.5rem 0 2rem}}

/* capturas reais do produto */
.produto{margin:0}
.produto img{display:block;width:100%;height:auto;background:var(--superficie);
  border:1px solid var(--linha);border-radius:12px;box-shadow:0 18px 40px -30px rgba(0,0,0,.4)}
.produto figcaption{font-family:var(--fonte);font-size:.85rem;line-height:1.5;
  color:var(--tinta-suave);margin-top:.85rem;max-width:40rem}
.produto figcaption .rotulo{display:block;font-size:.78rem;letter-spacing:.04em;margin-top:.15rem}
.vitrine{padding:0 0 4.5rem;border-top:0}
.vitrine .produto{margin-top:.5rem}

/* texto + imagem, alternando lados */
.bloco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.5rem;align-items:center}
.bloco.inverte .bloco-texto{order:2}
.bloco .produto.retrato{max-width:25rem;justify-self:center;width:100%}
.bloco-texto h2{margin-bottom:1rem}
.bloco-texto p{color:var(--tinta-suave)}
.bloco-largo .produto{margin-top:2.4rem}
@media(max-width:900px){
  .bloco{grid-template-columns:1fr;gap:2.4rem}
  .bloco.inverte .bloco-texto{order:0}
}

/* lista com o anel do logo como marcador */
.itens{list-style:none;margin:1.4rem 0 0;padding:0;max-width:var(--medida)}
.itens li{position:relative;padding-left:1.7rem;margin-bottom:.8rem;color:var(--tinta)}
.itens li::before{content:"";position:absolute;left:0;top:.5em;width:.72rem;height:.72rem;
  border:2px solid var(--rosa);border-radius:50%;transform:rotate(-9deg)}
.itens strong{font-family:var(--fonte);font-weight:400}

/* exemplo de organização por unidade */
.unidades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:2.4rem}
.unidade{background:var(--superficie);border:1px solid var(--linha);border-radius:12px;padding:1.4rem 1.5rem}
.unidade h3{margin-bottom:.8rem}
.unidade ul{list-style:none;margin:0;padding:0;font-size:.98rem;color:var(--tinta-suave)}
.unidade li{padding:.45rem 0;border-top:1px solid var(--linha)}
.unidade .quem{font-family:var(--fonte);font-size:.85rem;color:var(--tinta);margin-top:1rem}
@media(max-width:900px){.unidades{grid-template-columns:1fr}}

/* perguntas frequentes */
.faq{max-width:48rem;margin-top:2rem;border-bottom:1px solid var(--linha)}
.faq details{border-top:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--fonte);font-weight:400;font-size:1.1rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.95rem;font-weight:500;font-size:1.6rem;
  color:var(--rosa-forte);transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--tinta-suave);margin:0 0 1.3rem}

/* chamada final com ação de demonstração */
.fecho .apoio{color:var(--tinta-suave);font-size:.95rem;margin-top:1.4rem}

/* ponte entre páginas */
.ponte{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4rem;align-items:center}
@media(max-width:900px){.ponte{grid-template-columns:1fr;gap:2.4rem}}

.exemplo{margin-top:1.2rem;color:var(--tinta-suave);font-size:.95rem}
.continuar{margin-top:1.6rem;font-family:var(--fonte)}
#por-dentro .produto{margin-top:2.4rem}
.unidade{display:flex;flex-direction:column}
.unidade .quem{margin-top:auto;padding-top:1rem}
/* no celular, a abertura já mostra esta mesma conversa */
@media(max-width:640px){.so-largo{display:none}}


/* =====================================================================
   Planos
   ===================================================================== */
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:1rem;align-items:stretch}
.plano{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;padding:2rem 1.8rem;
  display:flex;flex-direction:column}
.plano.destaque{border:2px solid var(--rosa);box-shadow:0 18px 40px -30px rgba(0,0,0,.4)}
.plano .selo{align-self:flex-start;font-family:var(--fonte);font-size:.78rem;letter-spacing:.08em;
  background:var(--rosa-lavado);border-radius:999px;padding:.2rem .7rem;margin-bottom:1rem}
.plano h2{font-size:1.9rem;margin:0 0 .3rem}
.plano .para{color:var(--tinta-suave);font-size:.98rem;min-height:3.2em;margin-bottom:1.4rem}
.plano .volume{font-family:var(--fonte);font-weight:500;font-size:2.1rem;line-height:1.1;margin:0}
.plano .volume-legenda{font-family:var(--fonte);font-size:.85rem;color:var(--tinta-suave);margin:.2rem 0 1.4rem}
.plano .preco{font-family:var(--fonte);font-size:1.05rem;border-top:1px solid var(--linha);
  padding-top:1.1rem;margin:0 0 1.4rem}
.plano .itens{margin-top:0;margin-bottom:1.8rem}
.plano .itens li{font-size:.98rem}
.plano .acao{margin-top:auto}
.plano .acao a{display:inline-block}
@media(max-width:960px){.planos{grid-template-columns:1fr;max-width:32rem}}

.incluso{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem;margin-top:2.4rem}
.incluso h3{margin-bottom:.4rem}
.incluso p{color:var(--tinta-suave);font-size:1rem;margin:0}
@media(max-width:900px){.incluso{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.incluso{grid-template-columns:1fr}}

.definicao{background:var(--superficie);border:1px solid var(--linha);border-left:3px solid var(--rosa);
  border-radius:0 12px 12px 0;padding:1.4rem 1.6rem;max-width:44rem}
.definicao p{margin:0;max-width:none}
.definicao p + p{margin-top:.7rem;color:var(--tinta-suave);font-size:.98rem}

/* =====================================================================
   Blog: listagem e artigo
   ===================================================================== */
.cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:2rem}
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;padding:1.8rem;
  display:flex;flex-direction:column;position:relative}
.cartao.grande{grid-column:1 / -1;padding:2.4rem 2.4rem 2.2rem}
.cartao .categoria{font-family:var(--fonte);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rosa-forte)}
.cartao h3{font-size:1.45rem;font-weight:500;margin:.6rem 0 .7rem}
.cartao.grande h3{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.cartao h3 a{color:var(--tinta);text-decoration:none}
.cartao h3 a::after{content:"";position:absolute;inset:0;border-radius:14px}
.cartao:hover{border-color:var(--rosa)}
.cartao:focus-within{outline:2px solid var(--rosa-forte);outline-offset:3px}
.cartao h3 a:focus-visible{outline:none}
.cartao p{color:var(--tinta-suave);font-size:1rem}
.cartao time{font-family:var(--fonte);font-size:.85rem;color:var(--tinta-suave);margin-top:auto}
@media(max-width:760px){.cartoes{grid-template-columns:1fr}.cartao.grande{padding:1.8rem}}

.trilha{font-family:var(--fonte);font-size:.88rem;color:var(--tinta-suave);margin-bottom:1.6rem}
.trilha ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.trilha li+li::before{content:"/";margin-right:.4rem;color:var(--linha)}
.trilha a{color:var(--tinta-suave)}

.artigo{padding:4rem 0 4.5rem}
.artigo-grade{display:grid;grid-template-columns:minmax(0,44rem) minmax(0,15rem);gap:4.5rem;justify-content:space-between}
.artigo-cabeca{max-width:44rem}
.artigo-cabeca h1{font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.1;margin:.5rem 0 1.2rem}
.artigo-cabeca .resumo{font-size:1.22rem;line-height:1.55;color:var(--tinta-suave);max-width:none}
.assinatura{display:flex;align-items:center;gap:.9rem;margin:2rem 0 2.6rem;padding:1.1rem 0;
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);font-family:var(--fonte);font-size:.92rem}
.assinatura .avatar{width:2.6rem;height:2.6rem;font-size:.95rem}
.assinatura .datas{color:var(--tinta-suave);font-size:.85rem}
.corpo{max-width:44rem}
.corpo p,.corpo ul,.corpo ol{max-width:none}
.corpo h2{font-size:clamp(1.5rem,2.8vw,1.95rem);margin:3rem 0 1rem;scroll-margin-top:1.5rem}
.corpo h3{margin:2rem 0 .6rem}
.corpo ul,.corpo ol{padding-left:1.3rem;margin:0 0 1.3rem}
.corpo li{margin-bottom:.55rem}
.corpo li::marker{color:var(--rosa-forte)}
.corpo table{border-collapse:collapse;width:100%;margin:1.4rem 0 1.8rem;font-size:.97rem;background:var(--superficie);
  border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.corpo th,.corpo td{text-align:left;vertical-align:top;padding:.75rem .9rem;border-bottom:1px solid var(--linha)}
.corpo th{font-family:var(--fonte);font-weight:400;background:#f1eee8}
.corpo tr:last-child td{border-bottom:0}
.tabela-rolagem{overflow-x:auto;margin:1.4rem 0 1.8rem}
.tabela-rolagem table{margin:0;min-width:32rem}
.corpo .quadro{background:var(--superficie);border:1px solid var(--linha);border-left:3px solid var(--rosa);
  border-radius:0 12px 12px 0;padding:1.3rem 1.5rem;margin:1.8rem 0}
.corpo .quadro h3{margin-top:0}
.corpo .quadro ul{margin-bottom:0}
.corpo .checklist{list-style:none;padding-left:0}
.corpo .checklist li{position:relative;padding-left:1.8rem}
.corpo .checklist li::before{content:"";position:absolute;left:0;top:.35em;width:1rem;height:1rem;
  border:1.5px solid var(--tinta);border-radius:3px}

.sumario{position:sticky;top:1.5rem;align-self:start;font-family:var(--fonte);font-size:.92rem}
.sumario h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin:0 0 .9rem;color:var(--tinta-suave)}
.sumario ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--linha)}
.sumario li{margin:0}
.sumario a{display:block;padding:.4rem 0 .4rem 1rem;color:var(--tinta);text-decoration:none;line-height:1.35}
.sumario a:hover{color:var(--rosa-forte)}
.sumario-movel{display:none;margin:0 0 2rem;background:var(--superficie);border:1px solid var(--linha);border-radius:12px}
.sumario-movel summary{cursor:pointer;padding:1rem 1.2rem;font-family:var(--fonte)}
.sumario-movel ol{margin:0 1.2rem 1.2rem;padding-left:1.1rem;font-family:var(--fonte);font-size:.95rem}
.sumario-movel li{margin-bottom:.4rem}
@media(max-width:1000px){
  .artigo-grade{grid-template-columns:minmax(0,1fr)}
  .sumario{display:none}
  .sumario-movel{display:block}
}

.fontes{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--linha);font-size:.95rem}
.fontes h2{font-size:1.2rem;margin:0 0 .8rem}
.fontes ol{padding-left:1.2rem;color:var(--tinta-suave)}
.fontes li{margin-bottom:.4rem;word-break:break-word}
.convite{margin-top:3rem;background:var(--rosa-lavado);border-radius:14px;padding:2rem 2rem 2.2rem}
.convite h2{font-size:1.6rem;margin:0 0 .6rem}
.convite p{color:var(--tinta)}
.convite .acoes{margin-top:1.4rem}
.autor{display:grid;grid-template-columns:auto 1fr;gap:1rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--linha)}
.autor .avatar{width:3.2rem;height:3.2rem;font-size:1.05rem}
.autor strong{font-family:var(--fonte);font-weight:400;display:block}
.autor p{margin:.2rem 0 0;color:var(--tinta-suave);font-size:.97rem}
.relacionados{border-top:1px solid var(--linha);padding:4rem 0}
.aviso-rascunho{background:#fff6d6;border:1px solid #e9d27a;border-radius:10px;padding:.9rem 1.2rem;
  font-family:var(--fonte);font-size:.92rem;margin-bottom:2rem}
.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.corpo .fontes{padding:1.6rem 0 0;margin-top:3.2rem;border-top:1px solid var(--linha)}
.lista-artigos{padding-top:0;border-top:0}

/* =====================================================================
   Hero tipográfico (Home)
   ===================================================================== */
.hero-tipo{padding:4.5rem 0 0}
.hero-tipo .wrap{display:block}
.hero-tipo h1{font-size:clamp(2.9rem,7.2vw,6.5rem);line-height:1.04;letter-spacing:.005em;margin:0}
.hero-base{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;margin-top:2.6rem;flex-wrap:wrap}
.hero-base .chamada{margin:0;max-width:33rem}
.hero-base .acoes{margin-top:0}
.hero-canais{display:flex;align-items:center;gap:1.6rem;margin:3rem 0 0;max-width:none;
  font-family:var(--fonte);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.hero-canais .linha{flex-grow:1;height:1px;background:var(--linha)}
.hero-produto{margin-top:2.2rem}
.hero-produto img{border-radius:14px 14px 0 0;box-shadow:0 -12px 40px -30px rgba(0,0,0,.5)}
.hero-produto figcaption{margin-bottom:0}
@media(max-width:900px){
  .hero-tipo{padding-top:3rem}
  .hero-tipo .quebra{display:none}
  .hero-base{margin-top:1.8rem;gap:2rem}
}
@media(max-width:640px){
  .hero-canais{flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:2.2rem}
  .hero-canais .linha{display:none}
  .hero-produto img{border-radius:12px}
}

/* comparativo de planos */
.comparativo{position:relative;overflow-x:auto;margin-top:1rem;background:var(--superficie);border:1px solid var(--linha);border-radius:14px}
.comparativo table{width:100%;min-width:44rem;border-collapse:collapse;font-size:.98rem}
.comparativo th,.comparativo td{text-align:left;vertical-align:top;padding:.85rem 1.1rem;border-bottom:1px solid var(--linha)}
.comparativo thead th{font-family:var(--fonte);font-weight:400;font-size:1.15rem;padding-top:1.2rem;padding-bottom:1.2rem;width:22%}
.comparativo thead th:nth-child(3){color:var(--rosa-forte)}
.comparativo tbody th[scope="row"]{font-weight:400;color:var(--tinta);width:34%}
.comparativo td{color:var(--tinta-suave)}
.comparativo tr.grupo th{font-family:var(--fonte);font-weight:400;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);background:#f1eee8;padding-top:.7rem;padding-bottom:.7rem}
.comparativo tbody:last-child tr:last-child th,.comparativo tbody:last-child tr:last-child td{border-bottom:0}
.comparativo .sim{display:inline-block;width:1.25rem;height:1.25rem;color:var(--rosa-forte)}
.comparativo .sim svg{display:block;width:100%;height:100%}
.comparativo .nao{color:#9a9a9a}
.definicoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.definicoes .definicao{max-width:none}
@media(max-width:900px){.definicoes{grid-template-columns:1fr}}

/* =====================================================================
   Navegação (set/2026): submenus por clique e teclado, menu do celular.
   Marcação gerada por scripts/site-layout.py; comportamento em /menu.js.
   ===================================================================== */
.pular{position:absolute;left:1rem;top:-4rem;z-index:20;background:var(--tinta);color:#fff;
  font-family:var(--fonte);padding:.6rem 1rem;border-radius:8px;text-decoration:none}
.pular:focus{top:.8rem}
.topo{position:relative;z-index:10;padding:1.1rem 0;border-bottom:1px solid var(--linha);background:var(--papel)}
.topo .wrap{display:flex;align-items:center;gap:1.6rem}
.marca{display:block;line-height:0}
.marca img{width:112px}
.menu{margin-left:auto;display:flex;align-items:center;gap:1.6rem;
  font-family:var(--fonte);font-weight:400;font-size:.97rem}
.menu ul{list-style:none;margin:0;padding:0}
.menu-paginas{display:flex;align-items:center;gap:.2rem}
.menu-paginas > li{position:relative;display:flex;align-items:center}
.menu-paginas > li > a,.sub-botao.com-rotulo{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .6rem}
.menu a{color:var(--tinta);text-decoration:none}
.menu a:hover{text-decoration:underline;text-decoration-color:var(--rosa);text-decoration-thickness:2px}
.menu a[aria-current],.tem-sub.atual > a,.tem-sub.atual > .com-rotulo{text-decoration:underline;
  text-decoration-color:var(--rosa);text-decoration-thickness:2px;text-underline-offset:.35em}
.menu-acoes{display:flex;align-items:center;gap:1.2rem}
.menu-acoes .sair{padding:.6rem .2rem;white-space:nowrap}
.menu .entrar{color:#000}
.menu .entrar:hover,.topo-acao:hover{color:#fff;text-decoration:none}

/* botão do submenu: só a seta quando acompanha um link; seta + texto em Recursos */
.sub-botao{font:inherit;color:var(--tinta);background:none;border:0;cursor:pointer;
  min-height:2.75rem;min-width:2rem;padding:0 .35rem;display:inline-flex;align-items:center;gap:.35rem;border-radius:6px}
.sub-botao::after{content:"";width:.42rem;height:.42rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:translateY(-.15rem) rotate(45deg);transition:transform .15s ease}
.sub-botao[aria-expanded="true"]::after{transform:translateY(.1rem) rotate(-135deg)}
.sub-botao:hover{color:var(--rosa-forte)}
.tem-sub > a{padding-right:.1rem}

.submenu{position:absolute;top:100%;left:0;min-width:15.5rem;background:var(--superficie);
  border:1px solid var(--linha);border-radius:12px;padding:.45rem;box-shadow:0 18px 40px -24px rgba(0,0,0,.35);display:none}
.submenu a{display:block;padding:.6rem .8rem;border-radius:8px;line-height:1.3}
.submenu a:hover{background:var(--rosa-lavado);text-decoration:none}
.submenu a[aria-current]{background:var(--rosa-lavado);text-decoration:none}
/* sem JS: abre por hover/foco. Com JS: só pelo botão */
html:not(.js) .tem-sub:hover > .submenu,html:not(.js) .tem-sub:focus-within > .submenu{display:block}
.js .sub-botao[aria-expanded="true"] + .submenu{display:block}

.menu-botao,.topo .topo-acao{display:none}

@media(min-width:960px) and (max-width:1120px){
  .topo .wrap{gap:1rem}.menu{gap:.9rem;font-size:.93rem}
  .menu-paginas > li > a,.sub-botao.com-rotulo{padding:0 .4rem}
}

@media(max-width:959px){
  .topo{padding:.75rem 0}
  .topo .wrap{flex-wrap:wrap;gap:.6rem 1rem}
  .marca{margin-right:auto}
  .marca img{width:96px}
  .topo .topo-acao{display:inline-block;padding:.5rem 1rem;font-size:.9rem;letter-spacing:.04em;min-height:2.75rem;line-height:1.7}
  .menu-botao{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .8rem;
    font:400 .95rem var(--fonte);color:var(--tinta);background:var(--superficie);
    border:1px solid var(--linha);border-radius:999px;cursor:pointer}
  .menu-icone,.menu-icone::before,.menu-icone::after{display:block;width:1rem;height:1.5px;background:currentColor;
    position:relative;transition:transform .15s ease,background .15s ease}
  .menu-icone::before,.menu-icone::after{content:"";position:absolute;left:0}
  .menu-icone::before{top:-5px}.menu-icone::after{top:5px}
  .menu-botao[aria-expanded="true"] .menu-icone{background:transparent}
  .menu-botao[aria-expanded="true"] .menu-icone::before{transform:translateY(5px) rotate(45deg)}
  .menu-botao[aria-expanded="true"] .menu-icone::after{transform:translateY(-5px) rotate(-45deg)}

  .menu{width:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;font-size:1.05rem}
  .js .menu{display:none}
  .js .topo.aberto .menu{display:flex}
  .menu-paginas{flex-direction:column;align-items:stretch;gap:0;padding:.4rem 0 0}
  .menu-paginas > li{flex-wrap:wrap;border-top:1px solid var(--linha)}
  .menu-paginas > li > a,.sub-botao.com-rotulo{flex:1;min-height:3rem;padding:0 .2rem}
  .sub-botao{min-height:3rem;min-width:3rem;justify-content:center}
  .sub-botao.com-rotulo{justify-content:space-between;width:100%}
  .submenu{position:static;display:block;width:100%;min-width:0;border:0;box-shadow:none;background:none;padding:0 0 .6rem .9rem}
  .js .submenu{display:none}
  .submenu a{padding:.65rem .6rem;min-height:2.75rem}
  .menu-acoes{border-top:1px solid var(--linha);padding:1rem 0 .6rem;justify-content:space-between}
  .menu-acoes .entrar{padding:.7rem 1.4rem}
}
@media(max-width:359px){
  .topo .wrap{gap:.5rem}
  .marca img{width:84px}
  .topo .topo-acao{padding:.45rem .8rem;font-size:.85rem;letter-spacing:.02em}
  .menu-botao{padding:0 .75rem}
  .menu-rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:3.2rem 0 3.6rem;font-size:.95rem}
.rodape .wrap{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:2.4rem 4rem}
.rodape-marca p{color:var(--tinta-suave);font-size:.95rem;margin:1rem 0 0}
.rodape-grupos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;font-family:var(--fonte)}
.rodape-grupos h2{font-size:.78rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);margin:0 0 .8rem}
.rodape-grupos ul{list-style:none;margin:0;padding:0}
.rodape-grupos li{margin:0}
.rodape-grupos a{display:inline-block;padding:.3rem 0;color:var(--tinta);text-decoration:none;font-size:.95rem;line-height:1.35}
.rodape-grupos a:hover{text-decoration:underline;text-decoration-color:var(--rosa)}
.rodape .legal{grid-column:1 / -1;border-top:1px solid var(--linha);padding-top:1.4rem;color:var(--tinta-suave);font-size:.88rem}
.rodape .legal p{margin:0 0 .35rem;max-width:48rem}
@media(max-width:900px){.rodape .wrap{grid-template-columns:1fr}.rodape-grupos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.rodape-grupos{grid-template-columns:1fr}}

/* =====================================================================
   Refinos de leitura (set/2026): títulos menores mais pesados,
   aberturas mais baixas, produto mais cedo na home.
   ===================================================================== */
h2{font-weight:500;font-size:clamp(1.45rem,2.9vw,2.05rem)}
.cartao h3,.cartao.grande h3{font-weight:400}
.cartao.grande h3{font-size:clamp(1.5rem,2.8vw,2rem)}
.plano h2{font-weight:500}
.abertura{padding:3.2rem 0 2.2rem}
.abertura h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:20ch;margin-bottom:.9rem}
.abertura .acoes{margin-top:1.6rem}
@media(max-width:900px){.abertura{padding:2.2rem 0 1.6rem}}
section{padding:4rem 0}
@media(max-width:640px){section{padding:3rem 0}}

.categoria-produto{display:block;font-family:var(--fonte);font-weight:400;font-size:.9rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-forte);margin:0 0 1rem}
.hero-tipo{padding:3rem 0 0}
.hero-tipo h1{font-size:clamp(2.5rem,6vw,5rem)}
.hero-base{margin-top:1.6rem}
.hero-canais{margin-top:2rem}
.hero-produto{margin-top:1.6rem}
@media(max-width:900px){.hero-tipo{padding-top:2rem}.hero-base{margin-top:1.2rem}}
@media(max-width:640px){.hero-base .acoes{gap:1.2rem 1.6rem}}

/* botões: alvo de toque confortável */
.entrar{display:inline-block;min-height:2.75rem;line-height:1.5}
.entrar.grande{min-height:3rem}
.secundario{min-height:2.75rem;display:inline-flex;align-items:flex-end}

/* =====================================================================
   Planos: comparação no celular
   ===================================================================== */
.comparativo-dica{display:none;font-family:var(--fonte);font-size:.88rem;color:var(--tinta-suave);margin:0 0 .6rem}
.comparativo tbody th[scope="row"],.comparativo thead td{position:sticky;left:0;z-index:1;background:var(--superficie)}
.comparativo .explica{display:block;font-size:.85rem;color:var(--tinta-suave);margin-top:.2rem;line-height:1.4}
@media(max-width:760px){
  .comparativo-dica{display:block}
  .comparativo table{min-width:31rem;font-size:.9rem;table-layout:fixed}
  .comparativo th,.comparativo td{padding:.7rem .65rem}
  .comparativo thead th{width:auto;font-size:1rem}
  .comparativo thead td,.comparativo tbody th[scope="row"]{width:8.6rem;box-shadow:1px 0 0 var(--linha)}
  .comparativo tr.grupo th{width:auto}
}
.definicoes-perto{margin-top:1.8rem}

/* =====================================================================
   Páginas novas: demonstração, ajuda, sobre
   ===================================================================== */
.trilha-topo{padding-top:1.4rem}
.trilha-topo .trilha{margin-bottom:0}

.duas-colunas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4rem;align-items:start}
@media(max-width:900px){.duas-colunas{grid-template-columns:1fr;gap:2.4rem}}

.cartao-form{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;padding:2rem}
@media(max-width:640px){.cartao-form{padding:1.4rem}}
.cartao-form h2{margin-bottom:.6rem}
.campo{margin:0 0 1.2rem}
.campo label{display:block;font-family:var(--fonte);font-size:.97rem;margin-bottom:.35rem}
.campo .opcional{color:var(--tinta-suave);font-size:.85rem}
.campo input,.campo textarea,.campo select{width:100%;font:inherit;font-size:1rem;color:var(--tinta);
  background:#fff;border:1px solid #8a8a8a;border-radius:8px;padding:.7rem .8rem;min-height:2.9rem}
.campo textarea{min-height:7rem;resize:vertical}
.campo input:focus-visible,.campo textarea:focus-visible,.campo select:focus-visible{outline:2px solid var(--rosa-forte);outline-offset:1px}
.campo [aria-invalid="true"]{border-color:#b3261e;border-width:2px}
.campo .erro{display:block;color:#b3261e;font-family:var(--fonte);font-size:.88rem;margin-top:.35rem}
.campo .erro:empty{display:none}
.form-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.4rem}
button.entrar{cursor:pointer;font-size:1.05rem;padding:.85rem 2.1rem}
.nota-form{font-size:.92rem;color:var(--tinta-suave);margin:1.2rem 0 0;max-width:none}
.estado{border-radius:10px;padding:1rem 1.2rem;margin:0 0 1.4rem;font-family:var(--fonte);font-size:.97rem}
.estado:empty{display:none}
.estado.erro{background:#fdecea;border:1px solid #f2b8b5;color:#5c1410}
.estado.ok{background:#eaf6ee;border:1px solid #a9d8b8;color:#0f3d1f}
.estado.info{background:var(--rosa-lavado);border:1px solid #f6c3d5}
.estado ul{margin:.4rem 0 0;padding-left:1.1rem}
.estado a{color:inherit}

.lista-numerada{counter-reset:item;list-style:none;margin:1.4rem 0 0;padding:0;max-width:var(--medida)}
.lista-numerada li{counter-increment:item;position:relative;padding-left:2.4rem;margin-bottom:1.1rem}
.lista-numerada li::before{content:counter(item);position:absolute;left:0;top:-.05rem;width:1.7rem;height:1.7rem;
  border:1.5px solid var(--rosa);border-radius:50%;display:grid;place-items:center;
  font-family:var(--fonte);font-size:.9rem}

/* ajuda */
.ajuda-grupos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:1.6rem}
@media(max-width:760px){.ajuda-grupos{grid-template-columns:1fr}}
.ajuda-grupo{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;padding:1.6rem 1.8rem}
.ajuda-grupo h2{font-size:1.35rem;margin:0 0 .4rem}
.ajuda-grupo > p{color:var(--tinta-suave);font-size:.98rem}
.ajuda-grupo ul{list-style:none;margin:.8rem 0 0;padding:0}
.ajuda-grupo li{border-top:1px solid var(--linha)}
.ajuda-grupo li a{display:block;padding:.75rem 0;font-family:var(--fonte);color:var(--tinta);text-decoration:none}
.ajuda-grupo li a:hover{color:var(--rosa-forte)}
.ajuda-grupo li span{display:block;font-family:var(--fonte);font-size:.93rem;color:var(--tinta-suave);margin-top:.1rem}
.guia .corpo h2{font-size:1.45rem;margin:2.4rem 0 .8rem}
.guia .quadro p:last-child{margin-bottom:0}
.guia-meta{font-family:var(--fonte);font-size:.9rem;color:var(--tinta-suave);margin:1.2rem 0 2rem;
  padding:.9rem 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);max-width:none}
.corpo .produto{margin:1.6rem 0 2rem}
.corpo .produto.retrato{max-width:22rem}
.ampliar{font-family:var(--fonte);font-size:.85rem}

/* sobre */
.parceiros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:2rem}
@media(max-width:760px){.parceiros{grid-template-columns:1fr}}
.parceiro{background:var(--superficie);border:1px solid var(--linha);border-radius:14px;padding:1.8rem;display:flex;flex-direction:column;gap:.8rem}
.parceiro h3{font-size:1.35rem;margin:0}
.parceiro p{color:var(--tinta-suave);margin:0}
.logo-slot{height:4.5rem;display:flex;align-items:center}
.pendente{border:1.5px dashed #c9a23a;background:#fffaf0;border-radius:12px;padding:1rem 1.2rem;
  font-family:var(--fonte);font-size:.9rem;color:#5b4507}
.pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1.6rem;margin-top:2rem}
.pessoa .foto{aspect-ratio:4/5;border-radius:12px;display:grid;place-items:center;text-align:center;padding:1rem}
.espaco-acima{margin-top:2.6rem}
/* rótulos longos quebram linha em telas estreitas */
.plano .acao a,button.entrar{white-space:normal;text-align:center}
.duas-colunas > *{min-width:0}
@media(max-width:400px){.plano{padding:1.6rem 1.3rem}.cartao-form{padding:1.2rem}.entrar.grande{padding:.85rem 1.5rem}}
.comparativo tr.grupo th span{position:sticky;left:1.1rem}
/* logos oficiais dos canais (kits da Meta): pequenos, ao lado do nome, sem competir com a marca */
.canal-logo{display:block;width:28px;height:28px;margin-top:.1rem}

/* Soluções: disclosure agrupado, usando o mesmo menu acessível. */
.submenu-solucoes{min-width:19rem}
.solucoes-grupo > span{display:block;font-size:.75rem;letter-spacing:.045em;color:var(--tinta-suave);padding:.8rem .8rem .25rem}
.solucoes-grupo + .solucoes-grupo{border-top:1px solid var(--linha);margin-top:.4rem}
@media(min-width:960px) and (max-width:1120px){
  .menu-acoes{gap:.6rem}.menu-acoes .entrar{padding:.62rem .8rem;letter-spacing:.01em;font-size:.9rem}
  .topo .wrap{gap:.7rem}.menu{gap:.7rem}
}
@media(max-width:959px){.submenu-solucoes{min-width:0}}

/* =====================================================================
   Identidade Suave · referência Clareza (out/2026)
   Camada compartilhada: botões, títulos, cabeçalho, rodapé, formulários,
   cartões e estados de interação. Vale para o site e para o tema do blog.
   ===================================================================== */
::selection{background:var(--rosa);color:var(--tinta)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:min(1328px,100% - 7rem)}
@media(max-width:1100px){.wrap{width:min(1328px,100% - 4rem)}}
@media(max-width:640px){.wrap{width:min(1328px,100% - 2.5rem)}}
.doc .wrap{width:min(48rem,100% - 3rem)}
@media(max-width:640px){.doc .wrap{width:min(48rem,100% - 2.5rem)}}
section{border-top:1px solid var(--linha)}

/* sobretítulo: ponto rosa + texto neutro (o rosa não é cor de texto pequeno) */
.olho,.categoria-produto{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:1.1rem}
.olho::before,.categoria-produto::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--rosa)}
.cartao .categoria{color:var(--tinta-suave);font-weight:700}

/* botões: pílula preta; seta que acompanha o destino */
.entrar,button.entrar{display:inline-flex;align-items:center;justify-content:center;gap:1.1rem;min-height:3rem;
  font-weight:600;font-size:.9rem;letter-spacing:0;line-height:1.3;
  background:var(--tinta);color:var(--papel);border:1px solid var(--tinta);border-radius:999px;
  padding:.8rem 1.4rem;text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.entrar::after{content:"↗";content:"↗" / "";font-size:1.25rem;line-height:1;transition:transform .2s var(--ease)}
.entrar:hover{background:transparent;color:var(--tinta);transform:translateY(-2px)}
.entrar:hover::after{transform:translate(2px,-2px)}
.entrar.grande,button.entrar{font-size:.95rem;min-height:3.25rem;padding:.9rem 1.6rem}
.entrar.sem-seta::after,.topo-acao.entrar::after{display:none}
.escuro .entrar,.closing-dark .entrar{background:var(--rosa);border-color:var(--rosa);color:var(--tinta)}
.escuro .entrar:hover,.closing-dark .entrar:hover{background:var(--papel);border-color:var(--papel);color:var(--tinta)}
.secundario{font-weight:600;font-size:.9rem;gap:.9rem;align-items:center;padding:.5rem 0;border-bottom:1px solid currentColor;text-decoration:none}
.secundario:hover{color:var(--rosa-forte);border-color:currentColor}
.escuro :focus-visible,.closing-dark :focus-visible{outline-color:var(--rosa)}

/* cabeçalho: leve, sem faixa; o submenu e o menu móvel mantêm o padrão acessível */
.topo{padding:1.35rem 0;border-bottom:0;background:var(--papel)}
.topo .wrap{gap:2rem}
.marca{display:block;line-height:0;border-radius:6px}
.marca img{width:140px;height:auto}
.menu{font-weight:500;font-size:.85rem}
.menu-paginas{gap:.1rem}
.menu a{text-decoration:none;position:relative}
.menu-paginas > li > a::after,.sub-botao.com-rotulo::before{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.55rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.sub-botao.com-rotulo{position:relative;font-weight:500}
.sub-botao.com-rotulo::before{bottom:.55rem}
.menu-paginas > li > a:hover::after,.sub-botao.com-rotulo:hover::before,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a:hover{text-decoration:none}
.menu a[aria-current],.tem-sub.atual > a,.tem-sub.atual > .com-rotulo{text-decoration:none}
.tem-sub.atual > .com-rotulo::before,.tem-sub.atual > a::after{transform:scaleX(1)}
.menu-paginas > li > a[aria-current]::after{background:var(--tinta);height:2px}
.menu .sair{font-weight:600;display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem}
.menu .sair::after{content:"↗";content:"↗" / "";font-size:.95rem}
.menu .sair:hover{text-decoration:underline;text-decoration-color:var(--rosa);text-decoration-thickness:2px}
.menu .entrar{color:var(--papel);font-size:.82rem;padding:.7rem 1.15rem;min-height:2.9rem}
.menu .entrar:hover,.topo-acao:hover{color:var(--tinta);text-decoration:none}
.sub-botao{color:var(--tinta)}
.sub-botao:hover{color:var(--rosa-forte)}
.submenu{border-radius:16px;border-color:var(--linha);box-shadow:0 18px 40px -26px rgba(17,17,17,.35);padding:.5rem}
.submenu a{border-radius:10px;font-weight:500}
.submenu a::after{display:none}
.submenu a:hover,.submenu a[aria-current]{background:var(--rosa-lavado)}
.pular{background:var(--tinta);color:var(--papel);font-weight:600;border-radius:999px}
.topo .topo-acao.entrar{font-size:.8rem}

@media(max-width:959px){
  .topo{padding:.8rem 0}
  .marca img{width:118px}
  .menu-botao{font:600 .85rem var(--fonte);background:transparent;border:1px solid var(--tinta);color:var(--tinta);padding:0 1rem}
  .js .topo.aberto .menu{background:var(--papel)}
  .menu-paginas > li > a::after,.sub-botao.com-rotulo::before{display:none}
  .menu{font-size:1rem}
  .menu-paginas > li{border-top:1px solid var(--linha)}
  .menu .entrar{font-size:.9rem}
}
@media(max-width:359px){.marca img{width:100px}}

/* rodapé */
.rodape{border-top:1px solid var(--linha);padding:3.5rem 0 3.8rem;font-size:.9rem;background:var(--papel)}
.rodape-marca .marca img{width:132px}
.rodape-marca p{color:var(--tinta-suave);font-size:.88rem;margin:1.1rem 0 0}
.rodape-grupos h2{font-size:.72rem;font-weight:700;letter-spacing:.14em;margin:0 0 .8rem;color:var(--tinta-suave);text-transform:uppercase}
.rodape-grupos a{font-weight:500;font-size:.9rem;min-height:2.75rem;display:inline-flex;align-items:center;padding:.1rem 0}
.rodape-grupos a:hover{text-decoration-color:var(--rosa);text-decoration-thickness:2px}
.rodape .legal{font-size:.82rem}
.rodape .legal a{color:inherit}

/* formulários */
.campo label{font-weight:600;font-size:.92rem}
.campo input,.campo textarea,.campo select{border:1px solid #8f8b82;border-radius:12px;background:#fff;padding:.75rem .9rem;
  transition:border-color .15s,box-shadow .15s}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--tinta)}
.campo input:focus-visible,.campo textarea:focus-visible,.campo select:focus-visible{outline:3px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}
.campo .erro{font-weight:600}
.estado{font-weight:500;border-radius:14px}

/* superfícies */
.caixa,.cartao,.cartao-form,.plano,.unidade,.ajuda-grupo,.parceiro,.comparativo,.sumario-movel{border-radius:var(--raio)}
.cartao{border-color:var(--linha)}
.cartao:hover{border-color:var(--tinta)}
.cartao h3 a::after{border-radius:var(--raio)}
.caixa{box-shadow:none}
.produto img{border-radius:16px;box-shadow:none;border-color:var(--linha)}
.produto figcaption{font-size:.82rem;color:var(--tinta-suave);font-weight:500}
.convite{background:var(--fundo-suave);border-radius:var(--raio)}
.definicao,.corpo .quadro{border-left-color:var(--rosa);background:var(--superficie);border-radius:0 16px 16px 0}
.itens li::before,.lista-numerada li::before{border-color:var(--rosa)}
.corpo li::marker{color:var(--tinta)}
.corpo a{text-decoration-color:var(--rosa)}
.faq summary::after,.situacoes li::before{color:var(--tinta)}
.avatar{background:var(--rosa-lavado)}
.passos li::before{font-weight:500;letter-spacing:-.04em}
.anel{color:var(--rosa)}
.aviso-rascunho{font-family:var(--fonte)}

/* leitura de artigos longos: coluna de ~65 caracteres, corpo um pouco maior */
.corpo{font-size:1.0625rem;line-height:1.78}
.corpo h2{letter-spacing:-.035em}
.corpo h3{font-weight:600}
.artigo-cabeca h1{letter-spacing:-.05em}
.corpo th{background:#f1eee8;font-weight:600}
.sumario a{font-weight:500}
.sumario a:hover{color:var(--rosa-forte)}

/* imagem ampliada (compartilhada: ampliar.js) */
.ampliar-botao,.ampliar-link-texto{display:inline-flex;align-items:center;gap:1.1rem;min-height:2.75rem;padding:.4rem 0;
  border:0;border-bottom:1px solid var(--tinta);background:none;color:var(--tinta);font:600 .85rem var(--fonte);cursor:pointer}
.ampliar-botao:hover{color:var(--rosa-forte)}
.ampliar-link{cursor:zoom-in}
.ampliar-dialogo{border:0;border-radius:20px;background:var(--papel);color:var(--tinta);padding:1.4rem;
  width:calc(100% - 2rem);max-width:1400px;max-height:92vh;overflow:hidden}
.ampliar-dialogo::backdrop{background:rgba(17,17,17,.78)}
.ampliar-cabeca{display:flex;gap:1.5rem;justify-content:space-between;align-items:flex-start}
.ampliar-cabeca h2{font-size:1.35rem;letter-spacing:-.03em;margin:0}
.ampliar-cabeca p{font-size:.85rem;color:var(--tinta-suave);margin:.35rem 0 0}
.ampliar-fechar{flex:none;min-height:2.75rem;min-width:5.5rem;padding:0 1.1rem;border:0;border-radius:999px;background:var(--tinta);color:var(--papel);font:600 .85rem var(--fonte);cursor:pointer}
.ampliar-fechar:hover{background:var(--rosa);color:var(--tinta)}
.ampliar-dica{font-size:.8rem;color:var(--tinta-suave);margin:.7rem 0 0}
.ampliar-rolagem{overflow:auto;max-height:calc(92vh - 9rem);border:1px solid var(--linha);background:#fff;border-radius:12px;margin-top:.8rem}
.ampliar-rolagem img{display:block;max-width:none;width:var(--ampliar-largura,1280px);height:auto;margin:0 auto}
@media(max-width:640px){.ampliar-dialogo{padding:1rem;width:calc(100% - 1rem)}.ampliar-rolagem img{width:min(var(--ampliar-largura,1280px),180vw)}}
html.ampliar-aberto{overflow:hidden}

/* movimento reduzido: sem deslocamentos nem transições decorativas */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}