/* Biblioteca Duxfit — casca visual das paginas de conteudo.
   Uma folha so', em cache, pras 329 paginas: elas nasceram como HTML cru, sem
   estilo nenhum. Paleta e tipografia iguais as do resto do site. */

:root{
  --roxo:#821a8d; --rosa:#de3d8c; --tinta:#1a0f24; --suave:#6b5d78;
  --linha:#ece3f3; --fundo:#faf7fc; --branco:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.7;
}
img{max-width:100%;height:auto}
a{color:var(--roxo)}

/* ---------- topo ---------- */
.dux-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.dux-top .dux-wrap{display:flex;align-items:center;gap:18px;padding:10px 20px}
.dux-top img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.dux-nav{display:flex;gap:18px;flex-wrap:wrap;flex:1}
.dux-nav a{color:var(--tinta);text-decoration:none;font-size:14px;font-weight:600}
.dux-nav a:hover{color:var(--roxo)}
.dux-top .dux-btn{margin-left:auto}

.dux-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.dux-top .dux-wrap{max-width:1040px}

/* ---------- caminho de volta ---------- */
.dux-crumb{max-width:760px;margin:0 auto;padding:16px 20px 0;font-size:13px;color:var(--suave)}
.dux-crumb a{color:var(--roxo);text-decoration:none}
.dux-crumb a:hover{text-decoration:underline}

/* ---------- corpo do artigo ---------- */
.dux-main{padding:0 0 10px}
.dux-main article > h1{
  font-size:clamp(28px,5vw,40px); line-height:1.18; margin:18px 0 18px;
  letter-spacing:-.01em;
}
.dux-main h2{font-size:clamp(21px,3.4vw,26px);line-height:1.25;margin:38px 0 12px}
.dux-main h3{font-size:18px;margin:26px 0 8px}
.dux-main p{margin:0 0 16px}
.dux-main ul,.dux-main ol{margin:0 0 18px;padding-left:22px}
.dux-main li{margin:0 0 8px}
.dux-main strong{font-weight:700}
.dux-main section{margin:0 0 8px}

/* blocos "Veja tambem" e "Proximos passos" viram cartao, nao lista solta */
.dux-main nav[aria-label="Veja também"],
.dux-main section[aria-label="Próximos passos"]{
  margin:34px 0;padding:20px 22px;border:1.5px solid var(--linha);
  border-radius:14px;background:var(--fundo);
}
.dux-main nav[aria-label="Veja também"] h2,
.dux-main section[aria-label="Próximos passos"] h2{margin:0 0 12px;font-size:18px}
.dux-main nav[aria-label="Veja também"] ul,
.dux-main section[aria-label="Próximos passos"] ol{margin:0;padding-left:20px}

/* rodape interno do artigo (fonte de referencia / NAP) */
.dux-main article > footer{
  margin:30px 0 0;padding:16px 0 0;border-top:1px solid var(--linha);
  font-size:14px;color:var(--suave);
}
.dux-main article > footer p{margin:0 0 6px}

/* ---------- rodape do site ---------- */
.dux-rodape{margin-top:46px;border-top:1px solid var(--linha);background:var(--fundo)}
.dux-rodape .dux-wrap{max-width:1040px;padding:26px 20px 40px;font-size:14px;color:var(--suave)}
.dux-rodape a{color:var(--roxo);text-decoration:none}
.dux-rodape a:hover{text-decoration:underline}
.dux-rodape .dux-links{margin:0 0 10px;display:flex;gap:8px 16px;flex-wrap:wrap}

/* ---------- botao ---------- */
.dux-btn{
  display:inline-block;padding:11px 20px;border-radius:999px;
  background:linear-gradient(120deg,var(--roxo),var(--rosa));
  color:#fff !important;text-decoration:none;font-weight:700;font-size:14px;
  white-space:nowrap;
}

@media(max-width:720px){
  body{font-size:16px}
  .dux-nav{display:none}
  .dux-top .dux-wrap{gap:12px}
}

/* ---------- chamada local (fim do artigo) ---------- */
.dux-cta{
  margin:34px 0;padding:22px 24px;border-radius:14px;
  border:1.5px solid var(--linha);
  background:linear-gradient(135deg,rgba(130,26,141,.06),rgba(222,61,140,.07));
}
.dux-cta .dux-cta-tit{margin:0 0 8px;font-weight:800;font-size:19px;color:var(--roxo)}
.dux-cta p{margin:0 0 14px}
.dux-cta .dux-cta-acoes{margin:0;display:flex;gap:10px;flex-wrap:wrap}
.dux-btn-ghost{
  background:none !important;color:var(--roxo) !important;
  border:1.5px solid var(--roxo);
}