:root{
  --marinho:#06173D;
  --marinho-2:#0A2456;
  --laranja:#F0A020;
  --laranja-esc:#C97E08;
  --azul:#1256C4;
  --tinta:#0E1420;
  --texto-2:#566074;
  --texto-3:#8A93A3;
  --linha:#E6E9EE;
  --fundo:#FFFFFF;
  --fundo-2:#F5F7FA;
  --titulo:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --corpo:"Inter",ui-sans-serif,system-ui,sans-serif;
  --gutter:18px;
  /* cor por editoria: só uma barrinha antes do chapéu, pra varrer a página rápido */
  --ed-cidade:#1256C4;
  --ed-policia:#B3261E;
  --ed-transito:#C97E08;
  --ed-eleicoes:#5B3FBF;
  --ed-cultura:#0F7B6C;
  --ed-economia:#1B6B45;
  --raio:6px;
  /* escala de tempo única: micro-feedback, transição curta, transição média */
  --t-micro:130ms;
  --t-curto:220ms;
  --t-medio:360ms;
  --sai:cubic-bezier(.16,1,.3,1);      /* desacelera — coisa que entra  */
  --entra:cubic-bezier(.55,0,1,.45);   /* acelera — coisa que sai       */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important}
  .reveal{opacity:1!important;transform:none!important}
  figure.carregando::after{display:none}
}
/* O celular deixa "esticar" a página além do fim, e ali ele mostra o fundo do
   <html>, não o do <body>. Sem isso aparece uma faixa branca embaixo do rodapé
   marinho quando a pessoa puxa a tela pra cima no fim da página. */
html{background:var(--marinho)}
body{margin:0;background:var(--fundo);color:var(--tinta);font-family:var(--corpo);
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:where(a,button,input):focus-visible{outline:2px solid var(--laranja);outline-offset:2px}

.shell{max-width:1220px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- manchetes ---------- */
.h{font-family:var(--titulo);font-variation-settings:"wdth" 94;font-weight:700;
   line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance}
.h em{font-style:normal;color:var(--azul)}          /* a assinatura dos cards deles */
a.bloco-link{display:block}
a.bloco-link:hover .h{text-decoration:underline;text-decoration-thickness:2px;
                      text-underline-offset:3px;text-decoration-color:var(--laranja)}

.etiqueta{display:inline-block;font-family:var(--titulo);font-variation-settings:"wdth" 88;
          font-weight:700;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
          color:var(--laranja-esc)}
.etiqueta::after{content:"";display:inline-block;width:14px;height:1px;background:var(--laranja);
                 vertical-align:middle;margin-left:8px}

/* cabeçalho de seção: filete laranja em cima, sem caixa */
.secao-topo{border-top:3px solid var(--laranja);padding-top:10px;margin-bottom:20px;
            display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.secao-topo h2{font-family:var(--titulo);font-variation-settings:"wdth" 90;font-weight:800;
               font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;margin:0;
               color:var(--marinho)}
.secao-topo p{margin:0;font-size:.8125rem;color:var(--texto-3)}

/* ---------- barra superior ---------- */
.barra{background:var(--marinho-2);color:#AEC0DD;font-size:.75rem}
.barra .shell{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-block:7px}
.barra .redes{margin-left:auto;display:flex;gap:14px}
.so-largo{display:none}   /* no celular a cidade já está no nome do portal */
.barra a:hover{color:#fff}

/* ---------- cabeçalho ---------- */
.topo{background:var(--marinho);border-bottom:3px solid var(--laranja)}
.topo .shell{display:flex;align-items:center;gap:14px;padding-block:15px}
.marca{display:flex;align-items:center;gap:11px}
.marca img{width:54px;height:54px;border-radius:10px;flex:none}
.marca .nome{font-family:var(--titulo);font-variation-settings:"wdth" 90;font-weight:700;
             font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.25;color:#fff}
.marca .nome span{display:block;font-weight:500;font-size:.625rem;letter-spacing:.12em;color:#93A8CC}
.busca{margin-left:auto;display:none;flex:0 1 260px}
.busca input{flex:1;height:38px;border:1px solid rgba(255,255,255,.2);border-right:0;
             border-radius:3px 0 0 3px;padding:0 12px;font:inherit;font-size:.875rem;min-width:0;
             background:rgba(255,255,255,.08);color:#fff}
.busca input::placeholder{color:#8296B8}
.busca button{height:38px;padding:0 14px;border:0;border-radius:0 3px 3px 0;
              background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:.8125rem;
              font-weight:600;cursor:pointer}
.busca button:hover{background:rgba(255,255,255,.26)}
.anuncie{display:none;height:38px;align-items:center;padding:0 18px;border-radius:3px;
         background:var(--laranja);color:#2A1A00;font-weight:700;font-size:.8125rem;
         font-family:var(--titulo);letter-spacing:.07em;text-transform:uppercase}
.anuncie:hover{background:#FFB53A}

/* ---------- menu ---------- */
.menu{border-bottom:1px solid var(--linha);background:rgba(255,255,255,.96);
      backdrop-filter:blur(8px);position:sticky;top:0;z-index:40}
.menu .shell{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none}
.menu .shell::-webkit-scrollbar{display:none}
.menu a{font-family:var(--titulo);font-variation-settings:"wdth" 90;font-weight:600;font-size:.8125rem;
        letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:14px 0;
        border-bottom:3px solid transparent;color:var(--texto-2)}
.menu a:hover,.menu a[aria-current]{color:var(--tinta);border-bottom-color:var(--laranja)}

/* ---------- capa ---------- */
.capa{padding-block:28px 30px}
.capa .grade{display:grid;gap:30px}
.lead figure{margin:0;overflow:hidden;background:var(--fundo-2);border-radius:var(--raio)}
.lead img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}
.lead a:hover img{transform:scale(1.02)}
.lead .texto{padding-top:16px}
.lead .h{font-size:clamp(1.65rem,5.2vw,2.9rem);margin-top:10px}
.lead .linha-fina{margin:14px 0 0;font-size:1.0625rem;line-height:1.6;color:var(--texto-2);max-width:56ch}
.assinatura{margin:14px 0 0;font-size:.75rem;color:var(--texto-3);letter-spacing:.02em}

.ultimas .lista{list-style:none;margin:0;padding:0;counter-reset:n}
.ultimas li{counter-increment:n;display:flex;gap:13px;padding:14px 0;border-top:1px solid var(--linha)}
.ultimas li:first-child{border-top:0;padding-top:0}
.ultimas li::before{content:"0" counter(n);font-family:var(--titulo);font-weight:800;font-size:.875rem;
                    color:var(--laranja-esc);line-height:1.5;min-width:20px}
.ultimas .h{font-size:.9375rem;font-weight:600;line-height:1.3}
.ultimas time{display:block;margin-top:5px;font-size:.6875rem;color:var(--texto-3)}

/* ---------- banner de patrocinadores (gira a cada 4s) ---------- */
.publi{background:var(--fundo-2);border-bottom:1px solid var(--linha);padding-block:12px 10px}
.publi-selo{display:block;font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
            color:var(--texto-3);margin-bottom:6px}
.publi-palco{position:relative;aspect-ratio:343/118;min-height:108px;max-height:148px;
             border-radius:var(--raio);overflow:hidden;
             background:var(--marinho)}
.publi-slide{position:absolute;inset:0;display:flex;align-items:center;gap:14px;
             padding:14px 16px;opacity:0;pointer-events:none;
             transition:opacity .55s ease}
.publi-slide.ativo{opacity:1;pointer-events:auto}
/* arte pronta do anunciante: contain, nunca cover — nao se corta peça paga */
.publi-slide.arte{padding:0;background:#fff;box-shadow:inset 0 0 0 1px var(--linha)}
.publi-slide.arte img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
/* com arte no ar, o palco fica no formato da arte (1170 × 150): sem sobra em volta */
.publi-palco.so-arte{aspect-ratio:1170/150;height:auto;min-height:0;max-height:none;background:#fff}
/* arte do apoio (360 × 200) ocupa o quadro inteiro */
.apoio-slot.arte{padding:0;min-height:0;aspect-ratio:9/5;overflow:hidden;background:#fff}
.apoio-slot.arte img{display:block;width:100%;height:100%;object-fit:contain}
.publi-marca{flex:none;width:52px;height:52px;border-radius:9px;display:grid;place-content:center;
             font-family:var(--titulo);font-weight:800;font-size:1.0625rem;letter-spacing:.02em}
.publi-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.publi-txt strong{font-family:var(--titulo);font-variation-settings:"wdth" 92;font-weight:700;
                  font-size:1rem;line-height:1.15;letter-spacing:-.005em}
.publi-txt small{font-size:.75rem;line-height:1.35;opacity:.82}
.publi-cta{display:none;flex:none;margin-left:auto;font-family:var(--titulo);font-weight:700;
           font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
           padding:10px 18px;border-radius:999px;white-space:nowrap}

/* cada patrocinador com um tom diferente, pra dar pra ver que está girando */
.tom-a{background:linear-gradient(100deg,#06173D,#123A80);color:#fff}
.tom-a .publi-marca{background:rgba(255,255,255,.14);color:#fff}
.tom-a .publi-cta{background:#fff;color:var(--marinho)}
.tom-b{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linha)}
.tom-b .publi-marca{background:#E8EFFC;color:var(--azul)}
.tom-b .publi-cta{background:var(--azul);color:#fff}
.tom-cta{background:linear-gradient(100deg,#F0A020,#E08908);color:#2A1A00}
.tom-cta .publi-marca{background:rgba(42,26,0,.14);color:#2A1A00}
.tom-cta .publi-cta{background:#2A1A00;color:#FFCB63}

.publi-pontos{display:flex;justify-content:center;gap:7px;margin-top:9px}
.publi-ponto{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
             background:#C3CBD8;transition:background .2s ease,width .2s ease}
.publi-ponto.ativo{background:var(--laranja-esc);width:20px;border-radius:999px}
.publi-ponto:hover{background:var(--texto-2)}

/* ---------- vitrine de apoio (patrocínio do rodapé) ----------
   De propósito diferente do banner do topo: aqui vários aparecem ao mesmo
   tempo e nada gira. É o que justifica o preço menor deste espaço. */
.faixa-apoio{background:var(--fundo);border-top:1px solid var(--linha);padding-block:30px}
.apoio-topo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.apoio-selo{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.apoio-topo p{margin:0;font-family:var(--titulo);font-variation-settings:"wdth" 90;font-weight:700;
              font-size:.9375rem;letter-spacing:.04em;text-transform:uppercase;color:var(--marinho)}
.apoio-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* número ímpar de patrocinadores no celular: o último fica no meio, não sozinho no canto */
.apoio-grade>.apoio-slot:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
.apoio-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
            text-align:center;padding:16px 10px;background:var(--fundo-2);
            border:1px solid var(--linha);border-radius:var(--raio);min-height:104px;
            transition:border-color .16s ease,transform .16s ease,background .16s ease}
.apoio-slot:hover{border-color:var(--laranja);background:#fff;transform:translateY(-2px)}
.apoio-marca{width:34px;height:34px;border-radius:8px;display:grid;place-content:center;
             background:var(--marinho);color:var(--laranja);font-family:var(--titulo);
             font-weight:800;font-size:.8125rem}
.apoio-nome{font-size:.75rem;font-weight:600;color:var(--texto-2);line-height:1.25}
.apoio-medida{font-size:.6875rem;color:var(--texto-3)}

/* ---------- chamada de anúncio (rodapé) ---------- */
.anuncie-faixa{background:var(--fundo-2);border-top:1px solid var(--linha);padding-block:30px}
.anuncie-simples{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
                 border-top:3px solid var(--laranja);padding-top:18px}
.anuncie-simples h2{font-family:var(--titulo);font-variation-settings:"wdth" 90;font-weight:800;
                    font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;margin:0;
                    color:var(--marinho)}
.anuncie-btn{display:inline-flex;align-items:center;height:42px;padding:0 22px;border-radius:999px;
             background:var(--marinho);color:#fff;font-family:var(--titulo);font-weight:700;
             font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;margin-left:auto}
.anuncie-btn:hover{background:var(--marinho-2)}

/* ---------- feed em lista, no padrão dos portais ---------- */
.bloco{padding-block:30px 40px}
.feed{display:grid;gap:34px}
.lista-noticias{margin:0;padding:0;list-style:none}
.lista-noticias > li{border-top:1px solid var(--linha)}
.lista-noticias > li:hover{background:var(--fundo-2)}
.lista-noticias > li:first-child{border-top:0}
/* celular: chapéu e manchete primeiro, foto larga embaixo — como os portais fazem */
.item{display:grid;grid-template-areas:"cabeca" "foto" "pe";gap:12px;padding:20px 14px;
      margin-inline:-14px;border-radius:var(--raio);transition:background .16s ease}
.cabeca-item{grid-area:cabeca}
.item figure{grid-area:foto;margin:0;overflow:hidden;background:var(--fundo-2);border-radius:var(--raio)}
.pe-item{grid-area:pe}
.item img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
.item:hover img{transform:scale(1.03)}
.chapeu{display:flex;align-items:center;gap:8px;font-family:var(--titulo);
        font-variation-settings:"wdth" 92;font-weight:600;font-size:.75rem;letter-spacing:.07em;
        text-transform:uppercase;color:var(--texto-2);margin-bottom:7px}
.chapeu[data-ed]::before{content:"";width:3px;height:13px;border-radius:2px;flex:none;
                         background:var(--texto-3)}
.chapeu[data-ed="cidade"]::before{background:var(--ed-cidade)}
.chapeu[data-ed="policia"]::before{background:var(--ed-policia)}
.chapeu[data-ed="transito"]::before{background:var(--ed-transito)}
.chapeu[data-ed="eleicoes"]::before{background:var(--ed-eleicoes)}
.chapeu[data-ed="cultura"]::before{background:var(--ed-cultura)}
.chapeu[data-ed="economia"]::before{background:var(--ed-economia)}
.item .h{font-size:1.1875rem;font-weight:700;color:var(--marinho-2);line-height:1.22}
.item:hover .h{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.item .h em{color:var(--azul)}
.item .apoio{margin:0 0 8px;padding:0;list-style:none}
.item .apoio li{font-size:.875rem;color:var(--texto-2);padding:3px 0 3px 15px;position:relative}
.item .apoio li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
                        border-radius:50%;background:var(--laranja)}
.meta{display:block;margin-top:9px;font-size:.75rem;color:var(--texto-3)}

/* caixa lateral do feed, tipo "Viu isso?" */
.viu{background:var(--fundo-2);border:1px solid var(--linha);border-radius:6px;padding:16px}
.viu h2{font-family:var(--titulo);font-variation-settings:"wdth" 90;font-weight:700;
        font-size:.9375rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px;
        color:var(--marinho)}
.viu ul{list-style:none;margin:0;padding:0}
.viu li{border-top:1px solid var(--linha)}
.viu li:first-child{border-top:0}
.viu a{border-radius:4px;transition:background .16s ease}
.viu a:hover{background:#EDF1F7}
.viu a{display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:12px;align-items:start;
       padding-block:13px}
.viu .h{font-size:.875rem;font-weight:600;color:var(--marinho-2);line-height:1.3}
.viu a:hover .h{text-decoration:underline;text-underline-offset:2px}
.viu img{width:68px;height:68px;object-fit:cover;border-radius:4px}

@media (min-width:620px){
  .item{grid-template-columns:210px minmax(0,1fr);
        grid-template-areas:"foto cabeca" "foto pe";
        gap:6px 20px;align-content:start;padding-block:22px}
  /* nota rápida de utilidade, sem foto: ocupa a largura toda */
  .item.sem-foto{grid-template-columns:minmax(0,1fr);
                 grid-template-areas:"cabeca" "pe";gap:8px}
  .item figure{align-self:start}
  .item img{aspect-ratio:4/3}
  .item .h{font-size:1.25rem}
}
@media (min-width:1020px){
  .feed{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
  .item{grid-template-columns:240px minmax(0,1fr);gap:6px 22px}
  .item.sem-foto{grid-template-columns:minmax(0,1fr)}
  .item .h{font-size:1.375rem}
}

/* ---------- utilidade pública ---------- */
.utilidade{background:var(--fundo-2);border-block:1px solid var(--linha);padding-block:38px}
.uteis{display:grid;gap:14px;margin-top:24px}
.util{background:var(--fundo);border:1px solid var(--linha);border-top:3px solid var(--marinho);
      padding:18px;border-radius:0 0 var(--raio) var(--raio)}
.util h3{font-family:var(--titulo);font-weight:700;font-size:1rem;margin:0 0 7px}
.util p{margin:0;font-size:.875rem;line-height:1.55;color:var(--texto-2)}
.util a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.util .destaque{display:block;font-family:var(--titulo);font-weight:700;font-size:1.0625rem;
                color:var(--marinho);margin-top:9px}

/* ---------- rodapé ---------- */
footer{background:var(--marinho);color:#93A6C6;padding-block:32px 22px;font-size:.875rem}
.pe-topo{display:grid;gap:26px}

/* marca, descrição e o convite de pauta andam juntos — antes o logo flutuava sozinho */
.pe-marca .marca{margin-bottom:13px}
.pe-marca p{margin:0 0 15px;font-size:.8125rem;line-height:1.6;max-width:46ch}
.pe-zap{display:inline-block;color:var(--laranja);font-weight:600;font-size:.8125rem;
        line-height:1.45;border-bottom:1px solid rgba(240,160,32,.35);padding-bottom:3px;
        transition:color .16s ease,border-color .16s ease}
.pe-zap:hover{color:#FFC559;border-bottom-color:var(--laranja)}

/* três colunas lado a lado já no celular: empilhadas, o texto é curto
   demais e deixava metade da largura vazia */
footer .colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
footer h3{font-family:var(--titulo);font-weight:700;font-size:.6875rem;letter-spacing:.11em;
          text-transform:uppercase;color:var(--laranja);margin:0 0 9px}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:3px 0;line-height:1.35}
footer a:hover{color:#fff}
.rodape-aviso{margin-top:24px;padding-top:14px;border-top:1px solid rgba(147,166,198,.18);
              font-size:.6875rem;color:#5E718F}

/* ---------- desktop ---------- */
@media (min-width:720px){
  :root{--gutter:26px}
  .busca{display:flex}
  .so-largo{display:inline}
  .uteis{grid-template-columns:repeat(2,1fr)}
  .apoio-grade{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}   /* todos numa linha, quantos forem */
  .apoio-grade>.apoio-slot:last-child:nth-child(odd){grid-column:auto;width:auto}
  .pe-topo{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:start}
  footer .colunas{gap:24px 20px}
  .publi-palco{aspect-ratio:auto;height:150px;max-height:none}
  .publi-slide{padding:0 26px;gap:20px}
  .publi-marca{width:62px;height:62px;font-size:1.25rem}
  .publi-txt strong{font-size:1.25rem}
  .publi-txt small{font-size:.875rem}
  .publi-cta{display:inline-flex;align-items:center}

}
@media (min-width:1020px){
  .anuncie{display:inline-flex}
  .publi-palco{height:150px}
  .capa .grade{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:36px}
  .uteis{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}   /* quantos o dono preencher */
}

/* ---------- página de matéria ---------- */
.trilha{font-size:.75rem;color:var(--texto-3);padding-block:18px 0}
.trilha a{color:var(--laranja-esc)}
.trilha a:hover{text-decoration:underline}
.materia{padding-block:14px 40px}
.materia .grade{display:grid;gap:34px}
.artigo>.etiqueta{margin-bottom:10px}
.artigo h1{font-family:var(--titulo);font-variation-settings:"wdth" 94;font-weight:700;
           font-size:clamp(1.7rem,4.6vw,2.6rem);line-height:1.07;letter-spacing:-.015em;
           margin:0;text-wrap:balance}
.artigo h1 em{font-style:normal;color:var(--azul)}
.artigo .olho{margin:16px 0 0;font-size:1.125rem;line-height:1.6;color:var(--texto-2);max-width:60ch}
.credito-topo{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:20px 0 0;
              padding-block:14px;border-block:1px solid var(--linha);
              font-size:.75rem;color:var(--texto-3)}
.credito-topo b{color:var(--tinta);font-weight:600}
.artigo figure{margin:24px 0 0}
.artigo figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--fundo-2);border-radius:var(--raio)}
.artigo figcaption{margin-top:8px;font-size:.75rem;color:var(--texto-3)}
.corpo{margin-top:26px;max-width:62ch}
.corpo p{margin:0 0 18px;font-size:1.0625rem;line-height:1.75}
.corpo p:last-child{margin-bottom:0}
.nota-redacao{margin-top:26px;padding:14px 16px;border-left:3px solid var(--laranja);
              background:var(--fundo-2);font-size:.875rem;color:var(--texto-2)}
.compartilhar{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;padding-top:20px;
              border-top:1px solid var(--linha)}
.compartilhar span{font-size:.75rem;color:var(--texto-3);align-self:center;margin-right:4px}
.compartilhar a{font-family:var(--titulo);font-weight:700;font-size:.75rem;letter-spacing:.06em;
                text-transform:uppercase;padding:8px 14px;border:1px solid var(--linha);border-radius:3px}
.compartilhar a:hover{border-color:var(--laranja);color:var(--laranja-esc)}
.patro-lateral{display:block;background:linear-gradient(140deg,#06173D,#123A80);color:#fff;
               border-radius:var(--raio);padding:20px 18px;margin-top:4px;
               transition:filter .18s ease}
.patro-lateral:hover{filter:brightness(1.14)}
.patro-marca{display:grid;place-content:center;width:44px;height:44px;border-radius:9px;
             background:rgba(255,255,255,.14);font-family:var(--titulo);font-weight:800;
             font-size:.9375rem;margin-bottom:13px}
.patro-lateral b{display:block;font-family:var(--titulo);font-variation-settings:"wdth" 92;
                 font-weight:700;font-size:1.0625rem;line-height:1.2}
.patro-lateral span:last-child{display:block;margin-top:7px;font-size:.8125rem;line-height:1.5;
                               color:#B7C7E4}
.leia-tambem{margin-top:30px}
.leia-tambem ul{list-style:none;margin:0;padding:0}
.leia-tambem li{padding:13px 0;border-top:1px solid var(--linha)}
.leia-tambem li:first-child{border-top:0;padding-top:0}
.leia-tambem .h{font-size:.9375rem;font-weight:600;line-height:1.3}
@media (min-width:1020px){
  .materia .grade{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:44px}
}


/* =========================================================================
   Microinterações
   Regra do site: só transform e opacity (60fps), nada de width/top/left.
   Tudo funciona sem JS — o JS só melhora.
   ========================================================================= */

/* ---- foto chegando: brilho no lugar dela, depois aparece sem pulo ----
   Importa aqui porque muita gente abre pelo celular em conexão ruim:
   sem isso a página fica com buracos brancos e dá solavanco quando a foto cai. */
figure.carregando{position:relative;overflow:hidden}
figure.carregando::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.62) 50%,transparent 82%);
  animation:brilho 1.3s linear infinite}
@keyframes brilho{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
img.foto-fade{opacity:0;transition:opacity var(--t-medio) var(--sai)}
img.foto-fade.pronta{opacity:1}

/* ---- aparecer ao rolar: 6px e 240ms, o suficiente pra dar continuidade
       sem atrasar a leitura. Classe entra pelo JS, então sem JS já nasce visível. ---- */
.reveal{opacity:0;transform:translateY(6px)}
.reveal.visivel{opacity:1;transform:none;
  transition:opacity 240ms var(--sai),transform 240ms var(--sai)}

/* ---- resposta ao toque: no celular não existe hover, o dedo precisa de retorno ---- */
a,button{-webkit-tap-highlight-color:transparent}
.anuncie-btn,.publi-cta,.busca button,.anuncie,.publi-ponto{
  transition:transform var(--t-micro) var(--sai),background var(--t-micro) var(--sai)}
.anuncie-btn:active,.publi-cta:active,.busca button:active,.anuncie:active{transform:scale(.97)}
.item:active,.viu a:active,.ultimas li:active{background:#EDF1F7}
.publi-slide.ativo:active{transform:scale(.995)}
.publi-slide{transition:opacity .55s var(--sai),transform var(--t-micro) var(--sai)}

/* ---- menu grudado ganha sombra: mostra que ele descolou do conteúdo ---- */
.menu{transition:box-shadow var(--t-curto) var(--sai)}
.menu.grudado{box-shadow:0 8px 20px -10px rgba(14,20,32,.28)}

/* ---- o ponto ativo do banner conta os 4s; congela quando o banner pausa ---- */
.publi-ponto{position:relative;overflow:hidden}
.publi-ponto.ativo{background:#D5DCE7}
.publi-ponto.ativo::after{content:"";position:absolute;inset:0;background:var(--laranja-esc);
  transform-origin:left;transform:scaleX(0)}
.publi-ponto.ativo.contando::after{animation:enche 4s linear forwards}
.publi-pontos.pausado .publi-ponto.ativo::after{animation-play-state:paused}
@keyframes enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* o painel esconde bloco vazio com o atributo hidden: tem que vencer o display das classes */
[hidden]{display:none!important}