/* =========================================================================
   AKROS — o Radar (08/10)

   Faixa azul-noite entre as dúvidas (papel claro) e o fecho (grafite). Reaproveita
   .bloco e .faixa (estudio.css), .sechead (pipeline.css), a tinta clara e o
   mosaico de escuro.css; o vão entre faixas de organico.css. Carrega por
   último porque repete, para o #radar, regras que lá são listas de ids.
   ========================================================================= */

/* `hidden` é display:none do navegador, mas .bloco é flex e venceria */
#radar[hidden]{display:none !important}

/* o chão e o mosaico: 15/10, o dono pediu o fundo escuro do pipeline (o
   grafite); depois, «com tom que destoe das seções adjacentes». Os vizinhos
   são o papel claro (piloto, depoimentos) e o resto do escuro é grafite:
   o radar vira o AZUL-MARINHO profundo da marca (o chão antigo das perdas),
   o único da página, com os cartões e o mosaico da família azul.
   15/10, à noite: os Bastidores (bastidores.css) entram antes, no MESMO azul,
   «para parecer uma seção só». O degradê é pintado uma vez na corrida das
   duas faixas: cada uma mostra a fatia dela (o tamanho e o deslocamento da
   corrida são os do mosaico, js/mosaico.js). Sem o Radar, a corrida é só os
   Bastidores e o degradê cabe inteiro neles. A cor de baixo cobre o instante
   antes de o js medir.
   20/10: o dono pediu «uma leve diferenciação de tom de fundo» entre as
   duas. O degradê segue um só; por cima dele vai o véu `--veu` (a 1ª camada,
   transparente nos Bastidores), e o Radar fica um tom mais fundo. */
:is(#bastidores,#radar){
  background:
    linear-gradient(var(--veu,transparent),var(--veu,transparent)),
    radial-gradient(70% 60% at 50% 115%,rgba(56,140,206,.42) 0%,rgba(56,140,206,0) 64%),
    radial-gradient(50% 46% at 0% 90%,rgba(30,96,158,.32) 0%,rgba(30,96,158,0) 62%),
    linear-gradient(168deg,#0C2540 0%,#0A1C31 46%,#0C2439 100%);
  background-color:#0B1F35;
  background-size:100% var(--mos-run-h,100%);
  background-position:0 var(--mos-run-y,0px);
  background-repeat:no-repeat;
  --gr-card:#122C4B;
  --gr-card-2:#183659;
  --mos-forca:.6;
}
#radar{--veu:rgba(2,9,20,.28);background-color:#08182A}
:is(#bastidores,#radar)::before{opacity:.09}

/* o vão entre faixas (organico.css, «RITMO ENTRE AS FAIXAS») */
#top :is(#bastidores,#radar){padding-top:var(--sec-t);padding-bottom:var(--sec-b)}
@media (min-width:1181px){ #top :is(#bastidores,#radar){height:auto;min-height:0} }

.radar__pilha{display:flex;flex-direction:column;gap:clamp(28px,4.4vh,52px)}

/* o cabeçalho é o mesmo nas duas faixas azuis */
:is(#bastidores,#radar) .sechead{max-width:min(900px,100%);margin:0 auto;text-align:center}
:is(#bastidores,#radar) .sechead__eyebrow{margin-bottom:clamp(10px,1.6vh,18px);color:var(--accent-hi)}
:is(#bastidores,#radar) .sechead__eyebrow i{display:none}
:is(#bastidores,#radar) .sechead__title{font-size:min(clamp(2rem,4vw,3.6rem),6vh);margin-bottom:clamp(10px,1.6vh,18px)}
:is(#bastidores,#radar) .sechead__sub{max-width:62ch;margin:0 auto}

/* ---- o carrossel: css/carrossel.css (a fôrma única, 08/10) ---- */

/* ---- o cartão (11/10, do dono: «deixe os cards muito infinitamente mais profissionais») ----
   Lido como uma nota de análise, de cima para baixo:
     1. o VEÍCULO: sigla em tile + nome + editoria e data (quem disse e quando);
     2. a MANCHETE, na fonte dos títulos da página;
     3. a LEITURA DA AKROS num painel próprio, com o triângulo da marca: separa o fato do veículo da
        opinião da casa;
     4. o rodapé, uma linha só, com a ação de sair para a matéria original.
   O cartão é BRANCO sobre o azul-noite desde 08/10 (teste do dono que ficou). A tinta dele é a escura do
   papel, com os tons do `.claro` (claro.css); o azul passa de 4,5:1 no branco. As transições são de
   cor e opacidade; a entrada é a de sempre (classe `is-in`, dada pelo js). */
#radar .radar__c{
  --ink:#0A1F45;
  --ink-soft:#16325A;
  --body:#3A4A60;
  --faint:#5E6E84;
  --accent-hi:#0A66C2;
  --linha:rgba(10,31,69,.09);
  --pad:clamp(20px,1.6vw,26px);
  position:relative;
  display:flex;flex-direction:column;
  padding:var(--pad) var(--pad) 0;
  border:1px solid rgba(10,31,69,.08);
  border-radius:calc(16px * var(--r,1));
  background:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 1px 2px rgba(4,12,28,.28),0 26px 50px -30px rgba(0,0,0,.85);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),opacity .6s var(--ease),transform .6s var(--ease);
  opacity:0;transform:translateY(14px);
  transition-delay:0s,0s,var(--d,0s),var(--d,0s);
}
#radar .radar__c.is-in{opacity:1;transform:none}
#radar .radar__c:hover,#radar .radar__c:focus-within{
  border-color:rgba(10,128,226,.6);
  box-shadow:0 0 0 3px rgba(10,128,226,.20),0 1px 2px rgba(4,12,28,.28),0 30px 54px -28px rgba(0,0,0,.9);
}
@media (prefers-reduced-motion:reduce){ #radar .radar__c{opacity:1;transform:none;transition:none} }
html:not(.js) #radar .radar__c{opacity:1;transform:none}

/* 1. o veículo. A sigla é tipográfica (nunca a logo do veículo); nome e linha de baixo cortam com
   reticências, para o cabeçalho ter a mesma altura em todo cartão */
.radar__cab{display:flex;align-items:center;gap:12px;min-width:0}
.radar__sigla{
  flex:none;display:grid;place-items:center;width:38px;height:38px;
  border-radius:calc(10px * var(--r,1));
  background:linear-gradient(155deg,#16386E,#0A1F45);
  color:#FFFFFF;font-family:var(--titulo);font-weight:600;font-size:.8rem;letter-spacing:.03em;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 2px 6px -2px rgba(10,31,69,.45);
}
.radar__sigla.is-longa{font-size:.6rem;letter-spacing:.01em}
.radar__orig{display:flex;flex-direction:column;gap:4px;min-width:0}
.radar__de{
  font-size:.86rem;font-weight:600;line-height:1.2;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.radar__quando{
  font-size:.74rem;line-height:1.2;color:var(--faint);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.radar__cat{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-hi)}
.radar__quando i{font-style:normal;margin:0 6px;color:rgba(10,31,69,.28)}

/* 2. a manchete: três linhas reservadas, para o painel de leitura começar na mesma altura nos
   cartões de título curto */
.radar__t{
  margin:20px 0 0;min-height:calc(3 * 1.3em);
  font-family:var(--titulo);font-size:clamp(1.05rem,1.15vw,1.18rem);line-height:1.3;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);text-wrap:pretty;
  transition:color .2s var(--ease);
}
.radar__t a{color:inherit;text-decoration:none}
/* o cartão inteiro é a área de clique da página da notícia; o link do veículo fica por cima dela */
.radar__t a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.radar__t a:focus-visible{outline:none}
.radar__c:has(.radar__t a:focus-visible){outline:2px solid #4DA3FF;outline-offset:3px}
#radar .radar__c:hover .radar__t{color:#0A4D9C}

/* 3. a leitura da Akros: painel com o filete azul à esquerda; estica para os rodapés alinharem */
.radar__leitura{
  position:relative;flex:1;margin-top:16px;
  padding:14px 16px 16px 18px;
  border-radius:calc(12px * var(--r,1));
  background:#F3F7FB;
  border:1px solid rgba(10,86,200,.07);
}
.radar__leitura::before{
  content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent-hi);
}
.radar__leitura-cab{
  display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi);
}
.radar__leitura-cab svg{flex:none;width:11px;height:11px;fill:currentColor}
.radar__f{margin:0;font-size:.9rem;line-height:1.58;color:var(--body)}

/* 4. o rodapé: a linha inteira é o link da matéria original (por cima do link do cartão) */
.radar__fonte{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:18px calc(-1 * var(--pad)) 0;
  padding:13px var(--pad) 15px;
  border-top:1px solid var(--linha);
  border-radius:0 0 calc(16px * var(--r,1)) calc(16px * var(--r,1));
  font-size:.84rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
.radar__fonte i{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(10,31,69,.14);color:var(--accent-hi);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.radar__fonte svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.radar__fonte:hover,.radar__fonte:focus-visible{background:#F7FAFD;color:var(--ink);outline:none}
.radar__fonte:hover i,.radar__fonte:focus-visible i{background:var(--accent-hi);border-color:var(--accent-hi);color:#FFFFFF}
.radar__fonte:focus-visible{box-shadow:inset 0 0 0 2px var(--accent-hi)}

/* tela baixa de computador (1521x712, medido 11/10): o cartão inteiro tinha 484 px e passava do pé da
   tela com a seção no alto. Aperta folgas e o corpo da leitura; a ordem e o desenho ficam iguais */
@media (min-width:1181px) and (max-height:820px){
  #radar .radar__c{--pad:20px}
  .radar__sigla{width:34px;height:34px}
  .radar__t{margin-top:14px;font-size:1.02rem}
  .radar__leitura{margin-top:12px;padding:11px 14px 12px 16px}
  .radar__leitura::before{top:11px;bottom:11px}
  .radar__leitura-cab{margin-bottom:6px}
  .radar__f{font-size:.86rem;line-height:1.5}
  .radar__fonte{margin-top:14px;padding-top:10px;padding-bottom:12px}
}

.radar__nota{margin:0 auto;max-width:72ch;text-align:center;font-size:.78rem;color:var(--faint)}