/* Fontes hospedadas no próprio site (sem Google Fonts: nenhum dado do visitante sai para terceiros) */
@font-face { font-family: "Archivo"; src: url("/fontes/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/fontes/literata.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
:root {
  --tinta: #10212B;
  --tinta-suave: #4B5C66;
  --papel: #F2F4F3;
  --placa: #FFFFFF;
  --sinal: #FF5F1F;
  --fosforo: #008F7A;
  --linha: #CDD5D8;
  --raio: 4px;
  --largura: 74rem;
  --titulo: "Archivo", system-ui, sans-serif;
  --texto: "Literata", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #E4EAEC; --tinta-suave: #9FB0B8; --papel: #0F1A20; --placa: #16252D;
    --sinal: #FF7A45; --fosforo: #2FC9AE; --linha: #2A3C45;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 1.1rem/1.7 var(--texto); }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--sinal); outline-offset: 2px; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 1rem; top: 1rem; background: var(--sinal); color: #fff; padding: .5rem 1rem; z-index: 9; }

.topo {
  max-width: var(--largura); margin: 0 auto; padding: 1.25rem 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-family: var(--titulo);
}
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 900; font-stretch: 125%; font-size: 1.2rem; letter-spacing: .02em; }
.marca-onda { width: 2.4rem; height: 1.2rem; color: var(--sinal); }
.topo nav { display: flex; gap: 1.3rem; font-weight: 600; }
.topo nav a { text-decoration: none; }
.topo nav a:hover { text-decoration: underline; }
.nav-yt { color: var(--sinal); }

.heroi { max-width: var(--largura); margin: 2.5rem auto 0; padding: 0 1rem; }
.heroi h1 {
  font: 900 clamp(2.6rem, 8vw, 6rem)/.95 var(--titulo); font-stretch: 115%;
  letter-spacing: -.03em; margin: 0 0 1.25rem; max-width: 14ch;
}
.heroi-lead { max-width: 38rem; color: var(--tinta-suave); font-size: 1.2rem; margin: 0 0 1.5rem; }
.espectro { display: block; width: 100%; height: 90px; margin-top: 2.5rem; fill: var(--sinal); opacity: .9; }
.botao {
  display: inline-block; font: 700 1rem/1 var(--titulo); text-decoration: none; padding: .9rem 1.3rem;
  background: var(--tinta); color: var(--papel); border-radius: var(--raio); margin: 0 .5rem .5rem 0;
}
.botao-linha { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); }

.secao { max-width: var(--largura); margin: 4rem auto 0; padding: 0 1rem; }
.secao h2 { font: 800 clamp(1.6rem, 4vw, 2.2rem)/1.1 var(--titulo); font-stretch: 110%; margin: 0 0 .5rem; }
.secao-lead { color: var(--tinta-suave); margin: 0 0 1.5rem; max-width: 40rem; }
.lista-artigos { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 2px solid var(--tinta); }
.card-artigo a {
  display: grid; gap: .3rem 2rem; padding: 1.4rem 0; text-decoration: none; border-bottom: 1px solid var(--linha);
}
@media (min-width: 800px) { .card-artigo a { grid-template-columns: 9rem 1fr; } .card-artigo a p { grid-column: 2; } }
.card-artigo time { font: 600 .95rem/1.6 var(--titulo); color: var(--fosforo); }
.card-artigo h3 { font: 800 1.45rem/1.2 var(--titulo); margin: 0; }
.card-artigo a:hover h3 { color: var(--sinal); }
.card-artigo p { margin: 0; color: var(--tinta-suave); max-width: 46rem; }

.equipamentos { display: grid; gap: 1rem; margin: 0; }
@media (min-width: 760px) { .equipamentos { grid-template-columns: repeat(2, 1fr); } }
.equipamentos div { background: var(--placa); padding: 1.2rem; border-radius: var(--raio); border-top: 4px solid var(--fosforo); }
.equipamentos dt { font: 800 1.15rem/1.2 var(--titulo); margin-bottom: .35rem; }
.equipamentos dd { margin: 0; color: var(--tinta-suave); font-size: 1rem; }

.artigo { max-width: 42rem; margin: 2rem auto 0; padding: 0 1rem; }
.artigo h1 { font: 900 clamp(2rem, 5vw, 3rem)/1.05 var(--titulo); font-stretch: 110%; letter-spacing: -.02em; margin: .3rem 0 1rem; }
.artigo-data { font: 600 .95rem var(--titulo); color: var(--fosforo); margin: 0; }
.artigo-resumo { font-size: 1.25rem; color: var(--tinta-suave); margin: 0 0 2rem; }
.artigo-corpo h2 { font: 800 1.55rem/1.2 var(--titulo); margin: 2.5rem 0 .75rem; }
.artigo-corpo h3 { font: 800 1.2rem/1.25 var(--titulo); margin: 2rem 0 .5rem; }
.artigo-corpo blockquote { margin: 1.5rem 0; padding: .5rem 0 .5rem 1rem; border-left: 4px solid var(--sinal); font-style: italic; }
.artigo-corpo table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1rem; }
.artigo-corpo th, .artigo-corpo td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--linha); }
.video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 2rem; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.caixa-lab { margin-top: 3rem; padding: 1.25rem; background: var(--placa); border-left: 4px solid var(--sinal); }
.caixa-lab p { margin: 0 0 .75rem; }

.rodape {
  max-width: var(--largura); margin: 5rem auto 0; padding: 2rem 1rem 3rem; border-top: 2px solid var(--tinta);
  font: .95rem/1.6 var(--titulo); color: var(--tinta-suave);
}
.rodape p { margin: 0 0 .5rem; }
.rodape a { margin-right: 1rem; }

/* Elementos do gerador.py: trilha de navegação, temas, aviso de agendado e capa de vídeo */
.migalhas { max-width: 42rem; margin: 1.5rem auto 0; padding: 0 1rem; }
.migalhas + .artigo { margin-top: 1rem; }
.migalhas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: 0; margin: 0; font: 600 .9rem/1.4 var(--titulo); color: var(--tinta-suave); }
.migalhas li + li::before { content: "›"; margin-right: .5rem; color: var(--tinta-suave); }
.migalhas a { color: inherit; }
.migalhas [aria-current="page"] { color: var(--tinta); }
.temas, .lista-temas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.5rem; }
.temas a, .lista-temas a { display: inline-block; padding: .2rem .75rem; border: 1px solid var(--linha); border-radius: 999px; font: 600 .85rem/1.5 var(--titulo); color: var(--tinta); text-decoration: none; }
.temas a:hover, .lista-temas a:hover { border-color: var(--sinal); }
.agendado { margin: 0 0 1rem; padding: .6rem .9rem; border-left: 4px solid var(--sinal); background: var(--placa); font: 600 .95rem/1.4 var(--titulo); }
.relacionados { margin: 3rem 0 0; }
.vazio { padding: 1rem 0; color: var(--tinta-suave); }
.video-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; background: #10212B; color: #F2F4F3; text-decoration: none; border-radius: var(--raio); }
.video-capa:focus-visible { outline: 3px solid var(--sinal); outline-offset: 3px; }
.video-play { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #FF5F1F; transition: transform .15s; }
.video-play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .9rem 0 .9rem 1.5rem; border-color: transparent transparent transparent #FFFFFF; }
.video-capa:hover .video-play, .video-capa:focus-visible .video-play { transform: scale(1.06); }
.video-rotulo { font: 700 1.05rem/1.3 var(--titulo); text-align: center; }
.video-rotulo small { display: block; font-weight: 400; font-size: .8rem; opacity: .85; }