/* Interfone — folha de estilo compartilhada das páginas internas (Notícias, Leis Essenciais,
   Pode ou Não Pode, Dia a Dia do Síndico, Inovações Condominiais).
   Mesmo design system do rascunho da home (site-publico-rascunho-home.html) — cores, tipografia,
   header/footer idênticos. Fontes e logo aqui são arquivos locais (assets/fonts, assets/img),
   extraídos uma única vez do embed base64 da home pra não duplicar peso em cada página nova. */

@font-face {
  font-family: 'Space Grotesk';
  font-weight: 300 700;
  font-style: normal;
  src: url('fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/space-mono-700.woff2') format('woff2');
}

:root {
  --offwhite: #FAF8F1;
  --black: #000000;
  --gray-500: #5C5A4F;
  --gray-400: #8A8676;
  --gray-200: #E5E1D4;
  --primary: #F5C518;
  --yes-bg: #DDEBD9;
  --yes-ink: #3E7A3A;
  --no-bg: #F3D9D3;
  --no-ink: #B4463C;
  --maybe-bg: #F1E6C9;
  --maybe-ink: #8A6A0E;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --container: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--offwhite);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit; cursor: pointer; border: none; background: none; color: inherit;
}
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
h1, h2, h3, p { margin: 0; text-wrap: balance; }

.wrap {
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding-left: 40px; padding-right: 40px;
}

.eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary);
}
.eyebrow.accent { color: var(--primary); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  white-space: nowrap; transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn-primary { background: var(--primary); color: var(--black); }
.btn-ghost { border: 1px solid var(--gray-500); color: var(--offwhite); }

/* ---------- sistema de interação v5: data-card / data-row / data-pill / data-dot ----------
   CORRIGE o v4: numa caixa BAIXA e larga (feed-row, pop-item, rank-row —
   ~104-120px de altura) o raio da luz era maior que a caixa, e ela cortava
   reto nos 4 lados — o mesmo bug do retângulo, só que num tamanho diferente.
   Fix definitivo: uma MÁSCARA radial no próprio ::before garante que a luz
   sempre chega a zero ANTES da borda, não importa o tamanho da caixa.
   O fio amarelo da base (v4) foi removido — não sobrevivia bem na máscara.
   LINHA DE LISTA (data-row) é outra decisão, não a mesma luz menor: em caixa
   baixa e larga, luz seguindo o mouse virava ruído. data-row troca por um
   tinge de fundo + desliza 4px pra direita — resposta ao toque sem pintar
   nada de amarelo. Usa pra: feed-row, pop-item, rank-row, routine-card.
   data-card (com a luz) continua pros cards mais "quadrados/verticais":
   lei-card, innov-card, flash-card, card-icon, card-photo, feed-side-card,
   news-card. Nenhum dos dois força background/border/padding — cada
   elemento mantém a cor que já tem. data-tema="claro" esquenta a luz do
   data-card pros cards offwhite. */
:root {
  --card-crescer: 1.008;
  --card-subir: -2px;
  --card-apertar: .994;
  --card-vel: 240ms;
  --card-curva: cubic-bezier(.2,.8,.25,1);
  --halo-forca: 1;
}
[data-card], [data-pill], [data-dot] {
  --mx: 50%; --my: 50%;
  position: relative;
  transition: transform var(--card-vel) var(--card-curva), border-color var(--card-vel) ease, color var(--card-vel) ease;
}
[data-card]::before, [data-pill]::before, [data-dot]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity var(--card-vel) ease;
  background: radial-gradient(70% 130% at var(--mx) var(--my),
    rgba(245,197,24, calc(.20 * var(--halo-forca))),
    rgba(245,197,24, calc(.07 * var(--halo-forca))) 45%,
    transparent 75%);
  -webkit-mask-image: radial-gradient(112% 112% at 50% 50%, #000 42%, transparent 86%);
          mask-image: radial-gradient(112% 112% at 50% 50%, #000 42%, transparent 86%);
}
[data-card][data-tema="claro"]::before {
  background: radial-gradient(70% 130% at var(--mx) var(--my),
    rgba(216,164,20, calc(.32 * var(--halo-forca))),
    rgba(216,164,20, calc(.12 * var(--halo-forca))) 45%,
    transparent 75%);
}
@media (hover: hover) {
  [data-card]:hover, [data-pill]:hover, [data-dot]:hover {
    transform: translateY(var(--card-subir)) scale(var(--card-crescer));
    border-color: rgba(245,197,24,.22);
  }
  [data-card]:hover::before, [data-pill]:hover::before, [data-dot]:hover::before { opacity: 1; }
}
[data-card]:active, [data-pill]:active, [data-dot]:active {
  transform: translateY(0) scale(var(--card-apertar));
  transition-duration: 90ms;
}
[data-card]:active::before, [data-pill]:active::before, [data-dot]:active::before { opacity: 1; }
[data-card].selecionado::before, [data-card][aria-pressed="true"]::before,
[data-dot].selecionado::before, [data-dot][aria-current="true"]::before { opacity: 1; }
/* pill selecionada já é dourado chapado — a luz vira branca (senão some) */
[data-pill].selecionado::before, [data-pill][aria-pressed="true"]::before, [data-pill].on::before {
  opacity: 1;
  background: radial-gradient(120px 60px at var(--mx) var(--my), rgba(255,255,255,.45), transparent 70%);
}
[data-card]:focus-visible, [data-pill]:focus-visible, [data-dot]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}

/* ---------- linha de lista: data-row (feed-row, pop-item, rank-row, routine-card) ---------- */
[data-row] {
  position: relative; display: block; border-radius: 16px;
  color: inherit; text-decoration: none; cursor: pointer;
  transition: background-color var(--card-vel) ease, transform var(--card-vel) var(--card-curva);
}
[data-row] .feed-thumb, [data-row] .pop-thumb, [data-row] .thumb {
  transition: transform var(--card-vel) var(--card-curva);
}
@media (hover: hover) {
  [data-row]:hover { background: rgba(0,0,0,.045); transform: translateX(4px); }
  [data-row]:hover .feed-thumb, [data-row]:hover .pop-thumb, [data-row]:hover .thumb { transform: scale(1.04); }
}
[data-row]:active { background: rgba(0,0,0,.07); transform: translateX(2px); transition-duration: 90ms; }
[data-row]:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  [data-card], [data-pill], [data-dot], [data-row] { transition: background-color 150ms ease, opacity 150ms ease; }
  [data-card]:hover, [data-pill]:hover, [data-dot]:hover, [data-row]:hover,
  [data-card]:active, [data-pill]:active, [data-dot]:active, [data-row]:active,
  [data-row]:hover .feed-thumb, [data-row]:hover .pop-thumb, [data-row]:hover .thumb { transform: none; }
}

/* ---------- contador de métricas: ponha data-contador="N" num <b>/<span> ---------- */
.contador { font-variant-numeric: tabular-nums; display: inline-block; transform-origin: left center; }
.contador.pulsou { animation: interfone-palpitar 780ms var(--card-curva) 1; }
@keyframes interfone-palpitar {
  0%   { color: var(--primary); transform: scale(1); text-shadow: none; }
  16%  { color: #4FD787; transform: scale(1.08); text-shadow: 0 0 28px rgba(79,215,135,.5); }
  32%  { transform: scale(1.005); }
  46%  { color: #4FD787; transform: scale(1.044); text-shadow: 0 0 18px rgba(79,215,135,.35); }
  62%  { transform: scale(1); }
  100% { color: var(--primary); transform: scale(1); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .contador.pulsou { animation: none; } }

/* ---------- header / footer (idêntico à home) ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 40px; background: rgba(0,0,0,.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--primary);
}
.logo { min-width: 0; flex: 0 1 auto; }
.logo img { height: 26px; width: auto; }
nav.primary { display: flex; gap: 30px; flex-wrap: wrap; }
nav.primary a {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase;
  border-bottom: 2px solid transparent; padding-bottom: 3px; transition: border-color 0.15s ease;
}
nav.primary a:hover, nav.primary a.on { border-color: var(--primary); }
.header-right { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.quem-somos {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary); opacity: .7;
  border-bottom: 2px solid transparent; padding-bottom: 3px; transition: opacity 0.15s ease, border-color 0.15s ease;
}
.quem-somos:hover, .quem-somos.on { opacity: 1; border-color: var(--primary); }
.header-cta .curto { display: none; }
/* celular: some com os links e o "quem somos" — igual ao Tecnorise, sem hambúrguer.
   As seções continuam alcançáveis pelo rodapé (.footer-links já lista todas). */
@media (max-width: 980px) {
  nav.primary, .quem-somos { display: none; }
}
@media (max-width: 360px) {
  .header-cta .longo { display: none; }
  .header-cta .curto { display: inline; }
}

footer.site { padding: 60px 0 32px; }
.footer-top {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--gray-500);
}
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { font-family: var(--font-mono); font-size: 11px; color: var(--gray-200); letter-spacing: 0.03em; }
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--gray-200);
}
.footer-bottom {
  display: flex; justify-content: space-between; padding-top: 26px;
  font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); flex-wrap: wrap; gap: 10px;
}
.footer-bottom .legal { display: flex; gap: 22px; }

/* ---------- topo de página interna (masthead) ---------- */
.page-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--gray-500); }
/* Notícias/Leis: sem essa linha — o `.feed-hero` (destaque + populares) já termina na
   própria linha divisória dele (`border-bottom`), então essa aqui só duplicava/cortava
   estranho por cima da coluna de populares. */
.page-hero.sem-linha { border-bottom: none; padding-bottom: 40px; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 {
  font-weight: 700; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08;
  letter-spacing: -0.02em; max-width: 820px; margin-bottom: 18px;
}
.page-hero .lede { font-size: 18px; line-height: 1.55; color: var(--gray-200); max-width: 640px; }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.chip {
  padding: 9px 16px; border-radius: 99px; border: 1px solid var(--gray-500);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gray-200);
}
.chip.on { background: var(--primary); border-color: var(--primary); color: var(--black); }

main.internal { padding: 56px 0 20px; }

/* ---------- paginação (Notícias / Leis) ---------- */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 56px 0 20px;
}
.pager button {
  min-width: 42px; height: 42px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--gray-500); font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  color: var(--offwhite); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pager button.on { background: var(--primary); border-color: var(--primary); color: var(--black); }
.pager button:disabled { opacity: 0.3; cursor: default; }
.pager .arrow { display: flex; align-items: center; gap: 6px; }

[data-page] { display: none; }
[data-page].on { display: block; }

/* ---------- grid de Notícias / Leis: destaque + grade proporcional ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  background: linear-gradient(160deg, #9b9784, #6f6c5c); aspect-ratio: 4 / 5; display: block;
}
.news-card .tag-pill {
  position: absolute; top: 16px; left: 16px; padding: 5px 10px; border-radius: 6px;
  background: rgba(23,22,15,0.55); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--offwhite);
}
.news-card .overlay {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to bottom, rgba(23,22,15,0) 0%, rgba(23,22,15,0.75) 40%, rgba(23,22,15,0.94) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; gap: 8px;
}
.news-card .overlay .tag {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--primary);
}
.news-card .overlay .t { font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--offwhite); }
.news-card.featured { grid-column: span 2; aspect-ratio: auto; min-height: 460px; }
.news-card.featured .overlay .t { font-size: 27px; }

/* variação Leis: card claro, ícone + artigo, sem foto (custo zero, igual ao card_unico) */
.lei-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lei-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  background: var(--offwhite); color: var(--black); border-radius: var(--radius-md);
  padding: 28px; min-height: 230px;
}
.lei-card .art { font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); }
.lei-card .nome { font-weight: 700; font-size: 21px; line-height: 1.25; margin: 10px 0 8px; }
.lei-card .ang { font-size: 14px; line-height: 1.5; color: var(--gray-500); }
.lei-card .lnk { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); margin-top: auto; }
.lei-card.featured { grid-column: span 2; padding: 44px; }
.lei-card.featured .nome { font-size: 32px; }
.lei-card.featured .num-destaque {
  font-family: var(--font-display); font-weight: 700; font-size: 88px; line-height: 0.9;
  letter-spacing: -0.03em; color: var(--primary); margin-bottom: 6px;
}

/* ---------- filtro genérico de tópicos + lupa (usado no topo de qualquer listagem:
   Notícias/Leis dentro do .feed-tabs, e também Pode ou Não Pode / Dia a Dia junto do chip-row) --- */
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.filter-row .chip-row { margin-top: 0; }

/* ---------- topo do feed (Notícias/Leis): 3 colunas lado a lado — 2 cards à esquerda,
   destaque no centro, "Mais Populares" à direita — igual ao arquivo do Substack (referência
   do Kaue). O bloco inteiro só tem a altura do destaque (curto), termina numa linha
   horizontal, e DEPOIS dela vêm as abas + a lista cronológica em largura TOTAL, sem coluna
   nenhuma do lado. **Isto resolve de vez o problema do card de populares "andando" com o
   scroll** (relatado 3x): não existe mais sidebar correndo ao lado de uma lista longa — o
   "Mais Populares" só precisa ser alto o bastante pra acompanhar o destaque, nunca uma
   lista que rola por baixo dele. Nenhum JS de posição é mais necessário. */
.feed-hero {
  display: grid; grid-template-columns: 0.9fr 1.4fr 0.85fr; gap: 32px;
  padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--gray-500);
}
.feed-thumb {
  width: 100%; border-radius: var(--radius-md); position: relative; overflow: hidden;
  background: linear-gradient(160deg, #9b9784, #6f6c5c);
}
.feed-thumb.icon-mode { background: var(--offwhite); display: flex; align-items: center; justify-content: center; }
.feed-thumb .tag-pill {
  position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 6px;
  background: rgba(23,22,15,0.55); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--offwhite);
}

.feed-side-col { display: flex; flex-direction: column; gap: 24px; }
.feed-side-card { display: block; }
.feed-side-card .feed-thumb { aspect-ratio: 16 / 10; margin-bottom: 14px; }
.feed-side-card .feed-thumb.icon-mode svg { width: 34px; height: 34px; }
.feed-side-card .cat { font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.feed-side-card h3 { font-weight: 700; font-size: 17px; line-height: 1.32; margin: 8px 0 6px; }
.feed-side-card .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-400); }

.feed-featured { display: block; }
.feed-featured .feed-thumb { aspect-ratio: 16 / 11; margin-bottom: 22px; }
.feed-featured .feed-thumb.icon-mode svg { width: 70px; height: 70px; }
.feed-featured .cat { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
.feed-featured h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -0.01em; margin: 12px 0 12px; }
.feed-featured .excerpt { font-size: 15px; line-height: 1.55; color: var(--gray-200); margin-bottom: 14px; }
.feed-featured .meta { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }

/* Mais Populares: lista simples, SEM card/fundo — sóbria igual à referência do Substack.
   Item = miniatura pequena + título + categoria/data, direto no fundo escuro da página. */
.feed-populares { display: flex; flex-direction: column; }
.feed-populares .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.feed-populares .head h4 { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-400); }
.feed-populares .head a { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--offwhite); font-weight: 700; white-space: nowrap; }
.pop-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.pop-item:last-child { margin-bottom: 0; }
.pop-thumb {
  width: 58px; height: 58px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(160deg, #9b9784, #6f6c5c);
}
.pop-thumb.icon-mode { background: var(--gray-500); display: flex; align-items: center; justify-content: center; }
.pop-thumb.icon-mode svg { width: 22px; height: 22px; }
.pop-text { display: flex; flex-direction: column; gap: 6px; }
.pop-title { font-weight: 600; font-size: 14px; line-height: 1.32; color: var(--offwhite); }
.pop-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--gray-400); }

/* abas + busca, acima da lista cronológica completa (largura TOTAL, sem coluna do lado) */
.feed-tabs { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-500); margin: 22px 0 6px; }
.feed-tabs .tabs { display: flex; gap: 30px; }
.feed-tabs button.tab {
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gray-400); padding-bottom: 16px; border-bottom: 2px solid transparent;
}
.feed-tabs button.tab.on { color: var(--offwhite); border-color: var(--primary); }
.feed-search { display: flex; align-items: center; padding-bottom: 12px; }
.feed-search .search-toggle {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--gray-500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feed-search input {
  background: transparent; border: none; color: var(--offwhite); font-family: var(--font-display);
  font-size: 13px; width: 0; opacity: 0; padding: 0; transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.feed-search.open input { width: 190px; opacity: 1; padding: 0 4px 0 10px; border-bottom-color: var(--gray-500); }

.feed-list { display: flex; flex-direction: column; }
.feed-row { display: flex; gap: 28px; align-items: center; justify-content: space-between; padding: 26px 0; border-bottom: 1px solid var(--gray-500); }
.feed-row:first-child { padding-top: 0; }
.feed-row .text { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.feed-row .text .tag { font-family: var(--font-mono); color: var(--primary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.feed-row .text h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.feed-row .text p { font-size: 14px; color: var(--gray-200); line-height: 1.5; }
.feed-row .text .meta { font-family: var(--font-mono); font-size: 11px; color: var(--gray-400); }
.feed-row .feed-thumb { width: 180px; height: 120px; flex-shrink: 0; margin-bottom: 0; }
.feed-row .feed-thumb.icon-mode svg { width: 34px; height: 34px; }

@media (max-width: 980px) {
  .feed-hero { grid-template-columns: 1fr 1fr; }
  .feed-populares { grid-column: span 2; }
}
@media (max-width: 640px) {
  .feed-hero { grid-template-columns: 1fr; }
  .feed-row { flex-direction: column; align-items: flex-start; }
  .feed-row .feed-thumb { width: 100%; height: 200px; }
  .feed-tabs { flex-direction: column; align-items: flex-start; gap: 14px; }
  .filter-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Pode ou Não Pode: parede de flashcards de veredito ---------- */
.flash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.flash-card {
  background: var(--offwhite); color: var(--black); border-radius: var(--radius-md);
  padding: 24px; display: flex; flex-direction: column; gap: 16px; min-height: 220px;
}
.verdict-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px; font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.verdict-badge.pode { background: var(--yes-bg); color: var(--yes-ink); }
.verdict-badge.nao { background: var(--no-bg); color: var(--no-ink); }
.verdict-badge.depende { background: var(--maybe-bg); color: var(--maybe-ink); }
.verdict-badge.cat { background: var(--primary); color: var(--black); }
.flash-card .q { font-weight: 600; font-size: 17px; line-height: 1.35; flex: 1; }
.flash-card .base { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--gray-500); }
.flash-card .lnk { font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-500); }

/* ---------- Dia a Dia do Síndico: módulos por momento/contexto ---------- */
.routine-section { margin-bottom: 44px; }
.routine-label {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px;
  border-radius: 99px; background: var(--offwhite); color: var(--black); margin-bottom: 20px;
}
.routine-label .ico { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.routine-label span { font-family: var(--font-mono); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.routine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.routine-card {
  display: flex; gap: 16px; align-items: flex-start; background: var(--offwhite); color: var(--black);
  border-radius: var(--radius-md); padding: 22px;
}
.routine-card .bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: 8px; flex-shrink: 0; }
.routine-card .body { display: flex; flex-direction: column; gap: 8px; }
.routine-card .t { font-weight: 600; font-size: 16px; line-height: 1.35; }
.routine-card .d { font-size: 13.5px; line-height: 1.5; color: var(--gray-500); }
.routine-card .lnk { font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray-500); }

/* ---------- Inovações Condominiais: cards gigantes ---------- */
.innov-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.innov-card { background: var(--offwhite); color: var(--black); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.innov-card .num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--black); padding: 34px 34px 0;
  max-width: 11ch;
}
.innov-card .photo { margin: 18px 34px 0; height: 220px; border-radius: var(--radius-md); background: linear-gradient(160deg, #9b9784, #6f6c5c); position: relative; }
.innov-card .photo .tag-pill {
  position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 6px;
  background: rgba(23,22,15,0.55); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--offwhite);
}
.innov-card .body { padding: 22px 34px 32px; display: flex; flex-direction: column; gap: 10px; }
.innov-card .title { font-weight: 700; font-size: 24px; line-height: 1.2; }
.innov-card .desc { font-size: 14.5px; line-height: 1.55; color: var(--gray-500); }
.innov-card .foot-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.innov-card .lnk { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); }
.innov-card .sponsor {
  padding: 5px 11px; border-radius: var(--radius-sm); background: var(--primary);
  font-family: var(--font-mono); font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---------- página de artigo/detalhe (compartilhada pelos 5 tipos) ---------- */
.article-head { padding: 56px 0 40px; border-bottom: 1px solid var(--gray-500); }
.article-head .back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-200); margin-bottom: 24px; }
.article-head h1 { font-weight: 700; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.12; letter-spacing: -0.02em; max-width: 780px; margin: 16px 0 18px; }
.article-meta { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--gray-400); }
.article-photo { margin: 40px 0; height: 420px; border-radius: var(--radius-lg); background: linear-gradient(160deg, #9b9784, #6f6c5c); position: relative; }
.article-photo .tag-pill { position: absolute; top: 18px; left: 18px; padding: 6px 12px; border-radius: 6px; background: rgba(23,22,15,0.55); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--offwhite); }
.article-body { max-width: 720px; display: flex; flex-direction: column; gap: 22px; font-size: 17px; line-height: 1.7; color: var(--gray-200); }
.article-body h3 { font-size: 20px; color: var(--offwhite); margin-top: 8px; }
.destaque-box { background: var(--offwhite); color: var(--black); border-radius: var(--radius-md); padding: 28px 32px; max-width: 720px; }
.destaque-box .num { font-weight: 700; font-size: 56px; color: var(--primary); line-height: 1; margin-bottom: 8px; }
.destaque-box .txt { font-weight: 600; font-size: 17px; line-height: 1.4; }
.related-strip { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--gray-500); }
.related-strip h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 22px; }

@media (max-width: 980px) {
  .news-grid, .lei-grid { grid-template-columns: repeat(2, 1fr); }
  .news-card.featured, .lei-card.featured { grid-column: span 2; }
  .flash-grid, .routine-grid { grid-template-columns: repeat(2, 1fr); }
  .innov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding-left: 22px; padding-right: 22px; }
  .news-grid, .lei-grid, .flash-grid, .routine-grid { grid-template-columns: 1fr; }
  .news-card.featured, .lei-card.featured { grid-column: span 1; }
}