/* ============================================================
   RÁDIO TRIBOS — portal de notícias com rádio integrada
   Tema claro. A identidade neon vive no logo e nas faixas
   escuras; o texto usa um azul da mesma família, escurecido
   até ter contraste de verdade sobre o branco.
   ============================================================ */

:root{
  /* Papel */
  --branco:#FFFFFF;
  --papel:#F5F8FA;        /* alternância de seção */
  --papel-2:#EDF2F6;      /* superfícies dentro do papel */

  /* Tinta — neutros com um leve viés azul, para conversar com a marca */
  --tinta:#0C1621;
  --tinta-2:#516375;
  --tinta-3:#647689;   /* escurecido: o tom anterior nao chegava a 4,5:1 */
  --linha:#E1E8EE;
  --linha-2:#CFDAE4;

  /* Marca sobre branco, em dois papéis diferentes.
     Escurecer o azul até caber como TEXTO apaga a marca — vira azul de banco.
     Então o azul elétrico de verdade fica onde ele brilha: como FUNDO, com
     texto escuro por cima. Aí é vivo e legível ao mesmo tempo. */
  --azul-vivo:#00AEEF;        /* fundo de botão e selo — texto escuro em cima */
  --azul-vivo-2:#00CBF2;      /* ponta clara do gradiente */
  --azul-vivo-fundo:#009BD6;  /* o mesmo azul, um passo abaixo, para o hover */
  --sobre-vivo:#062231;       /* a tinta que vai em cima do azul vivo */

  --amarelo:#FFB51B;          /* a quarta cor da identidade, para o rodízio */
  --azul:#0086C3;             /* detalhes e bordas */
  --azul-forte:#0072A5;       /* TEXTO e links sobre branco: o mais vivo que
                                 ainda passa em contraste */

  /* Neon original — SÓ sobre fundo escuro */
  --neon-azul:#00AEEF;
  --neon-ciano:#00E5FF;
  --neon-verde:#72FF18;
  --escuro:#0A111A;
  --escuro-2:#101C29;

  --f-marca:'Orbitron','Impact','Arial Narrow',sans-serif;
  --f-hud:'Rajdhani','Segoe UI',system-ui,sans-serif;
  --f-texto:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;

  --gut:clamp(16px,3.5vw,32px);
  --max:1180px;
  --fita:44px;   /* fita da rádio, no topo */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:120px}

body{
  margin:0;
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:16.5px; line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
a{color:var(--azul-forte); text-decoration:none}
a:hover{color:var(--tinta)}
:focus-visible{outline:2px solid var(--azul); outline-offset:3px}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ══════════ FITA DA RÁDIO (topo, escura) ══════════
   A única coisa fixa da página. É aqui que o neon aparece: sobre preto ele
   funciona, e é o que amarra o blog à rádio. */
.fita{
  position:sticky; top:0; z-index:60;
  height:var(--fita);
  background:var(--escuro);
  color:#E9F1F7;
  border-bottom:1px solid #16283C;
}
.fita-in{
  height:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:12px;
}
.fita-play{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--neon-verde); background:transparent; color:var(--neon-verde);
  cursor:pointer; display:grid; place-items:center; padding:0;
  transition:background .16s,color .16s;
}
.fita-play:hover{background:var(--neon-verde); color:var(--escuro)}
.fita-play svg{width:10px;height:10px;fill:currentColor}
.fita-play .pausa{display:none}
body.tocando .fita-play .play{display:none}
body.tocando .fita-play .pausa{display:block}

.fita-selo{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-hud); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#7C8FA0;
  white-space:nowrap;
}
.luz{width:6px;height:6px;border-radius:50%;background:#7C8FA0;flex:0 0 auto}
body.tocando .fita-selo{color:var(--neon-verde)}
body.tocando .luz{background:var(--neon-verde);box-shadow:0 0 8px var(--neon-verde);animation:bate 2s ease-in-out infinite}
body.sem-sinal .fita-selo{color:#FFB51B}
body.sem-sinal .luz{background:#FFB51B}
@keyframes bate{0%,100%{opacity:1}50%{opacity:.3}}

.fita-prog{
  font-size:13.5px; color:#C7D5E0; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fita-prog b{color:var(--neon-ciano); font-weight:600}
.fita-eq{flex:0 0 auto; width:clamp(48px,10vw,120px); height:22px; margin-left:auto}
.fita-vol{flex:0 0 auto; display:flex; align-items:center; gap:7px}
.fita-vol svg{width:14px;height:14px;fill:#7C8FA0}
.fita-vol input{
  -webkit-appearance:none; appearance:none;
  width:70px; height:3px; background:#1F344A; cursor:pointer;
}
.fita-vol input::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px;height:11px;border-radius:50%;
  background:var(--neon-ciano); cursor:pointer;
}
.fita-vol input::-moz-range-thumb{
  width:11px;height:11px;border:0;border-radius:50%;
  background:var(--neon-ciano); cursor:pointer;
}
@media (max-width:760px){ .fita-eq,.fita-vol{display:none} .fita-prog{margin-right:auto} }

/* ══════════ CABEÇALHO ══════════
   O logo é neon: feito para viver no escuro. Sobre branco ele desaparece.
   Por isso ele ganha um selo preto com corte diagonal, que desce colado na fita
   da rádio — as duas peças escuras viram uma só, e o robô entra junto. */
/* O cabeçalho inteiro é escuro: o logo é neon e só vive bem assim, e a barra
   preta alta é o que dá o ar de emissora jovem em vez de portal de escritório.
   Fita + cabeçalho formam um bloco só, separados por um fio de neon. */
.topo{
  position:relative;
  background:var(--escuro-2);
  border-bottom:0;
}
.topo::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--neon-verde),var(--neon-ciano) 34%,var(--azul-vivo) 68%,var(--neon-verde));
}
.topo-in{
  max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:24px; min-height:96px;
}

.selo{
  display:flex; align-items:center; gap:15px;
  flex:0 0 auto; transition:transform .2s;
}
.selo:hover{transform:scale(1.03)}
.selo-robo{height:62px; width:auto; flex:0 0 auto}
.selo-nome{height:34px; width:auto; flex:0 0 auto}

/* No escuro o menu inverte. */
.topo .menu a{color:#A9BDCE}
.topo .menu a:hover{color:#fff; background:#FFFFFF14}

@media (max-width:920px){
  .topo-in{min-height:74px; flex-wrap:wrap; padding:12px var(--gut)}
  .selo-robo{height:46px}
  .selo-nome{height:25px}
  .topo .menu{background:transparent; border-bottom:0}
  .topo .menu a{border-bottom:1px solid #FFFFFF1A}
}
@media (max-width:420px){
  .selo-nome{display:none}   /* na tela estreita fica só o robô */
}

.menu{display:flex; gap:2px; margin-left:auto; align-items:center; flex-wrap:wrap; align-self:center}
.menu a{
  font-family:var(--f-hud); font-size:15px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--tinta-2); padding:8px 12px;
  white-space:nowrap; transition:color .16s, background .16s;
}
.menu a:hover{color:var(--tinta); background:var(--papel-2)}
.menu a.destaque{
  color:var(--sobre-vivo); border:0;
  background:linear-gradient(135deg,var(--azul-vivo),var(--azul-vivo-2));
}
.menu a.destaque:hover{
  background:linear-gradient(135deg,var(--azul-vivo-fundo),var(--azul-vivo));
  color:var(--sobre-vivo); box-shadow:0 3px 14px #00AEEF4D;
}

.menu-abrir{
  display:none; margin-left:auto; align-self:center;
  background:transparent; border:1px solid #2B4157;
  color:#E9F1F7; padding:9px 14px; cursor:pointer;
  font-family:var(--f-hud); font-size:14px; letter-spacing:.08em; text-transform:uppercase;
}
@media (max-width:920px){
  .menu-abrir{display:block}
  .menu{
    width:100%; flex-direction:column; align-items:stretch; gap:0;
    margin:12px 0 0; display:none;
  }
  .menu.aberto{display:flex}
  .menu a{padding:14px 4px; border-bottom:1px solid var(--linha)}
  .menu a.destaque{margin-top:10px; text-align:center; border-bottom:0}
  .topo-in{flex-wrap:wrap}
}

/* ══════════ MANCHETE ══════════ */
.manchete{padding:clamp(26px,4vw,44px) 0 clamp(20px,3vw,32px)}
.manchete-in{
  display:grid; gap:clamp(20px,3vw,34px);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .manchete-in{grid-template-columns:1.55fr .95fr; align-items:start} }

.destaque{
  border:1px solid var(--linha); background:var(--branco);
  overflow:hidden; display:flex; flex-direction:column;
}
.destaque .foto{
  aspect-ratio:3/2; background:var(--escuro);
  display:grid; place-items:center; overflow:hidden; position:relative;
}
.destaque .foto .selo-cat{position:absolute; left:0; bottom:0; z-index:2}
.destaque .foto img{width:100%;height:100%;object-fit:cover}
.destaque .corpo{padding:clamp(20px,3vw,30px)}
.destaque h2{
  font-size:clamp(26px,4vw,42px); line-height:1.12; margin:12px 0 14px;
  font-weight:800; letter-spacing:-.028em; text-wrap:balance;
}
.destaque p{margin:0; color:var(--tinta-2); font-size:17px}

.selo-cat{
  display:inline-block; font-family:var(--f-hud);
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sobre-vivo); background:var(--azul-vivo); padding:5px 11px;
}
.data{
  font-family:var(--f-hud); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-3);
}

/* Sem foto, o espaço vira uma placa da marca — não um buraco cinza. */
.placa{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 78% 22%, #00AEEF2E, transparent 62%),
    linear-gradient(135deg,#0A111A,#12243A);
  display:grid; place-items:center;
}
.placa span{
  font-family:var(--f-marca); font-weight:700;
  font-size:clamp(15px,2.4vw,24px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--neon-ciano); opacity:.92; text-align:center; padding:0 16px;
}

/* ── coluna da rádio, ao lado da manchete ── */
.radio-box{border:1px solid var(--linha); background:var(--papel)}
.radio-box .cabeca{
  position:relative; overflow:hidden;
  background:var(--escuro); color:#E9F1F7; padding:16px 20px;
}
/* O robô espia do canto: presente sem roubar a leitura do que está no ar. */
.cabeca-robo{
  position:absolute; right:-26px; bottom:-30px;
  width:132px; height:auto; opacity:.30;
  pointer-events:none; user-select:none;
}
.radio-box .cabeca > :not(.cabeca-robo){position:relative; z-index:1}
.radio-box .cabeca .rot{
  display:flex; align-items:center; gap:7px; margin:0 0 6px;
  font-family:var(--f-hud); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--neon-verde);
}
.radio-box .cabeca .prog{
  font-family:var(--f-marca); font-size:clamp(19px,2.4vw,24px); margin:0; line-height:1.15;
}
.radio-box .cabeca .loc{margin:6px 0 0; font-size:13.5px; color:#9FB2C2}
.radio-box .cabeca .loc b{color:var(--neon-ciano); font-weight:600}
.radio-box .corpo{padding:18px 20px}
.radio-box .desc{margin:0 0 14px; font-size:15px; color:var(--tinta-2)}

.tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 16px}
.tags li{
  font-family:var(--f-hud); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--azul-forte);
  border:1px solid var(--linha-2); padding:4px 9px; background:var(--branco);
}

.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-hud); font-size:14.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:12px 20px; border:0; color:var(--sobre-vivo);
  background:linear-gradient(135deg,var(--azul-vivo),var(--azul-vivo-2));
  cursor:pointer; transition:background .16s,color .16s,box-shadow .16s;
}
.bt:hover{
  background:linear-gradient(135deg,var(--azul-vivo-fundo),var(--azul-vivo));
  color:var(--sobre-vivo); box-shadow:0 3px 14px #00AEEF4D;
}
.bt svg{width:15px;height:15px;fill:currentColor}
.bt.claro{
  background:transparent; color:var(--azul-forte);
  border:1px solid var(--azul-vivo); box-shadow:none;
}
.bt.claro:hover{background:#00AEEF14; color:var(--azul-forte); box-shadow:none}
.bt.zap{background:#1EBE5D; color:#04240F; box-shadow:none}
.bt.zap:hover{background:#17A44E; color:#04240F; box-shadow:0 3px 14px #1EBE5D4D}
.bt[hidden]{display:none}
.bt-largo{width:100%}

/* ══════════ SEÇÕES ══════════ */
section{padding:clamp(34px,5vw,58px) 0}
section.cinza{background:var(--papel); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha)}

.cab{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-bottom:clamp(18px,2.5vw,26px);
  border-bottom:2px solid var(--tinta); padding-bottom:10px;
}
.cab h2{
  font-family:var(--f-marca); font-weight:700;
  font-size:clamp(21px,3vw,31px); margin:0; letter-spacing:.005em;
}
.cab .sub{margin:0; color:var(--tinta-2); font-size:15px}
.cab .mais{margin-left:auto; font-family:var(--f-hud); font-size:14px; letter-spacing:.06em; text-transform:uppercase}

/* ── grade de notícias ── */
.noticias{display:grid; gap:clamp(16px,2.4vw,26px); grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.noticia{display:flex; flex-direction:column; background:var(--branco)}
.noticia .foto{
  aspect-ratio:3/2; position:relative; overflow:hidden;
  background:var(--escuro); margin-bottom:13px;
}
.noticia .foto img{width:100%;height:100%;object-fit:cover; transition:transform .45s}
.noticia:hover .foto img{transform:scale(1.06)}

/* A etiqueta senta EM CIMA da foto, no canto — é o que dá o ar de emissora
   jovem em vez de jornal. E cada card puxa uma cor diferente da marca, em
   rodízio, para a página ganhar ritmo sem sair da identidade. */
.noticia .foto .selo-cat{
  position:absolute; left:0; bottom:0; z-index:2;
  font-size:11px; letter-spacing:.14em;
}
.noticia:nth-child(4n+1) .foto .selo-cat{background:var(--azul-vivo)}
.noticia:nth-child(4n+2) .foto .selo-cat{background:var(--neon-verde)}
.noticia:nth-child(4n+3) .foto .selo-cat{background:var(--neon-ciano)}
.noticia:nth-child(4n+4) .foto .selo-cat{background:var(--amarelo)}

.noticia .meta{display:flex; gap:10px; align-items:center; margin:0 0 7px; flex-wrap:wrap}
.noticia h3{
  font-size:clamp(19px,1.5vw,22px); line-height:1.24; margin:0 0 8px;
  font-weight:800; letter-spacing:-.018em;
}
.noticia h3 a{color:var(--tinta)}
.noticia h3 a:hover{color:var(--azul-forte)}
.noticia p{margin:0; font-size:15.5px; color:var(--tinta-2)}
.noticia .ler{
  margin-top:12px; font-family:var(--f-hud); font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--azul-forte);
}

/* ── faixa escura da programação ── */
.faixa-escura{
  background:var(--escuro); color:#E9F1F7;
  border-top:1px solid #16283C; border-bottom:1px solid #16283C;
}
.faixa-escura .cab{border-bottom-color:#22384F}
.faixa-escura .cab h2{color:#fff}
.faixa-escura .cab .sub{color:#93A6B7}
.faixa-escura .cab .mais{color:var(--neon-ciano)}

.grade{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.prog-card{
  border:1px solid #1B2E42; background:#0E1926;
  padding:18px; display:flex; flex-direction:column; gap:8px;
  transition:border-color .18s, transform .18s;
}
.prog-card:hover{border-color:#00AEEF55; transform:translateY(-2px)}
.prog-card.no-ar{border-color:#72FF1866; background:#0D1A16}
.prog-hora{
  font-family:var(--f-hud); font-size:12.5px; font-weight:700;
  letter-spacing:.12em; color:#7C8FA0; font-variant-numeric:tabular-nums;
}
.prog-card.no-ar .prog-hora{color:var(--neon-verde)}
.prog-card h3{font-family:var(--f-marca); font-size:17px; margin:0; color:#fff; line-height:1.2}
.prog-card p{margin:0; font-size:14px; color:#93A6B7}
.prog-loc{font-size:12.5px; color:#7C8FA0}
.prog-loc b{color:#C7D5E0; font-weight:600}
.faixa-escura .tags li{
  color:var(--neon-azul); border-color:#204058; background:transparent;
}

/* ── equipe ── */
.equipe{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.pessoa{text-align:center}
.retrato{
  width:96px; height:96px; margin:0 auto 12px;
  border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(140deg,#0A111A,#16324A);
  font-family:var(--f-marca); font-size:27px; color:var(--neon-ciano);
}
.retrato img{width:100%;height:100%;object-fit:cover}
.pessoa h3{font-size:17px; margin:0 0 3px; font-weight:700}
.pessoa .papel{font-size:13.5px; color:var(--tinta-3); margin:0 0 6px}
.pessoa .prog{
  font-family:var(--f-hud); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--azul-forte); margin:0;
}
.pessoa a{display:inline-block; margin-top:8px; font-size:13.5px}

/* ── promoção ── */
.promo{
  border:1px solid var(--linha); background:var(--branco);
  display:grid; gap:0; grid-template-columns:1fr;
  overflow:hidden;
}
@media (min-width:820px){ .promo{grid-template-columns:1fr 300px} }
.promo-corpo{padding:clamp(22px,3.4vw,34px)}
.promo-selo{
  display:inline-block; font-family:var(--f-hud); font-size:11.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--escuro); background:var(--neon-verde); padding:5px 12px; margin-bottom:12px;
}
.promo h3{font-size:clamp(20px,2.8vw,27px); margin:0 0 10px; font-weight:800; line-height:1.2}
.promo p{margin:0 0 8px; color:var(--tinta-2)}
.promo .como{
  font-size:15px; color:var(--tinta-2);
  border-left:3px solid var(--neon-verde); padding-left:14px; margin-top:16px;
}
.promo .prazo{
  font-family:var(--f-hud); font-size:13.5px; letter-spacing:.08em;
  color:var(--azul-forte); margin-top:12px;
}
.promo-lado{
  background:linear-gradient(150deg,#0A111A,#12243A);
  display:grid; place-items:center; padding:26px; gap:14px;
  align-content:center;
}
.promo-lado .bt{width:100%}

/* ── comercial ── */
.comercial{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:820px){ .comercial{grid-template-columns:1.15fr .85fr; align-items:center} }
.comercial h3{font-size:clamp(20px,2.8vw,27px); margin:0 0 10px; font-weight:800}
.comercial p{margin:0 0 18px; color:var(--tinta-2)}
.comercial ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.comercial li{
  display:flex; gap:10px; align-items:center; font-size:15.5px;
  padding:12px 15px; background:var(--branco); border:1px solid var(--linha);
}
.comercial li::before{content:''; width:6px; height:6px; background:var(--azul); flex:0 0 auto}

/* ── frequências ── */
.freqs{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.freq{border:1px solid var(--linha); background:var(--branco); padding:16px; text-align:center}
.freq .num{font-family:var(--f-marca); font-size:23px; color:var(--azul-forte); margin:0 0 3px}
.freq .cid{font-size:14px; color:var(--tinta-2); margin:0}

/* ── contato ── */
.contato-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.contato-item{border:1px solid var(--linha); background:var(--branco); padding:18px}
.contato-item .rot{
  font-family:var(--f-hud); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-3); margin:0 0 5px;
}
.contato-item .val{font-size:16px; margin:0; word-break:break-word}
.vazio{color:#9A6A00; background:#FFF6E0; border:1px solid #F0DCA8; padding:12px 15px; font-size:15px; margin-top:16px}
.vazio[hidden]{display:none}

.demo{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  border:1px solid #F0DCA8; background:#FFF6E0; color:#8A5D00;
  padding:11px 15px; margin-top:16px; font-size:14.5px;
}
.demo[hidden]{display:none}


/* ══════════ QUAL É A SUA TRIBO ══════════
   Chips grandes, um por profissão, em rodízio de cor. Só o clique busca. */
.chips{display:flex; flex-wrap:wrap; gap:10px}

.chip{
  font-family:var(--f-hud); font-size:15px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  padding:12px 20px; border:2px solid var(--linha-2); background:var(--branco);
  color:var(--tinta); cursor:pointer;
  transition:transform .16s, border-color .16s, background .16s, color .16s;
}
.chip:hover{transform:translateY(-2px); border-color:var(--tinta)}

/* Cada tribo puxa uma cor da marca — a página ganha ritmo sem sair da paleta. */
.chip:nth-child(4n+1){--cor:var(--azul-vivo)}
.chip:nth-child(4n+2){--cor:var(--neon-verde)}
.chip:nth-child(4n+3){--cor:var(--neon-ciano)}
.chip:nth-child(4n+4){--cor:var(--amarelo)}

.chip[aria-selected="true"]{
  background:var(--cor); border-color:var(--cor); color:var(--sobre-vivo);
  transform:translateY(-2px);
}

.tribo-painel{margin-top:26px; border-top:2px solid var(--tinta); padding-top:22px}
.tribo-painel[hidden]{display:none}
.tribo-chamada{
  margin:0 0 20px; font-size:17px; font-weight:600; color:var(--tinta-2);
}
.tribo-aviso{
  margin:14px 0 0; padding:12px 15px; font-size:15px;
  color:#8A5D00; background:#FFF6E0; border:1px solid #F0DCA8;
}
.tribo-aviso[hidden]{display:none}

/* Enquanto busca, aparecem esqueletos no lugar dos cards: a página não pula
   quando as notícias chegam. */
.esqueleto{pointer-events:none}
.esqueleto .foto{background:var(--papel-2); animation:pulsa 1.2s ease-in-out infinite}
.esqueleto .barra{
  height:13px; background:var(--papel-2); margin-bottom:8px;
  animation:pulsa 1.2s ease-in-out infinite;
}
.esqueleto .barra.curta{width:55%}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.5}}

@media (max-width:520px){
  .chip{font-size:13.5px; padding:11px 15px}
}

/* ══════════ RODAPÉ ══════════ */
.rodape{background:var(--escuro); color:#93A6B7; padding:40px 0 34px; border-top:3px solid var(--azul-vivo)}
.rodape-in{display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start}
.rodape img{height:38px;width:auto}
.rodape p{margin:10px 0 0; font-size:13.5px; color:#6E8296}
.sociais{display:flex; gap:9px; flex-wrap:wrap}
.sociais a{
  width:40px;height:40px; display:grid; place-items:center;
  border:1px solid #1F344A; color:#93A6B7;
  transition:border-color .16s,color .16s;
}
.sociais a:hover{border-color:var(--neon-ciano); color:var(--neon-ciano)}
.sociais svg{width:17px;height:17px;fill:currentColor}
.sociais a[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}