/* ==========================================================================
   york / blog — design system do blog da YORK
   Palco preto. A luz de cada frente sobre as peças. A linha das quatro cores
   como assinatura. Uma família tipográfica (Red Hat: Display, Text e Mono).
   O número verificado é o herói; as fontes são anotações na margem.
   ========================================================================== */

:root {
  --c-brand: #f04b2a; --c-growth: #918fdb; --c-tech: #61d1f3; --c-play: #64fc7d;
  --linha-york: linear-gradient(90deg, var(--c-brand) 0%, var(--c-growth) 38%, var(--c-tech) 70%, var(--c-play) 100%);
  --laranja: #f04b2a; --laranja-forte: #ff603c;

  --fundo: #050505; --palco: #0a0a0a; --sup: #121212; --sup-2: #181818;
  --fio: #232321; --fio-forte: #34342f;
  --tinta: #f4f4f1; --texto: #cfcfc8; --mudo: #85857e; --ok: #7be3a0; --nv: #f3c35b;

  --display: "Red Hat Display", system-ui, sans-serif;
  --texto-f: "Red Hat Text", system-ui, sans-serif;
  --mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --coluna: 38rem; --margem: 15.5rem; --sumario: 12rem;
  --borda: 14px;
  --f: var(--c-brand);
  color-scheme: dark;
}
html[data-frente="brand"] { --f: var(--c-brand); }
html[data-frente="growth"] { --f: var(--c-growth); }
html[data-frente="tech"] { --f: var(--c-tech); }
html[data-frente="play"] { --f: var(--c-play); }

/* Modo papel: a leitura vira papel; a capa, a barra, a chamada e o rodapé continuam palco. */
:root[data-theme="light"] {
  --c-brand: #c43a20; --c-growth: #5b57c7; --c-tech: #0b7aa0; --c-play: #17853c;
  --fundo: #f4f4f1; --palco: #f4f4f1; --sup: #ffffff; --sup-2: #ecebe6;
  --fio: #dcdbd4; --fio-forte: #c4c3bb;
  --tinta: #0b0b0b; --texto: #2b2b28; --mudo: #6a6a63; --ok: #17853c; --nv: #8a5a00;
  color-scheme: light;
}
:root[data-theme="light"] .capa, :root[data-theme="light"] .frente-cta, :root[data-theme="light"] .rodape,
:root[data-theme="light"] .barra, :root[data-theme="light"] .ticker, :root[data-theme="light"] .cartao.destaque {
  --c-brand: #f04b2a; --c-growth: #918fdb; --c-tech: #61d1f3; --c-play: #64fc7d;
  --fundo: #050505; --sup: #121212; --fio: #232321; --fio-forte: #34342f; --tinta: #f4f4f1; --texto: #cfcfc8; --mudo: #85857e; --ok: #7be3a0;
  color-scheme: dark;
}
:root[data-theme="light"][data-frente="brand"] .capa, :root[data-theme="light"][data-frente="brand"] .frente-cta { --f: var(--c-brand); }
:root[data-theme="light"][data-frente="growth"] .capa { --f: var(--c-growth); }
:root[data-theme="light"][data-frente="tech"] .capa { --f: var(--c-tech); }
:root[data-theme="light"][data-frente="play"] .capa { --f: var(--c-play); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 1.0625rem/1.7 var(--texto-f);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--f); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--f) 45%, transparent); color: #fff; }

.rotulo { font: 500 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mudo); }
.pilula { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--f); color: var(--f);
  border-radius: 999px; padding: .32rem .85rem; font: 500 .8rem/1 var(--texto-f); }
.lance-n { font: 500 .78rem/1 var(--mono); letter-spacing: .08em; color: var(--mudo); }

/* --- barra -------------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, #050505 84%, transparent);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); color: var(--tinta); }
.barra-in { max-width: 82rem; margin: 0 auto; padding: .9rem clamp(1rem, 4vw, 2.5rem); display: flex; align-items: center; gap: .9rem; }
.marca img { height: 26px; width: auto; }
.marca-blog { font: 500 .95rem/1 var(--mono); color: var(--mudo); text-decoration: none; letter-spacing: .02em; }
.marca-blog:hover { color: var(--tinta); }
.frentes-nav { display: flex; gap: 1.3rem; margin-left: 1.5rem; font-size: .9rem; }
.frentes-nav a, .rodape-frentes a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--mudo); transition: color .2s; }
.frentes-nav a:hover, .rodape-frentes a:hover { color: var(--tinta); }
.frentes-nav i, .rodape-frentes i, .filtros i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--f); box-shadow: 0 0 12px var(--f); }
.barra-dir { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.idiomas { display: flex; gap: .2rem; font: 500 .75rem/1 var(--mono); }
.idiomas a, .idiomas span { padding: .35rem .5rem; border-radius: 999px; text-decoration: none; color: var(--mudo); }
.idiomas span { color: var(--tinta); background: #1c1c1a; }
.idiomas a:hover { color: var(--tinta); }
.bt-conversar { display: inline-flex; align-items: center; gap: .55rem; background: var(--laranja); color: #120502;
  font: 600 .88rem/1 var(--texto-f); padding: .78rem 1.15rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  transition: background .2s, transform .2s; }
.bt-conversar:hover { background: var(--laranja-forte); transform: translateY(-1px); }
.modo { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid #2a2a27; background: transparent; cursor: pointer; display: grid; place-items: center; }
.modo span { width: .85rem; height: .85rem; border-radius: 50%; background: linear-gradient(90deg, #f4f4f1 50%, transparent 50%); border: 1.5px solid #f4f4f1; }
.modo:hover { border-color: #85857e; }

.linha-york { position: relative; height: 2px; background: var(--linha-york); opacity: .9; }
.barra .linha-york { background: #1a1a18; opacity: 1; }
.barra .progresso { position: absolute; inset: 0 auto 0 0; width: calc(var(--progresso, 0) * 100%); background: var(--linha-york);
  background-size: 100vw 100%; }
.pg-indice .barra .linha-york { background: var(--linha-york); opacity: .5; }
.faixa-previa { background: #2b2410; color: #f3c35b; text-align: center; font: 500 .75rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; padding: .6rem 1rem; }

/* --- capa (o palco) --------------------------------------------------------- */
.capa { position: relative; overflow: hidden; background: #050505; color: var(--tinta); isolation: isolate; }
.capa-luz { position: absolute; inset: 0; z-index: -1; background-image: url("tabuleiro-brand.webp");
  background-size: auto 112%; background-position: right -4rem top 0; background-repeat: no-repeat; }
html[data-frente="growth"] .capa-luz { background-image: url("tabuleiro-growth.webp"); }
html[data-frente="tech"] .capa-luz { background-image: url("tabuleiro-tech.webp"); }
html[data-frente="play"] .capa-luz { background-image: url("tabuleiro-play.webp"); }
.capa-luz::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, #050505 0%, #050505 30%, rgba(5,5,5,.55) 56%, rgba(5,5,5,0) 76%),
  linear-gradient(0deg, #050505 0%, rgba(5,5,5,0) 32%); }
.capa-luz.quatro { filter: blur(40px); inset: -15% -10% 0; background-image:
  radial-gradient(38% 60% at 14% -12%, color-mix(in srgb, var(--c-brand) 60%, transparent), transparent 70%),
  radial-gradient(34% 58% at 40% -16%, color-mix(in srgb, var(--c-growth) 55%, transparent), transparent 70%),
  radial-gradient(34% 58% at 64% -16%, color-mix(in srgb, var(--c-tech) 48%, transparent), transparent 70%),
  radial-gradient(38% 60% at 88% -12%, color-mix(in srgb, var(--c-play) 42%, transparent), transparent 70%); opacity: .6; }
.capa-luz.quatro::after { background: linear-gradient(0deg, #050505 0%, rgba(5,5,5,0) 60%); }
.capa-in { max-width: 82rem; margin: 0 auto; padding: clamp(3.5rem, 9vw, 7.5rem) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.trilha { display: flex; flex-wrap: wrap; gap: .55rem; font: 400 .78rem/1.4 var(--mono); color: var(--mudo); margin-bottom: 2.2rem; }
.trilha a { text-decoration: none; } .trilha a:hover { color: var(--tinta); }
.capa-tags { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.capa h1 { font: 700 clamp(2.5rem, 6.2vw, 5.4rem)/.98 var(--display); letter-spacing: -.038em; margin: 0 0 1.6rem; max-width: 15.5ch;
  color: #fff; text-wrap: balance; }
.capa .linha-fina { font: 400 clamp(1.08rem, 1.6vw, 1.32rem)/1.55 var(--texto-f); color: #b9b9b2; max-width: 40rem; margin: 0 0 2.4rem; text-wrap: pretty; }
.capa-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font: 400 .8rem/1 var(--mono); color: var(--mudo); letter-spacing: .03em; }
.capa-meta .ok { color: var(--ok); }
.capa-meta .assina { color: var(--tinta); }

/* índice: o nome do blog como assinatura */
.capa-indice .capa-in { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.capa .titulo-blog { font: 800 clamp(5rem, 17vw, 15rem)/.82 var(--display); letter-spacing: -.06em; margin: 0; max-width: none; }
.titulo-blog span { color: var(--laranja); }

/* --- número-herói ----------------------------------------------------------- */
.heroi { max-width: 82rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); display: grid; grid-template-columns: auto minmax(0, 30rem);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end; position: relative; }
.heroi::before { content: ""; position: absolute; left: clamp(1rem, 4vw, 2.5rem); right: clamp(1rem, 4vw, 2.5rem); top: 0; height: 1px; background: var(--fio); }
.heroi-num { font: 800 clamp(4.8rem, 14vw, 11.5rem)/.86 var(--display); letter-spacing: -.055em; color: var(--f); padding-top: 2.6rem;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 80px color-mix(in srgb, var(--f) 30%, transparent); white-space: nowrap; }
.heroi-txt { padding-bottom: .8rem; }
.heroi-txt p { font: 500 1.12rem/1.5 var(--texto-f); color: var(--tinta); margin: 0 0 1rem; }
.heroi-fonte { display: inline-flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; font: 400 .78rem/1.3 var(--mono); color: var(--mudo); text-decoration: none; }
.heroi-fonte span { color: var(--f); }
.heroi-fonte b { font-weight: 500; color: var(--ok); }

/* --- leitura: sumário | texto | margem -------------------------------------------- */
.leitura { display: grid; grid-template-columns: var(--sumario) minmax(0, calc(var(--coluna) + var(--margem) + 3rem));
  justify-content: center; column-gap: clamp(2rem, 4vw, 4.5rem); padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 2.5rem) 2rem; }
.sumario { position: sticky; top: 6.5rem; align-self: start; font-size: .84rem; }
.sumario .rotulo { margin-bottom: 1rem; }
.sumario ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--fio); }
.sumario a { display: grid; grid-template-columns: 1.8rem 1fr; padding: .45rem 0 .45rem .9rem; margin-left: -1px; border-left: 1px solid transparent;
  text-decoration: none; color: var(--mudo); line-height: 1.35; transition: color .2s, border-color .2s; }
.sumario a span { font: 400 .72rem/1.6 var(--mono); }
.sumario a:hover, .sumario a.ativo { color: var(--tinta); border-left-color: var(--f); }
.sumario a.ativo span { color: var(--f); }

.fluxo { min-width: 0; }
.bloco { display: grid; grid-template-columns: minmax(0, var(--coluna)) var(--margem); column-gap: 3rem; align-items: start; }
.bloco > :first-child { grid-column: 1; }
.bloco.largo > :first-child { grid-column: 1 / -1; }
.fluxo p { margin: 0 0 1.35rem; text-wrap: pretty; }
.fluxo strong { color: var(--tinta); font-weight: 600; }
.fluxo a:not(.anota) { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--f); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.fluxo a:not(.anota):hover { color: var(--f); }

.resposta { margin-bottom: 3rem; }
.resposta > .rotulo { grid-column: 1; grid-row: 1; margin-bottom: 1rem; color: var(--f); }
.resposta > p { grid-column: 1; grid-row: 2; }
.resposta p { font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.55 var(--texto-f); color: var(--tinta); letter-spacing: -.005em; }
.resposta .margem { grid-row: 2; }

/* notas na margem: o caderno de anotações aberto */
.margem { grid-column: 2; display: grid; gap: .9rem; padding-top: .3rem; }
.bloco.largo > .margem { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.2rem; margin: -1rem 0 2.2rem; }
.anota { display: grid; grid-template-columns: 1.4rem 1fr; gap: .15rem .5rem; text-decoration: none; font-size: .78rem; line-height: 1.45;
  color: var(--mudo); padding-left: .8rem; border-left: 1px solid var(--fio); transition: border-color .2s, color .2s; }
.anota:hover { border-left-color: var(--f); color: var(--texto); }
.anota-n { grid-row: span 3; font: 500 .72rem/1.5 var(--mono); color: var(--f); }
.anota-fonte { font: 500 .72rem/1.5 var(--mono); color: var(--tinta); text-transform: lowercase; }
.anota-trecho { font-style: italic; }
.anota-titulo { color: var(--texto); }
.selo { font: 500 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.selo.ok { color: var(--ok); } .selo.nv { color: var(--nv); }
sup.nota { font: 500 .66em/0 var(--mono); margin-left: .12em; }
.fluxo sup.nota a, .heroi sup.nota a { color: var(--f); text-decoration: none; padding: 0 .1em; }
sup.orfa a { color: #ff6b6b !important; }

/* o que fica */
.fica { margin: 0 0 3.5rem; max-width: calc(var(--coluna) + var(--margem) + 3rem); }
.fica .rotulo { margin-bottom: .6rem; }
.fica ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fio); }
.fica li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--fio); }
.fica-n { font: 500 .8rem/1.9 var(--mono); color: var(--f); }
.fica p { margin: 0; color: var(--tinta); font-size: 1.04rem; line-height: 1.55; }

/* seções numeradas */
.secao { margin-top: 4.5rem; }
.secao-cab { max-width: var(--coluna); margin-bottom: 1.6rem; }
.secao-n { display: block; font: 500 .8rem/1 var(--mono); color: var(--f); letter-spacing: .1em; margin-bottom: .9rem;
  padding-top: 1.2rem; border-top: 1px solid var(--fio); }
.secao h2 { font: 700 clamp(1.7rem, 3vw, 2.35rem)/1.1 var(--display); letter-spacing: -.028em; color: var(--tinta); margin: 0; text-wrap: balance; }
.fluxo h3 { font: 700 1.25rem/1.3 var(--display); letter-spacing: -.015em; color: var(--tinta); margin: 2rem 0 .7rem; }

/* lista numerada = o processo da York (passos ligados por uma linha) */
.passos { list-style: none; padding: 0; margin: .5rem 0 2rem; position: relative; }
.passos::before { content: ""; position: absolute; left: 1.05rem; top: 1.2rem; bottom: 1.6rem; width: 1px;
  background: linear-gradient(var(--f), color-mix(in srgb, var(--f) 10%, transparent)); }
.passos li { display: grid; grid-template-columns: 2.1rem 1fr; gap: 1.1rem; padding: .35rem 0 1.1rem; position: relative; }
.passo-n { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--fundo);
  border: 1px solid var(--f); color: var(--f); font: 500 .72rem/1 var(--mono); position: relative; z-index: 1; }
.passos li > div { padding-top: .2rem; }
.lista { padding-left: 1.1rem; margin: 0 0 1.8rem; }
.lista li { margin-bottom: .55rem; }
.lista li::marker { color: var(--f); }

/* tabelas */
.tabela { overflow-x: auto; margin: .5rem 0 2.2rem; border-top: 1px solid var(--fio-forte); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--fio); vertical-align: top; }
th { font: 500 .7rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mudo); }
td:first-child { color: var(--tinta); font-weight: 500; }

/* FAQ */
.faq { margin-top: 5rem; max-width: var(--coluna); }
.faq .rotulo { margin-bottom: 1rem; }
.faq details { border-top: 1px solid var(--fio); }
.faq details:last-of-type { border-bottom: 1px solid var(--fio); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; font: 600 1.12rem/1.35 var(--display); color: var(--tinta); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--fio-forte); position: relative; transition: border-color .2s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1px; background: var(--f); transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.faq details[open] summary i { border-color: var(--f); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq details p { margin: 0 0 1.4rem; max-width: 34rem; }

/* ficha do artigo: o rigor à vista */
.ficha { margin-top: 5rem; max-width: calc(var(--coluna) + var(--margem) + 3rem); }
.ficha .rotulo { margin-bottom: 1rem; }
.ficha dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 1.4rem; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.ficha dl > div { padding: 1.3rem 1rem 1.3rem 0; }
.ficha dl > div + div { padding-left: 1.2rem; border-left: 1px solid var(--fio); }
.ficha dt { font: 700 clamp(1.6rem, 3vw, 2.3rem)/1 var(--display); letter-spacing: -.03em; color: var(--tinta); margin-bottom: .5rem; }
.ficha dl > div:nth-child(2) dt { color: var(--ok); }
.ficha dd { margin: 0; font: 400 .75rem/1.4 var(--mono); color: var(--mudo); }
.ficha p { font-size: .9rem; color: var(--mudo); max-width: var(--coluna); }
.ficha p b { color: var(--tinta); font-weight: 600; }

/* fontes */
.fontes { margin-top: 4rem; max-width: calc(var(--coluna) + var(--margem) + 3rem); }
.fontes h2 { margin: 0 0 .6rem; }
.fontes-sub { font-size: .88rem; color: var(--mudo); max-width: var(--coluna); }
.fontes ol { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.fontes li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--fio); transition: background .4s; }
.fontes li:target { background: color-mix(in srgb, var(--f) 9%, transparent); }
.fonte-n { font: 500 .8rem/1.7 var(--mono); color: var(--f); }
.fonte-dom { display: block; font: 400 .74rem/1.4 var(--mono); color: var(--mudo); margin-top: .3rem; }
.fontes li a { color: var(--tinta); font-weight: 500; text-decoration: none; line-height: 1.4; }
.fontes li a:hover { color: var(--f); }
.fluxo .fontes li a { text-decoration: none; }
.fluxo .fontes li a:hover { color: var(--f); }
.fontes blockquote { margin: .7rem 0 .6rem; padding-left: .9rem; border-left: 2px solid var(--f); color: var(--texto); font-style: italic; font-size: .92rem; line-height: 1.55; }
.fonte-pe { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 400 .72rem/1.4 var(--mono); color: var(--mudo); }

/* chamada da frente: o card das frentes da York, em tamanho de palco */
.frente-cta { padding: 2rem clamp(1rem, 4vw, 2.5rem) 0; }
.frente-cta-in { max-width: 82rem; margin: 0 auto; position: relative; overflow: hidden; border: 1px solid #222; border-radius: var(--borda);
  background: radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--f) 42%, transparent), transparent 60%), #070707;
  color: #f4f4f1; padding: clamp(2rem, 5vw, 4rem); }
.frente-cta-in .rotulo { color: var(--f); }
.frente-cta h2 { font: 700 clamp(2.2rem, 5vw, 3.8rem)/1 var(--display); letter-spacing: -.04em; margin: .8rem 0 .8rem; color: #fff; }
.frente-cta p { font-size: 1.15rem; color: #b9b9b2; margin: 0 0 2rem; max-width: 30rem; }
.cta-bts { display: flex; flex-wrap: wrap; gap: .8rem; }
.bt-frente { display: inline-flex; gap: .6rem; align-items: center; border: 1px solid var(--f); color: var(--f); border-radius: 999px;
  padding: .78rem 1.15rem; font: 600 .88rem/1 var(--texto-f); text-decoration: none; transition: background .2s, color .2s; }
.bt-frente:hover { background: var(--f); color: #050505; }

/* próximo artigo */
.proximo { display: grid; grid-template-columns: 1fr auto; gap: .6rem 2rem; align-items: end; max-width: 82rem; margin: 2rem auto 0;
  padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 4rem; text-decoration: none; color: var(--tinta); }
.proximo .rotulo { grid-column: 1 / -1; color: var(--f); }
.proximo strong { font: 700 clamp(1.6rem, 3.5vw, 2.8rem)/1.08 var(--display); letter-spacing: -.035em; max-width: 24ch; }
.proximo .seta { font: 400 2.5rem/1 var(--display); color: var(--f); transition: transform .3s; }
.proximo:hover .seta { transform: translateX(.5rem); }

/* --- índice -------------------------------------------------------------- */
.ticker { border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); background: #050505; color: var(--tinta);
  display: grid; grid-template-columns: auto 1fr; align-items: stretch; }
.ticker > .rotulo { padding: 0 1.4rem 0 clamp(1rem, 4vw, 2.5rem); white-space: nowrap; border-right: 1px solid var(--fio); display: flex; align-items: center; }
.ticker-trilho { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-fita { display: flex; width: max-content; animation: fita 70s linear infinite; }
.ticker-trilho:hover .ticker-fita { animation-play-state: paused; }
.ticker-eco { display: contents; }
.ticker a { display: inline-flex; align-items: baseline; gap: .7rem; padding: 1.05rem 2rem; text-decoration: none; border-right: 1px solid var(--fio); white-space: nowrap; }
.ticker b { font: 700 1.25rem/1 var(--display); color: var(--f); letter-spacing: -.02em; }
.ticker span { font-size: .85rem; color: #b9b9b2; }
.ticker em { font: 400 .7rem/1 var(--mono); color: var(--mudo); font-style: normal; }
@keyframes fita { to { transform: translateX(-50%); } }

.indice { max-width: 82rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 5rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtros button { display: inline-flex; align-items: center; gap: .5rem; font: 500 .85rem/1 var(--texto-f); color: var(--mudo);
  background: transparent; border: 1px solid var(--fio-forte); border-radius: 999px; padding: .6rem 1rem; cursor: pointer; transition: all .2s; }
.filtros button:hover { color: var(--tinta); }
.filtros button[aria-pressed="true"] { color: var(--tinta); border-color: var(--f, var(--tinta)); background: color-mix(in srgb, var(--f, #888) 12%, transparent); }
.filtros button[data-filtro="todos"] { --f: var(--tinta); }
.filtros sup { font: 400 .68rem/1 var(--mono); color: var(--mudo); }
.grade-artigos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cartao { position: relative; border: 1px solid var(--fio); border-radius: var(--borda); background: var(--sup); overflow: hidden; isolation: isolate;
  transition: border-color .3s, transform .3s; }
.cartao:hover { border-color: color-mix(in srgb, var(--f) 55%, var(--fio)); transform: translateY(-2px); }
.cartao[hidden] { display: none; }
.cartao > a { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; text-decoration: none; color: var(--texto); }
.cartao-luz { position: absolute; inset: 0; z-index: -1; background: radial-gradient(85% 60% at 0% 0%, color-mix(in srgb, var(--f) 30%, transparent), transparent 62%); opacity: .8; transition: opacity .3s; }
.cartao:hover .cartao-luz { opacity: 1; }
.cartao-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 2.2rem; }
.cartao-frente { font: 600 .72rem/1 var(--texto-f); letter-spacing: .1em; text-transform: uppercase; color: var(--f); }
.cartao-num { font: 800 clamp(3rem, 5vw, 4.3rem)/.9 var(--display); letter-spacing: -.05em; color: var(--tinta); margin-bottom: .7rem; white-space: nowrap; }
.cartao-leg { font-size: .82rem; line-height: 1.45; color: var(--mudo); margin: 0 0 1.8rem; }
.cartao h2 { font: 700 1.32rem/1.18 var(--display); letter-spacing: -.02em; color: var(--tinta); margin: auto 0 .7rem; text-wrap: balance; }
.cartao-teaser { font-size: .9rem; line-height: 1.5; color: var(--mudo); margin: 0 0 1.4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 400 .72rem/1.3 var(--mono); color: var(--mudo); padding-top: 1rem; border-top: 1px solid var(--fio); }
.cartao-meta .seta { margin-left: auto; color: var(--f); font-size: 1rem; transition: transform .3s; }
.cartao:hover .seta { transform: translateX(.3rem); }
.cartao.destaque { grid-column: 1 / -1; background: #070707; border-color: #1f1f1d; }
.cartao.destaque > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; padding: clamp(1.8rem, 4vw, 3rem); min-height: 26rem; color: var(--texto); }
.cartao.destaque .cartao-luz { background: radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--f) 40%, transparent), transparent 60%); }
.cartao.destaque .cartao-topo { grid-column: 1 / -1; }
.cartao.destaque .rotulo { color: var(--tinta); margin-right: auto; }
.cartao.destaque .cartao-num { font-size: clamp(5rem, 11vw, 9.5rem); color: var(--f); grid-column: 1; grid-row: 2 / span 2; align-self: end; }
.cartao.destaque .cartao-leg { grid-column: 1; grid-row: 4; color: #9a9a93; max-width: 26rem; margin-bottom: 0; }
.cartao.destaque h2 { grid-column: 2; grid-row: 2; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.04; letter-spacing: -.035em; align-self: end; color: #fff; }
.cartao.destaque .cartao-teaser { grid-column: 2; grid-row: 3; -webkit-line-clamp: 4; color: #9a9a93; }
.cartao.destaque .cartao-meta { grid-column: 2; grid-row: 4; align-self: end; border-color: #222; }
.vazio { color: var(--mudo); padding: 4rem 0; font: 400 1rem/1.5 var(--mono); }

/* --- rodapé ------------------------------------------------------------------ */
.rodape { background: #050505; color: var(--tinta); margin-top: 4rem; }
.rodape-in { max-width: 82rem; margin: 0 auto; padding: 4rem clamp(1rem, 4vw, 2.5rem) 2.5rem; display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: start; }
.rodape-marca img { width: clamp(8rem, 14vw, 12rem); height: auto; }
.rodape-frentes { display: flex; flex-direction: column; gap: .8rem; font-size: .9rem; }
.rodape-pe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--fio); font: 400 .74rem/1 var(--mono); color: var(--mudo); }
.rodape-pe a { text-decoration: none; } .rodape-pe a:hover { color: var(--tinta); }

/* --- responsivo ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .leitura { grid-template-columns: minmax(0, calc(var(--coluna) + var(--margem) + 3rem)); }
  .sumario { display: none; }
  .frentes-nav { display: none; }
}
@media (max-width: 960px) {
  .bloco { grid-template-columns: minmax(0, 1fr); }
  .margem { display: none; }
  .leitura { grid-template-columns: minmax(0, var(--coluna)); }
  .heroi { grid-template-columns: 1fr; gap: 1rem; }
  .heroi-num { padding-top: 2rem; }
  .grade-artigos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao.destaque > a { grid-template-columns: 1fr; }
  .cartao.destaque .cartao-num, .cartao.destaque .cartao-leg, .cartao.destaque h2, .cartao.destaque .cartao-teaser, .cartao.destaque .cartao-meta { grid-column: 1; grid-row: auto; }
  .cartao.destaque h2 { margin-top: 1.5rem; }
  .rodape-in { grid-template-columns: 1fr 1fr; }
  .rodape-marca { grid-column: 1 / -1; }
  .capa-luz { background-size: auto 100%; background-position: right -14rem top 0; opacity: .6; }
}
@media (max-width: 640px) {
  body { font-size: 1.02rem; }
  .barra .bt-conversar, .marca-blog { display: none; }
  .grade-artigos { grid-template-columns: 1fr; }
  .ficha dl { grid-template-columns: 1fr 1fr; }
  .ficha dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ficha dl > div:nth-child(n+3) { border-top: 1px solid var(--fio); }
  .rodape-in { grid-template-columns: 1fr; }
  .capa-luz { opacity: .38; }
  .proximo { grid-template-columns: 1fr; }
  .ticker { grid-template-columns: 1fr; }
  .ticker > .rotulo { padding: .8rem 1rem; border-right: 0; border-bottom: 1px solid var(--fio); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .ticker-trilho { overflow-x: auto; }
}
@media print {
  .barra, .frente-cta, .sumario, .margem, .modo, .ticker, .rodape, .capa-luz { display: none !important; }
  body, .capa { background: #fff; color: #000; }
  .capa h1, .secao h2, .fluxo p { color: #000; }
}