/* Blog do ecossistema (gerado com ferramentas/blog_eco.py; estilo base igual ao das outras páginas do painel). */
:root {
  --bg: #070b1c; --bg2: #0d1430; --ink: #f2f6ff; --muted: #a9b6d6; --line: rgba(255, 255, 255, .12);
  --amarelo: #ffd21f; --rosa: #ff3ba0; --ciano: #2fe0ff; --roxo: #8c5aff; --verde: #3cf29a;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --data: "DM Mono", ui-monospace, "Courier New", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); }
body { min-height: 100vh; overflow-x: hidden; background: radial-gradient(1100px 560px at 90% -10%, rgba(255, 59, 160, .22), transparent 60%), radial-gradient(900px 500px at 0 0, rgba(47, 224, 255, .16), transparent 60%), var(--bg); background-attachment: fixed; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
.largura { width: min(1240px, 100% - 32px); margin-inline: auto; }
.topo { position: sticky; top: 0; z-index: 20; background: rgba(7, 11, 28, .8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topo .largura { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.topo .logo-sl { font-size: 1.4rem; --logo-jogo: #ff3ba0; }
.topo nav { display: flex; gap: 4px; }
.topo nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--muted); }
.topo nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
@media (max-width: 600px) { .topo nav a.opc { display: none; } .topo .logo-sl { font-size: 1.05rem; } .topo nav a { padding: 7px 9px; font-size: .85rem; } }
.heroi { padding: clamp(28px, 6vh, 64px) 0 10px; }
.heroi h1 { margin: 0 0 10px; font: 900 clamp(2.6rem, 9vw, 6.2rem)/.85 var(--display); text-transform: uppercase; }
.heroi h1 span { background: linear-gradient(100deg, #fff 10%, var(--rosa) 50%, var(--amarelo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroi p { margin: 0; max-width: 700px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.5; }
.fundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(70px); opacity: .4; mix-blend-mode: screen; }
.aurora.a1 { background: radial-gradient(circle, var(--rosa), transparent 65%); left: -20vmax; top: -25vmax; opacity: .3; }
.aurora.a2 { background: radial-gradient(circle, var(--roxo), transparent 65%); right: -25vmax; top: 5vmax; }
.aurora.a3 { background: radial-gradient(circle, var(--ciano), transparent 65%); left: 20vw; bottom: -40vmax; opacity: .28; }
.chao { position: absolute; left: -50%; right: -50%; bottom: -10vh; height: 50vh; transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  background: linear-gradient(transparent 0 0), repeating-linear-gradient(90deg, rgba(255, 59, 160, .3) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg, rgba(47, 224, 255, .26) 0 2px, transparent 2px 80px);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
.vinheta { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(7, 11, 28, .85) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .aurora.a1 { animation: aurora1 22s ease-in-out infinite alternate; }
  .aurora.a2 { animation: aurora2 26s ease-in-out infinite alternate; }
  .aurora.a3 { animation: aurora3 30s ease-in-out infinite alternate; }
  .chao { animation: chao 2.4s linear infinite; }
}
@keyframes aurora1 { to { transform: translate(30vw, 20vh) scale(1.2); } }
@keyframes aurora2 { to { transform: translate(-35vw, 30vh) scale(.9); } }
@keyframes aurora3 { to { transform: translate(-20vw, -30vh) scale(1.15); } }
@keyframes chao { to { background-position: 0 0, 0 0, 0 80px; } }
main, .rodape { position: relative; z-index: 1; }
.rodape { margin-top: 50px; padding: 26px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; line-height: 1.6; }

.topo nav { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.idiomas { display: inline-flex; gap: 2px; margin-left: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.idiomas a { padding: 5px 8px !important; font: 700 .75rem var(--data) !important; }
.idiomas a[aria-current] { background: var(--amarelo); color: #0a0f24 !important; }
.grade-blog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; list-style: none; margin: 18px 0 0; padding: 0; }
.cartao { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 18px; background: rgba(13, 20, 48, .78); overflow: hidden; text-decoration: none; color: inherit; transition: transform .18s, border-color .18s, box-shadow .18s; }
.cartao:hover { transform: translateY(-3px); border-color: rgba(47, 224, 255, .5); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.capa { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; }
.c-txt { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }
.c-topo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font: 600 .78rem var(--data); color: var(--muted); }
.tema { color: #0a0f24; background: var(--amarelo); border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.cartao h2 { margin: 0; font: 800 1.08rem/1.3 var(--body); text-transform: none; overflow-wrap: anywhere; }
.cartao p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.cartao .ler { margin-top: auto; color: var(--ciano); font-weight: 700; font-size: .9rem; }
.trilha { margin: 22px 0 10px; } .trilha a { color: var(--ciano); font-weight: 700; text-decoration: none; }
.artigo { max-width: 780px; margin: 0 auto; padding: clamp(16px, 4vw, 34px); border: 1px solid var(--line); border-radius: 22px; background: rgba(13, 20, 48, .82); line-height: 1.7; font-size: 1.04rem; overflow-wrap: break-word; }
.artigo header .capa { border-radius: 14px; margin-bottom: 14px; }
.artigo h1 { font: 800 clamp(1.55rem, 4.4vw, 2.4rem)/1.18 var(--body); margin: 12px 0; overflow-wrap: anywhere; hyphens: auto; }
.artigo h2 { font: 900 clamp(1.35rem, 3.6vw, 1.9rem)/1.1 var(--display); text-transform: uppercase; margin: 30px 0 10px; color: var(--amarelo); }
.artigo .resumo { font-size: 1.12rem; color: var(--ink); }
.artigo .autor { color: var(--muted); font: 600 .85rem var(--data); }
.artigo ul, .artigo ol { padding-left: 1.3em; } .artigo li { margin: 6px 0; }
.destaque { border-left: 4px solid var(--rosa); padding: 10px 16px; background: rgba(255, 59, 160, .1); border-radius: 0 12px 12px 0; font-weight: 600; }
.dica { margin: 18px 0; padding: 14px 16px; border: 1px solid rgba(60, 242, 154, .4); border-radius: 14px; background: rgba(60, 242, 154, .08); }
.dica strong { color: var(--verde); margin-right: 4px; }
.fontes { margin-top: 30px; border-top: 1px solid var(--line); } .fontes a { color: var(--ciano); overflow-wrap: anywhere; } .fontes .nota { color: var(--muted); font-size: .88rem; }
.mais-art { max-width: 1240px; margin: 30px auto 0; }
.mais-art h2, .heroi h1 { text-transform: uppercase; }
.mais-art > h2 { font: 900 clamp(1.5rem, 4vw, 2.2rem)/1 var(--display); }
@media (prefers-reduced-motion: reduce) { .cartao, .cartao:hover { transition: none; transform: none; } }