/* Páginas de material (single/archive/taxonomy) no visual da home.
   Depende dos tokens :root e das classes base (header, footer, .btn, .wrap,
   .eyebrow, .sec-head, .pad, .finalcta) que vêm da home.css, carregada junto. */

.mat main,.mat{background:var(--paper)}

/* ---- single: hero escuro ---- */
.mat-hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(115% 90% at 85% -5%,rgba(98,39,243,.55),transparent 55%),
             radial-gradient(90% 80% at -5% 110%,rgba(237,53,62,.22),transparent 55%),
             var(--indigo-900)}
.mat-hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:100% 36px;mask-image:linear-gradient(#000,transparent 72%);opacity:.6}
.mat-hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,54px);
  align-items:center;padding-top:clamp(34px,5vh,64px);padding-bottom:clamp(40px,6vh,72px)}
.mat-hero-grid>*{min-width:0}
.mat-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.mat-cat{font-size:12px;font-weight:800;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.mat-cat:hover{background:rgba(255,255,255,.2)}
.mat-hero h1{font-size:clamp(28px,3.4vw,44px);font-weight:900;letter-spacing:-.02em}
.mat-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;margin-top:22px}
.mat-price .old{color:rgba(255,255,255,.5);text-decoration:line-through;font-size:16px;font-weight:600}
.mat-price .now{color:#fff;font-size:32px;font-weight:900;letter-spacing:-.02em}
.mat-price .inst{color:rgba(255,255,255,.82);font-size:15px;font-weight:600}
.mat-cta{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.mat-social{margin-top:22px;font-size:14.5px;color:rgba(255,255,255,.75)}
.mat-social b{color:#fff;font-weight:800}
.mat-hero-img img{width:100%;border-radius:16px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  transform:rotate(1.4deg);background:#fff}

/* ---- single: corpo ---- */
.mat-body{padding-top:clamp(40px,6vh,72px);padding-bottom:20px;max-width:52rem}
.mat-sec{margin-bottom:40px}
.mat-sec .eyebrow{display:block;margin-bottom:8px}
.prose{color:var(--ink);font-size:17px;line-height:1.65}
.prose h1{font-size:26px;font-weight:900;letter-spacing:-.02em;margin:0 0 14px;line-height:1.15}
.prose h2{font-size:22px;font-weight:800;margin:26px 0 12px}
.prose h3,.prose h4{font-size:18px;font-weight:800;margin:22px 0 8px;line-height:1.3}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose strong{font-weight:800}
.prose a{color:var(--vivid);font-weight:700;text-decoration:underline}
.mat-sumario{display:flex;flex-direction:column;gap:10px}
.mat-acc{border:1px solid var(--line);border-radius:12px;background:#fff;padding:2px 16px}
.mat-acc summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none}
.mat-acc summary::-webkit-details-marker{display:none}
.mat-acc[open] summary{border-bottom:1px solid var(--line)}
.mat-acc>div{padding:12px 0}
.mat-back{margin:8px 0 0}
.mat-back a{font-weight:800;color:var(--vivid)}
.mat-back a:hover{color:var(--red)}

/* ---- archive / taxonomy ---- */
.mat-arch-hero{background:var(--indigo-900);color:#fff;padding:clamp(46px,7vh,84px) 0 clamp(40px,6vh,66px)}
.mat-arch-hero .eyebrow{display:block;color:#ffd7a1}
.mat-arch-hero h1{font-size:clamp(30px,4vw,48px);font-weight:900;margin-top:4px;letter-spacing:-.02em}
.mat-arch-hero p{margin-top:14px;color:rgba(255,255,255,.8);font-size:18px;max-width:44rem}
/* abas de categoria da vitrine (filtro client-side dos cards) */
.mtabs{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 2px}
.mtab{border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:800;font-size:14px;padding:10px 18px;border-radius:999px;cursor:pointer;transition:.15s;font-family:inherit}
/* Hover on-brand de alto contraste: texto vermelho sobre branco dava ~3.9:1 (abaixo
   do mínimo AA). Tint indigo claro com texto indigo-900 = contraste alto e distinto
   da aba ativa (que é indigo-900 sólido + texto branco). */
.mtab:hover{background:rgba(57,30,140,.08);border-color:var(--indigo-900);color:var(--indigo-900)}
.mtab.is-active{background:var(--indigo-900);border-color:var(--indigo-900);color:#fff}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.mcard:hover{transform:translateY(-5px);box-shadow:0 26px 50px -26px rgba(28,19,64,.45)}
.mcard-cover{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--indigo)}
.mcard-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mcard:hover .mcard-cover img{transform:scale(1.04)}
.mcard-tag{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:999px}
.mcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.mcard-body h3{font-size:18.5px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.mcard-price{margin-top:10px;color:var(--muted);font-weight:700;font-size:14.5px;flex:1}
.mcard-more{margin-top:14px;font-weight:800;font-size:14px;color:var(--vivid)}
.mcard:hover .mcard-more{color:var(--red)}
.mat-empty{color:var(--muted);font-size:18px;text-align:center;padding:40px 0}

/* ---- card de MATERIAL em retrato (pedido do Allan, 17/07) ----
   As capas que a EDD produz são verticais (A4, ~0.71) com o título EMBAIXO; a
   capa 3/2 paisagem mostrava só a faixa do meio e decapitava o título. Card mais
   estreito (4 colunas) + capa 3/4: a capa retrato perde ~3% em cima/embaixo e a
   quadrada antiga (texto centralizado) perde ~12% de cada lado — as duas
   sobrevivem inteiras na leitura. Escopado em .mcard-mat/.mgrid-mat porque o
   blog e a busca reusam .mcard/.mgrid com thumbs paisagem (não mexer lá). */
.mgrid.mgrid-mat{grid-template-columns:repeat(4,1fr);gap:18px}
.mcard-mat .mcard-cover{aspect-ratio:3/4}
.mcard-mat .mcard-body{padding:16px 16px 18px}
.mcard-mat .mcard-body h3{font-size:16px}
.mcard-mat .mcard-price{flex:0 0 auto;margin-top:10px;font-size:13.5px}
.mcard-mat .mcard-more{margin-top:12px;font-size:13px}
/* o que o material contempla (extraído de sobre-o-material); ocupa o flex:1 que
   era do preço, pra preço+CTA ficarem ancorados embaixo do card */
.mcard-feats{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;flex:1}
.mcard-feats li{position:relative;padding-left:17px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.mcard-feats li::before{content:"✓";position:absolute;left:0;top:1px;font-weight:900;font-size:11px;color:var(--vivid)}

/* ---- blog / busca / 404 (Fase 5) — reusa .mgrid/.mcard/.prose acima ---- */
/* Capa do post cabe INTEIRA no card: a arte é 1200x630 e o corte 3/2 do catálogo
   decapitava a sigla do órgão. O fundo escuro casa com o fundo da própria arte. */
.mcard-post .mcard-cover{background:var(--indigo-950)}
.mcard-post .mcard-cover img{object-fit:contain}
.mcard-date{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mcard-desc{font-size:14.5px;color:var(--muted);line-height:1.5;margin-top:8px;flex:1}
.post-body{max-width:800px;margin:0 auto}
.post-cover{margin:0 0 26px}
.post-cover img{width:100%;height:auto;border-radius:16px;display:block}
/* topo do post com a marca do órgão à direita do título (pedido do Davi, 17/08) */
.post-hero{display:grid;grid-template-columns:1fr 220px;gap:34px;align-items:center}
.post-org{margin:0}
.post-org img{width:100%;height:auto;display:block;border-radius:16px;background:#fff;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.55)}
/* Corpo do post: tipo maior e texto justificado, pedido do Davi (17/08). Escopado
   em .post-body de propósito: `.prose` também serve as páginas de material, que
   ele não pediu pra mexer. hyphens:auto evita rio de espaço no justificado. */
.post-body .prose{font-size:19px;line-height:1.72}
.post-body .prose p,.post-body .prose li{text-align:justify;hyphens:auto}
.post-body .prose p{margin:0 0 18px}
.post-body .prose li{margin-bottom:10px}
.post-body .prose h2{font-size:27px;margin:36px 0 14px}
.post-body .prose h3{font-size:20px}
.post-body .prose ul,.post-body .prose ol{margin:0 0 20px}
/* Caixa "Resumo do concurso", último bloco do texto. A linha da discursiva leva
   .destaque porque é o que a EDD quer que o candidato leia primeiro. */
.resumo{margin:36px 0 0;border:1.5px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.resumo h3{margin:0;padding:15px 22px;background:var(--indigo-900);color:#fff;font-size:16px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.resumo dl{margin:0;padding:4px 22px 12px}
.resumo dl>div{display:flex;gap:18px;justify-content:space-between;align-items:baseline;
  padding:12px 0;border-bottom:1px dashed var(--line)}
.resumo dl>div:last-child{border-bottom:none}
.resumo dt{flex:0 0 34%;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.resumo dd{margin:0;flex:1;text-align:right;font-size:16.5px;line-height:1.5}
.resumo dd strong{font-weight:900;color:var(--indigo)}
.resumo dl>div.destaque{margin:0 -22px;padding:12px 22px;background:rgba(98,39,243,.07)}
.resumo dl>div.destaque dt{color:var(--indigo)}
.resumo dl>div.destaque dd{font-weight:700;color:var(--indigo-900)}
/* Compartilhar + tags no rodapé do post (17/08, referência do Direção Concursos) */
.post-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:34px 0 0}
.post-share span{font-weight:800;font-size:15px;margin-right:4px}
.post-share a,.post-share button{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;transition:.15s;padding:0}
.post-share svg{width:17px;height:17px;fill:var(--indigo)}
.post-share a:hover,.post-share button:hover{background:var(--indigo-900);border-color:var(--indigo-900);transform:translateY(-2px)}
.post-share a:hover svg,.post-share button:hover svg{fill:#fff}
.post-share button.copiado{background:var(--vivid);border-color:var(--vivid)}
.post-share button.copiado svg{fill:#fff}
.post-tags{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0}
.post-tags a{display:inline-block;padding:8px 14px;border-radius:10px;background:var(--paper-2);
  color:var(--red-deep);font-size:13.5px;font-weight:700;text-decoration:none;transition:.15s}
.post-tags a:hover{background:var(--indigo-900);color:#fff}
/* CTA do fim do post: reusa .finalcta/.finalbox da home, mas o h2 de lá vai a
   50px (é headline de home) e aqui fica gritando em cima de texto corrido. */
.finalcta-post .finalbox h2{font-size:clamp(24px,3.2vw,34px)}
.finalcta-post .finalbox p{font-size:16.5px;margin:14px auto 26px}
.finalcta-btns{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.bpagin{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.bpagin .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:800;font-size:15px;text-decoration:none}
.bpagin .page-numbers.current{background:var(--indigo-900);border-color:var(--indigo-900);color:#fff}
.bpagin a.page-numbers:hover{border-color:var(--indigo-900);color:var(--indigo-900)}
.bsearch{display:flex;gap:10px;margin-top:22px;max-width:520px}
.bsearch input{flex:1;min-width:0;padding:13px 18px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:15.5px}
.bsearch input::placeholder{color:rgba(255,255,255,.55)}
.bsearch input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.16)}
.nf-hero{padding-bottom:clamp(56px,9vh,100px)}
.nf-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.mat-empty a{color:var(--vivid);font-weight:800}

@media(max-width:960px){
  .mat-hero-grid{grid-template-columns:1fr;gap:30px}
  .mat-hero-img{max-width:360px}
  .mgrid{grid-template-columns:1fr 1fr}
  .mgrid.mgrid-mat{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .mgrid.mgrid-mat{grid-template-columns:1fr 1fr}
}
/* O CORPO DO POST ENCOSTAVA NAS DUAS BORDAS no celular e no tablet: o wrapper
   do single-post.php é `.wrap pad`, e o `.pad` zera o padding lateral. No
   desktop isso nunca apareceu porque o max-width de 800px do .post-body deixa
   margem de sobra; em tela mais estreita que isso o texto ia de borda a borda
   e as letras da lateral eram "comidas". Reclamação do Davi em 24/08/2026, com
   print, no dia seguinte ao blog virar a frente principal.

   O CORTE É 860px, NÃO 700: a conta é `viewport - 800` (o max-width do corpo),
   então o problema só some sozinho a partir de ~836px. A primeira tentativa
   parou em 700 e consertou o celular deixando o TABLET quebrado, que era
   metade da reclamação. 18px é o mesmo respiro que o .post-hero já usa. */
@media(max-width:860px){
  .post-body{padding-left:18px;padding-right:18px}
}

@media(max-width:560px){
  .mat-hero h1{font-size:26px}
  .mat-price .now{font-size:27px}
  .mat-cta{flex-direction:column;align-items:stretch}
  .mat-cta .btn{width:100%;justify-content:center}
  .finalcta-btns{flex-direction:column;align-items:stretch}
  .finalcta-btns .btn{width:100%;justify-content:center}
  /* no celular a marca do órgão vira uma faixa acima do título, e o resumo
     empilha rótulo em cima do valor (2 colunas em 390px cortam o texto) */
  .post-hero{grid-template-columns:1fr;gap:20px}
  .post-hero .post-org{order:-1;max-width:150px}
  .post-body .prose{font-size:17.5px}
  .post-body .prose h2{font-size:23px}
  .resumo dl>div{flex-direction:column;gap:5px}
  .resumo dt{flex:none}
  .resumo dd{text-align:left}
  .mgrid{grid-template-columns:1fr}
  /* material continua em 2 colunas no celular (card retrato estreito = imagem
     pequena, como o Allan pediu); só o tipo/padding encolhem pra caber. */
  .mgrid.mgrid-mat{grid-template-columns:1fr 1fr;gap:12px}
  .mcard-mat .mcard-body{padding:12px 12px 14px}
  .mcard-mat .mcard-body h3{font-size:14px}
  .mcard-mat .mcard-price{font-size:12.5px}
  .mcard-mat .mcard-more{font-size:12px}
  .mcard-mat .mcard-tag{top:10px;left:10px;font-size:10.5px;padding:4px 10px}
  .mat-body{padding-left:0;padding-right:0}
  .bsearch{flex-direction:column}
}

/* ============================================================================
   /noticias/ — redesenho de 24/08/2026 (pedido do Davi: "mais bonita, robusta
   e visualmente atrativa"). Tudo escopado em .nblog / .nb-* para não tocar no
   catálogo de materiais, na busca nem no 404, que reusam .mgrid/.mcard.
   ========================================================================== */

.nb-hero{position:relative;color:#fff;overflow:hidden;
  background:radial-gradient(115% 90% at 88% -10%,rgba(98,39,243,.6),transparent 58%),
             radial-gradient(80% 70% at -5% 108%,rgba(237,53,62,.22),transparent 55%),
             var(--indigo-900)}
.nb-hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:100% 36px;mask-image:linear-gradient(#000,transparent 74%);opacity:.6}
.nb-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,58px);align-items:center;
  padding:clamp(44px,6.5vh,80px) 28px clamp(44px,6.5vh,78px)}
.nb-hero-grid>*{min-width:0}
.nb-hero-txt .eyebrow{display:block;color:#ffd7a1}
.nb-hero-txt h1{font-size:clamp(30px,4vw,48px);font-weight:900;margin-top:4px;letter-spacing:-.02em}
.nb-hero-txt>p{margin-top:14px;color:rgba(255,255,255,.82);font-size:18px;max-width:34rem}

/* números vivos: dizem "aqui tem coisa" sem precisar de imagem decorativa */
.nb-stats{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 34px}
.nb-stats li{display:flex;flex-direction:column}
.nb-stats b{font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.nb-stats span{font-size:13.5px;color:rgba(255,255,255,.68);font-weight:600}
.nb-hero-cta{margin-top:28px}

/* mosaico das 3 capas mais recentes: material real da marca, não foto genérica */
.nb-hero-art{position:relative;height:clamp(230px,26vw,310px)}
.nb-hero-cap{position:absolute;width:70%;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7);background:var(--indigo-950);
  border:1px solid rgba(255,255,255,.14)}
.nb-hero-cap img{width:100%;height:auto;display:block}
.nb-hero-cap-1{top:0;right:0;transform:rotate(2deg);z-index:3}
.nb-hero-cap-2{top:26%;left:0;transform:rotate(-3deg);z-index:2;width:64%}
.nb-hero-cap-3{bottom:0;right:8%;transform:rotate(4deg);z-index:1;width:58%;opacity:.9}

/* filtros */
.nb-filtros{display:flex;flex-wrap:wrap;gap:9px;padding-top:26px;padding-bottom:2px}
.nb-chip{font-size:14px;font-weight:800;padding:9px 17px;border-radius:999px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:all .18s}
.nb-chip:hover{border-color:var(--indigo-900);color:var(--indigo-900)}
.nb-chip.is-on{background:var(--indigo-900);border-color:var(--indigo-900);color:#fff}
.nb-chip-n{opacity:.55;font-weight:700;margin-left:2px}

/* destaque: a mais recente em card largo */
.nb-dest{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:26px;
  box-shadow:0 18px 40px -28px rgba(28,19,64,.5);transition:transform .18s,box-shadow .18s}
.nb-dest:hover{transform:translateY(-3px);box-shadow:0 26px 52px -28px rgba(28,19,64,.55)}
.nb-dest>*{min-width:0}
.nb-dest-cover{position:relative;background:var(--indigo-950);display:flex;align-items:center}
.nb-dest-cover img{width:100%;height:100%;object-fit:contain}
.nb-dest-flag{position:absolute;top:14px;right:14px;background:var(--red);color:#fff;
  font-size:11.5px;font-weight:800;padding:6px 13px;border-radius:999px;letter-spacing:.01em}
.nb-dest-body{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:center}
.nb-dest-body h2{font-size:clamp(21px,2.2vw,29px);font-weight:900;margin:6px 0 12px;
  letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.nb-dest-body p{color:var(--muted);font-size:16.5px;margin-bottom:18px}

/* faixa de captura no meio da página: a página alimenta o Radar Ativo */
.nb-aviso{background:var(--indigo-900);color:#fff;margin-top:14px;
  background-image:radial-gradient(90% 120% at 12% 0%,rgba(98,39,243,.55),transparent 60%)}
.nb-aviso-in{display:flex;align-items:center;justify-content:space-between;gap:30px;
  flex-wrap:wrap;padding-top:clamp(34px,5vh,54px);padding-bottom:clamp(34px,5vh,54px)}
.nb-aviso-in>div{max-width:44rem}
.nb-aviso .eyebrow{display:block;color:#ffd7a1}
.nb-aviso h2{font-size:clamp(23px,2.6vw,33px);font-weight:900;margin-top:5px;letter-spacing:-.02em}
.nb-aviso p{margin-top:11px;color:rgba(255,255,255,.8);font-size:16.5px}

/* no radar agora: liga o blog ao CPT concursos */
.nb-radar{padding-top:clamp(40px,6vh,66px)}
.nb-radar .sec-head{margin-bottom:26px}
.nb-radar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nb-rcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 18px 20px;
  display:flex;flex-direction:column;gap:8px;transition:transform .18s,border-color .18s}
.nb-rcard:hover{transform:translateY(-3px);border-color:var(--indigo-900)}
.nb-rbadge{align-self:flex-start;font-size:11px;font-weight:800;padding:5px 11px;border-radius:999px;
  background:rgba(98,39,243,.1);color:var(--vivid)}
.nb-rcard h3{font-size:17px;font-weight:900;letter-spacing:-.01em}
.nb-rcard p{font-size:13.5px;color:var(--muted);font-weight:600;line-height:1.45}
.nb-radar-todos{margin-top:22px}
.nb-radar-todos a{font-weight:800;color:var(--vivid)}
.nb-radar-todos a:hover{color:var(--red)}

@media (max-width:1000px){
  .nb-radar-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nb-hero-grid{grid-template-columns:1fr;gap:34px}
  /* o mosaico vira enfeite abaixo do texto: some no celular, onde ele só
     empurraria o conteúdo pra baixo sem informar nada */
  .nb-hero-art{display:none}
  .nb-dest{grid-template-columns:1fr}
  .nb-dest-cover{aspect-ratio:16/9}
  .nb-aviso-in{flex-direction:column;align-items:flex-start}
  .nb-aviso-in .btn{width:100%;justify-content:center}
}
@media (max-width:560px){
  .nb-stats{gap:10px 22px}
  .nb-stats b{font-size:22px}
  .nb-radar-grid{grid-template-columns:1fr}
  .nb-filtros{padding-top:20px}
}