/* Moldura das páginas do blog fora do gerador da Juliana (posts antigos, autor, 404, exclusão de dados e posts do publish_post.py).
   Parte 1: cópia do <style> dos guias novos (gera-blog.py). Parte 2: ajustes do conteúdo legado. Só tokens do DS. */
  html { scroll-behavior: smooth; background: var(--surface-inverse); }
  body { background: var(--surface-inverse); color: var(--text-on-inverse-muted); overflow-x: hidden; font-family: var(--font-sans); }
  h1, h2, h3, h4 { text-wrap: balance; color: var(--over-ink-050); font-family: var(--font-display); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
  .wrap { width: min(100% - 48px, var(--container-wide)); margin-inline: auto; }
  section { padding-block: var(--space-9); position: relative; }
  p, li, summary { text-wrap: pretty; }
  .lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--over-ink-200); }
  .hl { color: var(--over-blue-600); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Etiqueta: Inter Medium em [colchetes] ou pílula */
  .tag { display: inline-block; font: var(--fw-medium) 14px/1.2 var(--font-sans); color: var(--over-ink-200); margin: 0 0 var(--space-4); }
  .tag::before { content: "["; } .tag::after { content: "]"; }
  .pill { display: inline-flex; align-items: center; gap: 8px; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--over-ink-050); background: var(--over-ink-800); border: 1px solid var(--border-on-inverse); border-radius: var(--radius-pill); padding: 8px 14px; }

  /* Número de prova: Barlow Bold Italic, gradiente Blue→Cyan */
  .num { font-family: var(--font-display); font-weight: var(--fw-bold); font-style: italic; line-height: .9; letter-spacing: -0.02em; color: var(--over-blue-600); background: var(--over-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

  /* Ícones: traço 3,25 em 52 px (viewBox 48 => 3), pontas arredondadas */
  .ic { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; color: var(--over-ink-050); flex: none; display: block; }
  :root { --ic-accent: var(--over-blue-600); }

  /* Botões */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 16px 28px; border-radius: var(--radius-pill); font: var(--fw-semibold) 15px/1 var(--font-sans); border: 1px solid transparent; transition: transform var(--dur) var(--ease-out), background var(--dur), border-color var(--dur); cursor: pointer; text-decoration: none; }
  .btn:hover { text-decoration: none; transform: translateY(-2px); }
  .btn-primary { background: var(--over-blue-600); color: var(--text-on-action); }
  .btn-primary:hover { background: var(--over-blue-500); }
  .btn-ghost { background: transparent; color: var(--over-ink-050); border-color: var(--over-ink-500); }
  .btn-ghost:hover { border-color: var(--over-blue-600); color: var(--over-blue-600); }
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  :focus-visible { outline: 3px solid var(--over-blue-500); outline-offset: 3px; }
  section[id] { scroll-margin-top: 96px; }

  /* Header: logo branco, canto superior esquerdo */
  header.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface-inverse) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-on-inverse); }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-5); }
  .top .logo { padding-block: 8px; }
  .top .logo img { height: 28px; display: block; }
  .top nav { display: flex; gap: var(--space-6); }
  .top nav a { padding-block: 12px; color: var(--over-ink-300); font-weight: var(--fw-medium); font-size: 15px; }
  .top nav a:hover, .top nav a[aria-current] { color: var(--over-ink-050); text-decoration: none; }
  .top .btn { padding: 14px 20px; font-size: 14px; white-space: nowrap; }
  .menu-m { display: none; }
  .top .sm { display: none; }
  .skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--over-ink-050); color: var(--over-ink-900); padding: 12px 18px; border-radius: var(--radius-md); font-weight: var(--fw-medium); }
  .skip:focus { left: 8px; }
  .cap-ia { margin: var(--space-4) 0 0; font-size: 14px; color: var(--over-ink-400); }

  /* Rodapé */
  footer.foot { background: var(--over-ink-900); color: var(--over-ink-300); padding-block: var(--space-8) var(--space-6); border-top: 1px solid var(--border-on-inverse); }
  .foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); margin-bottom: var(--space-7); }
  .foot img { height: 28px; margin-bottom: var(--space-4); display: block; }
  .foot .foot-h { color: var(--over-ink-050); font: var(--fw-medium) 14px/1.2 var(--font-sans); margin-bottom: var(--space-4); }
  .foot .foot-h::before { content: "["; } .foot .foot-h::after { content: "]"; }
  .foot a { display: block; color: var(--over-ink-300); font-size: 14px; padding-block: 14px 0; margin-bottom: 0; }
  .foot a:hover { color: var(--over-ink-050); }
  .foot .small { font-size: 14px; color: var(--over-ink-400); border-top: 1px solid var(--border-on-inverse); padding-top: var(--space-5); }

  /* Tablet e celular */
  @media (max-width: 1024px) {
    .how, .faq-wrap, .final-grid, .vs { grid-template-columns: 1fr; }
    .nums, .pgrid { grid-template-columns: 1fr; }
    .nums li, .pgrid li { min-height: 0; }
    .env { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px 240px; }
    .env > div:first-child { grid-row: auto; grid-column: span 2; }
    .card { justify-self: stretch; max-width: none; }
    .foot .cols { grid-template-columns: 1fr 1fr; }
    .top nav { display: none; }
    .menu-m { display: block; position: relative; }
    .menu-m details { border: 0; padding: 0; margin: 0; background: none; }
    .menu-m summary { cursor: pointer; padding: 0 8px; min-width: 44px; min-height: 44px; font: var(--fw-medium) 15px/1 var(--font-sans); color: var(--over-ink-050); display: flex; align-items: center; }
    .menu-m summary::after { content: none; }
    .menu-m .panel { position: absolute; right: 0; top: 48px; width: 250px; background: var(--over-ink-800); border: 1px solid var(--border-on-inverse); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-3); }
    .menu-m .panel a { display: block; padding: 12px 14px; color: var(--over-ink-050); font-weight: var(--fw-medium); border-radius: var(--radius-md); }
    .menu-m .panel a:hover { background: rgba(244,244,245,.08); text-decoration: none; }
    .top .lg { display: none; } .top .sm { display: inline; }
  }
  @media (max-width: 760px) {
    section { padding-block: var(--space-8); }
    .wrap { width: min(100% - 32px, var(--container-wide)); }
    .btn { width: 100%; }
    .top .btn { width: auto; min-height: 44px; }
    .hero { padding-block: var(--space-5) var(--space-7); }
    .how { padding: var(--space-6); }
    .nums li { padding: var(--space-6); }
    .vs-card { padding: var(--space-6); }
    .dash-bar em { display: none; }
    .env { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; }
    .env > div:first-child { grid-column: auto; }
    .card { padding: var(--space-5); border-radius: var(--radius-lg); }
    .foot .cols { grid-template-columns: 1fr; gap: var(--space-6); }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

  /* Ajustes de UX mobile (auditoria de 29/10/2026) */
  @media (max-width: 1024px) {
    .top .menu-m .panel { display: block; }
    .menu-m summary { gap: 8px; }
    .menu-m summary::before { content: ""; width: 18px; height: 12px; flex: none; background: linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat; }
  }
  @media (max-width: 420px) {
    .top .wrap { gap: var(--space-3); }
    .top .logo img { height: 24px; width: auto; }
    .top .btn { padding: 12px 14px; font-size: 13px; }
    .menu-m summary { padding: 0 4px; }
  }
  .cap-ia, .legenda, .foot .small, .proof .n, .vs-card li b { color: var(--over-ink-300); }
  .card label.ok a, .card .hint a { color: var(--over-blue-800); }
  .card label.ok a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  .card .hint, .card label.ok, .pill { font-size: 14px; }
  .foot a { padding-block: 12px; }
  .card details.opt summary::after { content: "+"; margin-left: auto; font-size: 24px; color: var(--over-blue-800); }
  .card details.opt[open] summary::after { content: "\2212"; }

  .on-light { }
  .on-brand { background: var(--over-blue-800); color: var(--over-ink-050); }
  .on-brand :focus-visible { outline-color: var(--over-white); }
  .sec-head { max-width: 980px; margin: 0 0 var(--space-7); }
  .sec-head h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: .95; margin: 0 0 var(--space-4); }
  .sec-head .lead { margin: 0; max-width: 56ch; }
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .btn-ghost { background: transparent; color: var(--over-ink-050); border-color: var(--over-ink-500); }
  .btn-ghost:hover { border-color: var(--over-blue-600); color: var(--over-blue-600); }
  .pill { background: var(--over-ink-900); }
  /* capa: foto com gradiente azul e ondas (arquivos gerados por gera-capas-blog.py) */
  .capa { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--over-ink-900); }
  .capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .capa .cat-t { position: absolute; left: var(--space-4); top: var(--space-4); z-index: 1; font: var(--fw-medium) 13px/1 var(--font-sans); color: var(--over-ink-050); background: color-mix(in srgb, var(--over-ink-900) 78%, transparent); border: 1px solid var(--border-on-inverse); border-radius: var(--radius-pill); padding: 8px 14px; }
  .final { padding-block: var(--space-9); }
  .final-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; }
  .final h2 { font-size: clamp(40px, 5vw, 76px); line-height: .95; margin: 0 0 var(--space-3); max-width: 18ch; color: var(--over-white); }
  .final .lead { margin: 0; max-width: 520px; color: var(--over-ink-100); }
  .final .btn-primary { background: var(--over-ink-050); color: var(--over-ink-900); }
  .final .btn-ghost { color: var(--over-white); border-color: color-mix(in srgb, var(--over-white) 60%, transparent); }

/* ---- Parte 2: conteúdo legado (posts de abr–jul/2026) e páginas sem capa ---- */
.abody .corpo-1 { grid-template-columns: minmax(0, 760px); }
.ah.sem-capa { padding-block-end: var(--space-6); }
.abody.sem-capa { padding-block-start: var(--space-4); }
.ah .lead { margin: 0 0 var(--space-5); max-width: 60ch; }
.autor b a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.autor span time + time, .autor .upd { color: var(--over-ink-300); }
.read strong { color: var(--over-ink-050); font-weight: var(--fw-semibold); }
.read ol:not(.passos) { margin: 0 0 20px; padding-left: 1.3em; }
.read ol:not(.passos) li { margin-bottom: var(--space-3); }
.read ol:not(.passos) li::marker { color: var(--over-blue-600); font-weight: var(--fw-medium); }
.read blockquote p { font: inherit; color: inherit; margin: 0; }
.read .lista-sim { list-style: none; padding: 0; }
.read .lista-sim li { border-top: 1px solid var(--border-on-inverse); margin: 0; }
.read .lista-sim li:last-child { border-bottom: 1px solid var(--border-on-inverse); }
.read .lista-sim a { display: block; padding-block: 14px; }
.sobre-guia .papel { margin: 2px 0 0; font-size: 14px; color: var(--over-ink-200); }
.sobre-guia .links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.read .sobre-guia .links a { display: inline-block; padding-block: 10px; color: var(--over-blue-600); }
.rel .grid-a.g3 { grid-template-columns: repeat(3, 1fr); }
.rel .card-t h3 { font-size: clamp(22px, 1.9vw, 28px); }
@media (max-width: 1024px) { .rel .grid-a.g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .rel .grid-a.g3 { grid-template-columns: 1fr; } }
.ah .data { margin: 0; font-size: 15px; color: var(--over-ink-300); }