
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;
src:url(/assets/fonts/outfit-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 800;font-display:swap;
src:url(/assets/fonts/outfit-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --fundo:#fff; --azul:#082852; --acento:#E7004C;
  /* o magenta puro tem 4,9:1 sobre branco: passa em título, raspa no corpo.
     O tom fechado é o que carrega texto pequeno, com ~7:1. */
  --acento-claro:#C4003F;
  --tinta:#000928; --texto:rgba(0,9,40,.78); --fraco:rgba(0,9,40,.58);
  --superficie:rgba(0,9,40,.028); --superficie-2:rgba(0,9,40,.055);
  --linha:rgba(0,9,40,.11); --linha-forte:rgba(0,9,40,.20);
  --raio:24px; --raio-p:12px; --raio-pilula:10px;
  --conteudo:1216px; --goteira:32px;
  /* medida de leitura: toda coluna de texto do site usa esta, e só esta */
  /* em rem, não ch: ch mede pela fonte do próprio elemento, e um p ou h3 com a
     mesma --medida saía mais largo que o .bloco vizinho (desalinhado). 43rem ≈ 66ch
     de corpo 16px. */
  --medida:43rem; --medida-cabeca:44rem;
  --grad:linear-gradient(90deg,var(--azul) 0%,var(--acento) 50%,var(--azul) 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--tinta);
  font-family:'MADE TOMMY','Outfit','Poppins',system-ui,sans-serif;font-weight:400;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:var(--conteudo);margin:0 auto;padding:0 var(--goteira)}
@media(max-width:640px){:root{--goteira:20px;--raio:18px}}

/* ── cabeçalho fixo + faixa de aviso ─────────────────────────────────────── */
.topo{position:fixed;inset:0 0 auto;z-index:80;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo-barra{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:60px}
.marca{font-weight:800;letter-spacing:-.03em;font-size:1.2rem;flex:0 0 auto}
.marca span{background:linear-gradient(90deg,var(--azul),var(--acento));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:1.75rem;font-size:.875rem;color:var(--texto)}
.menu a{transition:color .2s}
.menu a:hover{color:var(--tinta)}
.aviso{background:var(--grad);background-size:200% 100%;animation:desliza-grad 9s linear infinite;
  text-align:center;font-size:.76rem;letter-spacing:.04em;padding:.42rem 1rem;font-weight:500;color:#fff}
@media(max-width:899px){
  .menu{display:none}
  .topo-barra{height:56px}
}
body{padding-top:var(--altura-topo,96px)}
@media(max-width:899px){body{padding-top:var(--altura-topo,108px)}}

/* ── botões ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--raio-pilula);font-size:1rem;font-weight:600;padding:.85rem 2rem;
  background:var(--grad);background-size:200% 100%;color:#fff;border:0;cursor:pointer;
  animation:desliza-grad 3s linear infinite;transition:transform .2s,box-shadow .2s;
  box-shadow:0 8px 30px rgba(231,0,76,.22)}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 38px rgba(231,0,76,.34)}
.btn.pequeno{padding:.5rem 1.5rem;font-size:.875rem}
.btn.vazado{background:var(--superficie);border:1px solid var(--linha-forte);animation:none;
  box-shadow:none;font-weight:500;color:var(--tinta)}
.btn.vazado:hover{background:var(--superficie-2);border-color:var(--acento);box-shadow:none}
@keyframes desliza-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── tipografia ──────────────────────────────────────────────────────────── */
h1{font-size:clamp(2.1rem,5.2vw,3rem);line-height:1.04;font-weight:600;letter-spacing:-.025em}
h2{font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.05;font-weight:600;letter-spacing:-.025em}
h3{font-size:1.5rem;line-height:1.33;font-weight:600;letter-spacing:-.015em}
.destaque{color:var(--acento-claro);font-weight:700}
p{font-size:1.125rem;line-height:1.56;color:var(--texto)}
.miudo{font-size:.95rem;color:var(--fraco)}

/* ── seções ──────────────────────────────────────────────────────────────── */
.sec{padding:clamp(4rem,9vw,7rem) 0;position:relative}
/* O cabeçalho é fixo: sem esta margem, clicar em "A assessoria" ou "Dúvidas"
   leva o título para debaixo dele. */
section[id]{scroll-margin-top:calc(var(--altura-topo,96px) + 16px)}
.sec-cabeca{max-width:46rem;margin:0 auto 3rem;text-align:center}
.sec-cabeca p{margin-top:1rem}
.olho{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
  font-weight:600;color:var(--acento-claro);background:rgba(231,0,76,.07);
  border:1px solid rgba(231,0,76,.22);border-radius:999px;padding:.35rem 1rem;margin-bottom:1.25rem}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,8vw,6rem);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-22%;left:50%;transform:translateX(-50%);
  width:min(1100px,150vw);aspect-ratio:1;border-radius:50%;filter:blur(64px);pointer-events:none;
  background:radial-gradient(circle,rgba(231,0,76,.10) 0%,rgba(8,40,82,.09) 40%,transparent 68%)}
.hero .wrap{position:relative;z-index:1}
.hero-grade{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:980px){.hero-grade{grid-template-columns:1.05fr .95fr}}
.hero h1{margin-bottom:1.25rem}
.hero h1 .leve{color:var(--texto);font-weight:400}
.hero .sub{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--texto);max-width:34ch}
#resumo{margin-top:1.5rem;padding-left:1.1rem;border-left:2px solid var(--acento);
  font-size:1.02rem;color:var(--texto);max-width:54ch}
.hero-acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-obs{margin-top:1rem;max-width:46ch}
.hero-obs a{color:var(--acento-claro);border-bottom:1px solid rgba(196,0,63,.45)}
.prova{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}
.prova-pilhas{display:flex}
.prova-pilhas i{width:40px;height:40px;border-radius:50%;border:2px solid var(--fundo);
  margin-left:-10px;background:#000928;display:grid;place-items:center;overflow:hidden}
.prova-pilhas img{width:66%;height:66%;object-fit:contain}
.prova-pilhas i:first-child{margin-left:0}
.prova span{font-size:.88rem;color:var(--fraco)}

/* pilha de cartões flutuantes do hero */
.hero-visual{position:relative}
.painel{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(1.5rem,2.5vw,2rem);padding-bottom:clamp(3.25rem,5vw,4rem);
  box-shadow:0 24px 60px rgba(0,9,40,.09)}
.painel-titulo{font-size:.72rem;font-weight:600;color:var(--fraco);margin-bottom:1.25rem;
  text-transform:uppercase;letter-spacing:.16em}
.frente-linha{display:flex;align-items:center;gap:1rem;padding:.95rem 0;border-top:1px solid var(--linha)}
.frente-linha:first-of-type{border-top:0;padding-top:0}
.frente-linha b{display:block;font-size:1rem;font-weight:600}
.frente-linha small{display:block;font-size:.86rem;color:var(--fraco);line-height:1.4}
.bolha{width:42px;height:42px;flex:0 0 auto;border-radius:var(--raio-p);display:grid;place-items:center;
  background:rgba(231,0,76,.10);color:var(--acento-claro);font-weight:700;font-size:.95rem}
.flutua{position:absolute;background:#fff;border:1px solid var(--linha);
  border-radius:16px;padding:.8rem 1.1rem;box-shadow:0 18px 40px rgba(0,9,40,.14);
  animation:boia 6s ease-in-out infinite}
.flutua b{display:block;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.flutua small{font-size:.72rem;color:var(--fraco);text-transform:uppercase;letter-spacing:.1em}
.flutua.f1{top:-22px;right:-10px}
.flutua.f2{bottom:-26px;left:-14px;animation-delay:-3s}
@keyframes boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:979px){.flutua.f1{right:0}.flutua.f2{left:0}}
@media(max-width:520px){.flutua{position:static;animation:none;margin-top:.75rem;display:inline-block}}

/* ── fita de logos ───────────────────────────────────────────────────────── */
.fita-sec{padding:clamp(2.5rem,5vw,3.5rem) 0;border-block:1px solid var(--linha)}
.fita-titulo{text-align:center;font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--fraco);margin-bottom:2rem;font-weight:500}
.fita{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fita-trilho{display:flex;width:max-content;animation:desliza 72s linear infinite}
.fita:hover .fita-trilho{animation-play-state:paused}
.fita-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:clamp(7.5rem,12vw,11rem);height:clamp(2.75rem,4.5vw,3.75rem);margin:0 clamp(1rem,2.4vw,2.1rem)}
.fita-item img{width:100%;height:100%;object-fit:contain;transform:scale(var(--s,1));
  filter:brightness(0);opacity:var(--o,.55);transition:opacity .3s}
.fita-item:hover img{opacity:1}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .fita-trilho{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .btn,.flutua{animation:none}
}

/* ── cartões ─────────────────────────────────────────────────────────────── */
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(1.5rem,2.6vw,2rem);transition:border-color .25s,background .25s,transform .25s}
.cartao:hover{border-color:var(--linha-forte);background:var(--superficie-2)}
.cartao h3{margin-bottom:.6rem}
.cartao p{font-size:1rem}
.grade{display:grid;gap:1.25rem}
@media(min-width:760px){.grade.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grade.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.grade.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.grade.g4{grid-template-columns:repeat(4,1fr)}}
.numero{width:48px;height:48px;border-radius:var(--raio-p);display:grid;place-items:center;
  background:rgba(231,0,76,.10);color:var(--acento-claro);font-weight:700;font-size:1.25rem;
  margin-bottom:1.25rem}
.entrega{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--linha)}
.entrega b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--fraco);margin-bottom:.25rem;font-weight:600}
.entrega span{font-size:.95rem;color:var(--texto)}
.saiba{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;font-size:.92rem;
  font-weight:600;color:var(--acento-claro)}
.saiba::after{content:"→";transition:transform .2s}
.cartao:hover .saiba::after{transform:translateX(3px)}

/* lista com marcador de degradê */
.lista{list-style:none;display:grid;gap:.75rem}
.lista li{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-p);
  padding:1.1rem 1.35rem 1.1rem 3rem;position:relative;color:var(--texto);font-size:1.02rem}
.lista li::before{content:"";position:absolute;left:1.35rem;top:1.5rem;width:.5rem;height:.5rem;
  border-radius:2px;background:var(--grad)}

/* ── bloco de degradê inteiro ────────────────────────────────────────────── */
/* Único bloco escuro da página, e é ele que faz o contraste. Reescopa os
   tokens em vez de cada regra dentro dele ganhar exceção de cor. */
.bloco-grad{background:linear-gradient(135deg,#041634 0%,var(--azul) 42%,#8d0a3a 100%);
  padding:clamp(4rem,9vw,6.5rem) 0;position:relative;overflow:hidden;color:#fff;
  --tinta:#fff; --texto:rgba(255,255,255,.86); --fraco:rgba(255,255,255,.66);
  --superficie:rgba(255,255,255,.08); --superficie-2:rgba(255,255,255,.13);
  --linha:rgba(255,255,255,.20); --linha-forte:rgba(255,255,255,.32)}
.bloco-grad::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 80% 10%,rgba(255,255,255,.10),transparent 60%)}
.bloco-grad .wrap{position:relative;z-index:1}
.bloco-grad .cartao{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.bloco-grad .cartao:hover{background:rgba(255,255,255,.14)}
.bloco-grad .lista li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.bloco-grad .numero,.bloco-grad .bolha{background:rgba(255,255,255,.18);color:#fff}
.bloco-grad .saiba{color:#fff}
.bloco-grad .olho{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
.bloco-grad .btn{background:#fff;color:#000928;animation:none;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.bloco-grad .destaque{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);
  text-underline-offset:6px}

/* ── tabela comparativa ──────────────────────────────────────────────────── */
.compara{display:grid;gap:1.25rem;margin-top:2.5rem}
@media(min-width:820px){.compara{grid-template-columns:repeat(2,1fr)}}
.compara h3{font-size:1.15rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.6rem}
.compara .selo-c{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;padding:.25rem .6rem;
  border-radius:999px;border:1px solid var(--linha-forte);color:var(--fraco);font-weight:600}
.compara dl{display:grid;gap:0}
.compara dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--fraco);
  font-weight:600;padding-top:1rem;border-top:1px solid var(--linha);margin-top:1rem}
.compara dd{font-size:1rem;color:var(--texto);margin-top:.3rem}
.compara .nossa{border-color:rgba(231,0,76,.35);background:rgba(231,0,76,.045)}
.bloco-grad .compara .nossa{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.10)}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faqs{max-width:52rem;margin:0 auto;display:grid;gap:.75rem}
details.faq{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-p);
  padding:1.15rem 1.4rem;transition:border-color .2s}
details.faq[open]{border-color:var(--linha-forte)}
details.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--acento-claro);font-weight:700;font-size:1.3rem;
  line-height:1;flex:0 0 auto;transition:transform .2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{margin-top:.9rem;font-size:1rem}

/* ── citação ─────────────────────────────────────────────────────────────── */
blockquote{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:500;letter-spacing:-.015em;
  line-height:1.35;max-width:32ch}
blockquote cite{display:block;margin-top:1.1rem;font-size:.86rem;font-style:normal;
  color:var(--fraco);font-weight:400}

/* ── faixa de CTA entre seções ───────────────────────────────────────────── */
.cta-linha{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:3rem;text-align:center}
.cta-linha .miudo{max-width:40ch}

/* ── rodapé ──────────────────────────────────────────────────────────────── */
.rodape{border-top:1px solid var(--linha);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem}
.rodape-grade{display:grid;gap:2.5rem}
@media(min-width:820px){.rodape-grade{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.rodape-titulo{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fraco);
  margin-bottom:1rem;font-weight:600}
.rodape ul{list-style:none;display:grid;gap:.6rem;font-size:.95rem}
.rodape a{color:var(--texto);transition:color .2s}
.rodape a:hover{color:#fff}
.rodape .miudo{margin-top:1rem;max-width:32ch}
.fim{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linha);display:flex;
  flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.82rem;color:var(--fraco)}

/* ── revelação no scroll ─────────────────────────────────────────────────── */
/* O estado escondido é escopado em html.js, e a classe `js` só entra por script
   no <head>. Sem JS — crawler que não executa, erro de rede, observer que não
   dispara em aba de fundo — a regra nunca casa e a página nasce visível.
   Esconder conteúdo por padrão e depender de JS para devolver é como se perde
   uma página inteira sem ninguém ver pelo terminal. */
html.js .revela{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .revela.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .revela{opacity:1;transform:none;transition:none}
}

/* ── utilitários de composição ───────────────────────────────────────────── */
.coluna-texto{max-width:62ch;margin-inline:auto;display:grid;gap:1.1rem}
.pilha-texto{display:grid;gap:1.1rem;margin-top:1.5rem}
.centro-estreito{max-width:58ch;margin:2rem auto 0;text-align:center}
.centro{text-align:center}
.centro-titulo{max-width:18ch;margin-inline:auto}
.centro-acoes{justify-content:center;margin-top:2rem}
.alinha-centro{align-items:center;gap:clamp(2rem,4vw,3.5rem)}
.obs-clara{margin-top:1.25rem;color:rgba(255,255,255,.75)}
.btn.vazado.claro{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.10);color:#fff}
.btn.vazado.claro:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* ── medida de leitura e hierarquia ──────────────────────────────────────────
   O site tinha bloco estreito centralizado ao lado de bloco largo colado à
   esquerda, sem critério. A regra agora é uma só, e vale em toda página:

     1. cabeçalho de seção  → centralizado, medida curta (--medida-cabeca)
     2. qualquer texto corrido → coluna de leitura centralizada NA PÁGINA,
        com o texto alinhado à ESQUERDA, sempre na mesma medida (--medida)
     3. grade de cartão e fita → largura cheia do wrap

   Texto centralizado existe só no item 1 e no p.fecho (frase de conclusão). Nenhum
   max-width solto no HTML: quem precisa de coluna usa .bloco ou .artigo. */
.bloco{max-width:var(--medida);margin-inline:auto;display:grid;gap:1.15rem}
.fecho{max-width:var(--medida);margin:2.25rem auto 0}
/* p.fecho é a frase de conclusão depois de grade ou lista: fala com a seção
   inteira, então centraliza como o cabeçalho. h3.fecho abre a lista abaixo e
   fica alinhado à esquerda com ela. */
p.fecho{text-align:center}
h3.fecho{margin-bottom:1rem}
.sec-cabeca{max-width:var(--medida-cabeca);margin:0 auto 3rem;text-align:center}
.sec-cabeca h2{margin-inline:auto}
.sec-cabeca p{margin-top:1rem;margin-inline:auto;max-width:52ch}

/* ── arquétipo artigo: serviço, estado, página legal ─────────────────────── */
.sec-artigo{padding-top:clamp(1rem,2vw,1.5rem)}
.artigo{max-width:var(--medida);margin-inline:auto;padding-bottom:1rem}
.artigo h2{font-size:clamp(1.45rem,3vw,2rem);margin:3.25rem 0 1rem;max-width:28ch}
.artigo h3{font-size:1.2rem;margin:2.25rem 0 .75rem}
.artigo p{margin-bottom:1.15rem}
.artigo ul.lista{margin:1.5rem 0}
.artigo > :first-child{margin-top:0}
.trilha{max-width:var(--medida);margin:0 auto;padding:1.75rem 0 0;font-size:.82rem;color:var(--fraco)}
.trilha a:hover{color:var(--tinta)}
.titulo-pagina{max-width:var(--medida);margin:0 auto}
.titulo-pagina h1{margin:.85rem 0 1.25rem}
#resumo{margin-top:1.5rem;padding-left:1.1rem;border-left:2px solid var(--acento);
  font-size:1.05rem;color:var(--texto);max-width:var(--medida)}
.artigo #resumo{margin:0 0 2.5rem}
.relacionados{max-width:var(--medida);margin:3.5rem auto 0;padding-top:1.75rem;
  border-top:1px solid var(--linha)}
.relacionados h2{font-size:1.1rem;margin-bottom:1rem}
.relacionados a{display:inline-block;margin:.3rem .5rem .3rem 0;padding:.5rem .95rem;
  border:1px solid var(--linha);border-radius:999px;font-size:.88rem;color:var(--texto);
  transition:border-color .2s,color .2s}
.relacionados a:hover{border-color:var(--acento);color:var(--tinta)}
.revisao{max-width:var(--medida);margin:2.5rem auto 0;font-size:.82rem;color:var(--fraco)}

/* ── adições do site novo (09/11/2026) ───────────────────────────────── */
.menu a[aria-current]{color:var(--tinta);font-weight:600}
.menu-mob{display:none;position:relative}
.menu-mob summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-content:center;gap:5px;border-radius:var(--raio-p)}
.menu-mob summary::-webkit-details-marker{display:none}
.menu-mob summary span{display:block;width:22px;height:2px;background:var(--tinta);border-radius:2px}
.menu-mob nav{position:absolute;right:0;top:52px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio-p);box-shadow:0 18px 40px rgba(0,9,40,.14);padding:.75rem;display:flex;flex-direction:column;gap:.25rem;min-width:240px;z-index:60}
.menu-mob nav a{padding:.7rem .8rem;border-radius:8px;color:var(--tinta)}
.menu-mob nav a:hover{background:var(--superficie-2)}
.menu-mob nav .btn{margin-top:.4rem;text-align:center;justify-content:center;color:#fff}
@media(max-width:899px){.menu-mob{display:block}.topo-barra .btn.pequeno{display:none}}
.hero .trilha{margin-bottom:1rem}
.relacionados{display:flex;flex-wrap:wrap;gap:.6rem}
.artigo-texto{max-width:var(--medida);margin-top:2rem}
.artigo-texto h2{margin:2.2rem 0 .8rem}
.artigo-texto p,.artigo-texto li{line-height:1.7}
.artigo-texto blockquote{margin:2rem 0}
.bio-links{display:flex;flex-direction:column;gap:.75rem;max-width:420px;margin:2rem auto 1rem}
.bio-links .btn{justify-content:center}
.zap-flutua{position:fixed;right:20px;bottom:20px;z-index:80;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .2s}
.zap-flutua:hover{transform:scale(1.06)}
.zap-dica{position:absolute;right:72px;white-space:nowrap;background:var(--azul);color:#fff;font-size:.8rem;font-weight:600;padding:.45rem .7rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}
.zap-flutua:hover .zap-dica{opacity:1}
@media(max-width:640px){.zap-flutua{right:14px;bottom:14px;width:54px;height:54px}}
