/* ============================================================
   OVERBUILD — blog-v3.css
   Look EDITORIAL BRANCO do blog (porte do /blog/v3). Carregado
   DEPOIS de blog.css: reescreve o body pra branco e estiliza
   o conteúdo V3. blog.css continua dono do rodapé oficial.
   Marca: ink #0D0B09 · orange #F06818 · cream #F5EDD8 · paper #FAF9F7.
   ============================================================ */

.blogv3 {
  --ink: #0D0B09;
  --orange: #F06818;
  --cream: #F5EDD8;
  --paper: #FAF9F7;
  --line: rgba(13,11,9,0.10);
  /* era 0.45 — dava #929190 sobre o branco da barra, 3,14:1. O texto que usa
     este token é de 10px (rótulo "Índice", categorias, metadados), então a
     régua da WCAG AA é 4,5:1 e o Lighthouse reprovava a acessibilidade do
     /blog/ por causa dele. 0.60 → 5,17:1 no branco e 5,12:1 no papel. */
  --dim: rgba(13,11,9,0.60);
  --body: rgba(13,11,9,0.62);
  --font-v3-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v3-ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: #fff;
  color: var(--ink);
  color-scheme: light;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.blogv3 ::selection { background: rgba(240,104,24,0.26); color: var(--ink); }

/* a atmosfera escura do blog.css não vale no branco: mata os ambients */
.blogv3 .ambient { display: none !important; }

/* grão sutil por cima de tudo (calor editorial) */
.blogv3::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.v3-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 0 0 8px 0;
  font-size: 13px;
}
.v3-skip:focus { left: 0; }

/* ---------- tipografia base ---------- */
.v3-display {
  font-family: var(--font-v3-display);
  font-weight: 800; letter-spacing: -0.038em; line-height: 0.94;
}
.v3-mono {
  font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500; text-transform: uppercase;
}
.v3-dim { color: var(--dim); }
.v3-accent { color: var(--orange); }
.v3-num { font-family: var(--font-v3-display); font-weight: 800; }

.v3-shell {
  max-width: 92rem; margin: 0 auto;
  padding-left: clamp(1.25rem, 4vw, 4.5rem);
  padding-right: clamp(1.25rem, 4vw, 4.5rem);
}

/* pulse da marca */
.v3-pulse { position: relative; display: inline-flex; height: 9px; width: 9px; }
.v3-pulse i { position: absolute; inset: 0; border-radius: 999px; background: var(--orange); }
.v3-pulse i:last-child { animation: v3-ping 2.2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes v3-ping { 0% { transform: scale(1); opacity: .55; } 75%,100% { transform: scale(2.6); opacity: 0; } }

/* tags */
.v3-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.18em; padding: 5px 9px;
}
.v3-tag--hot { background: var(--orange); color: var(--ink); }
.v3-tag--live {
  color: var(--orange); border: 1px solid rgba(240,104,24,0.4);
}
.v3-tag--live::before {
  content: ""; height: 6px; width: 6px; border-radius: 999px; background: var(--orange);
  box-shadow: 0 0 0 0 rgba(240,104,24,0.5); animation: v3-livedot 2s ease-out infinite;
}
@keyframes v3-livedot { 0% { box-shadow: 0 0 0 0 rgba(240,104,24,0.45); } 70%,100% { box-shadow: 0 0 0 7px rgba(240,104,24,0); } }

/* ═══════════════════════ 1 · HERO ═══════════════════════ */
.v3hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-top: clamp(7.5rem, 13vh, 10rem);
  padding-bottom: clamp(3.5rem, 7vh, 6rem);
}
.v3hero-grid {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(58%, 720px);
  opacity: 0.9; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.v3hero-grid svg { width: 100%; height: 100%; }
.v3hero-in {
  position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1000px) { .v3hero-in { grid-template-columns: 1.35fr 0.85fr; } }

.v3-kicker {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 1.8rem;
  font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.28em; color: rgba(13,11,9,0.55);
}
.v3hero-h { font-size: clamp(2.75rem, 7.4vw, 6.6rem); }
.v3-line { display: block; overflow: hidden; }
.v3-line-in {
  display: block; transform: translateY(112%); opacity: 0; padding-bottom: 0.06em;
  transition: transform 900ms var(--v3-ease), opacity 700ms var(--v3-ease);
}
.v3-line:nth-child(2) .v3-line-in { transition-delay: 110ms; }
.blogv3 .v3hero.is-lit .v3-line-in { transform: translateY(0); opacity: 1; }

/* floreio: régua editorial sob a linha-acento (absoluta, não quebra o texto) */
.v3-line-in.v3-accent { position: relative; }
.v3-flourish {
  position: absolute; left: 0; bottom: 0.06em; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--orange), rgba(240,104,24,0.15));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 900ms var(--v3-ease) 500ms;
}
.blogv3 .v3hero.is-lit .v3-accent .v3-flourish { transform: scaleX(1); }

.v3hero-lede {
  margin-top: 2rem; max-width: 52ch; font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.75; color: var(--body);
}
.v3hero-meta {
  margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; list-style: none;
  padding: 0; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.v3hero-meta li {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.86rem; color: rgba(13,11,9,0.6);
}
.v3hero-meta .v3-num { font-size: 1.15rem; color: var(--ink); }
.v3hero-meta em { font-style: normal; color: var(--orange); font-weight: 600; }

/* painel "última edição" */
.v3hero-latest {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  background: var(--ink); color: var(--cream); text-decoration: none;
  border: 1px solid rgba(13,11,9,0.9); isolation: isolate; overflow: hidden;
  transition: transform 520ms var(--v3-ease), box-shadow 420ms ease;
}
.v3hero-latest::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 520ms var(--v3-ease);
}
.v3hero-latest:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(13,11,9,0.7); }
.v3hero-latest:hover::after { transform: scaleX(1); }
.v3hero-latest-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.v3hero-latest .v3-dim { color: rgba(245,237,216,0.45); }
.v3hero-latest-cat { font-size: 10px; letter-spacing: 0.2em; color: var(--orange); }
.v3hero-latest-title { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.08; letter-spacing: -0.03em; }
.v3hero-latest-foot {
  margin-top: 0.6rem; padding-top: 1.1rem; border-top: 1px solid rgba(245,237,216,0.14);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.v3hero-latest .v3-go { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.18em; color: var(--cream); }
.v3hero-latest:hover .v3-go svg { transform: translate(3px, -3px); }
.v3-go svg, .v3-cta svg { transition: transform 420ms var(--v3-ease); }

/* ---------- byline / avatar (reutilizado em cards e hero) ---------- */
.v3-byline { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; }
.v3-avatar {
  height: 34px; width: 34px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink);
  border: 1px solid rgba(13,11,9,0.2);
  background: radial-gradient(120% 120% at 30% 20%, rgba(240,104,24,0.16), rgba(240,104,24,0) 72%);
}
.v3-byline-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.v3-byline-txt b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.v3-byline-txt .v3-mono { font-size: 10px; letter-spacing: 0.14em; margin-top: 1px; }
.v3-card--ink .v3-avatar, .v3hero-latest .v3-avatar {
  color: var(--cream); border-color: rgba(245,237,216,0.28);
  background: radial-gradient(120% 120% at 30% 20%, rgba(240,104,24,0.3), rgba(240,104,24,0) 72%);
}
.v3-card--ink .v3-byline-txt b, .v3hero-latest .v3-byline-txt b { color: rgba(245,237,216,0.9); }
.v3-card--ink .v3-byline-txt .v3-mono, .v3hero-latest .v3-byline-txt .v3-mono { color: rgba(245,237,216,0.45); }

/* ═══════════════════════ CARDS ═══════════════════════ */
/* o HERO voltou a ser a primeira seção e leva o respiro de topo — aqui
   volta o espaçamento normal entre seções. */
.v3-featured-sec { padding-top: clamp(3rem, 5vh, 4rem); padding-bottom: clamp(2.5rem, 4vh, 3.5rem); }

.v3-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  isolation: isolate; overflow: hidden;
  transition: border-color 320ms ease, transform 520ms var(--v3-ease), box-shadow 420ms ease;
}
.v3-card--ink { background: var(--ink); color: var(--cream); border-color: rgba(13,11,9,0.9); }
/* SPOTLIGHT REMOVIDO (ordem do cliente, 12/ago/2026) — o borrão laranja
   que seguia o cursor sobre o artigo saiu por completo. Sobraram só a
   borda e a barra âmbar do topo, que são estado, não efeito de mouse.
   O ::before continua existindo (outras regras contam com o z-index da
   pilha), mas 100% inerte: sem gradiente, sem transição, sem hover. */
.v3-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: none;
}
/* barra âmbar no topo */
.v3-card::after {
  content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: calc(100% + 2px);
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; z-index: 3;
  transition: transform 520ms var(--v3-ease);
}
.v3-card > * { position: relative; z-index: 1; }
.v3-card:hover {
  border-color: rgba(240,104,24,0.55); transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(13,11,9,0.5);
}
/* (removido junto com o spotlight) */
.v3-card:hover::after { transform: scaleX(1); }
.v3-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.v3-card-in { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 1.5rem; }
.v3-cat { display: block; margin-bottom: 1rem; font-size: 10px; letter-spacing: 0.2em; color: var(--orange); }
.v3-card-title { letter-spacing: -0.03em; line-height: 1.06; font-size: 1.35rem; }
.v3-s7 .v3-card-title { font-size: 1.6rem; }
.v3-card-excerpt { margin-top: 1rem; font-size: 0.94rem; line-height: 1.72; color: var(--body); }
.v3-card--ink .v3-card-excerpt { color: rgba(245,237,216,0.58); }

/* ---- SUBLINHADO NO HOVER — SÓ NO TÍTULO ----
   O sublinhado acende no título ao passar o mouse em QUALQUER lugar do card.
   Aplica-se ao texto do título (o <span>), não ao card inteiro. */
.v3-card-title span {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: transparent;
  transition: text-decoration-color 340ms var(--v3-ease), -webkit-text-decoration-color 340ms var(--v3-ease);
}
.v3-card:hover .v3-card-title span,
.v3-card:focus-visible .v3-card-title span {
  text-decoration-color: var(--orange);
  -webkit-text-decoration-color: var(--orange);
}

.v3-card-foot {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.v3-card--ink .v3-card-foot { border-top-color: rgba(245,237,216,0.14); }
.v3-cta { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--ink); font-size: 11px; letter-spacing: 0.18em; }
.v3-card--ink .v3-cta { color: var(--cream); }
.v3-card:hover .v3-cta svg { transform: translate(3px, -3px); }

/* covers (renderizadas por blog.js) */
.v3-cover { position: relative; overflow: hidden; width: 100%; height: 10rem; }
.v3-cover[data-tone="ink"] { background: #0D0B09; }
.v3-cover[data-tone="paper"] { background: #FAF9F7; }
.v3-cover[data-tone="cream"] { background: #F5EDD8; }
.v3-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 900ms var(--v3-ease); }
.v3-card:hover .v3-cover svg { transform: scale(1.045); }
.v3-cover-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.16) 50%, transparent 58%);
  transform: translateX(-110%); transition: transform 900ms cubic-bezier(0.33,1,0.68,1);
}
.v3-card:hover .v3-cover-sheen { transform: translateX(110%); }
.v3-s7 .v3-cover { height: 11rem; }

/* featured */
.v3-featured { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .v3-featured { grid-template-columns: 7fr 5fr; align-items: stretch; } }
.v3-featured-body { order: 2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.75rem, 3vw, 3rem); }
.v3-featured-cover { order: 1; height: 14rem; }
@media (min-width: 1000px) {
  .v3-featured-body { order: 1; }
  .v3-featured-cover { order: 2; height: auto; min-height: 26rem; }
}
.v3-featured-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.v3-featured .v3-card-title { font-size: clamp(1.85rem, 3.4vw, 3.25rem); line-height: 1.02; }
.v3-featured .v3-card-excerpt { max-width: 62ch; font-size: 1.02rem; }
.v3-featured .v3-card-foot { margin-top: 3rem; }
.v3-featured .v3-cta { font-size: 11px; }

/* ═══════════════════════ ÍNDICE / FILTROS ═══════════════════════ */
/* BUG CORRIGIDO (ordem do cliente, 12/ago/2026): era `position: sticky;
   top: 72px`, então a régua de tópicos descolava e viajava grudada
   embaixo da nav flutuante o resto da rolagem. Agora ela fica FIXA no
   lugar dela no fluxo — some quando você passa por ela, como qualquer
   outra faixa da página. O backdrop-filter saiu junto: sem sobreposição
   não há o que desfocar, e ele custava composição à toa. */
.v3-bar {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff;
}
.v3-bar-progress {
  position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
.v3-bar-in { display: flex; align-items: center; gap: 1.5rem; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.v3-bar-label { flex: none; font-size: 10px; letter-spacing: 0.22em; }
@media (max-width: 767px) { .v3-bar-label { display: none; } }
.v3-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.v3-chips::-webkit-scrollbar { display: none; }
.v3-chip {
  position: relative; flex: none; border: 0; cursor: pointer; background: transparent;
  border-radius: 999px; padding: 6px 14px; white-space: nowrap;
  font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.1em; color: rgba(13,11,9,0.62);
  transition: color 220ms ease, background-color 300ms var(--v3-ease);
  -webkit-tap-highlight-color: transparent;
}
.v3-chip:hover { color: var(--ink); }
.v3-chip.is-on { color: var(--cream); background: var(--ink); }
.v3-chip-n { margin-left: 6px; font-variant-numeric: tabular-nums; color: rgba(13,11,9,0.32); }
.v3-chip.is-on .v3-chip-n { color: var(--orange); }

/* ── BUSCA DENTRO DA NAV DO BLOG ──
   A faixa de índice deixou de existir; a busca mudou de casa e agora
   mora na própria ilha do pill. Em repouso é só a lupa; o campo cresce
   por `max-width` (não display), então a ilha não salta de largura. */
.pnav-search {
  display: flex; align-items: center; gap: 4px; flex: none;
  border-radius: 999px; padding: 3px;
  border: 1px solid transparent;
  transition: border-color 300ms var(--v3-ease), background-color 300ms var(--v3-ease), padding 300ms var(--v3-ease);
}
.pnav-search[data-open="true"] {
  border-color: rgba(245,237,216,0.18); background: rgba(245,237,216,0.06); padding: 3px 3px 3px 12px;
}
.pnav-search-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; cursor: pointer; border-radius: 999px;
  background: transparent; border: 1px solid rgba(245,237,216,0.16); color: var(--cream);
  transition: background-color 240ms var(--v3-ease), border-color 240ms var(--v3-ease), color 240ms var(--v3-ease);
  -webkit-tap-highlight-color: transparent;
}
.pnav-search-btn:hover { background: rgba(240,104,24,0.14); border-color: rgba(240,104,24,0.5); color: var(--orange); }
.pnav-search[data-open="true"] .pnav-search-btn { border-color: transparent; }
.pnav-search-input {
  order: -1; min-width: 0; max-width: 0; opacity: 0; padding: 0; border: 0; outline: none;
  background: transparent; font-family: inherit; font-size: 13px; color: var(--cream);
  -webkit-appearance: none; appearance: none;
  transition: max-width 380ms var(--v3-ease), opacity 240ms var(--v3-ease);
}
.pnav-search[data-open="true"] .pnav-search-input { max-width: 11rem; opacity: 1; }
@media (min-width: 1000px) { .pnav-search[data-open="true"] .pnav-search-input { max-width: 17rem; } }
@media (max-width: 460px) { .pnav-search[data-open="true"] .pnav-search-input { max-width: 8.5rem; } }
.pnav-search-input::placeholder { color: rgba(245,237,216,0.42); }
.pnav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.pnav-search-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #17140f inset; box-shadow: 0 0 0 100px #17140f inset;
  -webkit-text-fill-color: var(--cream); transition: background-color 100000s ease-in-out 0s;
}
.pnav-search-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 0; padding: 0; cursor: pointer; border-radius: 999px;
  background: rgba(245,237,216,0.14); color: rgba(245,237,216,0.75);
  transition: background-color 200ms ease, color 200ms ease;
}
.pnav-search-clear:hover { background: var(--cream); color: var(--ink); }
.pnav-search-clear[hidden] { display: none; }

/* no blog o ⋯ é o gatilho dos TÓPICOS, não um menu de mobile: existe
   em toda largura. pillnav.css o esconde em ≥769px (lá ele só servia
   ao celular), então a regra é reaberta aqui — e só aqui, porque
   blog-v3.css não é carregado na home. */
@media (min-width: 769px) {
  .blogv3 .pnav-burger { display: inline-flex !important; }
}

/* ── BUG 1 · ITENS ESCUROS NO HOVER ──
   O item sem artigo ficava com `opacity: .42` e sem a barra branca —
   mas a regra global `.nav-ml:hover .nav-ml-t { color: #131313 }`
   continuava valendo. Resultado: passar o mouse pintava o texto de
   quase-preto SOBRE o painel quase-preto, e o item sumia. Aqui o
   estado vazio simplesmente não tem hover: nem cor, nem barra, nem
   inversão do "//". */
.nav-mi.is-empty .nav-ml:hover .nav-ml-t,
.nav-mi.is-empty .nav-ml:focus-visible .nav-ml-t,
.nav-mi.is-empty .nav-ml:active .nav-ml-t { color: var(--cream); }
.nav-mi.is-empty .nav-ml:hover .nav-ml-sl i,
.nav-mi.is-empty .nav-ml:focus-visible .nav-ml-sl i,
.nav-mi.is-empty .nav-ml:active .nav-ml-sl i {
  color: var(--accent); opacity: 0.55; transform: translateX(-0.16em);
}

/* ── BUG 2 · FIO ÂMBAR NA BORDA ARREDONDADA ──
   Diagnóstico (medido, depois de duas hipóteses erradas — não era o
   halo da pill nem uma borda): as TRÊS camadas da varredura são
   irmãs com `inset: 0` e são recortadas pelo MESMO canto arredondado
   do painel. No pixel antisserrilhado da curva cada uma entra com a
   mesma cobertura α, então o resultado é
   `α·camada3 + α(1-α)·camada2 + α(1-α)²·camada1`: sobra ~12% das
   duas camadas QUENTES e isso lê como um fio âmbar de 1px.
   Fundo no painel não resolve (ele é pintado ABAIXO das camadas).
   A correção é temporal: assim que a varredura termina (~0,82s) as
   duas camadas quentes já cumpriram o papel e a 3ª cobre tudo —
   então elas desaparecem. Na saída voltam na hora, pra o gesto de
   fechar continuar idêntico. */
.nav-panel { background: #131313; }
.nav-overlay[data-nav="open"] .nav-layer-1,
.nav-overlay[data-nav="open"] .nav-layer-2 {
  opacity: 0;
  transition: transform var(--dur-kin-panel) var(--ease-kin), opacity 260ms linear 820ms;
}
.nav-overlay[data-nav="closing"] .nav-layer-1,
.nav-overlay[data-nav="closing"] .nav-layer-2 { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-overlay[data-nav="open"] .nav-layer-1,
  .nav-overlay[data-nav="open"] .nav-layer-2 { opacity: 0; transition: none; }
}

/* ── CONTADOR DE ARTIGOS POR TÓPICO (no overlay) ──
   O tópico sem artigo não vira link morto: aparece com 00, apagado e
   sem clique. É a mesma honestidade dos cards "em produção" que saíram
   — quem chega vê o mapa editorial sem esbarrar em página vazia. */
.nav-mi { position: relative; }
.nav-mi-n {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 11px; letter-spacing: 0.14em; color: var(--accent);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.nav-mi.is-empty .nav-ml { cursor: default; opacity: 0.42; }
.nav-mi.is-empty .nav-ml-bg { display: none; }
.nav-mi.is-empty .nav-mi-n { color: rgba(245,237,216,0.35); }
/* tópico ativo: o fio âmbar fica aceso */
.nav-mi.is-active .nav-mi-n { color: var(--orange); }
.nav-mi.is-active .nav-ml-t { color: var(--accent); }

/* ── PAGINAÇÃO ── */
.v3-pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.5rem; margin-top: clamp(2.5rem, 5vh, 4rem);
  padding-top: clamp(1.6rem, 3vh, 2.4rem); border-top: 1px solid var(--line);
}
.v3-pager[hidden] { display: none; }
.v3-pg, .v3-pg-num {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  border: 1px solid rgba(13,11,9,0.16); background: transparent; cursor: pointer;
  border-radius: 0; color: var(--ink);
  font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 220ms var(--v3-ease), color 220ms var(--v3-ease),
              border-color 220ms var(--v3-ease);
  -webkit-tap-highlight-color: transparent;
}
.v3-pg { padding: 9px 13px; }
.v3-pg-nums { display: flex; align-items: center; gap: 0.4rem; margin: 0 0.35rem; }
.v3-pg-num { width: 36px; height: 36px; padding: 0; font-variant-numeric: tabular-nums; }
.v3-pg:hover:not(:disabled), .v3-pg-num:hover:not(.is-on) { border-color: var(--ink); }
.v3-pg-num.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); cursor: default; }
.v3-pg:disabled { opacity: 0.3; cursor: not-allowed; }
/* reticências entre blocos de páginas — texto, não botão */
.v3-pg-gap {
  display: inline-flex; align-items: flex-end; justify-content: center;
  width: 20px; height: 36px; color: rgba(13,11,9,0.35);
  font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px;
}
.v3-pg-status { flex-basis: 100%; text-align: center; margin-top: 0.9rem; font-size: 10px; letter-spacing: 0.2em; }
@media (max-width: 519px) {
  .v3-pg span { display: none; }        /* nos 390px sobram as setas */
  .v3-pg { padding: 9px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-filters, .v3-filters-in, .v3-filter-caret, .v3-search { transition: none !important; }
}

/* ═══════════════════════ GRID ═══════════════════════ */
.v3-grid-sec { padding-top: clamp(3rem, 5vh, 4rem); padding-bottom: clamp(4rem, 8vh, 7rem); }
.v3-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .v3-grid { gap: 1.5rem; } }
/* mobile: tudo full; tablet: metade; desktop: spans */
.v3-card.v3-s4, .v3-card.v3-s5, .v3-card.v3-s7, .v3-card.v3-s12 { grid-column: span 12; }
@media (min-width: 768px) and (max-width: 1023px) {
  .v3-card.v3-s4, .v3-card.v3-s5, .v3-card.v3-s7 { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .v3-card.v3-s4 { grid-column: span 4; }
  .v3-card.v3-s5 { grid-column: span 5; }
  .v3-card.v3-s7 { grid-column: span 7; }
  .v3-card.v3-s12 { grid-column: span 12; }
}
/* card wide: cover à esquerda, texto à direita no desktop */
@media (min-width: 1024px) {
  .v3-wide { flex-direction: row; align-items: stretch; }
  .v3-wide .v3-cover { width: 38%; height: auto; flex: none; }
  .v3-wide .v3-card-in { flex: 1; padding: clamp(1.75rem, 2.5vw, 2.5rem); }
  .v3-wide .v3-card-title { font-size: clamp(1.5rem, 2.6vw, 2.35rem); }
  .v3-wide .v3-card-excerpt { max-width: 58ch; }
}
.v3-empty { grid-column: span 12; padding: 4rem 0; text-align: center; font-size: 11px; letter-spacing: 0.2em; color: var(--dim); }

/* ═══════════════════════ NEWSLETTER (redesenhada) ═══════════════════════ */
.v3-news {
  grid-column: span 12; position: relative; overflow: hidden;
  background: var(--cream); border: 1px solid rgba(13,11,9,0.08);
}
.v3-news::before {
  content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; pointer-events: none;
  background: radial-gradient(circle at center, rgba(240,104,24,0.16), transparent 62%);
}
.v3-news-grid {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 2.2rem;
  align-items: center; padding: clamp(2.25rem, 4.5vw, 3.75rem);
}
@media (min-width: 900px) { .v3-news-grid { grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; } }
.v3-news-kicker { display: block; font-size: 10px; letter-spacing: 0.24em; color: rgba(13,11,9,0.5); }
.v3-news-h { margin-top: 1.1rem; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.05; letter-spacing: -0.035em; }
.v3-news-sub { margin-top: 1.1rem; max-width: 46ch; font-size: 0.98rem; line-height: 1.65; color: rgba(13,11,9,0.6); }
.v3-news-label { display: block; font-size: 10px; letter-spacing: 0.2em; color: rgba(13,11,9,0.5); }
.v3-news-field {
  margin-top: 0.9rem; display: flex; align-items: center; gap: 0.75rem;
  border-bottom: 1.5px solid rgba(13,11,9,0.28); padding-bottom: 0.75rem;
  transition: border-color 300ms var(--v3-ease);
}
.v3-news-field:focus-within { border-color: var(--orange); }
.v3-news-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 1rem; color: var(--ink);
}
.v3-news-field input::placeholder { color: rgba(13,11,9,0.32); }
/* BUG DO PRINT (21.31): com o e-mail preenchido, o Chrome pintava o campo
   com o retângulo azul-claro do autofill (#E8F0FE) por cima do
   `background: transparent`. O campo editorial — só fio embaixo, sobre o
   creme — virava uma caixa de formulário genérica no meio da seção.
   `background-color` NÃO resolve: a UA aplica o dela com prioridade acima
   de qualquer autor. O que funciona é um inset box-shadow gigante (o
   autofill não sobrescreve box-shadow) + text-fill-color pro texto, e o
   `transition` absurdo mata o fade amarelo que o Chrome anima na hora do
   preenchimento. Mesmo tratamento nos campos do quiz da home. */
.v3-news-field input:-webkit-autofill,
.v3-news-field input:-webkit-autofill:hover,
.v3-news-field input:-webkit-autofill:focus,
.v3-news-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 100px var(--cream) inset;
          box-shadow: 0 0 0 100px var(--cream) inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  font-family: inherit; font-size: 1rem;
  transition: background-color 100000s ease-in-out 0s;
}
.v3-news-fine { margin-top: 0.85rem; font-size: 10px; letter-spacing: 0.14em; color: rgba(13,11,9,0.4); }
.v3-news-fine.is-ok { color: #2b7a3f; }

/* ═══════════════════════ JEWEL BUTTON (mesmo DNA do CTA da nav) ═══════════════════════ */
.ob-jewel {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none;
  border: 0; cursor: pointer; border-radius: 999px; padding: 10px 15px 10px 17px;
  font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.14em; color: #2a1206; text-decoration: none;
  background: linear-gradient(180deg, #FF8B3E 0%, #F26D1B 52%, #DE5B0C 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,246,235,0.55),
    inset 0 -1px 0 0 rgba(120,44,0,0.28),
    0 8px 20px -8px rgba(240,104,24,0.72);
  isolation: isolate; overflow: hidden;
  transition: transform 400ms var(--v3-ease), box-shadow 450ms var(--v3-ease), filter 400ms ease;
}
.ob-jewel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 52%; z-index: 0; pointer-events: none;
  border-radius: 999px 999px 40% 40%/999px 999px 22px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0)); opacity: .8;
}
.ob-jewel::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 999px; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,180,120,0.55), transparent 60%);
  opacity: 0; transition: opacity 450ms var(--v3-ease);
}
.ob-jewel:hover {
  transform: translateY(-1px); filter: saturate(1.06) brightness(1.03);
  box-shadow:
    inset 0 1px 0 0 rgba(255,246,235,0.6),
    inset 0 -1px 0 0 rgba(120,44,0,0.3),
    0 12px 30px -8px rgba(240,104,24,0.9),
    0 0 0 1px rgba(255,196,140,0.35);
}
.ob-jewel:hover::after { opacity: 1; }
.ob-jewel:active { transform: translateY(0); filter: brightness(0.99); }
.ob-jewel-label, .ob-jewel-arrow { position: relative; z-index: 1; }
.ob-jewel-arrow { display: inline-flex; transition: transform 500ms var(--v3-ease); }
.ob-jewel:hover .ob-jewel-arrow { transform: translate(2px, -2px); }

/* ═══════════════════════ RODAPÉ — faixa escura sob o corpo branco ═══════════════════════ */
.v3-footer-band { background: var(--surface-base); }
.v3-footer-band .site-footer { border-top: 0; }

/* ═══════════════════════ REVEAL ═══════════════════════ */
.blogv3 [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 620ms var(--v3-ease), transform 760ms var(--v3-ease);
  transition-delay: var(--d, 0ms);
}
.blogv3 [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .blogv3 [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .v3-line-in { transform: none !important; opacity: 1 !important; transition: none !important; }
  .v3-accent .v3-flourish { transform: scaleX(1) !important; transition: none !important; }
  .v3-pulse i:last-child, .v3-tag--live::before { animation: none !important; }
  .v3-card, .v3-card::after, .v3-cover svg, .v3-cover-sheen, .v3-cta svg, .v3-go svg { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SEO/A11Y — rodada de 12/ago/2026
   Bloco no fim de propósito: nasceu numa missão paralela à do índice, e
   colar no fim evita colisão com quem estivesse editando o meio do arquivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- .v3-dim sobre fundo escuro ---------------------------------------
   `.v3-dim` é ink translúcido. No card em destaque (fundo --ink) isso
   pintava ink sobre ink: o rótulo "IA & AGENTES" existia no HTML e era
   ilegível na tela. Cream a 0.62 → 6,76:1 sobre o ink. */
.v3-card--ink .v3-dim,
.v3-featured .v3-dim { color: rgba(245,237,216,0.62); }
/* ...e o inverso, agora que o destaque virou SLIDE CLARO: cream a 0.62
   sobre papel é praticamente invisível. Volta pro ink translúcido do
   sistema (4,9:1 sobre --paper). */
.bh-slide .v3-dim { color: rgba(13,11,9,0.5); }

/* --- cards "em produção" ----------------------------------------------
   São <article>, não <a>: o artigo ainda não existe, então não há pra onde
   apontar (antes eram links `href="#"` — âncora morta pro visitante e pro
   crawler). Sem link, o card também não pode se comportar como link: sai o
   levantar no hover, sai o cursor de mão, e a capa recua um pouco pra a
   hierarquia visual dizer "isto ainda não está pronto". */
.v3-card--wip { cursor: default; }
.v3-card--wip:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}
.v3-card--wip:hover::after { transform: scaleX(0); }
.v3-card--wip .v3-cover { opacity: 0.55; filter: saturate(0.7); }
.v3-card--wip:hover .v3-cover svg { transform: none; }
.v3-card--wip:hover .v3-cover-sheen { transform: translateX(-110%); }
.v3-card--wip .v3-card-title span { background-image: none; }

/* o selo "Em produção" herda .v3-tag--live, que pinta o laranja da casa.
   #F06818 sobre papel dá 2,98:1 — reprovado pra texto de 10px. Este laranja
   fechado é o mesmo tom da família, com 5,22:1 no papel e 4,71:1 no cream.
   O pontinho pulsante continua #F06818: é decoração, não texto. */
.v3-card--wip .v3-tag--live { color: #B8420A; border-color: rgba(184,66,10,0.38); }
.v3-card--ink.v3-card--wip .v3-tag--live { color: var(--orange); border-color: rgba(240,104,24,0.4); }
.v3-card--wip .v3-card-foot { gap: 0.75rem; flex-wrap: wrap; }

/* --- trilha de navegação (breadcrumb visível) --------------------------
   O /blog/ já declarava um BreadcrumbList no JSON-LD sem ter trilha
   nenhuma na tela. Schema tem que descrever o que a página mostra — então
   a trilha passou a existir, com os mesmos dois degraus do @graph. */
.v3-crumbs {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  /* padding-block, NUNCA o shorthand: a trilha também é .v3-shell, e
     `padding: … 0 …` zerava o recuo lateral do shell — a trilha ia parar
     colada na borda da janela enquanto o resto da página respeitava a
     coluna. */
  padding-block: 1.4rem 0;
}
.v3-crumbs a { color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 260ms var(--v3-ease), border-color 260ms var(--v3-ease); }
.v3-crumbs a:hover { color: #B8420A; border-bottom-color: rgba(184,66,10,0.45); }
.v3-crumbs i { color: var(--dim); font-style: normal; opacity: 0.6; }
.v3-crumbs [aria-current="page"] { color: var(--ink); }

/* --- aviso do índice ---------------------------------------------------
   Uma linha, não um banner: o leitor precisa saber que a régua abaixo
   mistura o que está no ar com o que ainda está sendo escrito. */
.v3-index-note {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--dim); padding: 0 0 1.25rem;
}
.v3-index-note b { color: var(--ink); font-weight: 500; }

/* ════════════════════════════════════════════════════════════
   HERO DO BLOG (nova abertura) + BARRA DE ÍNDICE FIXA
   ════════════════════════════════════════════════════════════ */

/* ── 1 · HERO ─────────────────────────────────────────────────
   Bloco escuro full-bleed abrindo um corpo branco: é a "porta" do
   caderno. A arte vive à DIREITA e sua borda esquerda não existe —
   um mask-image dissolve a imagem no próprio fundo da seção, então
   nunca há linha dura, em nenhuma largura. */
/* o <main> do blog carregava padding-top de 108px pra dar folga pro pill
   flutuante. Com um hero ESCURO na abertura isso virava uma tarja branca
   entre a nav e a seção. A folga passa a morar no padding do próprio
   hero, que é escuro — a arte sangra até o topo e o pill flutua por cima,
   que é o efeito pretendido pela nav-ilha. (Regra só do índice do blog:
   blog-v3.css não é carregado no artigo.) */
.blogv3 main#conteudo { padding-top: 0; }

.bh {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0A0908; color: var(--cream);
  border-bottom: 1px solid rgba(240,104,24,0.28);
  padding-top: clamp(8.5rem, 16vh, 12rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
  display: flex; align-items: center;
  min-height: min(88vh, 820px);
}
/* A arte ENCOLHEU (era 78%) e recuou de protagonista pra atmosfera.
   Motivo honesto: cada slide agora carrega a PRÓPRIA capa, e duas
   imagens grandes lado a lado brigavam pelo olho. Mantida por ordem do
   cliente — mas como campo atrás do slider, não como segundo assunto. */
.bh-art { position: absolute; inset: 0 0 0 auto; width: 54%; opacity: 0.9; z-index: 0; pointer-events: none; }
.bh-art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
/* a dissolução da borda esquerda */
.bh-art {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.14) 18%, rgba(0,0,0,0.62) 46%, #000 72%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.14) 18%, rgba(0,0,0,0.62) 46%, #000 72%);
}
/* véu sobre a coluna de texto: garante contraste do H1 sem apagar a arte */
.bh-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #0A0908 0%, rgba(10,9,8,0.96) 42%, rgba(10,9,8,0.7) 64%, rgba(10,9,8,0.25) 86%, transparent 100%),
    linear-gradient(0deg, rgba(10,9,8,0.55), transparent 38%);
}
.bh-in { position: relative; z-index: 2; width: 100%; }
.bh-kicker { color: rgba(245,237,216,0.62); margin-bottom: 1.6rem; }
.bh-h {
  font-size: clamp(3rem, 8.2vw, 7rem);
  max-width: 14ch;
}
.bh-h em { font-style: normal; color: var(--orange); }
.bh-line { display: block; overflow: hidden; }
.bh-line-in {
  display: block; padding-bottom: 0.06em;
  transform: translateY(110%); opacity: 0;
  transition: transform 900ms var(--v3-ease), opacity 700ms var(--v3-ease);
}
.bh-line:nth-child(2) .bh-line-in { transition-delay: 110ms; }
.bh.is-lit .bh-line-in { transform: translateY(0); opacity: 1; }
.bh-sub {
  margin-top: 1.8rem; max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.14rem); line-height: 1.72;
  color: rgba(245,237,216,0.66);
}

/* ── os TRÊS CAMINHOS ──
   Não são chips decorativos: cada um dispara o filtro real da
   listagem (grupos de categoria que TÊM artigo). */
.bh-paths { margin-top: clamp(2.2rem, 4vh, 3.2rem); }
.bh-paths-label {
  font-size: 10px; letter-spacing: 0.24em; color: rgba(245,237,216,0.42);
  margin-bottom: 0.9rem;
}
.bh-paths-row { display: grid; gap: 0.6rem; max-width: 40rem; }
@media (min-width: 900px) { .bh-paths-row { grid-template-columns: repeat(3, 1fr); max-width: 52rem; } }
.bh-path {
  position: relative; display: grid; gap: 0.28rem; text-align: left;
  padding: 0.95rem 1.05rem; cursor: pointer; border-radius: 0;
  background: rgba(245,237,216,0.035);
  border: 1px solid rgba(245,237,216,0.13);
  color: var(--cream); font-family: inherit;
  transition: background-color 300ms var(--v3-ease), border-color 300ms var(--v3-ease),
              transform 320ms var(--v3-ease);
  -webkit-tap-highlight-color: transparent;
}
/* fio âmbar que corre no topo — mesmo gesto dos cards da listagem */
.bh-path::after {
  content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: calc(100% + 2px);
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 420ms var(--v3-ease);
}
.bh-path:hover, .bh-path:focus-visible {
  background: rgba(245,237,216,0.07); border-color: rgba(245,237,216,0.26);
  transform: translateY(-2px);
}
.bh-path:hover::after, .bh-path:focus-visible::after { transform: scaleX(1); }
.bh-path:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* padding-right reserva a coluna do contador (absoluto no canto): sem
   ele a segunda linha da descrição passava POR BAIXO do número. */
.bh-path-t { font-weight: 600; font-size: 0.98rem; letter-spacing: -0.015em; padding-right: 2.4rem; }
.bh-path-d { font-size: 0.8rem; line-height: 1.45; color: rgba(245,237,216,0.5); padding-right: 2.4rem; }
.bh-path-n {
  position: absolute; top: 0.85rem; right: 1rem;
  font-size: 10px; letter-spacing: 0.12em; color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.bh-all {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 0; padding: 0.4rem 0; cursor: pointer;
  font-size: 10.5px; letter-spacing: 0.2em; color: rgba(245,237,216,0.55);
  transition: color 240ms var(--v3-ease);
}
.bh-all:hover, .bh-all:focus-visible { color: var(--orange); }

/* ── HERO no mobile ──
   A arte deixa de ser "coluna da direita" e vira atmosfera: cobre a
   seção inteira, dissolvendo pra BAIXO em vez de pra esquerda, e o
   texto assenta por cima com o véu reforçado. Nada de imagem espremida. */
@media (max-width: 899px) {
  .bh {
    min-height: auto;
    padding-top: clamp(7.5rem, 20vh, 9.5rem);
    padding-bottom: clamp(3rem, 7vh, 4.5rem);
  }
  .bh-art {
    inset: 0; width: 100%; opacity: 0.62;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 52%, transparent 88%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 52%, transparent 88%);
  }
  .bh-art img { object-position: 68% 32%; }
  .bh-scrim {
    background:
      linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.86) 42%, #0A0908 82%);
  }
  .bh-h { max-width: 11ch; }
  .bh-sub { max-width: 40ch; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-line-in { transition: none !important; transform: none; opacity: 1; }
  .bh-path { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   SLIDER DE DESTAQUES — único conteúdo do hero
   Cada slide É o card do antigo destaque (.v3-featured), então
   herda tipografia, cover em código e grid interno já aprovados.
   ════════════════════════════════════════════════════════════ */
.bh-slider { position: relative; width: 100%; }
/* no desktop o slider ocupa a ESQUERDA da seção; a arte fica no
   respiro da direita. */
@media (min-width: 1100px) { .bh-slider { max-width: 64%; } }
@media (min-width: 1500px) { .bh-slider { max-width: 60%; } }

.bh-viewport { overflow: hidden; }
/* trilho em flex: a altura é a do slide mais alto, então trocar de
   slide não sacode a página (foi por isso que não usei slides
   absolutos empilhados). */
.bh-track {
  display: flex; align-items: stretch;
  transition: transform 700ms var(--v3-ease);
  will-change: transform;
}
.bh-slide { flex: 0 0 100%; min-width: 0; }
/* o card do destaque tinha margem de seção; dentro do trilho, não */
.bh-slide.v3-featured { margin: 0; }
/* Slides inativos NÃO levam `visibility: hidden`: o slide que está
   saindo precisa continuar visível durante os 700ms do deslize, senão
   ele some de estalo e a transição deixa de existir. Quem esconde é o
   overflow do .bh-viewport; o aria-hidden/tabindex do JS cuida da
   acessibilidade. */

/* ── CARD CLARO (ordem do cliente) ──
   O fundo da seção já é quase preto; o contraste certo é papel, não mais
   um bloco escuro. Tirar a classe `v3-card--ink` do markup já devolve os
   defaults claros do sistema (texto ink, excerto, byline, cta) — aqui só
   troco #fff pelo branco QUENTE do sistema e acrescento a elevação, que
   um card claro sobre fundo escuro precisa pra não parecer recortado. */
.bh-slide.v3-card {
  background: var(--paper);
  border-color: rgba(13,11,9,0.16);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,0.9);
}
/* o fio âmbar do topo do card fica mais presente no claro */
.bh-slide.v3-card::after { height: 3px; }
/* a capa em código tem fundo próprio (paper) e ganha um fio de separação */
.bh-slide .v3-featured-cover { border-left: 1px solid rgba(13,11,9,0.10); }
@media (max-width: 999px) {
  .bh-slide .v3-featured-cover { border-left: 0; border-bottom: 1px solid rgba(13,11,9,0.10); }
}

/* card "Em produção" no slider: sem cursor de link, sem hover de card */
.bh-slide.v3-card--wip { cursor: default; }
.bh-slide.v3-card--wip:hover { transform: none; }

/* ── 1 · LABEL "Últimas notícias" ──
   Mesmo gesto do chip "Disponível para novos projetos" da home (pastilha
   de vidro + ponto pulsante), reancorado no escuro desta seção. O ponto
   reusa o .v3-pulse que o blog já tinha. */
.bh-live {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.1rem; padding: 0.42rem 0.95rem 0.42rem 0.72rem;
  border-radius: 999px;
  background: rgba(245,237,216,0.05);
  box-shadow: inset 0 0 0 1px rgba(240,104,24,0.28),
              0 6px 22px -12px rgba(0,0,0,0.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  font-size: 10.5px; letter-spacing: 0.2em;
  color: rgba(245,237,216,0.78); white-space: nowrap;
}
.bh-live .v3-pulse { height: 7px; width: 7px; }

/* ── 2 · A CEREJA ──
   Três camadas, todas já no vocabulário da casa, nenhuma nova:
   (a) HALO ÂMBAR RESPIRANDO atrás do card — é o mesmo dispositivo do
       `.pnav-halo` da nav-ilha e da aura do corredor, em ciclo lento;
   (b) ARESTA ESPECULAR na borda de cima — o `.pnav-spec` do pill;
   (c) SOMBRA VIVA: além da sombra preta de profundidade, um segundo
       plano âmbar difuso, pra a luz do halo parecer atravessar o card.
   Descartei brasas em canvas: exigiria rAF rodando no topo da página só
   pra decoração, e o halo entrega o mesmo calor a custo zero de script. */
.bh-stage { position: relative; }
.bh-halo { display: none; }
.bh-viewport { position: relative; z-index: 1; }

/* 1 · RAIO — 26px, o mesmo do painel do nav menu (pillnav.css:232,
   `.pnav-panel { border-radius: 26px }`). Copiado em px, não em
   variável, porque os dois arquivos não compartilham token. */
.bh-slide.v3-card { border-radius: 26px; }
/* o viewport recorta os slides, então ele TAMBÉM precisa do raio */
.bh-viewport { border-radius: 26px; }

/* 2 · CEREJA — versão VISÍVEL (a anterior morria atrás do card opaco).
   Três camadas somadas:
   (a) halo âmbar respirando MUITO maior que o card, então o brilho
       aparece em volta e não só num fiapo de borda;
   (b) aro âmbar de 1px no próprio card — perceptível mesmo onde o
       fundo escuro não deixa o halo ler;
   (c) bloom externo na sombra: a luz do halo parece atravessar o card. */
/* ⚠️ A CAUSA REAL DE "NÃO APARECE EFEITO NENHUM": a sombra estava no
   .bh-slide, que é FILHO do .bh-viewport — e viewport tem
   `overflow: hidden` pra recortar o trilho. overflow recorta os
   descendentes, então todo o glow do card era literalmente cortado
   fora. A sombra de um elemento NÃO é recortada pelo overflow DELE
   MESMO, então ela mora aqui no viewport, e agora escapa. */
/* GLOW ÂMBAR REMOVIDO (ordem do cliente — mudou de ideia). Sobra só a
   sombra de profundidade, sem nenhuma cor: o card claro continua
   descolado do fundo escuro, mas sem aura. */
.bh-viewport { box-shadow: 0 30px 60px -28px rgba(0,0,0,0.92); }
/* o card em si fica limpo: quem carrega borda e brilho é o viewport */
.bh-slide.v3-card { box-shadow: none; border-color: transparent; }

/* ── 3 · RÉGUA DE PROGRESSO ──
   A barra ativa NÃO é um enfeite sincronizado por fora: ela É o relógio
   do slider. O JS não usa setInterval — a animação da barra é o timer e o
   `animationend` dela é que vira o slide. Assim é impossível a barra
   discordar do que está na tela, e pausar vira `animation-play-state`. */
/* 3 · as setas ficam COLADAS na régua — ‹ | barras | › — e o grupo
   inteiro alinha pela esquerda do card. Antes elas iam pras pontas da
   linha (justify-content: center + flex:1 nas barras), o que as
   afastava demais do indicador. */
.bh-controls { display: flex; align-items: center; gap: 0.55rem; margin-top: 1.15rem; }
.bh-dots { display: flex; align-items: center; gap: 7px; flex: 0 1 auto; }
.bh-bar {
  position: relative; flex: none; width: 52px; height: 26px;
  padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bh-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 11.5px; height: 3px;
  border-radius: 2px; background: rgba(245,237,216,0.2);
  transition: background-color 300ms var(--v3-ease);
}
.bh-bar:hover::before { background: rgba(245,237,216,0.38); }
.bh-bar-fill {
  position: absolute; left: 0; right: 0; top: 11.5px; height: 3px;
  border-radius: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 10px -1px rgba(240,104,24,0.8);
}
.bh-bar[aria-selected="true"] .bh-bar-fill {
  animation: bh-fill var(--bh-dur, 7000ms) linear forwards;
}
.bh-slider.is-paused .bh-bar-fill { animation-play-state: paused; }
@keyframes bh-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bh-bar:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 3px; }

/* ── 4 · SETAS ──
   Nas PONTAS da régua, não flutuando sobre o card: no desktop cobririam
   o título ou a capa, e no mobile não haveria margem pra elas. Aqui o
   alvo é o mesmo nos dois (44px, acima do mínimo de toque). */
.bh-nav {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: 999px;
  background: rgba(245,237,216,0.04);
  border: 1px solid rgba(245,237,216,0.16);
  color: rgba(245,237,216,0.72);
  transition: background-color 260ms var(--v3-ease), border-color 260ms var(--v3-ease),
              color 260ms var(--v3-ease), transform 260ms var(--v3-ease);
  -webkit-tap-highlight-color: transparent;
}
.bh-nav:hover, .bh-nav:focus-visible {
  background: rgba(240,104,24,0.14); border-color: rgba(240,104,24,0.55);
  color: var(--orange);
}
.bh-nav:hover svg { transform: none; }
.bh-prev:hover svg, .bh-prev:focus-visible svg { transform: translateX(-2px); }
.bh-next:hover svg, .bh-next:focus-visible svg { transform: translateX(2px); }
.bh-nav svg { transition: transform 300ms var(--v3-ease); }
.bh-nav:active { transform: scale(0.94); }
.bh-nav:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ── MOBILE: capa EM CIMA, conteúdo embaixo ──
   No DOM o corpo vem antes da capa (é a ordem que o desktop quer, com a
   foto à direita). No empilhado a ordem se inverte por grid-row, sem
   duplicar markup. */
@media (max-width: 999px) {
  .bh-slide.v3-featured { display: grid; grid-template-columns: 1fr; }
  .bh-slide .v3-featured-cover { grid-row: 1; min-height: 190px; }
  .bh-slide .v3-featured-body { grid-row: 2; }
}
@media (max-width: 600px) {
  .bh-slide .v3-featured-cover { min-height: 158px; }
  .bh-dots { margin-top: 0.9rem; }
}

/* respeita quem pediu menos movimento: vira estático, sem autoplay
   (o JS não agenda o timer) e sem deslizar entre slides. */
@media (prefers-reduced-motion: reduce) {
  .bh-track { transition: none !important; }
  .bh-halo { animation: none !important; opacity: 0.7; }
  /* a régua vira indicador estático: a barra ativa fica cheia, sem
     contagem (e o JS não agenda troca nenhuma). */
  .bh-bar[aria-selected="true"] .bh-bar-fill { animation: none !important; transform: scaleX(1); }
  .bh-nav, .bh-nav svg, .bh-bar::before { transition: none !important; }
}

/* ── AVATAR DA AUTORIA ──
   Overbuild assina com o SÍMBOLO da marca (o hexágono do favicon/PWA),
   nunca com o wordmark — em 34px o wordmark vira borrão ilegível.
   Pessoas assinam com foto; enquanto as fotos não existem, o slot já
   está montado: trocar o <span> por <img class="v3-avatar-img"> e
   pronto, o CSS abaixo já recorta e enquadra. Até lá, iniciais sobre
   um disco de papel com aro — placeholder, não erro. */
.v3-avatar {
  position: relative; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; overflow: hidden;
}
.v3-avatar--brand {
  background: #17140f;
  box-shadow: inset 0 0 0 1px rgba(13,11,9,0.14);
}
/* a foto oficial JÁ é uma pfp quadrada (símbolo âmbar sobre fundo
   escuro texturizado), então preenche o disco inteiro — nada de
   símbolo flutuando num quadrado branco. */
.v3-avatar--brand img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-avatar--person {
  background: linear-gradient(155deg, rgba(240,104,24,0.18), rgba(13,11,9,0.06));
  box-shadow: inset 0 0 0 1px rgba(13,11,9,0.14);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink);
}
.v3-avatar--person::before { content: attr(data-initials); }
/* quando a foto chegar: <img class="v3-avatar-img"> dentro do span */
.v3-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-avatar--person:has(.v3-avatar-img)::before { content: none; }
/* dentro do card escuro (listagem ink) o disco inverte */
.v3-card--ink .v3-avatar--person {
  background: linear-gradient(155deg, rgba(240,104,24,0.3), rgba(245,237,216,0.07));
  box-shadow: inset 0 0 0 1px rgba(245,237,216,0.2); color: var(--cream);
}

/* um slide só = nada a navegar: régua e setas saem de cena. Volta
   sozinho quando o segundo artigo for publicado. */
.bh-slider.is-single .bh-controls { display: none; }

/* ══════════ OVERLAY DE TÓPICOS — DESKTOP ══════════
   ⚠️ Este bloco vivia dentro da CSS da barra unificada e foi removido
   junto com ela; sem ele a folha volta a `display:none` em ≥769px (era
   um menu só-mobile no blog.css) e o ⋯ do desktop abre no vazio.
   Aqui: folha flutuante à direita, com o mesmo raio do painel do nav.
   Começa em 88px porque a pill (14–73px) vive ACIMA do overlay — é
   assim que o ✕ dela continua clicável. ≤768px não é tocado. */
@media (min-width: 769px) {
  .nav-overlay[data-nav="open"],
  .nav-overlay[data-nav="opening"],
  .nav-overlay[data-nav="closing"] { display: block !important; }
  body.blogv3.nav-locked { overflow: hidden !important; }

  .nav-panel {
    top: 88px; bottom: 14px; right: 14px;
    width: min(26rem, 34vw);
    border-radius: 26px;
    box-shadow: 0 40px 90px -40px rgba(0,0,0,0.95);
  }
  .nav-panel-in { padding: 3.2rem 2.2rem 2rem; gap: 0.8rem; }
  .nav-ml { font-size: clamp(1.5rem, 2.1vw, 2.1rem); padding: 0.14em 0; }
  .nav-ml-sl { font-size: 0.56em; }
  .nav-panel-social { margin-top: 0.4rem; }
  .nav-panel-cta { margin-top: 1rem; }
  .nav-overlay .nav-panel-cta { padding: 10px 16px; font-size: 14px; }
  .nav-overlay[data-nav="closed"] .nav-panel { transform: translateX(120%); }
}

/* ── LINKS EDITORIAIS NA NAVBAR DO BLOG ──
   "Casos de sucesso" e "Últimas notícias" são <button>, não <a>: eles
   filtram a listagem na própria página, não navegam. Herdam a pele do
   .pnav-link pra ninguém notar a diferença de tag. */
.pnav-topic {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pnav-topic.is-active { color: var(--pn-cream); }
.pnav-topic.is-active .pnav-adot { opacity: 1; }
.pnav-topic[disabled] { opacity: 0.45; cursor: default; }
@media (max-width: 900px) { .blogv3 .pnav-topic { display: none; } }

/* ============================================================
   PÁGINAS DE TÓPICO (/blog/<slug>) — 2026-08-13
   "Casos de sucesso" e "Últimas notícias" (navbar) e as 4
   categorias-mestre (overlay ⋯) viraram PÁGINAS de verdade.
   Cada uma abre com este hero compacto: kicker com ponto
   pulsante, título display, contagem honesta e subtítulo.
   ============================================================ */
.tp-hero { padding-top: clamp(8.5rem, 15vh, 11rem); padding-bottom: clamp(1rem, 2.5vh, 2rem); }
.tp-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 10px; letter-spacing: 0.22em; color: var(--dim);
}
.tp-title {
  margin-top: 1.1rem;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
}
.tp-sub {
  margin-top: 1.2rem; max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; color: var(--body);
}
.tp-meta { margin-top: 1.6rem; font-size: 10px; letter-spacing: 0.2em; color: var(--dim); }
.tp-meta b { color: var(--orange); font-weight: 500; }
.tp-hero-rule { margin-top: clamp(1.8rem, 3.5vh, 2.6rem); border: 0; border-top: 1px solid var(--line); }

/* ESTADO VAZIO HONESTO — tópico sem artigo publicado não finge
   movimento: contador 00, frase direta e caminho de volta. */
.tp-empty { grid-column: span 12; padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(4rem, 10vh, 7rem); text-align: left; }
.tp-empty-n {
  font-family: var(--font-v3-display); font-weight: 800;
  font-size: clamp(4rem, 10vw, 7rem); line-height: 1; letter-spacing: -0.04em;
  color: rgba(13,11,9,0.10);
}
.tp-empty-t { margin-top: 0.8rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.tp-empty-s { margin-top: 0.5rem; max-width: 48ch; font-size: 0.95rem; line-height: 1.65; color: var(--body); }
.tp-empty .v3-cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.6rem; color: var(--orange); font-size: 11px; letter-spacing: 0.18em; }

/* ATALHOS EDITORIAIS NO OVERLAY — em ≤900px a navbar esconde
   "Casos de sucesso"/"Últimas notícias" (regra .pnav-topic acima);
   esta régua dentro do painel devolve o menu completo no mobile:
   Home · Blog · Casos de sucesso · Últimas notícias. */
.nav-eixos {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid oklch(1 0 0 / 0.09);
}
.nav-eixos a {
  font-family: "Geist Mono", ui-monospace, monospace; font-weight: 500;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em;
  color: rgba(245,237,216,0.72); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-eixos a:hover, .nav-eixos a:focus-visible { color: var(--accent, #F37E35); }
.nav-eixos a[aria-current="page"] { color: var(--accent, #F37E35); }

/* FIX linha única (2026-08-13): a regra desktop lá em cima (2.1vw)
   vencia o fix do blog.css e "Comercial & Vendas //" estourava sobre
   o contador. Aqui, no fim do arquivo, a fonte passa a escalar pela
   largura REAL do painel (cqw — .nav-panel-in é container no
   blog.css) com teto que deixa o item mais longo + contador na
   mesma linha em qualquer largura. */
.nav-ml { white-space: nowrap; }
@supports (font-size: 1cqw) {
  .nav-ml { font-size: clamp(1.24rem, 7.4cqw, 2.4rem); }
}