/* SapiensLabs — layout, header, footer, sliders, cards
   Enfileirado depois de style.css */

/* ══════════════════════════════════════════════════════════
   SITE HEADER — sidebar vertical à esquerda (desktop)
   ══════════════════════════════════════════════════════════ */

/* Skip link — acessibilidade */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

:root { --sidebar-w: 260px; }

.site-header {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  width: var(--sidebar-w);
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 0;
  overflow-y: auto;
}
.site-header-inner {
  max-width: none;
  margin: 0;
  min-height: 100%;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: stretch;
  grid-template-columns: none;
}
.site-brand { width: 100%; display: block; }
.site-brand img, .site-brand svg { width: 100%; height: auto; }

.site-social {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-social li { width: auto; margin: 0; padding: 0; }
.site-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color .15s ease;
}
.site-social a:hover { color: var(--accent); }
.site-social svg { width: 18px; height: 18px; display: block; }
.site-social--drawer { gap: 28px; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--line); }
.site-social--drawer svg { width: 22px; height: 22px; }

.site-search {
  display: flex; align-items: stretch;
  border: 1px solid var(--line);
  background: transparent;
}
.site-search input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-family: var(--f-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text);
  outline: none;
}
.site-search input::placeholder {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}
.site-search input:focus { background: var(--paper-deep); }
.site-search button {
  background: transparent;
  border: 0; border-left: 1px solid var(--line);
  padding: 0 10px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, background-color .15s ease;
}
.site-search button:hover { color: var(--accent); background: var(--paper-deep); }
.site-search button svg { width: 14px; height: 14px; }

/* Foco visível (2.6.67, achado J): os inputs de busca sinalizavam foco só
   por mudança sutil de fundo (outline: none) — navegação por teclado às
   cegas. Outline accent em :focus-visible não afeta clique de mouse. */
.site-search input:focus-visible,
.site-search button:focus-visible,
.drawer-search-form input:focus-visible,
.drawer-search-form button:focus-visible,
.drawer-search-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-nav { flex: 1; }
.site-nav ul {
  display: flex; flex-direction: column; gap: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav li { width: 100%; }
/* DS 1.5.24 — Itens da sidebar consomem o componente .sl-menu do canonico:
   border-left 3px transparent que vira accent no hover/current. Antes era
   border-bottom (color shift) — desalinhado da regra escrita do README
   ("Always left-bordered with 3px transparent that turns blue"). */
.site-nav a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 3px solid transparent;
  color: var(--text);
  transition: color .15s ease, border-left-color .15s ease;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
  border-left-color: var(--accent);
  color: var(--accent);
}
.site-nav .sub-menu {
  list-style: none;
  margin: 4px 0 8px 0;
  padding: 0;
}
.site-nav .sub-menu a {
  padding: 3px 0 3px 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.site-nav .sub-menu a:hover,
.site-nav .sub-menu .current-menu-item > a,
.site-nav .sub-menu .current_page_item > a {
  border-left-color: var(--accent);
  color: var(--accent);
}

.site-meta {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
  margin-top: auto;
}

/* Main + footer deslocam para dar espaço à sidebar */
.site-main,
.site-footer { margin-left: var(--sidebar-w); }

/* Theme toggle (reaproveitado) */
.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
}
.theme-toggle button {
  background: transparent; border: none; cursor: pointer;
  padding: 4px 8px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
}
.theme-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
[data-theme="dark"] .theme-toggle button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

/* Mobile hamburger — no desktop fica escondido, só aparece no mobile */
.menu-trigger {
  display: none;
  background: transparent; border: 1px solid var(--line);
  width: 40px; height: 40px; padding: 10px 9px;
  cursor: pointer; flex-direction: column; justify-content: space-between;
}
.menu-trigger span { display: block; height: 2px; background: var(--text); width: 100%; }

.mobile-drawer {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,22,32,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.mobile-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-drawer-inner {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  background: var(--paper);
  padding: 24px 28px;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(.2,.9,.2,1);
  border-left: 1px solid var(--line);
}
.mobile-drawer.open .mobile-drawer-inner { transform: translateX(0); }

/* Busca colapsada dentro do drawer mobile.
   Estado padrão: só o botão lupa (44x44, alvo de toque). Click expande
   para input + envio + close. ESC ou close volta ao colapsado. */
.drawer-search { margin-bottom: 16px; }
.drawer-search-toggle {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: color .15s ease, background-color .15s ease;
}
.drawer-search-toggle:hover {
  background: var(--paper-deep);
  color: var(--accent);
}
.drawer-search-toggle svg { width: 16px; height: 16px; }
.drawer-search[data-state="expanded"] .drawer-search-toggle { display: none; }
.drawer-search-form {
  display: flex; align-items: stretch; gap: 0;
  border-bottom: 1px solid var(--line);
}
.drawer-search-form input[type="search"] {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  padding: 10px 4px;
  font-family: var(--f-ui);
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.drawer-search-form input[type="search"]::placeholder { color: var(--muted); }
.drawer-search-form button {
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: color .15s ease, background-color .15s ease;
}
.drawer-search-form button[type="submit"]:hover { color: var(--accent); background: var(--paper-deep); }
.drawer-search-form button.drawer-search-close:hover { color: var(--text); background: var(--paper-deep); }
.drawer-search-form button svg { width: 16px; height: 16px; }

.mobile-drawer ul { display: flex; flex-direction: column; }
.mobile-drawer a {
  display: block;
  padding: 18px 0;
  font-family: var(--f-display);
  font-weight: 700; font-size: 1.4rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

/* Mobile: sidebar vira header horizontal compacto com hamburger */
@media (max-width: 860px) {
  .site-header {
    position: sticky;
    top: 0; left: auto; bottom: auto;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  .site-header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    min-height: 0;
  }
  .site-brand { width: 140px; }
  .site-search,
  .site-nav,
  .site-meta,
  .site-social--header { display: none; }
  .menu-trigger { display: flex; }
  .site-main, .site-footer { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════
   HERO SLIDER (home)
   ══════════════════════════════════════════════════════════ */
.sl-slider {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px;
  border-bottom: 1px solid var(--line);
}
.sl-slider-track {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}
.sl-slide {
  display: none;
  min-height: clamp(360px, 52vw, 540px);
  padding: clamp(32px, 5vw, 64px);
  position: relative;
  background-size: cover;
  background-position: center;
}
.sl-slide.is-active { display: flex; flex-direction: column; justify-content: flex-end; }
.sl-slide.has-image::after {
  content: ""; position: absolute; inset: 0;
  /* O véu escurece na cor da PÁGINA (--ink #1a2332), não no --ink-deep
     (#0f1620) de antes (21/08/2026, Leo: "fundo ainda tá preto, não o fundo
     azul"). Desde que a arte passou a nascer com o fundo #1a2332, um véu mais
     escuro que a página fazia o hero virar um bloco preto no meio do azul.
     Mesmas opacidades: a legibilidade do título sobre as formas não muda. */
  background:
    linear-gradient(180deg, rgba(26,35,50,0) 35%, rgba(26,35,50,0.85) 100%),
    linear-gradient(90deg,  rgba(26,35,50,0.55) 0%, rgba(26,35,50,0.15) 55%, rgba(26,35,50,0) 100%);
  z-index: 1;
}
.sl-slide.has-image .sl-slide-inner {
  position: relative; z-index: 2; color: #fff;
  text-shadow: 0 2px 16px rgba(15,22,32,0.45);
}
.sl-slide.has-image .sl-slide-title { color: #fff; }
.sl-slide.has-image .sl-slide-deck  { color: rgba(255,255,255,0.92); text-shadow: 0 1px 8px rgba(15,22,32,0.55); }
/* Eyebrow do slide hero: Fira Mono pra coerência com o índice do DS
   (eyebrows mono em todo o sistema). */
.sl-slide-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.sl-slide.has-image .sl-slide-eyebrow { color: var(--cream); }
.sl-slide-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: 0.01em;
  /* 0.98 → 1.12 (21/08/2026, Leo: "precisa ter mais respiro na tipografia").
     Entrelinha menor que o corpo da fonte fazia o cedilha de FILIAÇÃO e o
     acento de FLÁVIO encostarem na linha de baixo — caixa-alta em português
     tem acento em cima E cedilha embaixo, então 0.98 só funciona em inglês. */
  line-height: 1.364;  /* exatamente no limite medido (ver .entry-title) */
  text-transform: uppercase;
  margin-bottom: 26px;
  max-width: 820px;
}
.sl-slide-title a {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
.sl-slide-title a:hover { color: var(--accent); }
.sl-slide.has-image .sl-slide-title a:hover { color: var(--cream); opacity: 0.85; }
.sl-slide-title em { font-style: normal; color: var(--accent); }
.sl-slide-deck {
  font-family: var(--f-body);
  font-size: 1.05rem; line-height: 1.55;
  color: var(--text-soft);
  max-width: 560px;
  margin-bottom: 24px;
}
.sl-slide.has-image .sl-slide-deck { color: rgba(255,255,255,0.85); }
.sl-slide-cta {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 24px;
  font-family: var(--f-display);
  font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--ink);
}
.sl-slide.has-image .sl-slide-cta { background: var(--accent); border-color: var(--accent); color: #fff; }
.sl-slide-cta:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.sl-slider-controls {
  position: absolute; bottom: 56px; right: 64px;
  display: flex; gap: 8px; z-index: 3;
}
.sl-slider-controls button {
  width: 40px; height: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--f-mono);
  color: var(--text);
  font-size: 14px;
}
.sl-slider-controls button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.sl-slider-dots {
  display: flex; gap: 10px;
  padding: 20px 0 0;
  justify-content: center;
}
.sl-slider-dots button {
  width: 28px; height: 3px; padding: 0;
  border: 0; background: var(--line); cursor: pointer;
}
.sl-slider-dots button[aria-selected="true"] { background: var(--accent); }

.sl-slider-empty {
  padding: 80px 40px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
}

@media (max-width: 720px) {
  .sl-slider { padding: 16px 20px; }
  .sl-slider-controls { bottom: 24px; right: 24px; }
}

/* ══════════════════════════════════════════════════════════
   SECTION / POST LOOP
   ══════════════════════════════════════════════════════════ */
.wp-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 72px 32px;
  border-bottom: 1px solid var(--line);
}
.wp-section:last-of-type { border-bottom: none; }
.section-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 16px; margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.section-num {
  font-family: var(--f-mono);
  font-size: 12px; color: var(--accent);
  letter-spacing: 0.1em;
}
.section-title {
  font-family: var(--f-display);
  font-weight: 700; font-size: 1.6rem;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.section-link {
  margin-left: auto;
  font-family: var(--f-ui);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}

.archive-description {
  flex-basis: 100%;
  margin-top: 12px;
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 70ch;
}
.archive-description p { margin: 0; }

/* ──────────────────────────────────────────
   Breadcrumb — UI label, uppercase, sutil
   ────────────────────────────────────────── */
.breadcrumb {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px 32px 0;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.breadcrumb--prose {
  max-width: var(--prose-max);
  padding-top: 32px;
}
/* Quando precede o conteúdo, reduz o top do bloco seguinte para não duplicar spacing. */
.breadcrumb + .entry-header { padding-top: 16px; }
.breadcrumb + .wp-section { padding-top: 24px; }
article > .breadcrumb--prose + .entry-header { padding-top: 16px; }
.breadcrumb__list {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0; padding: 0;
}
.breadcrumb__item {
  display: inline-flex; align-items: center;
  gap: 8px;
}
.breadcrumb__item a {
  color: var(--muted-deep);
  text-decoration: none;
  transition: color .15s ease;
}
.breadcrumb__item a:hover { color: var(--accent); }
.breadcrumb__item span[aria-current="page"] {
  color: var(--text-soft);
  max-width: 50ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumb__sep {
  color: var(--rule);
  font-weight: 400;
}

/* ──────────────────────────────────────────
   Author bio — bloco editorial fim do post
   ────────────────────────────────────────── */
.author-bio {
  max-width: var(--prose-max);
  margin: 56px auto 0;
  padding: 32px 32px 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  border-top: 1px solid var(--line);
}
.author-bio__avatar-wrap img,
.author-bio__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: block;
}
.author-bio__content { min-width: 0; }
.author-bio__eyebrow {
  display: block;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.author-bio__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 4px;
}
.author-bio__role {
  display: block;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.author-bio__desc {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 70ch;
  margin: 0 0 18px;
}
.author-bio__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.author-bio__links a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}
.author-bio__links a:hover { color: var(--accent); }
.author-bio__more-item { margin-left: auto; }
.author-bio__more { color: var(--accent) !important; }

@media (max-width: 600px) {
  .author-bio {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .author-bio__avatar-wrap img,
  .author-bio__avatar {
    width: 72px; height: 72px;
  }
  .author-bio__more-item { margin-left: 0; }
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 32px;
}

.post-card {
  display: flex; flex-direction: column;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.post-card-thumb {
  aspect-ratio: 16/10;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-thumb .placeholder {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
}
.post-card-cat {
  position: absolute; top: 12px; left: 12px;
  background: var(--paper); color: var(--text);
  padding: 4px 10px;
  font-family: var(--f-ui);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-left: 2px solid var(--accent);
}
.post-card h2,
.post-card h3 {
  font-family: var(--f-display);
  font-weight: 700; font-size: 1.5rem;
  line-height: 1.05; letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.post-card .excerpt {
  color: var(--text-soft);
  font-size: 15px; line-height: 1.6;
  margin-bottom: 14px;
}
.post-card-meta {
  margin-top: auto;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--muted-deep); text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   SINGLE / PAGE — prose
   ══════════════════════════════════════════════════════════ */
.entry-header {
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: 72px 32px 40px;
  text-align: left;
}
.entry-header .eyebrow { margin-bottom: 16px; display: inline-block; }
.entry-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  /* 1 → 1.12 (21/08/2026): é O título do site — o do post — e estava com a
     entrelinha igual ao corpo da fonte. Mesma razão do hero: caixa-alta em
     português empilha acento e cedilha na mesma caixa. */
  /* LIMITE MEDIDO (21/08/2026, canvas TextMetrics na própria Antonio 900):
     o til do à sobe 1,052× o corpo da fonte e a cedilha do Ç desce 0,312×.
     Soma = 1,364 — ABAIXO disso as letras encostam, com qualquer valor.
     Decisão do Leo (21/08): ficar EXATAMENTE no limite — as letras se
     encostam, sem se sobrepor. É o ponto de máxima compressão legítimo;
     qualquer valor menor sobrepõe. Ao trocar a fonte, remedir:
     (ascent do à + descent do Ç) ÷ corpo. */
  line-height: 1.364; letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.entry-header .excerpt {
  color: var(--text-soft);
  font-size: 1.25rem; line-height: 1.55;
  margin-bottom: 24px;
}
.entry-featured {
  max-width: var(--content-max);
  margin: 0 auto 40px;
  padding: 0 32px;
}
.entry-featured img {
  width: 100%; height: auto;
  border: 1px solid var(--line);
}
.entry-content {
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: 0 32px 80px;
  /* 2.6.69: valores locais viraram tokens da camada de prosa do DS 1.7.0
     (--prose-body 1.18rem · --prose-leading 1.75 · --prose-ink = ink no
     light, #e0e0e0 no dark — era #fff, forte demais pra 2.000 palavras
     em tela escura). Mesmos valores computados de 2.6.67/68. */
  font-size: var(--prose-body);
  line-height: var(--prose-leading);
  color: var(--prose-ink);
}
.entry-content > * + * { margin-top: var(--prose-block-gap); }

/* Medida de leitura (2.6.67, achado A do estudo 25/07; tokenizada em
   2.6.69): trava o texto corrido em ~70 caracteres por linha —
   --prose-measure = 62ch medidos = 71 cpl em Archivo Narrow (o zero que
   define 1ch é mais largo que a letra média; 68ch dariam 78 cpl).
   Headings, imagens, tabelas e callouts continuam na coluna cheia de
   656px — texto mais estreito que a moldura. Parágrafos com block style
   de caixa (info/nota) ficam de fora pra não desalinhar das caixas de
   grupo. */
.entry-content > p:not(.is-style-info):not(.is-style-editorial-note),
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote { max-width: var(--prose-measure); }

/* Listas no conteúdo (2.6.67, achado B — bug): o reset global de style.css
   zera list-style/margin/padding de ul/ol e o tema dequeua o CSS do block
   library; sem estas regras, toda lista de post renderizava sem marcador
   nem indentação. */
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-top: 0.4em; }
.entry-content li::marker { color: var(--muted); }
.entry-content li > ul, .entry-content li > ol { margin-top: 0.4em; }

/* ── Fontes consultadas — componente .sl-sources (2.6.68, achado C) ──
   A seção que o gerador emite (h2 + 60x h3-slug + ul) é refundida
   server-side pelo filtro sapienslabs_refit_sources_section() em
   functions.php: veículo vira eyebrow Fira Mono, links em lista compacta
   de 2 colunas, tudo num details abre/fecha (aberto no desktop; nav.js
   fecha no mobile). Referência não compete com o corpo do texto. */
.sl-sources {
  border-top: 1px solid var(--line);
  padding-top: 1.6em;
}
.sl-sources__summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  cursor: pointer;
  list-style: none;              /* esconde o marker default do summary */
}
.sl-sources__summary::-webkit-details-marker { display: none; }
.sl-sources__summary::before {
  content: "▸";
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--muted-deep);
  transition: transform .15s ease;
  align-self: center;
}
.sl-sources__details[open] > .sl-sources__summary::before { content: "▾"; }
.entry-content .sl-sources__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  color: var(--text);
}
.sl-sources__count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-deep);
  white-space: nowrap;
}
.sl-sources__list {
  columns: 2;
  column-gap: 48px;
  margin-top: 1.4em;
}
.sl-sources__group {
  break-inside: avoid;
  margin: 0 0 16px;
}
.entry-content .sl-sources .sl-source-name {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-deep);
  margin: 0 0 4px;
  max-width: none;
}
.entry-content .sl-sources ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  max-width: none;
}
.entry-content .sl-sources li {
  margin-top: 0.25em;
  font-size: 0.92rem;
  line-height: 1.45;
}
/* Links de referência: mais quietos que os do corpo — herdam text-soft
   com sublinhado rebaixado; hover volta ao --link. */
.entry-content .sl-sources a {
  color: var(--text-soft);
  text-decoration-color: color-mix(in oklch, var(--text-soft) 35%, transparent);
}
.entry-content .sl-sources a:hover { color: var(--link); }
.entry-content .sl-sources a:visited:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--text-soft);
}
@media (max-width: 720px) {
  .sl-sources__list { columns: 1; }
  .sl-sources__summary { flex-wrap: wrap; gap: 8px 14px; }
}
/* Escala de artigo — tokens --prose-h2/h3 do DS 1.7.0 (2.6.69; mesmos
   1.95rem/1.45rem que o tema usava hardcoded desde sempre). */
.entry-content h2 {
  font-family: var(--f-display);
  font-weight: 700; font-size: var(--prose-h2);
  line-height: 1.364;  /* mesma fonte, mesmo limite */
  letter-spacing: 0.02em; text-transform: uppercase;
  margin-top: 2em;
}
.entry-content h3 {
  font-family: var(--f-display);
  font-weight: 700; font-size: var(--prose-h3);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-top: 1.6em;
}
/* Links de texto (2.6.67, achado D): token --link com par light/dark AA —
   o accent #0693e3 dava 2,9:1 sobre o creme, reprovado para corpo de texto.
   Sublinhado rebaixado a 45% que sobe a 100% no hover (border-bottom saiu:
   quebrava feio em links com quebra de linha). :visited exclui botões
   Gutenberg, que também vivem dentro de .entry-content em páginas. */
.entry-content a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--link) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.entry-content a:hover {
  color: var(--link);
  text-decoration-color: var(--link);
}
.entry-content a:visited:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--link-visited);
}
.entry-content a:visited:hover:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--link);
}
.entry-content blockquote {
  border-left: 3px solid var(--gold);
  padding: 8px 20px;
  color: var(--text);
  font-style: italic;
}
.entry-content code {
  font-family: var(--f-mono); font-size: 0.9em;
  background: var(--paper-deep);
  padding: 2px 6px;
}
.entry-content pre {
  font-family: var(--f-mono);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  padding: 20px; overflow-x: auto;
  font-size: 0.9em;
}
.entry-content img, .entry-content figure { margin: 2em auto; }
.entry-content figcaption {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--muted-deep); text-transform: uppercase;
  padding-top: 8px;
}

/* ── Editorial callouts ── */
/* "Destaque editorial" — caixa cinza-azulada com título Antonio UPPERCASE.
   Uso: bloco "Grupo" do Gutenberg com classe .is-style-callout, ou <aside class="callout">. */
.entry-content .callout,
.entry-content .is-style-callout,
.entry-content .wp-block-group.is-style-callout {
  background: color-mix(in oklch, var(--ink) 18%, var(--paper));
  border: 1px solid color-mix(in oklch, var(--ink) 25%, var(--paper));
  padding: 28px 32px;
  margin: 2em 0;
  color: var(--text);
}
[data-theme="dark"] .entry-content .callout,
[data-theme="dark"] .entry-content .is-style-callout,
[data-theme="dark"] .entry-content .wp-block-group.is-style-callout {
  background: color-mix(in oklch, var(--paper) 10%, var(--ink));
  border-color: var(--line);
}
.entry-content .callout > h2,
.entry-content .callout > h3,
.entry-content .callout > h4,
.entry-content .is-style-callout > h2,
.entry-content .is-style-callout > h3,
.entry-content .is-style-callout > h4,
.entry-content .wp-block-group.is-style-callout > h2,
.entry-content .wp-block-group.is-style-callout > h3,
.entry-content .wp-block-group.is-style-callout > h4 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 0 0 12px 0;
}
.entry-content .callout > * + *,
.entry-content .is-style-callout > * + *,
.entry-content .wp-block-group.is-style-callout > * + * { margin-top: 0.9em; }
.entry-content .callout p,
.entry-content .is-style-callout p,
.entry-content .wp-block-group.is-style-callout p {
  font-size: 0.98rem; line-height: 1.65;
}

/* "Nota editorial" — borda esquerda dourada (como o blockquote mas sem itálico) */
.entry-content .editorial-note,
.entry-content .is-style-editorial-note {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 20px;
  color: var(--text-soft);
  font-style: normal;
  margin: 2em 0;
}

/* "Info" — caixa com borda esquerda azul (accent) e fundo sutil.
   Mistura tonal pra dar contraste com a página (cream em light, ink em dark)
   sem competir com callout/explanation. Em dark fica ligeiramente mais
   claro que o bg principal; em light, ligeiramente mais escuro que o cream. */
.entry-content .info-box,
.entry-content .is-style-info {
  background: color-mix(in oklch, var(--accent) 6%, var(--paper));
  border-left: 3px solid var(--accent);
  padding: 14px 18px 14px 20px;
  color: var(--text-soft);
  margin: 2em 0;
}
[data-theme="dark"] .entry-content .info-box,
[data-theme="dark"] .entry-content .is-style-info {
  background: color-mix(in oklch, var(--accent) 12%, var(--paper));
  color: var(--text);
}

/* Pull-quote tipográfico (sem caixa, centralizado, Antonio) */
.entry-content .wp-block-pullquote,
.entry-content .pullquote {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
  margin: 3em 0;
  text-align: center;
}
.entry-content .wp-block-pullquote p,
.entry-content .pullquote p {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 12px;
}
.entry-content .wp-block-pullquote cite,
.entry-content .pullquote cite {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-deep);
  font-style: normal;
}

/* Related posts */
.related-posts {
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
  padding: 64px 0;
  margin-top: 40px;
}
.related-posts-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 32px;
}
.related-posts .posts-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px 28px;
}
@media (max-width: 720px) {
  .related-posts { padding: 40px 0; }
  .related-posts-inner { padding: 0 20px; }
}

/* Pagination */
.posts-nav,
.post-nav {
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: 40px 32px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
}
.pagination {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 32px;
  display: flex; gap: 8px; justify-content: center;
}
.pagination a, .pagination span {
  padding: 10px 14px;
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text);
}
.pagination .current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Comments */
.comments-area { max-width: var(--prose-max); margin: 0 auto; padding: 40px 32px 80px; }
.comments-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.4rem; letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.comment-list li { border-bottom: 1px solid var(--line); padding: 20px 0; }
.comment-meta {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--muted);
  text-transform: uppercase; margin-bottom: 10px;
}
.comment-form label {
  font-family: var(--f-ui); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 4px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: 1rem; color: var(--text);
  margin-bottom: 14px;
}
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .submit,
.button, button[type="submit"] {
  background: var(--ink); color: var(--cream);
  border: 0; padding: 14px 22px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
[data-theme="dark"] .comment-form .submit,
[data-theme="dark"] .button,
[data-theme="dark"] button[type="submit"] { background: var(--accent); color: #fff; }

/* Widgets / sidebar */
.widget-area {
  max-width: var(--prose-max);
  margin: 0 auto;
  padding: 40px 32px;
  display: grid; gap: 32px;
}
.widget-title {
  font-family: var(--f-ui);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.search-form { display: flex; gap: 0; border: 1px solid var(--line); }
.search-form input[type="search"] {
  flex: 1; padding: 12px 14px;
  background: transparent; border: 0;
  font-family: var(--f-body); color: var(--text);
}
.search-form button {
  padding: 0 20px; background: var(--ink); color: var(--cream);
  border: 0; cursor: pointer;
  font-family: var(--f-display); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px;
}

/* 404 */
.error-404 {
  max-width: var(--prose-max);
  margin: 0 auto; padding: 120px 32px;
  text-align: left;
}
.error-404 .code {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(6rem, 18vw, 12rem);
  color: var(--accent); line-height: 0.85;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 32px;
  background: var(--paper-deep);
}
.site-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
}
.site-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.site-footer-cols[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.site-footer-cols[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.site-footer-cols[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.site-footer-col.is-empty { display: none; }
.site-footer h4 {
  font-family: var(--f-ui);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.site-footer ul li { font-size: 14px; line-height: 2; color: var(--text-soft); }
.site-footer-brand { width: 160px; }
.site-footer-meta {
  max-width: var(--content-max);
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--muted); text-transform: uppercase;
}

/* Social links (below brand description) */
.site-social { margin-top: 16px; }
.site-social-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.site-social-list li { margin: 0; }
.site-social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.site-social-list a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}

/* Footer nav inline in meta bar */
.site-footer-nav { flex: 1; display: flex; justify-content: center; }
.site-footer-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.site-footer-menu li { margin: 0; }
.site-footer-menu a {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color .15s ease;
}
.site-footer-menu a:hover,
.site-footer-menu .current-menu-item > a {
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════
   v2.3 — Meta chips, typographic hero, category accents, icon box
   ══════════════════════════════════════════════════════════ */

/* ── Eyebrow de série no single (2.6.68, achado F1) ──
   "ELEIÇÕES 2026 · RESUMO SEMANAL" acima do H1, no padrão type-eyebrow
   do DS (Fira Mono, tracking 0.14em), linkando pra página canônica da
   série. Renderizado por sapienslabs_series_eyebrow(). */
.entry-series {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-deep);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color .15s ease;
}
.entry-series:hover { color: var(--accent); }

/* ── Chips de metadados no topo do single ── */
.entry-header .entry-chips {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 2.6.67: muted-deep — muted puro dava 3,49:1 a 11px sobre o creme. */
  color: var(--muted-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.entry-header .entry-chips .chip {
  padding: 10px 14px 10px 0;
  margin-right: 14px;
  position: relative;
  color: var(--muted-deep);
}
.entry-header .entry-chips .chip + .chip::before {
  content: "·";
  position: absolute;
  left: -12px;
  color: var(--line);
}
.entry-header .entry-chips .chip-cat {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
/* 2.6.67: era var(--ink) — token fixo, invisível no dark (ink sobre ink). */
.entry-header .entry-chips .chip-cat:hover { color: var(--text); }

/* ── Hero tipográfico (slides sem featured image) ── */
.sl-slide:not(.has-image) {
  background: var(--paper);
  justify-content: flex-start;
  padding-top: clamp(48px, 6vw, 80px);
}
.sl-slide:not(.has-image) .sl-slide-inner { max-width: 820px; }
.sl-slide:not(.has-image) .sl-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
}
.sl-slide:not(.has-image) .sl-slide-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.sl-slide:not(.has-image) .sl-slide-title {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.364;
  letter-spacing: -0.01em;
  margin-top: 18px;
  margin-bottom: 20px;
}
.sl-slide:not(.has-image) .sl-slide-title a { color: var(--ink); }
.sl-slide:not(.has-image) .sl-slide-title a:hover { color: var(--accent); }
.sl-slide:not(.has-image) .sl-slide-deck {
  /* 2.6.67: era var(--f-narrow), variável que nunca existiu (caía na fonte
     herdada). O token correto é --f-body (Archivo Narrow). */
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.45;
  color: var(--text-soft);
  max-width: 640px;
}
[data-theme="dark"] .sl-slide:not(.has-image) { background: var(--paper-deep); }

/* ── Border-top colorido por categoria nos post-cards ── */
.post-card {
  border-top: 3px solid var(--cat-color, var(--line));
  padding-top: 20px;
}
.post-card-cat {
  border-left-color: var(--cat-color, var(--accent)) !important;
}
.post-card h3 a { color: var(--text); transition: color .15s ease; }
.post-card h3 a:visited { color: var(--text-soft); }
.post-card:hover h3 a { color: var(--cat-color, var(--accent)); }

/* ── Nota informativa com ícone Lucide ── */
/* Block style: is-style-explanation (core/group).
   O icons.js injeta um <i data-lucide="info"> como primeiro filho.
   Autor pode trocar o ícone via data-icon="lightbulb" no wrapper do bloco. */
.entry-content .is-style-explanation,
.entry-content .wp-block-group.is-style-explanation {
  position: relative;
  background: color-mix(in oklch, var(--accent) 6%, var(--paper));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--paper));
  border-left: 3px solid var(--accent);
  padding: 24px 28px 24px 64px;
  margin: 2em 0;
  color: var(--text);
}
[data-theme="dark"] .entry-content .is-style-explanation,
[data-theme="dark"] .entry-content .wp-block-group.is-style-explanation {
  background: color-mix(in oklch, var(--accent) 10%, var(--paper));
  border-color: color-mix(in oklch, var(--accent) 35%, var(--paper));
}
.entry-content .is-style-explanation > .sl-explanation-icon {
  position: absolute;
  top: 22px;
  left: 24px;
  width: 24px;
  height: 24px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.entry-content .is-style-explanation > .sl-explanation-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}
.entry-content .is-style-explanation > h2,
.entry-content .is-style-explanation > h3,
.entry-content .is-style-explanation > h4 {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px 0;
}
.entry-content .is-style-explanation p {
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.entry-content .is-style-explanation > * + * { margin-top: 0.7em; }

/* ══════════════════════════════════════════════════════════
   GALERIA — wp-block-gallery
   ══════════════════════════════════════════════════════════ */
.entry-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px !important;
  /* core injeta `<style>.wp-block-gallery-N { --wp--style--unstable-gallery-gap: 0.5em }` por instancia.
     !important e´ a forma de manter o gap do DS independente da var dinamica. */
  --wp--style--unstable-gallery-gap: 8px !important;
  margin: 2em 0;
}

/* Respeita columns-N do Gutenberg (1..8) */
.entry-content .wp-block-gallery.columns-1 { grid-template-columns: 1fr; max-width: 640px; }
.entry-content .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.entry-content .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.entry-content .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.entry-content .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.entry-content .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.entry-content .wp-block-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.entry-content .wp-block-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }

/* Figures filhas preenchem a celula da grid track.
   !important e´ necessario pra vencer:
   - `.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)`
     do block-library (width: calc(50% - ...) — especificidade ID via :not)
   - `width: auto`/`height: auto` injetados em img pelo bloco Image
   aspect-ratio fica no figure (celula): garante proporcao mesmo com height:100% na img. */
.entry-content .wp-block-gallery > .wp-block-image,
.entry-content .wp-block-gallery > figure {
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}
.entry-content .wp-block-gallery > .wp-block-image > a,
.entry-content .wp-block-gallery > figure > a { display: block; width: 100%; height: 100%; }
.entry-content .wp-block-gallery > .wp-block-image img,
.entry-content .wp-block-gallery > figure img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  margin: 0;
  transition: opacity .2s ease;
}
.entry-content .wp-block-gallery > .wp-block-image:hover img,
.entry-content .wp-block-gallery > figure:hover img { opacity: 0.88; }
/* columns-1: aspect cinematografico (sobrescreve o 4/3 do bloco acima) */
.entry-content .wp-block-gallery.columns-1 > .wp-block-image,
.entry-content .wp-block-gallery.columns-1 > figure { aspect-ratio: 16/9; }
.entry-content .wp-block-gallery figcaption {
  padding: 6px 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-deep);
  border-top: 1px solid var(--line);
  text-align: left;
}

/* (columns-1 aspect 16/9 ja esta consolidado no bloco da figure acima) */

/* ── Lightbox ── */
.sl-lightbox {
  display: none;
  position: fixed; inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.sl-lightbox.is-open { display: flex; }
.sl-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,15,22,0.92);
}
.sl-lightbox-figure {
  position: relative; z-index: 1;
  max-width: min(90vw, 1200px);
  max-height: 90vh;
  display: flex; flex-direction: column;
  align-items: center;
}
.sl-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.08);
}
.sl-lightbox-caption {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 10px 0 0;
}
.sl-lightbox-counter {
  position: absolute; bottom: -32px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.sl-lightbox-close,
.sl-lightbox-prev,
.sl-lightbox-next {
  position: absolute; z-index: 2;
  background: none; border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  transition: color .15s ease;
}
.sl-lightbox-close:hover,
.sl-lightbox-prev:hover,
.sl-lightbox-next:hover { color: #fff; }
.sl-lightbox-close { top: 16px; right: 16px; }
.sl-lightbox-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.sl-lightbox-next  { right: 16px; top: 50%; transform: translateY(-50%); }
.sl-lightbox-close svg,
.sl-lightbox-prev svg,
.sl-lightbox-next svg { width: 22px; height: 22px; stroke-width: 1.75; }
body.sl-lightbox-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════
   TABELA — wp-block-table
   Fundido em 2.6.67 (achado G1 do estudo 25/07): havia dois blocos
   concorrentes neste arquivo com paddings distintos — o de baixo
   vencia por cascata. Este é o único bloco agora; valores vencedores
   mantidos (th 14/18, td 16/18), tfoot e is-style-stripes preservados,
   --f-narrow (variável inexistente) corrigido pra --f-body, th em
   muted-deep (texto de 11px sobre creme pedia AA) e border do th em
   --text (o --ink fixo sumia no dark).
   ══════════════════════════════════════════════════════════ */
.entry-content table,
.entry-content .wp-block-table table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-family: var(--f-body);
  font-size: 0.96rem;
}
.entry-content th,
.entry-content .wp-block-table th,
.wp-block-table th {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-deep);
  text-align: left;
  padding: 14px 18px;
  border-bottom: 2px solid var(--text);
  vertical-align: bottom;
}
.entry-content td,
.entry-content .wp-block-table td,
.wp-block-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Primeira coluna costuma ser nome/categoria — peso maior */
.entry-content tbody tr td:first-child,
.wp-block-table tbody tr td:first-child {
  font-weight: 600;
}
.entry-content tfoot td,
.entry-content tfoot th,
.wp-block-table tfoot td,
.wp-block-table tfoot th {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-deep);
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding-top: 8px;
}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: color-mix(in oklch, var(--ink) 4%, var(--paper));
}

/* ── Block style "Números da semana" — .is-style-key-figures (2.6.70,
   item 14 / achado E do estudo 25/07). Traduz pra block style o desenho
   do .sl-project-stats da página canônica /eleicoes-2026/: rótulo (th)
   Inter caps, valor (td) Antonio 900, células separadas por rules
   verticais, moldura por rules horizontais, zero fundo. Pensado pra
   TABELA CURTA de números-chave (3-5 colunas, 1-2 linhas de valores) —
   o revisor aplica no draft quando fizer sentido; a tabela de ranking
   que o gerador emite continua no estilo default (13 linhas em Antonio
   900 seria gritaria). Rótulo em muted-deep, não muted: texto de 11px
   sobre creme reprova AA com o muted cru (lição da Fase 1, achado J).
   Rules em var(--line), não var(--rule): --rule é fixo creme e vazaria
   no dark (família do bug .chip-cat:hover corrigido em 2.6.67). */
.entry-content .wp-block-table.is-style-key-figures table {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.entry-content .wp-block-table.is-style-key-figures th {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-deep);
  border-bottom: 0;
  padding: 20px 24px 6px;
  vertical-align: bottom;
}
.entry-content .wp-block-table.is-style-key-figures td {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1.05;
  color: var(--text);
  border-bottom: 0;
  padding: 2px 24px 20px;
  vertical-align: top;
  word-break: break-word;
}
.entry-content .wp-block-table.is-style-key-figures th:first-child,
.entry-content .wp-block-table.is-style-key-figures td:first-child {
  padding-left: 0;
}
.entry-content .wp-block-table.is-style-key-figures th + th,
.entry-content .wp-block-table.is-style-key-figures td + td {
  border-left: 1px solid var(--line);
}
.entry-content .wp-block-table.is-style-key-figures tbody tr + tr td {
  border-top: 1px solid var(--line);
}
/* Neutraliza o peso 600 genérico da 1ª coluna: aqui toda célula é valor */
.entry-content .wp-block-table.is-style-key-figures tbody tr td:first-child {
  font-weight: 900;
}
@media (max-width: 720px) {
  .entry-content .wp-block-table.is-style-key-figures th { padding: 14px 14px 4px; }
  .entry-content .wp-block-table.is-style-key-figures td { font-size: 1.4rem; padding: 2px 14px 14px; }
}
/* No mobile, mantém legibilidade — não converte em cards (tabelas com 3+
   colunas são fáceis de scrollar lateralmente em layout fluido) */
@media (max-width: 720px) {
  .entry-content table,
  .wp-block-table table {
    font-size: 0.9rem;
  }
  .entry-content th, .entry-content td,
  .wp-block-table th, .wp-block-table td {
    padding: 12px 14px;
  }
}

/* ══════════════════════════════════════════════════════════
   SEPARADOR — wp-block-separator / hr
   ══════════════════════════════════════════════════════════ */
.entry-content hr,
.entry-content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 3em auto;
  max-width: 240px;
}
.entry-content .wp-block-separator.is-style-wide {
  max-width: 100%;
}
.entry-content .wp-block-separator.is-style-dots {
  border: 0;
  text-align: center;
  max-width: 100%;
}
.entry-content .wp-block-separator.is-style-dots::before {
  content: "· · ·";
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════
   EMBED — wp-block-embed (YouTube, Vimeo, Twitter…)
   ══════════════════════════════════════════════════════════ */
.entry-content .wp-block-embed {
  margin: 2em 0;
}
.entry-content .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}
.entry-content .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed__wrapper video,
.entry-content .wp-block-embed__wrapper embed,
.entry-content .wp-block-embed__wrapper object {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Embeds que não são vídeo (Twitter, Spotify…) — não usar padding-bottom 16:9 */
.entry-content .wp-block-embed.is-type-rich .wp-block-embed__wrapper,
.entry-content .wp-block-embed.is-type-photo .wp-block-embed__wrapper {
  padding-bottom: 0;
  height: auto;
}
.entry-content .wp-block-embed figcaption {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-deep);
  text-align: left;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════
   BOTÕES — wp-block-buttons / wp-block-button
   ══════════════════════════════════════════════════════════ */
.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 2em 0;
}
/* Botões Gutenberg — DS-aware nos dois temas. Antes da v2.6.36 estes
   estilos usavam `var(--ink)` (token fixo, não troca com data-theme), o
   que tornava a variante outline em dark mode ink-on-ink — invisível.
   Agora dependem de `var(--text)` e `var(--paper)`, que se invertem
   entre light/dark, garantindo contraste em ambos. */
.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
  display: inline-block;
  padding: 11px 24px;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--paper);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  cursor: pointer;
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* Variante "outline" */
.entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.entry-content .wp-block-button.is-style-outline .wp-element-button {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.entry-content .wp-block-button.is-style-outline .wp-element-button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   FORMULÁRIOS — CoBlocks Form (wp-block-coblocks-form)
   Plugin emite labels com `has-black-color` (preset core do WP) que
   força `color: #000` em dark mode — invisível. Inputs herdam Arial.
   Aqui forçamos as classes do CoBlocks a respeitar tokens do DS.
   ══════════════════════════════════════════════════════════ */
.entry-content .wp-block-coblocks-form {
  margin: 2em 0;
}
.entry-content .coblocks-form > div + div,
.entry-content .wp-block-coblocks-form > * + * {
  margin-top: 18px;
}
.entry-content .coblocks-label,
.entry-content .coblocks-label.has-text-color,
.entry-content .coblocks-label.has-black-color {
  display: block;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text) !important; /* core do WP aplica preset color com !important */
  margin-bottom: 8px;
}
.entry-content .coblocks-label .required {
  color: var(--accent);
  font-weight: 700;
}
.entry-content .coblocks-field,
.entry-content .coblocks-textarea,
.entry-content input.coblocks-field,
.entry-content textarea.coblocks-textarea {
  display: block;
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.entry-content .coblocks-textarea {
  min-height: 160px;
  resize: vertical;
}
.entry-content .coblocks-field:focus,
.entry-content .coblocks-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.entry-content .coblocks-field::placeholder,
.entry-content .coblocks-textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
[data-theme="dark"] .entry-content .coblocks-field,
[data-theme="dark"] .entry-content .coblocks-textarea {
  background: var(--paper-deep);
  color: var(--text);
  border-color: var(--line);
}
[data-theme="dark"] .entry-content .coblocks-field:focus,
[data-theme="dark"] .entry-content .coblocks-textarea:focus {
  border-color: var(--accent);
}

@media (max-width: 720px) {
  /* Colapsa galerias densas (3+) para 2 colunas no mobile */
  .entry-content .wp-block-gallery.columns-3,
  .entry-content .wp-block-gallery.columns-4,
  .entry-content .wp-block-gallery.columns-5,
  .entry-content .wp-block-gallery.columns-6,
  .entry-content .wp-block-gallery.columns-7,
  .entry-content .wp-block-gallery.columns-8 { grid-template-columns: repeat(2, 1fr); }
  .sl-lightbox-prev { left: 8px; }
  .sl-lightbox-next { right: 8px; }
}

@media (max-width: 480px) {
  /* Em telas estreitas, todas as galerias multi-coluna viram 2 colunas */
  .entry-content .wp-block-gallery:not(.columns-1) { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   COVER — wp-block-cover
   ══════════════════════════════════════════════════════════ */
.entry-content .wp-block-cover {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 64px);
  margin: 2em 0;
  overflow: hidden;
  background: var(--ink);
}
.entry-content .wp-block-cover img,
.entry-content .wp-block-cover video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  margin: 0;
}
.entry-content .wp-block-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(15,22,32,0.55);
  z-index: 1;
}
.entry-content .wp-block-cover .wp-block-cover__inner-container {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 720px;
  color: #fff;
}
.entry-content .wp-block-cover .wp-block-cover__inner-container p,
.entry-content .wp-block-cover .wp-block-cover__inner-container h2,
.entry-content .wp-block-cover .wp-block-cover__inner-container h3 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
/* 2.6.71 (achado G1 do estudo de 25/07): era `margin-left: calc(-1 *
   var(--prose-max)/2); width: 100vw` — matemática quebrada em duas frentes.
   O 100vw mede a viewport INTEIRA, ignorando a sidebar fixa de 260px, e o
   deslocamento negativo usava metade de --prose-max (720px) sem relação com
   a coluna real. Resultado: qualquer post com cover alignfull estouraria
   scroll horizontal no desktop. Bug latente — nenhum post usa o bloco hoje,
   por isso nunca apareceu. Fix: o cover ocupa a largura da própria coluna de
   conteúdo, sem sangria; alignfull vira "cheio dentro da coluna", que é o
   máximo coerente com um layout de sidebar fixa. */
.entry-content .wp-block-cover.alignfull {
  margin-left: 0;
  width: 100%;
  max-width: none;
}

/* ══════════════════════════════════════════════════════════
   COLUMNS — wp-block-columns
   ══════════════════════════════════════════════════════════ */
.entry-content .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin: 2em 0;
}
.entry-content .wp-block-column { min-width: 0; }
.entry-content .wp-block-columns.has-2-columns { grid-template-columns: repeat(2, 1fr); }
.entry-content .wp-block-columns.has-3-columns { grid-template-columns: repeat(3, 1fr); }
.entry-content .wp-block-columns.has-4-columns { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
  .entry-content .wp-block-columns.has-2-columns,
  .entry-content .wp-block-columns.has-3-columns,
  .entry-content .wp-block-columns.has-4-columns { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
  /* Ocultar elementos navegacionais */
  .site-header,
  .mobile-drawer,
  .related-posts,
  .post-nav,
  .comments-area,
  .site-footer,
  .sl-slider,
  .theme-toggle,
  .menu-trigger,
  .skip-link,
  .pagination { display: none !important; }

  /* Remover margem-left do conteúdo (sem sidebar) */
  .site-main,
  .site-footer { margin-left: 0 !important; }

  /* Cores adequadas para impressão */
  body, .entry-content { color: #000 !important; background: #fff !important; }
  a { color: #000 !important; text-decoration: underline; }

  /* Título e header do post */
  .entry-header { padding: 0 0 24px !important; border-bottom: 2px solid #000; }
  .entry-title { font-size: 28pt !important; line-height: 1.1 !important; }
  .entry-chips { font-size: 8pt !important; }
  .excerpt { font-size: 12pt !important; }

  /* Prosa legível em papel */
  .entry-content {
    max-width: 100% !important;
    padding: 0 !important;
    font-size: 11pt !important;
    line-height: 1.6 !important;
  }
  .entry-content img { max-width: 100% !important; page-break-inside: avoid; }
  .entry-content h2, .entry-content h3, .entry-content h4 { page-break-after: avoid; }
  .entry-content pre, .entry-content blockquote { page-break-inside: avoid; }

  /* Callouts e caixas: sem background */
  .entry-content .callout,
  .entry-content .is-style-callout,
  .entry-content .is-style-explanation { background: none !important; border: 1px solid #ccc !important; }

  /* Galeria: 3 colunas em papel */
  .entry-content .wp-block-gallery { grid-template-columns: repeat(3, 1fr) !important; }

  /* Lightbox: ocultar */
  .sl-lightbox { display: none !important; }
}

@media (max-width: 720px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .site-footer-cols,
  .site-footer-cols[data-cols="2"],
  .site-footer-cols[data-cols="3"],
  .site-footer-cols[data-cols="4"] { grid-template-columns: 1fr 1fr; }
  .site-footer-meta { flex-direction: column; gap: 14px; align-items: flex-start; }
  .site-footer-nav { justify-content: flex-start; }
  .wp-section { padding: 48px 20px; }
  .entry-header, .entry-content { padding-left: 20px; padding-right: 20px; }
}

/* ══════════════════════════════════════════════════════════
   PROJECT HERO — página canônica de projeto (page-eleicoes-2026.php)
   Layout institucional: eyebrow mono · display Antonio · CTAs · stats grid.
   ══════════════════════════════════════════════════════════ */
.sl-project-hero {
  padding: 96px 64px 72px;
  border-bottom: 1px solid var(--line);
  max-width: 1240px;
  margin: 0 auto;
}
.sl-project-hero-inner {
  max-width: 980px;
}
.sl-project-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}
.sl-project-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 1.364;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 28px;
}
.sl-project-title em {
  font-style: normal;
  color: var(--accent);
}
.sl-project-deck {
  font-family: var(--f-body);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 720px;
  margin: 0 0 36px;
}
.sl-project-deck strong {
  color: var(--text);
  font-weight: 600;
}
.sl-project-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.sl-project-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 0;
  text-decoration: none;
  border: 1px solid transparent;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.sl-project-cta--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sl-project-cta--primary:hover { opacity: 0.85; }
.sl-project-cta--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.sl-project-cta--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sl-project-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 36px;
  padding: 0;
}
.sl-project-stat {
  padding: 24px 28px;
  border-right: 1px solid var(--line);
}
.sl-project-stat:first-child { padding-left: 0; }
.sl-project-stat:last-child { border-right: 0; padding-right: 0; }
.sl-project-stat-label {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.sl-project-stat-value {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 8px;
  word-break: break-word;
}
.sl-project-stat-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.sl-project-stats-ts {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: -20px 0 36px;
}
.sl-project-stats-ts time {
  color: var(--text);
}
.sl-project-note {
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-soft);
  border-left: 3px solid var(--gold);
  padding: 4px 16px;
  max-width: 760px;
  margin: 0;
}
.sl-project-posts-section {
  max-width: 1240px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sl-project-hero { padding: 56px 20px 48px; }
  .sl-project-stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .sl-project-stat:first-child { padding-top: 0; }
  .sl-project-stat:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Dark theme overrides */
/* 2.6.86: as réguas do .sl-project-* passaram de --rule para --line — --rule é
   creme fixo e vazava no dark (mesma família do bug .chip-cat:hover de 2.6.67).
   Os overrides abaixo continuam porque o bloco ainda pinta texto com --ink. */
[data-theme="dark"] .sl-project-title { color: var(--text); }
[data-theme="dark"] .sl-project-stat-value { color: var(--text); }
[data-theme="dark"] .sl-project-cta--ghost { color: var(--text); }

/* ══════════════════════════════════════════════════════════
   COMPLIANZ COOKIE BANNER — overrides DS-aligned
   Banner default tem 526px de largura e cobre o hero da home.
   Aqui ele vira um card compacto no canto inferior direito.
   ══════════════════════════════════════════════════════════ */
.cmplz-cookiebanner.banner-1 {
  min-width: 0 !important;
  max-width: 360px !important;
  width: calc(100vw - 24px) !important;
  font-family: var(--f-body);
  font-size: 13px !important;
  line-height: 1.5;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--text);
  bottom: 16px !important;
  right: 16px !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-title,
.cmplz-cookiebanner.banner-1 .cmplz-header * {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
}
.cmplz-cookiebanner.banner-1 .cmplz-message,
.cmplz-cookiebanner.banner-1 p {
  font-size: 12.5px !important;
  color: var(--text-soft);
}
.cmplz-cookiebanner.banner-1 button,
.cmplz-cookiebanner.banner-1 .cmplz-btn {
  font-family: var(--f-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-accept {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid var(--accent) !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-deny {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--rule) !important;
}
[data-theme="dark"] .cmplz-cookiebanner.banner-1 {
  background: var(--bg2);
  border-color: var(--line);
  color: var(--text);
}

/* Mobile (2.6.68, achado H): o card de 360px virava um modal de facto em
   viewport de 390px — 390px de altura, 46% da tela, cobrindo título e
   início do texto. Vira barra inferior compacta (~29% medidos): mensagem
   integral acessível por scroll interno, Aceitar/Negar lado a lado,
   Ver preferências abaixo. Título do banner dispensado (a mensagem já
   explica; o fluxo completo segue em Ver preferências). */
@media (max-width: 480px) {
  .cmplz-cookiebanner.banner-1 {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    padding: 12px 14px !important;
  }
  .cmplz-cookiebanner.banner-1 .cmplz-header { display: none !important; }
  .cmplz-cookiebanner.banner-1 .cmplz-message {
    font-size: 12px !important;
    max-height: 60px;
    overflow-y: auto;
    margin-bottom: 4px;
  }
  .cmplz-cookiebanner.banner-1 .cmplz-buttons {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .cmplz-cookiebanner.banner-1 .cmplz-btn {
    flex: 1 1 40% !important;
    padding: 9px 10px !important;
    font-size: 10px !important;
    margin: 0 !important;
  }
  .cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-view-preferences {
    flex: 1 1 100% !important;
  }
}

/* (Bloco duplicado de tabelas removido em 2.6.67 — regras fundidas no
   bloco canônico "TABELA — wp-block-table" acima.) */

/* ══════════════════════════════════════════════════════════
   NÚMEROS FORA DE TABELA — .sl-num  (2.6.71, achado E do estudo 25/07)
   ══════════════════════════════════════════════════════════
   Complementa o tabular-nums das células: número citado no meio da prosa
   ("1.557 artigos") não tem como herdar alinhamento de tabela. Archivo
   Narrow não traz figuras tabulares, então dígitos de larguras diferentes
   fazem colunas de números desalinharem em listas e comparações. A mono do
   DS é exatamente o papel de "valor técnico" — mesma escolha já feita nos
   chips e no eyebrow das fontes.
   Uso: <span class="sl-num">R$ 545.852,53</span> — utilitário opcional que
   o revisor aplica quando o número precisa de precisão visual, não default. */
.sl-num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;   /* mono renderiza maior que a narrow no mesmo px */
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════
   PROGRESSO DE LEITURA + VOLTAR AO TOPO  (2.6.71, achado H)
   ══════════════════════════════════════════════════════════
   Um resumo tem ~17.000px de altura no mobile (~20 telas) mesmo depois do
   details das fontes. Sem referência de posição o leitor não sabe se está
   na metade ou no fim. Barra de 2px no topo, accent, sem fundo — não
   compete com nada e some quando não há o que rolar.
   Só no single (o JS não injeta em outras páginas). */
.sl-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 60;            /* acima do header (40), abaixo do drawer (100) */
  transition: width .1s linear;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sl-progress { transition: none; }
}

.sl-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 44px; height: 44px;      /* alvo de toque mínimo */
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);   /* NÃO --bg: token inexistente no tema (o fundo
                                 é --paper/--paper-deep, que inverte no dark).
                                 Mesma família do bug --rule/--line da Fase 3. */
  color: var(--muted-deep);
  border-radius: 2px;             /* o tema não usa raio grande */
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease, color .15s ease;
  z-index: 55;
}
.sl-to-top.is-visible { opacity: 1; visibility: visible; }
.sl-to-top:hover { color: var(--text); }
.sl-to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sl-to-top { transition: none; }
}


/* ── Monitores (/monitores/) — sumário editorial, 2.6.87 ──────────────────
   Reescrito depois da crítica à v2.6.85 (grid de cards): o índice ganhava o
   mesmo peso visual das páginas de destino e o número do card ficava maior que
   o nome do painel. Aqui cada monitor é UMA LINHA de sumário — identidade à
   esquerda, contexto no meio, números em mono à direita — e o cabeçalho é de
   seção, não de projeto.

   Tokens, com as duas regras que a v2.6.85 violou e que já estavam escritas
   neste arquivo (ver o comentário do is-style-key-figures):
   · réguas em var(--line), NUNCA var(--rule) — --rule é creme fixo e vaza no dark;
   · texto de 10-11px em var(--muted-deep), não var(--muted) — o muted cru
     reprova AA nesse corpo, nos dois temas;
   · cor de texto em var(--text), que já é o par certo nos dois temas — nada de
     var(--ink) + override [data-theme="dark"], que foi o que apagou o título
     no escuro. */
.sl-monitores { max-width: 1240px; margin: 0 auto; }

.sl-monitores-intro {
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 640px;
  margin: 0 0 8px;
}
.sl-monitores-intro strong { color: var(--text); font-weight: 600; }

.sl-monitor-list {
  margin: 0 0 40px;
  border-top: 1px solid var(--line);
}

.sl-monitor-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) 2fr minmax(200px, 0.9fr);
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.sl-monitor-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 8px;
}
.sl-monitor-title a { color: inherit; text-decoration: none; }
.sl-monitor-title a:hover { color: var(--accent); }

.sl-monitor-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-deep);
  margin: 0;
}

.sl-monitor-deck {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

.sl-monitor-meta { text-align: right; }

.sl-monitor-figure {
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-deep);
  margin: 0;
}
.sl-monitor-figure-value { color: var(--text); font-weight: 500; }
.sl-monitor-figure-label { text-transform: lowercase; }

.sl-monitor-ts {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-deep);
  margin: 10px 0 14px;
}

.sl-monitor-dash {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.sl-monitor-dash:hover { color: var(--accent); border-bottom-color: var(--accent); }

.sl-monitores-note { margin-bottom: 8px; }

@media (max-width: 900px) {
  .sl-monitor-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 0;
  }
  .sl-monitor-meta { text-align: left; }
  .sl-monitor-ts { margin: 8px 0 12px; }
}


/* ── Marca de link externo no menu — 2.6.89 ─────────────────────────────────
   Item do menu que aponta para fora do domínio ganha uma seta. Feito por
   seletor de atributo, não por classe manual: link externo novo no menu já
   nasce marcado, sem depender de alguém marcá-lo no admin.

   Mira em ul[id^="menu-"] de propósito — o drawer tem DOIS ul filhos diretos, o
   do menu e o das redes sociais, e nas redes o ícone já diz que é outro site.

   A seta é SVG em mask, não caractere: a v2.6.88 usava content "\2197" e saía
   minúscula e fina, porque **Antonio não tem esse glifo** (conferido com
   fontTools: U+2197 e U+2192 ausentes) e o navegador caía num fallback de
   sistema, cujo desenho e peso variam por SO e não se pode calibrar. Com mask
   o traço é nosso: espessura casada com o peso do menu, tamanho em `em` para
   acompanhar o link, cor via var(). Mesmo vocabulário dos ícones do header.

   content:"" não é anunciado por leitor de tela — a seta é decoração. */
:root {
  --sl-ext-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg>');
}

.site-nav a[href^="http"]:not([href*="sapienslabs.com.br"])::after,
.mobile-drawer-inner > ul[id^="menu-"] a[href^="http"]:not([href*="sapienslabs.com.br"])::after {
  content: "";
  display: inline-block;
  width: max(11px, 0.62em);
  height: max(11px, 0.62em);
  margin-left: 8px;
  vertical-align: baseline;
  background-color: var(--muted-deep);
  -webkit-mask: var(--sl-ext-arrow) no-repeat center / contain;
          mask: var(--sl-ext-arrow) no-repeat center / contain;
}

/* ── Arquivos (page-arquivos.php, 2.6.93) — índice do blog na voz das outras páginas ── */
.sl-arq-intro {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: var(--prose-max, 68ch);
  margin: 0 0 40px;
}
.sl-arq-num { font-family: var(--f-mono); color: var(--text); font-weight: 500; }
.sl-arq-h2 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 44px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.sl-arq-h2:first-of-type { margin-top: 0; }
.sl-arq-h2-note {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted-deep);
  margin-left: 10px;
}
.sl-arq-count {
  font-family: var(--f-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--muted-deep);
  margin-left: 6px;
}
.sl-arq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.sl-arq-cat {
  border: 1px solid var(--line);
  padding: 14px 16px 12px;
  background: var(--paper);
}
.sl-arq-cat-title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.sl-arq-cat-title a { color: var(--text); text-decoration: none; }
.sl-arq-cat-title a:hover { color: var(--accent); }
.sl-arq-sub {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1.9;
}
.sl-arq-sub li { display: flex; justify-content: space-between; }
.sl-arq-sub a { color: var(--text-soft); text-decoration: none; }
.sl-arq-sub a:hover { color: var(--accent); }
.sl-arq-anos { display: grid; gap: 10px; }
.sl-arq-ano { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 12px; }
.sl-arq-ano-label {
  font-family: var(--f-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
}
.sl-arq-ano-label:hover { color: var(--accent); }
.sl-arq-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sl-arq-chips a {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 7px 10px;
  background: var(--paper);
}
.sl-arq-chips a:hover { border-color: var(--accent); color: var(--accent); }
.sl-arq-chips a:hover .sl-arq-count { color: var(--accent); }
.sl-arq-tags { margin-top: 4px; }
@media (max-width: 640px) {
  .sl-arq-ano { grid-template-columns: 1fr; gap: 6px; }
  .sl-arq-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Sobre o autor (page-leonardo-fontes-de-sales.php, 2.6.94) ── */
.sl-autor-head {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: center;
  max-width: var(--prose-max);
  margin: 0 auto 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.sl-autor-avatar img, .sl-autor-avatar-img {
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: block;
}
.sl-autor-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 8px;
}
.sl-autor-links { margin-top: 4px; }
.sl-autor .entry-content > p:first-of-type::first-letter { all: unset; }
/* currículo: colunas legadas viram linha do tempo */
.sl-autor-content h2 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 48px 0 8px;
}
.sl-autor-content h3 {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold);
  margin: 36px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.sl-autor-content .wp-block-columns {
  display: grid !important;
  grid-template-columns: 128px 1fr;
  gap: 8px 20px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.sl-autor-content .wp-block-column { flex-basis: auto !important; min-width: 0; }
.sl-autor-content .wp-block-column:first-child > p,
.sl-autor-content .wp-block-column .is-style-info {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted-deep);
  background: none;
  border: 0;
  padding: 4px 0 0;
  margin: 0;
}
.sl-autor-content .is-style-info strong { font-weight: 500; color: var(--muted-deep); }
.sl-autor-content h4 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 2px;
}
.sl-autor-content h4 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.sl-autor-content .wp-block-column > p:not(.is-style-info) {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
}
.sl-autor-content .wp-block-column > p > em { font-style: normal; }
.sl-autor-content ul.is-style-checkbox {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.sl-autor-content ul.is-style-checkbox li { padding-left: 14px; position: relative; margin: 0 0 4px; }
.sl-autor-content ul.is-style-checkbox li::before { content: "–"; position: absolute; left: 0; color: var(--muted-deep); }
@media (max-width: 640px) {
  .sl-autor-head { grid-template-columns: 96px 1fr; gap: 18px; }
  .sl-autor-avatar img, .sl-autor-avatar-img { width: 96px; height: 96px; }
  .sl-autor-name { font-size: 1.5rem; }
  .sl-autor-content .wp-block-columns { grid-template-columns: 1fr; gap: 2px; }
}