/* MOBAIO BLOG · blog.css · 27/10/2026 (bloco 3)
   KV do MOBAIO (docs/design/DNA_VISUAL.md do repo mobaio36): topo no palco petróleo,
   leitura no registro claro do instrumento. Sem sombra de cartão, sem itálico.
   27/10 (Alexandre: "podemos ter detalhes amarelos, alguns campos com fundo branco, nem tudo precisa ser azul"):
   seções em faixas alternadas branco e azul-claro; amarelo-sol como marca (losango antes do nome da seção, filete
   e números da Mais lidas, grifo do título ao passar o mouse); chapéu e "Ver tudo" em tinta, não em azul. */

@font-face { font-family: "Space Grotesk"; font-weight: 300; font-display: swap; src: url(fonts/space-grotesk-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url(fonts/space-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Domine"; font-weight: 400; font-display: swap; src: url(fonts/domine-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Domine"; font-weight: 600; font-display: swap; src: url(fonts/domine-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Domine"; font-weight: 700; font-display: swap; src: url(fonts/domine-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --grot: "Space Grotesk", system-ui, sans-serif;
  --serif: "Domine", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* palco escuro */
  --petrol: #07182A; --txt: #EAF1F6; --dim: #7E97A8; --acc: #9FD0E8; --line-d: rgba(190, 214, 230, 0.16);
  /* instrumento claro */
  --bg: #F3F8FC; --card: #FBFCFE; --recess: #E2EAF1; --ink: #0B1E30; --ink2: #51697B; --ink3: #8AA0B0;
  --hair: rgba(11, 30, 48, 0.13); --hair2: rgba(11, 30, 48, 0.06);
  --kv: #246E94; --kv-deep: #0E5680;
  --sol: #FACC15;
  --larg: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--grot); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow-x: hidden;
  min-height: 100vh; display: flex; flex-direction: column; }
.leitura { flex: 1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.miolo { max-width: var(--larg); margin: 0 auto; padding: 0 56px; }

/* ---- palco petróleo: topo + abertura da página ---- */
.palco { color: var(--txt);
  background: radial-gradient(82% 90% at 50% 0%, #163B55, transparent 72%), radial-gradient(120% 100% at 50% 130%, #030911, transparent 60%), var(--petrol); }
.topo { border-bottom: 1px solid var(--line-d); }
.topo .miolo { display: flex; align-items: center; gap: 32px; min-height: 76px; }
/* o selo do app (mob + aio em amarelo-sol + ®, a palavra ao lado em mono): o lockup "mobaio® Score" da página de resultado */
/* barra: logo, BLOG, menu e busca centrados na altura da barra (ordem do Alexandre, 27/10) */
.marca { display: inline-flex; align-items: center; gap: 12px; flex: none; line-height: 1; }
.marca .mk { font-weight: 700; font-size: 30px; letter-spacing: -0.02em; color: var(--txt); line-height: 1; }
.marca .aio { color: var(--sol); }
.marca .reg { font-size: 11px; vertical-align: super; color: var(--dim); font-weight: 600; margin-left: 1px; }
.marca .desc { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); white-space: nowrap; line-height: 1; padding-top: 2px; }
.nav { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 0; }
.nav a { position: relative; font-size: 14px; line-height: 1; color: var(--dim); white-space: nowrap; padding: 4px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--txt); }
/* o traço do item ativo fica logo abaixo da palavra, dentro da barra */
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--acc); }
.acoes { display: flex; align-items: center; gap: 14px; flex: none; }
.acoes .ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-d); border-radius: 8px; color: var(--dim); }
.acoes .ic:hover { color: var(--txt); }
/* 04/11 · Siga no topo (Instagram, LinkedIn, Facebook), antes da busca */
.siga-topo { display: flex; gap: 8px; }
.acoes .entrar { font-size: 13px; color: var(--dim); }
.acoes .entrar:hover { color: var(--txt); }
.acoes .acesso { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt);
  border: 1px solid var(--line-d); border-radius: 7px; padding: 9px 12px; }
.acoes .acesso:hover { border-color: var(--acc); }

.abertura { padding: 56px 0 64px; }
.abertura .miolo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.abertura.com-capa .miolo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.rotulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc); }
.rotulo .los { width: 7px; height: 7px; background: var(--sol); transform: rotate(45deg); flex: none; }
.abertura h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -0.01em; margin-top: 18px; max-width: 22ch; }
.abertura .olho { font-size: clamp(16px, 1.5vw, 19px); font-weight: 300; line-height: 1.55; color: #C9D8E3; margin-top: 18px; max-width: 60ch; }
.abertura .meta { margin-top: 22px; color: var(--dim); }
.abertura .meta a { color: var(--txt); }
.abertura .capa img { border-radius: 10px; border: 1px solid var(--line-d); width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.abertura .capa figcaption { font-size: 11px; color: var(--dim); margin-top: 8px; text-align: right; }

.meta { font-size: 13px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.meta .sep { opacity: 0.5; }

/* ---- leitura clara ---- */
.leitura { padding: 56px 0 80px; }
.bloco + .bloco { margin-top: 64px; }
.bloco-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--hair); padding-bottom: 12px; margin-bottom: 24px; }
.bloco-cab h2 { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.bloco-cab h2::before { content: ""; width: 7px; height: 7px; background: var(--sol); transform: rotate(45deg); flex: none; }
.bloco-cab a { font-size: 13px; color: var(--ink); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bloco-cab a:hover { text-decoration-thickness: 4px; }

.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cartao { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--hair); border-radius: 10px; padding: 22px; transition: border-color .2s; }
.cartao:hover { border-color: var(--kv); }
.cartao .img { margin: -22px -22px 6px; }
.cartao .img img { border-radius: 10px 10px 0 0; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; } /* mesma proporção da capa e da imagem social */
.cartao .ed { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kv); }
.cartao h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.3; }
.cartao p { font-size: 14px; line-height: 1.55; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao .meta { margin-top: auto; padding-top: 6px; font-size: 12px; }
.meta-cartao { flex-direction: column; align-items: flex-start; gap: 2px; }
.meta-cartao .quem { color: var(--ink); }

.duas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
.duas .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.depois-post { margin-top: 72px; }
.vazio { color: var(--ink2); font-size: 15px; padding: 24px 0; }

/* ---- página das mudanças ---- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filtros a { font-size: 13px; padding: 7px 14px; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink2); background: var(--card); }
.filtros a[aria-current="page"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.mes { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink3); margin: 40px 0 8px; }
.mes:first-child { margin-top: 0; }
.mud { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--hair2); }
.mud .quando { display: flex; flex-direction: column; gap: 8px; }
.mud time { font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.plat { align-self: flex-start; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--hair); border-radius: 5px; padding: 3px 7px; background: var(--card); }
.mud h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.35; }
.mud p { font-size: 15px; line-height: 1.6; color: var(--ink2); margin-top: 8px; }
.mud .marca-muda { color: var(--ink); }
.mud .marca-muda b { font-weight: 600; }
.mud .fonte { font-size: 13px; margin-top: 10px; }
.mud .fonte a { color: var(--kv); }
.lateral .mud { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 0; }
.lateral .mud .quando { flex-direction: row; align-items: center; }
.lateral .mud h3 { font-size: 16px; }

/* ---- matéria (post): arquitetura da matéria do Strokeplay com as fontes do KV (ordem do Alexandre, 27/10) ----
   mesma hierarquia, proporções e ritmo do Strokeplay (container 1280 com respiro de 56, título 64/1.04, linha fina 22,
   faixa de autoria com filete de 2px, foto na largura toda, texto 680 e lateral 300); Domine no título e intertítulos,
   Space Grotesk no corpo, JetBrains Mono nos rótulos. Petróleo só na barra; sem card, sombra ou canto redondo */
.palco-barra .topo { border-bottom: 0; }
.materia { background: #FFFFFF; padding: 0; }
.m-cab { padding-top: 28px; }
.m-cab .rotulo { color: var(--kv); }
.m-cab .rotulo a:hover { color: var(--kv-deep); }
.m-tit { font-family: var(--serif); font-weight: 700; font-size: 64px; line-height: 1.04; letter-spacing: -0.015em; color: var(--ink); margin-top: 14px; max-width: 1040px; }
.m-olho { font-size: 22px; font-weight: 400; line-height: 1.5; color: var(--ink2); margin-top: 18px; max-width: 820px; }
/* 04/11 · Siga + Compartilhar com ícones na linha da assinatura (padrão da casa) */
.redes-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.rl-grupo { display: flex; align-items: center; gap: 6px; }
.rl-rot { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2); margin-right: 4px; }
.rl-ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; padding: 0; }
.rl-ic:hover { background: var(--ink); color: var(--card); }
.rl-ic .aviso { position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap; background: var(--ink); color: var(--card); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; }
.m-assina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 24px; padding-top: 12px; border-top: 2px solid var(--ink); }
.m-linha { font-size: 13px; color: var(--ink2); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.m-linha a { color: var(--ink); font-weight: 600; }
.m-linha .sep { color: var(--ink3); }
/* compartilhar: botões com filete, como no Strokeplay, com o rótulo em mono */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.share a, .share button { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; color: var(--ink); background: var(--card); border: 1px solid var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.share a:hover, .share button:hover { background: var(--ink); color: var(--card); }
.share-rot { font-family: var(--mono); color: var(--ink); letter-spacing: .2em; margin-right: auto; }
/* foto principal: largura toda do container, 16:9 com o ponto de foco, crédito logo abaixo */
.m-foto { margin-top: 28px; }
.m-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--recess); }
.m-foto figcaption, .m-texto figcaption { font-size: 12px; line-height: 1.45; color: var(--ink2); padding-top: 7px; }
.credito { font-family: var(--mono); font-size: 11px; color: var(--ink3); }
/* corpo e lateral: só depois da foto */
.m-grade { display: grid; grid-template-columns: minmax(0, 680px) 300px; justify-content: space-between; gap: 48px; padding-top: 44px; }
.m-principal { min-width: 0; }
.m-texto { font-size: 20px; line-height: 1.62; color: var(--ink); }
.m-texto p, .m-texto ul, .m-texto ol { margin: 0 0 24px; }
/* capitular do Strokeplay: 1º parágrafo, Domine, três linhas */
.m-texto > p:first-of-type::first-letter { font-family: var(--serif); font-weight: 700; float: left; font-size: 84px; line-height: .82; padding: 6px 10px 0 0; color: var(--ink); }
.m-texto h2 { font-family: var(--serif); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; margin: 40px 0 16px; scroll-margin-top: 24px; }
.m-texto h3 { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.25; margin: 32px 0 12px; }
.m-texto a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--kv); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-texto a:hover { color: var(--kv); }
.m-texto ul, .m-texto ol { padding-left: 1.2em; }
.m-texto li { margin: 0 0 8px; }
.m-texto em, .m-texto i { font-style: normal; }
/* citação: a pullquote do Strokeplay (filete de 2px em cima, texto grande e leve), em Domine */
.m-texto blockquote { margin: 40px 0; padding-top: 16px; border-top: 2px solid var(--ink); font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.m-texto figure { margin: 36px 0; }
.m-texto figure img { display: block; width: 100%; }
/* "Leia mais": miniatura 160 e chamada entre filetes */
.m-leiamais { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: center; margin: 36px 0; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.m-leiamais.sem-foto { grid-template-columns: minmax(0, 1fr); }
.m-leiamais img { width: 160px; height: 110px; object-fit: cover; }
.m-leiamais .lm-txt { display: grid; gap: 6px; }
.m-leiamais a { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.m-leiamais a:hover { color: var(--kv); }
.m-leiamais .k2 { font-size: 12px; color: var(--ink2); }
.k, .m-leiamais .k { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
/* "Para entender" */
.m-entender { margin-top: 40px; padding-top: 10px; border-top: 2px solid var(--ink); }
.m-entender h2 { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.m-entender h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.3; margin-top: 20px; }
.m-entender p { font-size: 17px; line-height: 1.6; color: var(--ink2); margin-top: 6px; }
/* fontes, "Nesta matéria" em chips e apontar erro */
.m-fonte { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--ink); font-size: 13px; color: var(--ink2); }
.m-fonte a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--kv); text-underline-offset: 3px; }
.m-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 10px; border-top: 2px solid var(--ink); }
.m-tags .k { flex: 0 0 100%; margin-bottom: 6px; }
.m-tags a { font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid var(--ink); padding: 9px 12px; }
.m-tags a:hover { background: var(--ink); color: var(--card); }
.m-correcao { margin-top: 18px; font-size: 12px; color: var(--ink2); }
.m-fim { display: flex; margin-top: 40px; padding-top: 14px; border-top: 2px solid var(--ink); }
.m-fim .share { flex: 1; }
/* coluna lateral: blocos com filete de 2px e rótulo em mono */
.m-lateral { display: grid; align-content: start; gap: 32px; }
.lat-bloco { border-top: 2px solid var(--ink); padding-top: 10px; display: grid; }
.lat-bloco > .k { padding-bottom: 4px; }
.lat-fixo { position: sticky; top: 24px; border-top: 4px solid var(--sol); }
.lat-sumario { list-style: none; counter-reset: sum; display: grid; }
.lat-sumario li { counter-increment: sum; display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.35; }
.lat-sumario li:last-child { border-bottom: 0; }
.lat-sumario li::before { content: counter(sum); font-family: var(--mono); font-size: 11px; color: var(--ink3); padding-top: 2px; }
.lat-sumario a { color: var(--ink); }
.lat-sumario a:hover { color: var(--kv); }
.lat-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.lat-item:last-child { border-bottom: 0; }
.lat-item img { width: 104px; height: 78px; object-fit: cover; }
.lat-lidas { list-style: none; counter-reset: lidas; display: grid; }
.lat-lidas li { counter-increment: lidas; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding: 12px 0; border-bottom: 1px solid var(--hair); font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.3; }
.lat-lidas li:first-child { padding-top: 16px; }
.lat-lidas li:last-child { border-bottom: 0; }
.lat-lidas a { color: var(--ink); }
/* rodapé da matéria: "Mais em <editoria>" */
.m-mais { margin-top: 64px; padding: 40px 0 64px; background: var(--bg); border-top: 1px solid var(--hair); }
.m-chams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 18px; }
.m-cham { display: grid; gap: 8px; align-content: start; border-top: 2px solid var(--ink); padding-top: 14px; }
.m-cham .t { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.25; color: var(--ink); }
.m-cham .o { font-size: 14px; line-height: 1.5; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* faixas da capa e da editoria: largura toda, branco e azul-claro alternados */
.leitura-faixas { padding: 0; }
.faixa { padding: 56px 0; }
.faixa-branca { background: #FFFFFF; }
.faixa-azul { background: var(--bg); }
.faixa .bloco + .bloco { margin-top: 56px; }
.faixa .ed-feed { margin-top: 0; }
.faixa .ed-topo { margin-bottom: 0; }
.faixa .assuntos + .ed-topo { margin-top: 0; }

/* ---- peças da capa, da editoria, do tema e da busca (moldes do Strokeplay e da Metabolyka, 27/10) ----
   chamada sem caixa (foto, chapéu, título em Domine, olho, data), linha com miniatura, lista com miniatura grande,
   Mais lidas numerada, chips com contagem */
.ch { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.ch-img img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--recess); }
.ch-lg .ch-img img { aspect-ratio: 16 / 9; }
.ch-img { margin-bottom: 6px; }
.ch-ed { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.ch-t { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
.ch-lg .ch-t { font-size: 32px; line-height: 1.1; }
.ch-sm .ch-t { font-size: 17px; line-height: 1.25; }
.ch-o { font-size: 15px; line-height: 1.5; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-lg .ch-o { font-size: 17px; }
.ch-m { font-size: 12px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.ch-t, .mini-t, .ltexto-t, .feed-t, .lidas-l a, .lat-item span, .lat-lidas a, .m-cham .t, .ed-lead-t a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.ch:hover .ch-t, .mini:hover .mini-t, .ltexto:hover .ltexto-t, .feed:hover .feed-t, .lidas-l a:hover, .lat-item:hover span, .lat-lidas a:hover, .m-cham:hover .t, .ed-lead-t a:hover { color: var(--ink); text-decoration-color: var(--sol); }
.fx-grade { display: grid; gap: 32px; }
.fx-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-duas { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
.fx-lista { display: grid; align-content: start; }
.mini { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.fx-lista .mini:first-child, .ed-tb .mini:first-of-type { padding-top: 0; }
.mini:last-child { border-bottom: 0; }
.mini img { width: 104px; height: 78px; object-fit: cover; }
.mini-texto { grid-template-columns: minmax(0, 1fr); }
.mini-t { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.25; }
.ltexto-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 28px; border-top: 1px solid var(--hair); }
.ltexto { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.ltexto-t { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.3; }
.feed-l { display: grid; }
.feed { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.feed:first-child { padding-top: 0; }
.feed:last-child { border-bottom: 0; }
.feed img { width: 240px; aspect-ratio: 1200 / 630; object-fit: cover; }
.feed-texto { grid-template-columns: minmax(0, 1fr); }
.feed:has(.feed-pos) { grid-template-columns: 40px 240px minmax(0, 1fr); }
.feed-texto:has(.feed-pos) { grid-template-columns: 40px minmax(0, 1fr); }
.feed-txt { display: grid; gap: 6px; }
.feed-t { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.18; letter-spacing: -0.01em; }
.feed-o { font-size: 15px; line-height: 1.5; color: var(--ink2); }
.lidas { border-top: 4px solid var(--sol); padding-top: 12px; align-self: start; }
.lidas-l { list-style: none; counter-reset: lidas; display: grid; margin-top: 4px; }
.lidas-l li { counter-increment: lidas; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; padding: 12px 0; border-bottom: 1px solid var(--hair); font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1.3; }
.lidas-l li:last-child { border-bottom: 0; }
.lidas-l li::before, .lat-lidas li::before, .feed-pos { content: counter(lidas); display: grid; place-items: center; width: 30px; height: 30px; background: var(--sol); font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1; color: var(--ink); }
.lidas-l a { color: var(--ink); }
.ver-todas { display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--sol); padding-bottom: 2px; }
.home-topo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
/* 04/11 · Siga o MOBAIO, abaixo da Mais lidas na home */
.home-lado { align-self: start; display: grid; gap: 32px; }
.siga { border-top: 4px solid var(--sol); padding-top: 12px; }
.siga-l { display: grid; margin-top: 4px; }
.siga-l a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--ink); font-size: 15px; }
.siga-l a:last-child { border-bottom: 0; }
.siga-l a b { font-weight: 600; }
.siga-l a:hover span { text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--ink); padding: 9px 12px; background: var(--card); }
.chips a span { font-weight: 400; color: var(--ink3); margin-left: 2px; }
.chips a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sol); }
.chips a:hover, .chips a[aria-current="page"] { background: var(--ink); color: var(--card); }
.chips a:hover span, .chips a[aria-current="page"] span { color: var(--recess); }
.assuntos { margin-bottom: 40px; }
/* cor de cada editoria (28/10, ordem do Alexandre; paleta do brand book, sem coral/laranja/amarelo-atenção, que são nota no app) */
.ed-estrategia { --ed: #246E94; --ed-claro: #4886A6; }
.ed-radar { --ed: #22D3EE; --ed-claro: #22D3EE; }
.ed-entenda { --ed: #10B981; --ed-claro: #34D399; }
.ed-manual { --ed: #FACC15; --ed-claro: #FACC15; }
.nav a[aria-current="page"]::after { background: var(--ed-claro, var(--acc)); }
.abertura[class*=" ed-"] .rotulo .los, .hero-ed .rotulo .los { background: var(--ed-claro); }
.abertura[class*=" ed-"] { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ed) 16%, transparent)); }
/* hero da editoria: o véu da capa tingido com a cor da editoria */
.hero-ed { --veu: color-mix(in srgb, var(--ed) 24%, #07182A); }
.hero-ed .hero-veu { background: linear-gradient(90deg, var(--veu) 0%, color-mix(in srgb, var(--veu) 95%, transparent) 44%, color-mix(in srgb, var(--veu) 72%, transparent) 56%, color-mix(in srgb, var(--veu) 22%, transparent) 70%, transparent 80%); }
.hero h1.rotulo { margin: 0; font-weight: 500; }
.hero-ed .hero-tit { font-size: clamp(32px, 3.5vw, 46px); }
.assuntos-hero { margin: 32px 0 0; }
.assuntos-hero .chips a { color: var(--txt); background: transparent; border: 1px solid rgba(234, 241, 246, .4); }
.assuntos-hero .chips a span { color: var(--dim); }
.assuntos-hero .chips a:hover, .assuntos-hero .chips a[aria-current="page"] { background: var(--txt); color: var(--petrol); border-color: var(--txt); }
.assuntos-hero .chips a:hover span, .assuntos-hero .chips a[aria-current="page"] span { color: var(--ink2); }
.assuntos-hero .chips a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ed-claro); }
/* "+N": sem JS; marcado, os assuntos que faltam entram na mesma fila e o botão sai */
.mais-cx { position: absolute; opacity: 0; pointer-events: none; }
.mais-bt { cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 12px; color: var(--txt); border: 1px solid rgba(234, 241, 246, .4); }
.mais-bt:hover, .mais-cx:focus-visible + .mais-bt { background: var(--txt); color: var(--petrol); }
.assuntos-hero .chips a.extra { display: none; }
.mais-cx:checked ~ a.extra { display: inline-block; }
.mais-cx:checked + .mais-bt { display: none; }
/* capa da editoria: principal com foto (7/5) e "Também em" */
.ed-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; margin-bottom: 64px; }
.ed-lead-img img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.ed-lead-txt { display: flex; flex-direction: column; gap: 12px; }
.ed-lead-t { font-family: var(--serif); font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -0.015em; }
.ed-lead-o { font-size: 18px; line-height: 1.5; color: var(--ink2); }
.ed-tb { margin-top: auto; padding-top: 24px; display: grid; }
.ed-tb > .k { border-top: 1px solid var(--ink); padding-top: 10px; padding-bottom: 12px; }
.ed-feed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; margin-top: 64px; }
.ed-feed .bloco { margin-top: 0; }
.ed-lado .lidas { position: sticky; top: 24px; }
.bloco + .ed-feed, .bloco + .paginas { margin-top: 0; }
/* busca: "você quis dizer" e sugestões enquanto digita */
.quis { font-size: 16px; color: var(--ink2); margin-bottom: 32px; }
.quis a { color: var(--kv); text-decoration: underline; text-underline-offset: 3px; }
.busca-campo { position: relative; flex: 1; min-width: 0; display: flex; }
.sugere { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; background: var(--card); color: var(--ink); border: 1px solid var(--ink); display: grid; }
.sugere a { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.35; }
.sugere a:last-child { border-bottom: 0; }
.sugere a:hover, .sugere a:focus { background: var(--bg); outline: none; }
.sugere small { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
/* tema no corpo da matéria: link discreto, como o da ficha no Strokeplay */
.m-texto a.ent { text-decoration-color: var(--hair); }
.m-texto a.ent:hover { text-decoration-color: var(--kv); }

/* ---- hero da home (molde da Metabolyka): texto sobre a foto, escurecimento da esquerda ---- */
.hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; background: var(--petrol); color: var(--txt); }
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veu { position: absolute; inset: 0; background: linear-gradient(90deg, #07182A 0%, rgba(7, 24, 42, .95) 44%, rgba(7, 24, 42, .7) 56%, rgba(7, 24, 42, .2) 70%, rgba(7, 24, 42, 0) 80%); }
.hero-texto { position: relative; z-index: 1; width: 100%; padding-top: 64px; padding-bottom: 64px; }
.hero-texto > * { max-width: 640px; }
.hero-texto .hero-olho { max-width: 560px; }
.hero .rotulo a:hover { color: var(--txt); }
.hero-tit { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 3.9vw, 50px); line-height: 1.1; letter-spacing: -0.018em; margin-top: 16px; }
.hero-olho { font-size: 18px; line-height: 1.55; color: #C9D8E3; margin-top: 18px; }
.hero-meta { font-size: 13px; color: var(--dim); margin-top: 18px; }
.hero-ler { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt); border: 1px solid rgba(234, 241, 246, .55); padding: 12px 18px; }
.hero-ler:hover { background: var(--txt); color: var(--petrol); }
.hero-credito { position: absolute; right: 16px; bottom: 10px; z-index: 1; font-size: 11px; color: rgba(234, 241, 246, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* ---- apontar erro (pé da matéria) ---- */
.apontar { display: inline; }
.apontar summary { display: inline; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.apontar summary::-webkit-details-marker { display: none; }
.apontar[open] .apontar-nota { display: none; }
.apontar form { display: grid; gap: 12px; margin-top: 14px; max-width: 520px; }
.apontar label { display: grid; gap: 6px; font-size: 13px; color: var(--ink2); }
.apontar textarea, .apontar input { font: 400 15px var(--grot); color: var(--ink); background: #fff; border: 1px solid var(--hair); padding: 10px 12px; width: 100%; }
.apontar textarea { min-height: 96px; resize: vertical; }
.apontar button { justify-self: start; font: 500 13px var(--grot); color: var(--card); background: var(--ink); border: 0; padding: 10px 16px; cursor: pointer; }
.apontar-msg { font-size: 14px; color: var(--ink); margin-top: 10px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- busca e paginação ---- */
.form-busca { display: flex; gap: 10px; margin-top: 26px; max-width: 560px; }
.form-busca input { flex: 1; min-width: 0; font: 400 16px var(--grot); color: var(--txt); background: rgba(190, 214, 230, 0.05); border: 1px solid var(--line-d); border-radius: 8px; padding: 12px 14px; }
.form-busca input:focus { outline: none; border-color: var(--acc); }
.form-busca button { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt); background: transparent; border: 1px solid var(--line-d); border-radius: 8px; padding: 0 16px; cursor: pointer; }
.paginas { display: flex; justify-content: center; gap: 12px; margin-top: 48px; font-size: 14px; }
.paginas a { color: var(--kv); padding: 8px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--card); }
.paginas span { padding: 8px 4px; color: var(--ink3); }

/* ---- rodapé: a linha do Footer do MOBAIO ---- */
.rodape { background: var(--petrol); color: var(--dim); border-top: 1px solid var(--line-d); }
/* índice do rodapé (molde do Strokeplay): marca e colunas; embaixo, a linha do Footer do MOBAIO */
.rod-indice { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 44px; padding-bottom: 36px; border-bottom: 1px solid var(--line-d); }
.rod-col { display: grid; align-content: start; gap: 10px; font-size: 14px; }
.rod-tit { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--txt); margin-bottom: 4px; }
.rod-col a { color: var(--dim); }
.rodape .rod-linha { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; padding-top: 18px; padding-bottom: 18px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.rodape a:hover { color: var(--txt); }
.rodape .sep { opacity: 0.5; }
.rodape .dono { color: var(--txt); font-weight: 700; }

/* ---- celular ---- */
@media (max-width: 960px) {
  .m-grade { grid-template-columns: minmax(0, 1fr); }
  .home-topo, .ed-feed, .ed-topo, .fx-duas { grid-template-columns: minmax(0, 1fr); }
  .fx-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-lead-img img { min-height: 0; aspect-ratio: 16 / 9; }
  .m-tit { font-size: 52px; }
  .m-chams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas { grid-template-columns: minmax(0, 1fr); }
  .abertura.com-capa .miolo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .miolo { padding: 0 20px; }
  .fx-3, .fx-4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ltexto-l { grid-template-columns: minmax(0, 1fr); }
  .feed { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .feed img { width: 112px; aspect-ratio: 1; }
  .feed:has(.feed-pos) { grid-template-columns: 34px 96px minmax(0, 1fr); }
  .faixa { padding: 40px 0; }
  .feed:has(.feed-pos) img { width: 96px; }
  .feed-t { font-size: 18px; }
  .feed-o { display: none; }
  .ch-lg .ch-t { font-size: 26px; }
  .ed-lead-t { font-size: 30px; }
  .ed-topo { margin-bottom: 48px; }
  .topo .miolo { flex-wrap: wrap; gap: 14px 16px; padding-top: 16px; padding-bottom: 0; min-height: 0; }
  .marca { order: 1; gap: 10px; }
  .marca .mk { font-size: 26px; }
  .marca .desc { font-size: 11px; }
  .acoes { order: 2; margin-left: auto; gap: 10px; }
  .nav { order: 3; flex: 0 0 100%; overflow-x: auto; gap: 20px; padding: 6px 0 16px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .abertura { padding: 36px 0 44px; }
  .leitura { padding: 36px 0 56px; }
  .grade, .duas .grade { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* linha de autor, data e tempo empilhada: nunca um "·" sozinho no fim da linha */
  .abertura .meta { flex-direction: column; align-items: flex-start; gap: 3px; }
  .abertura .meta .sep { display: none; }
  .mud { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mud .quando { flex-direction: row; align-items: center; }
  .rodape .rod-linha { flex-direction: column; gap: 6px; }
  .rod-indice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; padding-top: 32px; }
  .rod-indice .marca { grid-column: 1 / -1; order: 0; }
  /* matéria no celular (Strokeplay): título 38, foto de ponta a ponta, uma coluna, lateral depois do texto */
  .m-cab { padding-top: 24px; }
  .m-tit { font-size: 34px; line-height: 1.08; }
  .m-olho { font-size: 20px; }
  .m-assina { flex-direction: column; align-items: flex-start; }
  .m-linha .sep { display: none; }
  .m-linha { flex-direction: column; align-items: flex-start; gap: 2px; }
  .share a, .share button { height: 36px; padding: 0 10px; }
  .m-foto { padding: 0; }
  .m-foto figcaption { padding-left: 20px; padding-right: 20px; }
  .m-grade { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .m-texto { font-size: 18px; }
  .m-texto > p:first-of-type::first-letter { font-size: 64px; }
  .m-texto blockquote { font-size: 23px; }
  .m-leiamais { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .m-leiamais img { width: 88px; height: 88px; }
  .m-leiamais a { font-size: 18px; }
  .lat-fixo { position: static; }
  .m-fim { flex-direction: column; }
  .m-chams { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* hero no celular: foto em cima, texto na base, escurecimento de baixo para cima */
  .hero { min-height: 640px; align-items: flex-end; }
  .hero-veu { background: linear-gradient(0deg, #07182A 0%, rgba(7, 24, 42, .96) 48%, rgba(7, 24, 42, .75) 62%, rgba(7, 24, 42, .25) 76%, rgba(7, 24, 42, 0) 88%); }
  .hero-texto { padding-top: 0; padding-bottom: 40px; }
  .hero-tit { font-size: 32px; }
  .hero-olho { font-size: 16px; }
  .hero-credito { top: 10px; bottom: auto; }
  .hero-ed .hero-veu { background: linear-gradient(0deg, var(--veu) 0%, color-mix(in srgb, var(--veu) 96%, transparent) 62%, color-mix(in srgb, var(--veu) 80%, transparent) 78%, color-mix(in srgb, var(--veu) 45%, transparent) 100%); }
  .hero-ed .hero-tit { font-size: 30px; }
  .assuntos-hero { margin-top: 24px; }
  .rodape .sep { display: none; }
}

/* 04/11/2026 · NEWSLETTER: popup e faixa no padrão da casa, no KV do blog (petróleo, kv, sol, Space Grotesk e Domine) */
.mbnl{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(7,24,42,.66)}
.mbnl__box{position:relative;display:grid;grid-template-columns:1fr .9fr;width:100%;max-width:960px;min-height:520px;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.mbnl__fechar{position:absolute;top:14px;left:14px;width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;background:#fff;cursor:pointer;font:400 22px/1 var(--grot);color:var(--ink);z-index:1}
.mbnl__txt{display:flex;flex-direction:column;justify-content:center;padding:64px 52px 38px;text-align:center}
.mbnl__mark{font:600 30px/1 var(--grot);color:var(--ink)}
.mbnl__mark span{color:var(--kv)}
.mbnl__k{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:22px 0 12px;color:var(--kv)}
.mbnl__t{font:600 30px/1.12 var(--grot);letter-spacing:-.01em;margin:0 0 12px;color:var(--ink)}
.mbnl__s{font:400 17px/1.5 var(--serif);color:var(--ink2);margin:0 0 22px}
.mbnl form{margin:0}
.mbnl__in{display:block;width:100%;box-sizing:border-box;border:1px solid var(--ink);padding:15px 16px;font:500 16px/1 var(--grot);color:var(--ink);background:#fff;border-radius:0}
.mbnl__bt{display:block;width:100%;margin-top:12px;border:0;background:var(--petrol);color:#fff;padding:16px;font:600 13px/1 var(--grot);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:0}
.mbnl__bt:disabled{opacity:.6}
.mbnl__nao{display:inline-block;margin-top:14px;background:none;border:0;font:500 14px/1 var(--grot);color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mbnl__msg{font:500 14px/1.4 var(--grot);margin:10px 0 0;min-height:1.4em}
.mbnl__ok{font:600 16px/1.45 var(--grot);margin:6px 0 0}
.mbnl__legal{font:400 11.5px/1.5 var(--grot);color:var(--ink2);margin:20px 0 0}
.mbnl__hp{position:absolute;left:-9999px}
.mbnl__lado{display:flex;align-items:flex-end;background:var(--petrol);padding:44px}
.mbnl__lado span{font:600 46px/1.05 var(--grot);color:var(--txt);letter-spacing:-.01em}
.mbnl-faixa{background:var(--bg);color:var(--ink);padding:0 24px 64px}
.mbnl-faixa__w{max-width:var(--larg);margin:0 auto;border-top:2px solid var(--ink);padding-top:40px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.mbnl-faixa .mbnl__k{margin:0 0 14px}
.mbnl-faixa__t{font:600 34px/1.1 var(--grot);letter-spacing:-.01em;margin:0 0 12px;color:var(--ink)}
.mbnl-faixa .mbnl__s{margin:0}
.mbnl-faixa form{display:flex;flex-wrap:wrap}
.mbnl-faixa .mbnl__in{flex:1;min-width:0;width:auto}
.mbnl-faixa .mbnl__bt{width:auto;margin:0;padding:0 26px}
.mbnl-faixa .mbnl__msg{flex-basis:100%}
.mbnl-faixa .mbnl__legal{margin:14px 0 0}
@media (max-width:760px){
  .mbnl{align-items:flex-end;padding:0}
  .mbnl__box{grid-template-columns:1fr;min-height:0;max-height:92vh;overflow:auto}
  .mbnl__lado{display:none}
  .mbnl__txt{padding:56px 22px 24px}
  .mbnl__t{font-size:26px}
  .mbnl-faixa__w{grid-template-columns:1fr;gap:24px}
  .mbnl-faixa__t{font-size:26px}
  .mbnl-faixa form{flex-direction:column}
  .mbnl-faixa .mbnl__bt{padding:16px;margin-top:10px}
}

/* 04/11/2026 · HERO EM DIVISÃO DUOTONE (Alexandre aprovou): sem véu; a mesma foto em duotone do lado do texto; elemento vazado na linha.
   --corte = fim da coluna do texto (computador); no celular a linha é horizontal (--corteY). Cores do texto: --hx (paleta). */
.hero.duo { --corte: calc(max(56px, (100vw - var(--larg)) / 2 + 56px) + 700px); color: var(--hx); }
.hero.duo .hero-veu, .hero-ed.duo .hero-veu { display: none; }
.hero-duo-def { position: absolute; width: 0; height: 0; }
.hero-duo { filter: url(#hero-duo); clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.hero-forma { position: absolute; z-index: 1; left: var(--corte); top: 62%; width: 190px; height: 190px; transform: translate(-50%, -50%); fill: none; stroke: #fff; stroke-width: 5; pointer-events: none; }
.hero.duo .hero-texto, .hero.duo .hero-texto a, .hero.duo .hero-olho, .hero.duo .hero-meta, .hero.duo .rotulo, .hero.duo .rotulo a { color: var(--hx); }
.hero.duo .hero-olho, .hero.duo .hero-meta { opacity: .92; }
.hero.duo .rotulo .los, .hero-ed.duo .rotulo .los { background: var(--hx); }
.hero.duo .hero-tit { font-family: var(--grot); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(38px, 4.4vw, 64px); }
.hero.duo .hero-ler { border-color: var(--hx); color: var(--hx); }
.hero.duo .hero-ler:hover { background: var(--hx); color: var(--hc); }
.hero.duo .assuntos-hero .chips a { color: var(--hx); border-color: var(--hx); }
.hero.duo .assuntos-hero .chips a span { color: var(--hx); opacity: .7; }
.hero.duo .assuntos-hero .chips a:hover, .hero.duo .assuntos-hero .chips a[aria-current="page"] { background: var(--hx); color: var(--hc); border-color: var(--hx); box-shadow: none; }
.hero.duo .assuntos-hero .chips a:hover span, .hero.duo .assuntos-hero .chips a[aria-current="page"] span { color: var(--hc); }
@media (max-width: 720px) {
  .hero.duo { --corteY: 30%; }
  .hero-duo { clip-path: inset(var(--corteY) 0 0 0); }
  .hero-forma { left: auto; right: 12%; top: var(--corteY); width: 92px; height: 92px; transform: translate(50%, -82%); }   /* acima da linha: no celular o título começa logo abaixo */
  .hero.duo .hero-tit { font-size: 34px; }
}

/* 06/11/2026 · página da newsletter (/blog/newsletter) */
.nl-pag{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;padding:8px 0 72px}
.nl-pag h2{font:600 26px/1.15 var(--grot);letter-spacing:-.01em;margin:0 0 20px;color:var(--ink)}
.nl-pag__oque ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.nl-pag__oque li{padding:18px 0;border-bottom:1px solid rgba(7,24,42,.15)}
.nl-pag__oque li a{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--kv)}
.nl-pag__oque li p{font:400 18px/1.5 var(--serif);color:var(--ink);margin:8px 0 0}
.nl-pag__nota{font:400 15px/1.5 var(--grot);color:var(--ink2);margin:18px 0 0}
.nl-pag__form{border:1px solid var(--ink);padding:36px 32px}
.nl-pag__form .mbnl__k{margin:0 0 12px}
@media (max-width:760px){.nl-pag{grid-template-columns:1fr;gap:32px}.nl-pag__form{padding:28px 20px}}

/* 06/11/2026 · chamada da newsletter no meio das mais lidas (molde Ginga36), no KV do blog: as classes do popup */
.nlm{background:#F3F8FC;color:var(--ink);padding:24px 26px;margin:32px 0;border-left:4px solid var(--kv)}
.nlm .mbnl__k{margin:0 0 10px}
.nlm__t{font:600 22px/1.2 var(--grot);letter-spacing:-.01em;margin:0 0 14px;color:var(--ink)}
.nlm__l{display:flex;gap:10px}.nlm__l .mbnl__in{flex:1;min-width:0;width:auto}.nlm__l .mbnl__bt{width:auto;margin:0;padding:0 24px;white-space:nowrap}
.nlm .mbnl__legal{margin:12px 0 0;font-size:11px}
@media(max-width:560px){.nlm__l{flex-direction:column}.nlm__l .mbnl__bt{padding:16px}}

/* 09/11/2026 · Compartilhar na linha do rótulo (à direita), Siga à direita da assinatura, alinhado com ele; no celular, abaixo do rótulo */
.m-rot-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.m-rot-linha .m-rot-share { margin-left: auto; }
@media (max-width: 600px) { .m-rot-linha .m-rot-share { margin-left: 0; flex-basis: 100%; } }