/* ===========================================================================
   app/static/css/site.css
   ---------------------------------------------------------------------------
   CSS compartilhado do Projeto Plataforma.

   POR QUE ESTE ARQUIVO EXISTE

   Até agora cada template carregava sua própria cópia dos mesmos ~8 KB de
   tokens e componentes, inline no <head>. Isso significa que o visitante que
   vai da home para um artigo baixa o mesmo CSS duas vezes — e o navegador não
   tem como cachear, porque está dentro do HTML.

   Com um arquivo externo, ele é baixado uma vez e reaproveitado em todas as
   páginas seguintes. Some o CSS repetido de dentro do HTML (cada página fica
   ~8 KB mais leve) e a segunda navegação passa a ser instantânea.

   Combinado com o `expires 1y` no Nginx do host, vira cache de longa duração.

   ORGANIZAÇÃO
     1. Tokens
     2. Reset e base
     3. Navegação
     4. Cabeçalho de página
     5. Tipografia e texto
     6. Botões
     7. Cartões e listas
     8. Formulários
     9. Rodapé
    10. Utilitários e animação
    11. Responsivo
    12. Impressão e acessibilidade
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root{
  --branco:#fff;
  --nuvem:#fbfbfd;
  --nevoa:#f2f3f5;
  --linha:#e6e8ec;
  --linha-2:#d4d8de;

  --tinta:#16181d;
  --tinta-2:#4a5260;
  --tinta-3:#828b99;

  --azul:#0071e3;
  --azul-claro:#e8f2fe;
  --ambar:#e95420;
  --verde:#25b04a;
  --vermelho:#d63333;

  --raio:14px;
  --raio-g:18px;
  --sombra-s:0 1px 2px rgba(22,24,29,.05);
  --sombra-m:0 12px 30px -14px rgba(22,24,29,.16);
  --sombra-g:0 24px 60px -20px rgba(22,24,29,.22);

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Curva usada em todas as transições. Uma só, para o site ter um "tempo"
     reconhecível em vez de cada componente animar do seu jeito. */
  --curva:cubic-bezier(.2,1,.3,1);
  --nav-h:58px;
}

/* ---------------------------------------------------------------------------
   2. RESET E BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* overflow-x:clip em vez de hidden: não cria contexto de rolagem, então não
   quebra position:sticky. Rede de segurança contra qualquer elemento que
   estoure a largura — foi o que resolveu o alargamento no celular. */
html,body{max-width:100%;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--branco);
  color:var(--tinta);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{text-decoration:none;color:var(--azul)}
img{max-width:100%;height:auto}

:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:4px}

.env{max-width:1080px;margin:0 auto;padding:0 24px}
.env-estreito{max-width:820px;margin:0 auto;padding:0 24px}
.texto{max-width:70ch}

/* Pular para o conteúdo — só aparece ao navegar por teclado */
.pular{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--azul);color:#fff;padding:12px 20px;
  border-radius:0 0 8px 0;font-weight:600;
}
.pular:focus{left:0}

/* ---------------------------------------------------------------------------
   3. NAVEGAÇÃO
   --------------------------------------------------------------------------- */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:1050;height:var(--nav-h);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--linha);
  display:flex;align-items:center;
}
.topo-int{
  max-width:1080px;margin:0 auto;padding:0 24px;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{
  font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--tinta);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.logo-led{
  width:7px;height:7px;border-radius:50%;background:var(--verde);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(37,176,74,.5);
  animation:pulso 2.6s ease-out infinite;
}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(37,176,74,.5)}
  70%{box-shadow:0 0 0 8px rgba(37,176,74,0)}
  100%{box-shadow:0 0 0 0 rgba(37,176,74,0)}
}
.topo-links{display:flex;gap:20px;align-items:center}
.topo-links a{font-size:14px;color:var(--tinta-2);white-space:nowrap;transition:color .2s}
.topo-links a:hover{color:var(--tinta)}
.topo-links a.ativo{color:var(--azul);font-weight:600}

.abre-menu{
  display:none;background:none;border:none;font-size:22px;
  color:var(--tinta);padding:4px 8px;cursor:pointer;
}

/* ---------------------------------------------------------------------------
   4. CABEÇALHO DE PÁGINA
   --------------------------------------------------------------------------- */
.cabecalho{
  padding:calc(var(--nav-h) + 46px) 0 42px;
  background:
    radial-gradient(760px 380px at 15% -10%,rgba(0,113,227,.08),transparent 62%),
    var(--branco);
  border-bottom:1px solid var(--linha);
}
.sobrancelha{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.sobrancelha::before{content:"";width:20px;height:1px;background:var(--linha-2);flex:0 0 auto}

.selo{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;
  color:var(--tinta-2);background:var(--nuvem);
  border:1px solid var(--linha);border-radius:100px;
  padding:6px 15px;margin-bottom:20px;
}
.selo b{color:var(--verde);font-weight:600}

.nums{display:flex;gap:30px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--linha)}
.nums div{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);line-height:1.5}
.nums b{
  display:block;font-family:var(--sans);font-size:1.5rem;font-weight:700;
  letter-spacing:-.035em;color:var(--tinta);line-height:1.15;margin-bottom:2px;
}

/* ---------------------------------------------------------------------------
   5. TIPOGRAFIA
   --------------------------------------------------------------------------- */
h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin:0 0 16px}
h2{font-size:1.5rem;font-weight:700;letter-spacing:-.032em;line-height:1.2;margin:0 0 14px}
h3{font-size:1.14rem;font-weight:650;letter-spacing:-.02em;margin:28px 0 10px}
h4{font-size:1rem;font-weight:650;letter-spacing:-.02em;margin:0 0 7px}

.lead{font-size:1.08rem;color:var(--tinta-2);max-width:64ch;margin:0 0 24px}
.lead strong{color:var(--tinta);font-weight:600}

p{color:var(--tinta-2);margin:0 0 1.3rem}
p strong{color:var(--tinta);font-weight:600}

section{padding:52px 0}
.faixa{background:var(--nuvem)}

.titulo-secao{
  display:flex;align-items:center;gap:11px;margin:0 0 26px;
  font-size:1.32rem;font-weight:700;letter-spacing:-.028em;
}
.titulo-secao i{color:var(--azul);font-size:20px}

blockquote{
  margin:32px 0;padding:0 0 0 22px;border-left:3px solid var(--ambar);
  font-size:1.16rem;font-weight:500;color:var(--tinta);
  letter-spacing:-.018em;line-height:1.5;
}

code.inline,.mono{
  font-family:var(--mono);font-size:.87em;
  background:var(--nevoa);color:var(--ambar);
  padding:2px 6px;border-radius:5px;border:1px solid var(--linha);
}

/* ---------------------------------------------------------------------------
   6. BOTÕES
   --------------------------------------------------------------------------- */
.btn-p,.btn-s,.btn-topo{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;border:none;cursor:pointer;
  white-space:nowrap;
  transition:transform .22s var(--curva),box-shadow .22s,background-color .2s,border-color .2s;
}
.btn-p,.btn-s{font-size:14.5px;padding:11px 20px;border-radius:10px}

.btn-p{background:var(--azul);color:#fff;box-shadow:0 6px 20px -7px rgba(0,113,227,.6)}
.btn-p:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(0,113,227,.55)}

.btn-s{background:var(--branco);color:var(--tinta);border:1px solid var(--linha-2)}
.btn-s:hover{color:var(--tinta);border-color:var(--tinta-3);transform:translateY(-2px)}

.btn-topo{
  font-size:13.5px;padding:8px 17px;border-radius:9px;
  background:var(--tinta);color:#fff;
}
.btn-topo:hover{background:var(--azul);color:#fff;transform:translateY(-1px)}

.mais{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:14.5px;font-weight:600;color:var(--azul);
  transition:gap .24s var(--curva);
}
.mais:hover{gap:12px}

/* ---------------------------------------------------------------------------
   7. CARTÕES E LISTAS
   --------------------------------------------------------------------------- */
.grade{display:grid;gap:14px}
.grade-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grade-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.cartao{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px;
  transition:transform .28s var(--curva),box-shadow .28s,border-color .28s;
}
.cartao:hover{transform:translateY(-3px);box-shadow:var(--sombra-m);border-color:var(--linha-2)}
.cartao > i{font-size:22px;color:var(--azul);margin-bottom:12px;display:block}
.cartao p{font-size:14px;margin:0;line-height:1.55}

/* Linha horizontal — o padrão de "unidade de rack" usado em projetos */
.racks{display:grid;gap:11px}
.rack{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:19px 22px;color:var(--tinta);position:relative;overflow:hidden;
  transition:transform .28s var(--curva),box-shadow .28s,border-color .28s;
}
.rack::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--azul);
  transform:scaleY(0);transform-origin:top;transition:transform .34s var(--curva);
}
.rack:hover{transform:translateY(-2px);box-shadow:var(--sombra-m);border-color:var(--linha-2);color:var(--tinta)}
.rack:hover::before{transform:scaleY(1)}

.led{width:9px;height:9px;border-radius:50%;background:var(--verde);flex:0 0 auto;box-shadow:0 0 9px rgba(37,176,74,.5)}
.led.off{background:var(--tinta-3);box-shadow:none}

.icone{
  width:46px;height:46px;border-radius:12px;background:var(--azul-claro);
  display:grid;place-items:center;color:var(--azul);font-size:21px;flex:0 0 auto;
}

.fichas{display:flex;flex-wrap:wrap;gap:6px}
.ficha{
  font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:5px;
  background:var(--nevoa);color:var(--tinta-3);border:1px solid var(--linha);
}
.tag{
  font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:6px;
  background:var(--nevoa);color:var(--tinta-2);border:1px solid var(--linha);
}
.tags{display:flex;flex-wrap:wrap;gap:6px}

.rota{
  font-family:var(--mono);font-size:11px;color:var(--tinta-3);
  background:var(--nevoa);border:1px solid var(--linha);
  padding:4px 9px;border-radius:6px;white-space:nowrap;
}

/* Lista editorial — usada para artigos */
.lista-editorial{border-top:1px solid var(--linha)}
.item-editorial{
  display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:24px;align-items:baseline;
  padding:24px 4px;border-bottom:1px solid var(--linha);color:var(--tinta);
  transition:background-color .24s,padding-left .3s var(--curva);
}
.item-editorial:hover{background:var(--nuvem);padding-left:14px;color:var(--tinta)}
.item-meta{font-family:var(--mono);font-size:10.5px;color:var(--tinta-3);line-height:1.7}
.item-meta .cat{display:block;color:var(--ambar);font-weight:500}
.item-editorial h3{font-size:1.08rem;font-weight:650;letter-spacing:-.024em;margin:0 0 5px;line-height:1.35}
.item-editorial p{
  font-size:14px;margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.seta{font-family:var(--mono);color:var(--linha-2);transition:color .24s,transform .28s var(--curva)}
.item-editorial:hover .seta{color:var(--azul);transform:translateX(4px)}

/* Linha do tempo */
.linha-tempo{position:relative;padding-left:28px}
.linha-tempo::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:var(--linha-2)}
.tempo-item{position:relative;padding-bottom:30px}
.tempo-item:last-child{padding-bottom:0}
.tempo-item::before{
  content:"";position:absolute;left:-28px;top:7px;width:11px;height:11px;
  border-radius:50%;background:var(--branco);border:2px solid var(--linha-2);
}
.tempo-item.atual::before{background:var(--verde);border-color:var(--verde);box-shadow:0 0 0 3px rgba(37,176,74,.15)}

/* Avisos */
.aviso{
  border-radius:12px;padding:16px 20px;margin:18px 0;
  background:var(--nuvem);border:1px solid var(--linha);border-left:3px solid var(--azul);
}
.aviso.cuidado{border-left-color:var(--ambar)}
.aviso.bom{border-left-color:var(--verde)}
.aviso.perigo{border-left-color:var(--vermelho)}
.aviso h4{margin:0 0 6px;font-size:14px}
.aviso p{margin:0;font-size:14px;line-height:1.6}

/* Chamada de encerramento */
.caixa-cta{
  border:1px solid var(--linha);border-radius:var(--raio-g);padding:36px;background:var(--branco);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
}
.caixa-cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--azul),var(--ambar));
}
.caixa-cta h3{font-size:1.26rem;font-weight:700;letter-spacing:-.03em;margin:0 0 9px}
.caixa-cta p{font-size:15px;margin:0;max-width:52ch}
.cta-acoes{display:flex;flex-direction:column;gap:9px}

/* ---------------------------------------------------------------------------
   8. FORMULÁRIOS
   --------------------------------------------------------------------------- */
.campo{margin-bottom:18px}
.campo label{
  display:block;font-size:13px;font-weight:600;color:var(--tinta);
  margin-bottom:7px;letter-spacing:-.01em;
}
.campo input,.campo textarea,.campo select{
  width:100%;font-family:var(--sans);font-size:15px;
  padding:12px 15px;border-radius:10px;
  border:1px solid var(--linha-2);background:var(--branco);color:var(--tinta);
  transition:border-color .2s,box-shadow .2s;
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tinta-3)}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px var(--azul-claro);
}
.campo textarea{resize:vertical;min-height:130px;line-height:1.6}
.campo-ajuda{font-size:12.5px;color:var(--tinta-3);margin:6px 0 0}

/* ---------------------------------------------------------------------------
   9. RODAPÉ
   --------------------------------------------------------------------------- */
.rodape{border-top:1px solid var(--linha);padding:32px 0 44px;background:var(--nuvem)}
.rodape-int{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.rodape-links{display:flex;gap:20px;flex-wrap:wrap}
.rodape a{font-size:14px;color:var(--tinta-2);transition:color .2s}
.rodape a:hover{color:var(--azul)}
.rodape small{font-family:var(--mono);font-size:11.5px;color:var(--tinta-3)}

/* ---------------------------------------------------------------------------
   10. UTILITÁRIOS E ANIMAÇÃO
   --------------------------------------------------------------------------- */
.revelar{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--curva),transform .6s var(--curva);
}
.revelar.vis{opacity:1;transform:none}

.vazio{
  text-align:center;padding:60px 20px;color:var(--tinta-3);
  border:1px dashed var(--linha-2);border-radius:var(--raio);
}
.vazio i{font-size:32px;display:block;margin-bottom:10px}

/* Anúncio — contido, para nunca alargar a página */
.bloco-anuncio{margin:44px 0;max-width:100%;overflow:hidden;text-align:center}
.bloco-anuncio .rotulo{
  display:block;margin-bottom:8px;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3);
}
ins.adsbygoogle{display:block !important;max-width:100% !important;overflow:hidden !important}

.oculto{display:none}
.so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVO
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  .caixa-cta{grid-template-columns:1fr;gap:24px}
  .cta-acoes a{width:100%}
}

@media (max-width:768px){
  .env,.env-estreito{padding:0 18px}
  .cabecalho{padding-top:calc(var(--nav-h) + 30px);padding-bottom:32px}
  section{padding:38px 0}

  /* Menu vira painel deslizante */
  .topo-links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--branco);border-bottom:1px solid var(--linha);
    padding:8px 18px 16px;box-shadow:var(--sombra-m);
  }
  .topo-links.aberto{display:flex}
  .topo-links a{padding:12px 0;border-bottom:1px solid var(--linha);font-size:15px}
  .topo-links a:last-child{border-bottom:none}
  .abre-menu{display:block}

  .rack{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:18px}
  .rack-direita{
    grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;
    width:100%;padding-top:13px;border-top:1px solid var(--linha);
  }

  .item-editorial{grid-template-columns:1fr;gap:9px}
  .item-meta{display:flex;gap:12px}
  .item-meta .cat{display:inline}
  .seta{display:none}

  .caixa-cta{padding:26px}
  .nums{gap:20px}
  .nums b{font-size:1.35rem}
  blockquote{font-size:1.06rem}
  .linha-tempo{padding-left:22px}
  .tempo-item::before{left:-22px}
}

@media (max-width:480px){
  h1{font-size:1.7rem}
  h2{font-size:1.3rem}
  .btn-p,.btn-s{width:100%}
}

/* ---------------------------------------------------------------------------
   12. IMPRESSÃO E ACESSIBILIDADE
   --------------------------------------------------------------------------- */
@media print{
  .topo,.rodape,.caixa-cta,.bloco-anuncio,.abre-menu,.pular{display:none}
  .cabecalho{padding-top:0;background:none;border:none}
  body{font-size:11pt;color:#000}
  section{padding:16px 0;break-inside:avoid}
  .faixa{background:none}
  .revelar{opacity:1;transform:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

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