/* ==========================================================================
   Renova Era — folha de estilos (Direção B: revista ambiental)
   1. Tokens   2. Base   3. Layout   4. Cabeçalho   5. Componentes
   6. Home   7. Editoria   8. Matéria   9. Busca e páginas   10. Rodapé   11. Responsivo
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Cores — propostas de interface, não valores oficiais da logo */
  --verde-profundo: #075347;
  --verde-profundo-escuro: #053d34;
  --verde-medio: #358C52;
  --verde-claro: #9FC45B;
  --azul-petroleo: #236B7A;
  --amarelo: #E4CE63;
  --fundo: #F7F9F6;
  --branco: #FFFFFF;
  --texto: #172B26;
  --texto-corpo: #26382F;
  --texto-2: #5C6D65;
  --linha: #D5DED8;
  --erro: #A12A1E;
  --erro-fundo: #FBEFEC;

  /* Editorias: texto com contraste >= 4,5:1 sobre branco + marcador. O nome sempre aparece escrito. */
  --ed-ambiente: #2B7A47;   --mk-ambiente: #358C52;
  --ed-sustent: #55741A;    --mk-sustent: #9FC45B;
  --ed-esg: #236B7A;        --mk-esg: #236B7A;
  --ed-energia: #84650A;    --mk-energia: #E4CE63;
  --ed-mobilidade: #25558F; --mk-mobilidade: #25558F;

  /* Tipografia (duas famílias) */
  --f-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-texto: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espaçamento */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  /* Forma */
  --raio: 2px;
  --container: 1280px;
  --gutter: 20px;
  --leitura: 680px;

  /* Movimento */
  --t: 200ms ease;
}
@media (min-width: 900px) { :root { --gutter: 32px; } }

.ed-ambiente { --ed: var(--ed-ambiente); --mk: var(--mk-ambiente); }
.ed-sustent { --ed: var(--ed-sustent); --mk: var(--mk-sustent); }
.ed-esg { --ed: var(--ed-esg); --mk: var(--mk-esg); }
.ed-energia { --ed: var(--ed-energia); --mk: var(--mk-energia); }
.ed-mobilidade { --ed: var(--ed-mobilidade); --mk: var(--mk-mobilidade); }

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--f-texto); font-size: 16px; line-height: 1.5; color: var(--texto); background: var(--branco); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--azul-petroleo); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s4); top: -120px; z-index: 200; background: var(--verde-profundo); color: #fff; padding: var(--s3) var(--s4); font-weight: 600; }
.skip:focus { top: var(--s2); }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Mídia: espaço reservado (aspect-ratio) evita saltos de layout */
.media { position: relative; overflow: hidden; background: #DDE5DF; }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); transition: transform 250ms ease; }
a:hover > .media img, a:focus-visible > .media img, a:hover .media img, a:focus-visible .media img { transform: scale(1.03); }

/* 3. FAIXA DE PROTÓTIPO ---------------------------------------------------- */
.proto-bar { background: var(--texto); color: #fff; font-size: 12px; line-height: 1.4; padding: 6px 0; }
.proto-bar .container { display: flex; gap: var(--s4); justify-content: space-between; flex-wrap: wrap; }
.proto-bar strong { font-weight: 600; }

/* 4. CABEÇALHO ------------------------------------------------------------- */
.site-header { background: var(--branco); border-bottom: 1px solid var(--linha); }
.masthead { display: grid; grid-template-columns: auto 1fr; gap: var(--s8); align-items: stretch; padding-block: var(--s3); }
.brand { display: block; }
.brand img { height: 124px; width: auto; }
.masthead-right { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-block: var(--s2); }
.tools { display: flex; align-items: center; gap: var(--s3); }

.btn, .icon-btn, .text-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; min-width: 44px; padding: 0 var(--s4);
  border: 1px solid transparent; background: none; border-radius: var(--raio);
  font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.icon-btn { padding: 0; }
.text-btn:hover, .icon-btn:hover { background: var(--fundo); }
.btn-primary { background: var(--verde-profundo); color: #fff; }
.btn-primary:hover { background: var(--verde-profundo-escuro); }
.btn-outline { border-color: var(--verde-profundo); color: var(--verde-profundo); background: var(--branco); }
.btn-outline:hover { background: var(--verde-profundo); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.icon-btn.menu-btn { display: none; }

.main-nav ul { display: flex; gap: var(--s8); }
.main-nav a { position: relative; display: block; padding: 10px 0; font-weight: 500; font-size: 17px; transition: color var(--t); }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--mk); transform: scaleX(0); transform-origin: left; transition: transform var(--t); }
.main-nav a:hover { color: var(--verde-profundo); }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current], .main-nav a.is-section { }
.main-nav a[aria-current="page"], .main-nav a.is-section { font-weight: 700; color: var(--verde-profundo); }
.main-nav a[aria-current="page"]::after, .main-nav a.is-section::after { transform: scaleX(1); }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }

/* Barra compacta ao rolar: sem logo (não inventa versão da marca) */
.sticky-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--branco); border-bottom: 1px solid var(--linha); transform: translateY(-100%); visibility: hidden; transition: transform var(--t), visibility 0s linear 200ms; }
.sticky-bar.is-visible { transform: translateY(0); visibility: visible; transition: transform var(--t), visibility 0s; }
.sticky-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); min-height: 52px; }
.sticky-bar .main-nav a { padding: 12px 0; font-size: 15px; }
.sticky-bar .home-link { font-family: var(--f-titulo); font-weight: 600; font-size: 17px; }

.panel { border-top: 1px solid var(--linha); background: var(--branco); }
.menu-panel ul { padding-block: var(--s2); }
.menu-panel li + li { border-top: 1px solid var(--linha); }
.menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-family: var(--f-titulo); font-weight: 500; font-size: 22px; }
.menu-panel a[aria-current="page"], .menu-panel a.is-section { color: var(--verde-profundo); font-weight: 700; }
.menu-panel a[aria-current="page"]::after, .menu-panel a.is-section::after { content: ''; width: 10px; height: 10px; background: var(--mk); }
.menu-panel .panel-actions { padding-block: var(--s2) var(--s4); }
.search-panel form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding-block: var(--s4); }

.field { display: grid; gap: var(--s2); }
.field label { font-weight: 600; font-size: 14px; }
.input { width: 100%; min-height: 48px; padding: 0 var(--s4); border: 1px solid var(--texto-2); border-radius: var(--raio); background: var(--branco); font-size: 16px; transition: border-color var(--t), box-shadow var(--t); }
.input:focus { outline: 0; border-color: var(--azul-petroleo); box-shadow: 0 0 0 3px rgba(35,107,122,.25); }
.input[aria-invalid="true"] { border-color: var(--erro); }
.search-panel .input { flex: 1 1 260px; width: auto; }
.msg { font-size: 14px; line-height: 1.45; }
.msg-erro { color: var(--erro); background: var(--erro-fundo); border-left: 3px solid var(--erro); padding: var(--s2) var(--s3); }
.msg-ok { color: var(--verde-profundo); background: var(--fundo); border-left: 3px solid var(--verde-medio); padding: var(--s2) var(--s3); }

/* 5. COMPONENTES EDITORIAIS ------------------------------------------------ */
.tag { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ed, var(--verde-profundo)); margin-bottom: var(--s2); }
.tag::before { content: ''; width: 24px; height: 3px; background: var(--mk, var(--verde-medio)); flex: none; }
.meta { display: flex; flex-wrap: wrap; font-size: 13px; color: var(--texto-2); line-height: 1.3; }
.meta > * + *::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 var(--s3); }
.badge-demo { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 2px 6px; }

.titulo-link { transition: color var(--t); }
a:hover .titulo-link, a:focus-visible .titulo-link { color: var(--verde-profundo); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* Cartão vertical */
.card { display: block; }
.card .media { aspect-ratio: 3 / 2; margin-bottom: var(--s4); }
.card :is(h2, h3) { font-family: var(--f-titulo); font-weight: 500; font-size: 22px; line-height: 1.2; margin-bottom: var(--s3); text-wrap: balance; }
.card .resumo { font-size: 15px; line-height: 1.55; color: var(--texto-corpo); margin-bottom: var(--s3); }
/* Cartão horizontal */
.card-h { display: grid; grid-template-columns: 148px 1fr; gap: var(--s4); align-items: start; }
.card-h .media { aspect-ratio: 4 / 3; }
.card-h :is(h2, h3) { font-family: var(--f-titulo); font-weight: 500; font-size: 19px; line-height: 1.2; margin-bottom: var(--s2); }
/* Item de lista (sem foto) */
.item { display: block; padding-block: var(--s4); }
.item :is(h2, h3) { font-family: var(--f-titulo); font-weight: 500; font-size: 20px; line-height: 1.22; margin-bottom: var(--s2); }
.lista > li { border-top: 1px solid var(--linha); }
.lista > li:last-child { border-bottom: 1px solid var(--linha); }

/* Cabeçalho de seção */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s8); }
.section-head h2 { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: -.015em; }
.section-head h2::after { content: ''; display: block; width: 64px; height: 4px; background: var(--mk, var(--amarelo)); margin-top: var(--s3); }
.section-head h2 a:hover { color: var(--verde-profundo); }
.more { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: 15px; color: var(--verde-profundo); min-height: 44px; white-space: nowrap; }
.more .i { width: 18px; height: 18px; transition: transform var(--t); }
.more:hover .i { transform: translateX(3px); }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

.bloco { padding-block: var(--s16); }
.bloco + .bloco { padding-top: 0; }
.bloco--sep { border-top: 1px solid var(--linha); padding-top: var(--s16) !important; }

/* Breadcrumb */
.breadcrumb { padding-block: var(--s4) 0; font-size: 14px; color: var(--texto-2); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); }
.breadcrumb li + li::before { content: '/'; margin-right: var(--s2); color: var(--linha); }
.breadcrumb a { text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--verde-profundo); text-decoration-color: currentColor; }
.breadcrumb [aria-current] { color: var(--texto); font-weight: 500; }

/* Newsletter */
.newsletter { background: var(--verde-profundo); color: #fff; }
.newsletter .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s12); padding-block: var(--s12); align-items: center; }
.newsletter h2 { font-family: var(--f-titulo); font-weight: 500; font-size: 36px; line-height: 1.1; letter-spacing: -.01em; margin-bottom: var(--s3); text-wrap: balance; }
.newsletter p.desc { color: #E3EEE9; max-width: 52ch; }
.newsletter form { display: grid; gap: var(--s3); }
.newsletter label { font-weight: 600; font-size: 14px; }
.newsletter .linha { display: flex; gap: var(--s3); }
.newsletter .input { border-color: #fff; }
.newsletter .btn-primary { background: var(--amarelo); color: var(--texto); white-space: nowrap; }
.newsletter .btn-primary:hover { background: #F1DD7B; }
.newsletter .small { font-size: 13px; color: #CFE0D9; }
.newsletter .small a { text-decoration: underline; text-underline-offset: 3px; }
.newsletter .msg-erro { background: #fff; }
.newsletter .msg-ok { background: #fff; color: var(--verde-profundo); }

/* 6. HOME ------------------------------------------------------------------ */
.opening { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s8); padding-top: var(--s8); align-items: start; }
.lead { grid-column: 1 / span 8; }
.lead-link { display: block; }
.lead-media { aspect-ratio: 16 / 10; }
.lead-card { position: relative; width: 82%; margin-top: -88px; padding: var(--s6) var(--s8) 0 0; background: var(--branco); display: grid; gap: var(--s3); justify-items: start; }
.lead-title { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -.012em; font-variation-settings: 'opsz' 96; text-wrap: balance; transition: color var(--t); }
.lead-link:hover .lead-title, .lead-link:focus-visible .lead-title { color: var(--verde-profundo); }
.lead-dek { font-size: 18px; line-height: 1.55; color: var(--texto-corpo); max-width: 600px; }
.side { grid-column: 9 / span 4; display: grid; gap: var(--s8); padding-top: 0; }
.side .card :is(h2, h3) { font-size: 26px; }
.side-compact { border-top: 1px solid var(--linha); padding-top: var(--s6); }

.latest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s12) var(--s8); }

/* Seções das editorias: cinco composições */
.secao-ed { padding-block: var(--s12); border-top: 1px solid var(--linha); }
.secao-ed .section-head { margin-bottom: var(--s6); }
.secao-ed .meta { margin-top: var(--s2); }

.sd-destaque-lista { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s12); }
.sd-destaque-lista .card .media { aspect-ratio: 3 / 2; }
.sd-destaque-lista .card :is(h2, h3) { font-size: 30px; }

.sd-faixa-colunas .faixa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); align-items: center; padding-bottom: var(--s8); margin-bottom: var(--s6); border-bottom: 1px solid var(--linha); }
.sd-faixa-colunas .faixa .media { aspect-ratio: 16 / 10; order: 2; }
.sd-faixa-colunas .faixa h3 { font-size: 32px; }
.sd-faixa-colunas .colunas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); }
.sd-faixa-colunas .colunas .item { padding-block: 0; }
.sd-faixa-colunas .colunas > li + li { border-left: 1px solid var(--linha); padding-left: var(--s8); }

.sd-lista-destaque { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s12); }
.sd-lista-destaque .card { order: 2; }
.sd-lista-destaque .lista { order: 1; align-self: start; }
.sd-lista-destaque .card .media { aspect-ratio: 16 / 10; }
.sd-lista-destaque .card :is(h2, h3) { font-size: 30px; }

.sd-grade-assimetrica { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s8); }
.sd-grade-assimetrica .card.principal { grid-column: 1 / span 7; grid-row: 1 / span 3; }
.sd-grade-assimetrica .card.principal .media { aspect-ratio: 4 / 3.2; }
.sd-grade-assimetrica .card.principal :is(h2, h3) { font-size: 32px; }
.sd-grade-assimetrica .lateral { grid-column: 8 / span 5; grid-row: 1 / span 3; display: grid; gap: var(--s6); align-content: start; }
.sd-grade-assimetrica .lateral > * + * { border-top: 1px solid var(--linha); padding-top: var(--s6); }

.sd-cards-horizontais { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); align-items: start; }
.sd-cards-horizontais .principal { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s8); align-items: center; background: var(--fundo); padding: var(--s6); }
.sd-cards-horizontais .principal .media { aspect-ratio: 16 / 9; }
.sd-cards-horizontais .principal h3 { font-family: var(--f-titulo); font-weight: 500; font-size: 30px; line-height: 1.12; margin-bottom: var(--s3); text-wrap: balance; }
.sd-cards-horizontais .principal .resumo, .sd-faixa-colunas .faixa .resumo { font-size: 16px; line-height: 1.55; color: var(--texto-corpo); margin-bottom: var(--s3); }
.sd-cards-horizontais .item { padding-block: 0; }
.sd-faixa-colunas .faixa h3 { font-family: var(--f-titulo); font-weight: 500; line-height: 1.12; margin-bottom: var(--s3); text-wrap: balance; }

/* Em foco */
.em-foco { background: var(--fundo); border-top: 4px solid var(--azul-petroleo); }
.em-foco .container { padding-block: var(--s12); }
.em-foco .cabeca { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s12); align-items: end; margin-bottom: var(--s8); }
.em-foco .rotulo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-petroleo); margin-bottom: var(--s2); }
.em-foco h2 { font-family: var(--f-titulo); font-weight: 500; font-size: 40px; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.em-foco .apresentacao { color: var(--texto-corpo); font-size: 17px; line-height: 1.55; }
.em-foco .foco-corpo { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s12); }
.em-foco .foco-corpo .card .media { aspect-ratio: 16 / 10; }
.em-foco .foco-corpo .card :is(h2, h3) { font-size: 30px; }
.em-foco .lista > li { border-color: #C9D5CD; }

/* Mais lidas + Entenda */
.duplo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s12); }
.duplo h2 { font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: 32px; line-height: 1.1; margin-bottom: var(--s2); }
.duplo .nota { font-size: 13px; color: var(--texto-2); margin-bottom: var(--s4); }
.ranking { counter-reset: r; }
.ranking li { border-top: 1px solid var(--linha); }
.ranking li:last-child { border-bottom: 1px solid var(--linha); }
.ranking a { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); padding-block: var(--s4); align-items: start; }
.ranking .n { font-family: var(--f-titulo); font-size: 32px; line-height: 1; color: var(--azul-petroleo); font-variant-numeric: lining-nums; }
.ranking h3 { font-family: var(--f-titulo); font-weight: 500; font-size: 19px; line-height: 1.22; margin-bottom: var(--s1); }
.entenda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.entenda { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); min-height: 190px; padding: var(--s6); border: 1px solid var(--linha); border-top: 4px solid var(--mk); background: var(--branco); transition: background-color var(--t), border-color var(--t); }
.entenda:hover, .entenda:focus-visible { background: var(--fundo); border-color: var(--mk); }
.entenda h3 { font-family: var(--f-titulo); font-weight: 500; font-size: 24px; line-height: 1.15; margin-top: var(--s2); text-wrap: balance; }
.entenda .rodape { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--texto-2); }
.entenda .tag { margin-bottom: 0; }

/* 7. EDITORIA / LISTAGENS -------------------------------------------------- */
.pagina-topo { padding-block: var(--s8) var(--s6); }
.pagina-topo h1 { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -.02em; margin-top: var(--s2); }
.pagina-topo h1::after { content: ''; display: block; width: 80px; height: 5px; background: var(--mk, var(--amarelo)); margin-top: var(--s4); }
.pagina-topo .descricao { font-size: 19px; line-height: 1.5; color: var(--texto-corpo); max-width: 62ch; margin-top: var(--s4); }
.destaque-ed { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s12); align-items: center; padding-block: var(--s6) var(--s12); }
.destaque-ed .media { aspect-ratio: 16 / 10; }
.destaque-ed h2 { font-family: var(--f-titulo); font-weight: 500; font-size: 38px; line-height: 1.08; letter-spacing: -.01em; margin-bottom: var(--s3); text-wrap: balance; }
.destaque-ed .resumo { font-size: 17px; line-height: 1.55; color: var(--texto-corpo); margin-bottom: var(--s3); }

.filtros { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding-block: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s8); }
.filtros .rotulo { font-weight: 700; font-size: 14px; margin-right: var(--s2); }
.chip { min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--branco); font-weight: 500; font-size: 15px; transition: background-color var(--t), border-color var(--t), color var(--t); }
.chip:hover { border-color: var(--verde-profundo); }
.chip[aria-pressed="true"] { background: var(--verde-profundo); border-color: var(--verde-profundo); color: #fff; font-weight: 600; }
.chip-limpar { margin-left: auto; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; color: var(--verde-profundo); font-weight: 600; }
.contador { font-size: 14px; color: var(--texto-2); margin-bottom: var(--s4); min-height: 1.4em; }
html:not(.js) .filtros, html:not(.js) .mais-wrap { display: none; }
.bloco-lista { padding-bottom: var(--s16); }
.grade-ed > li.is-lead { grid-column: 1 / -1; }
.grade-ed > li.is-lead .card { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--s12); align-content: center; align-items: start; }
.grade-ed > li.is-lead .card .media { grid-column: 1; grid-row: 1 / span 5; margin-bottom: 0; aspect-ratio: 16 / 10; }
.grade-ed > li.is-lead .card > :not(.media) { grid-column: 2; }
.grade-ed > li.is-lead .card :is(h2, h3) { font-size: 36px; line-height: 1.08; align-self: end; }
.grade-ed > li.is-lead .card .resumo { font-size: 17px; }
.grade-ed > li.is-lead .card .tag { align-self: end; }
.grade-ed { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s12) var(--s8); }
.grade-ed > li.sem-foto { border-top: 1px solid var(--linha); padding-top: var(--s4); }
.grade-ed > li.sem-foto .item { padding-block: 0; }
.mais-wrap { display: flex; justify-content: center; padding-top: var(--s12); }
.vazio { padding: var(--s12) var(--s6); border: 1px dashed var(--texto-2); text-align: center; max-width: 60ch; margin-inline: auto; }
.vazio h2 { font-family: var(--f-titulo); font-weight: 500; font-size: 26px; margin-bottom: var(--s2); }
.vazio p { color: var(--texto-2); margin-bottom: var(--s4); }

/* 8. MATÉRIA --------------------------------------------------------------- */
.materia-topo { padding-block: var(--s6) var(--s8); max-width: 960px; }
.materia-topo h1 { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.018em; margin-block: var(--s3); text-wrap: balance; }
.materia-topo .subtitulo { font-size: 21px; line-height: 1.45; color: var(--texto-corpo); max-width: 62ch; }
.byline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--linha); font-size: 14px; color: var(--texto-2); }
.byline strong { color: var(--texto); font-weight: 600; }
.foto-principal .media { aspect-ratio: 16 / 9; }
.foto-principal figcaption, .corpo figure figcaption { font-size: 13px; line-height: 1.45; color: var(--texto-2); padding-top: var(--s2); }
.foto-principal figcaption .credito, .corpo figure figcaption .credito { display: block; }
.materia-layout { display: grid; grid-template-columns: minmax(0, var(--leitura)) 260px; gap: var(--s16); justify-content: start; padding-block: var(--s8) var(--s12); }
.indice { align-self: start; border-left: 1px solid var(--linha); padding-left: var(--s6); font-size: 15px; }
.indice h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--s3); }
.indice ol { display: grid; gap: var(--s2); }
.indice a { display: block; padding: var(--s1) 0; line-height: 1.35; text-underline-offset: 3px; }
.indice a:hover { color: var(--verde-profundo); text-decoration: underline; }
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--linha); }
.compartilhar .rotulo { font-weight: 700; font-size: 14px; margin-right: var(--s2); }
.compartilhar .btn { min-height: 44px; font-size: 14px; border-color: var(--linha); }
.compartilhar .btn:hover { border-color: var(--verde-profundo); }
.compartilhar .nota { flex-basis: 100%; font-size: 12.5px; color: var(--texto-2); line-height: 1.4; }
.corpo { font-size: 18px; line-height: 1.72; color: var(--texto-corpo); }
.corpo > * + * { margin-top: 1.1em; }
.corpo h2 { font-family: var(--f-titulo); font-weight: 600; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; color: var(--texto); margin-top: 2em; }
.corpo p a, .corpo li a { color: var(--azul-petroleo); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.corpo p a:hover { color: var(--verde-profundo); }
.corpo ul { list-style: none; display: grid; gap: .5em; padding-left: 0; }
.corpo ul li { position: relative; padding-left: 1.4em; }
.corpo ul li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 3px; background: var(--verde-medio); }
.corpo blockquote { margin-block: 1.6em; padding: var(--s2) 0 var(--s2) var(--s6); border-left: 4px solid var(--amarelo); }
.corpo blockquote p { font-family: var(--f-titulo); font-weight: 500; font-style: italic; font-size: 26px; line-height: 1.3; color: var(--texto); }
.corpo blockquote footer { margin-top: var(--s2); font-size: 13px; font-family: var(--f-texto); color: var(--texto-2); line-height: 1.4; }
.corpo figure .media { aspect-ratio: 3 / 2; }
.box { background: var(--fundo); border-top: 3px solid var(--azul-petroleo); padding: var(--s6); font-size: 16px; line-height: 1.6; }
.box h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; margin-bottom: var(--s3); color: var(--texto); }
.box ul li::before { background: var(--azul-petroleo); }
.box + h2, .corpo > * + .box { margin-top: 1.6em; }
.aviso-corpo { border: 1px dashed var(--texto-2); padding: var(--s6); font-size: 16px; line-height: 1.55; color: var(--texto-corpo); }
.aviso-corpo strong { color: var(--texto); }
.fontes { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--linha); font-size: 15px; line-height: 1.6; }
.fontes h2 { font-family: var(--f-titulo); font-weight: 600; font-size: 22px; margin-bottom: var(--s3); }
.fontes ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: var(--s2); }
.fontes .vazio-fontes { color: var(--texto-2); }
.autoria { margin-top: var(--s8); display: grid; grid-template-columns: 56px 1fr; gap: var(--s4); padding: var(--s6); background: var(--fundo); font-size: 15px; line-height: 1.5; }
.autoria .avatar { width: 56px; height: 56px; border: 1px solid var(--linha); background: var(--branco); display: grid; place-items: center; color: var(--texto-2); }
.autoria strong { display: block; font-size: 16px; }
.autoria p { color: var(--texto-2); margin-top: var(--s1); }
.relacionadas { border-top: 1px solid var(--linha); padding-block: var(--s12); }
.relacionadas .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); align-items: start; }

/* 9. BUSCA E PÁGINAS AUXILIARES ------------------------------------------- */
.busca-form { display: grid; gap: var(--s4); padding-block: var(--s6); }
.busca-form .linha { display: flex; gap: var(--s3); flex-wrap: wrap; }
.busca-form .input { flex: 1 1 320px; width: auto; min-height: 56px; font-size: 18px; }
.busca-form .btn { min-height: 56px; }
.busca-resultados .item { padding-block: var(--s6); display: grid; grid-template-columns: 180px 1fr; gap: var(--s6); align-items: start; }
.busca-resultados .item.sem-foto { grid-template-columns: 1fr; }
.busca-resultados .item .media { aspect-ratio: 3 / 2; }
.busca-resultados h3 { font-size: 24px; }
.busca-resultados .resumo { font-size: 15px; color: var(--texto-corpo); line-height: 1.55; margin-bottom: var(--s2); }
.busca-resultados mark { background: #F6EBB0; color: inherit; padding: 0 2px; }
.pagina-aux { max-width: 780px; padding-block: var(--s4) var(--s16); }
.pagina-aux h2 { font-family: var(--f-titulo); font-weight: 600; font-size: 24px; margin-top: var(--s8); margin-bottom: var(--s3); }
.pagina-aux .a-definir { border: 1px dashed var(--texto-2); padding: var(--s4) var(--s6); color: var(--texto-2); font-size: 15px; }
.pagina-aux .observacao { background: var(--fundo); border-left: 3px solid var(--azul-petroleo); padding: var(--s4) var(--s6); margin-top: var(--s6); line-height: 1.6; }

/* 10. RODAPÉ --------------------------------------------------------------- */
.site-footer { background: var(--fundo); border-top: 1px solid var(--linha); font-size: 15px; }
.site-footer .container { padding-block: var(--s12) var(--s8); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s12); }
.footer-grid .logo { background: var(--branco); display: inline-block; padding: var(--s2); border: 1px solid var(--linha); }
.footer-grid .logo img { height: 96px; width: auto; }
.footer-grid p { color: var(--texto-corpo); max-width: 44ch; margin-top: var(--s4); line-height: 1.55; }
.footer-grid h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--s3); }
.footer-grid li a { display: inline-flex; align-items: center; min-height: 36px; text-underline-offset: 3px; }
.footer-grid li a:hover { text-decoration: underline; color: var(--verde-profundo); }
.footer-nota { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--linha); font-size: 13px; color: var(--texto-2); line-height: 1.6; display: grid; gap: var(--s2); }

/* 11. RESPONSIVO ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .main-nav ul { gap: var(--s6); }
  .main-nav a { font-size: 16px; }
  .lead-card { width: 90%; }
  .latest-grid, .grade-ed, .relacionadas .grade { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sticky-bar { display: none; }
  .masthead { grid-template-columns: auto 1fr; gap: var(--s4); padding-block: var(--s2); align-items: center; }
  .brand img { height: 88px; }
  .masthead-right { padding: 0; flex-direction: row; justify-content: flex-end; }
  .masthead-right .main-nav, .tools .btn-primary { display: none; }
  .icon-btn.menu-btn { display: inline-flex; }
  .text-btn { padding: 0; }
  .text-btn .rot { display: none; }

  .opening { display: block; padding-top: 0; }
  .lead-media { aspect-ratio: 4 / 5; margin-inline: calc(var(--gutter) * -1); }
  .lead-card { width: calc(100% - 28px); margin-top: -64px; padding: var(--s6) var(--s4) 0 0; }
  .lead-title { font-size: 35px; line-height: 1.06; }
  .lead-dek { font-size: 17px; }
  .side { margin-top: var(--s12); gap: var(--s8); border-top: 1px solid var(--linha); padding-top: var(--s8); }
  .side .card :is(h2, h3) { font-size: 23px; }
  .card-h { grid-template-columns: 112px 1fr; }
  .card-h :is(h2, h3) { font-size: 18px; }

  .bloco { padding-block: var(--s12); }
  .section-head { align-items: flex-start; flex-direction: column; gap: var(--s2); margin-bottom: var(--s6); }
  .section-head h2 { font-size: 32px; }
  .latest-grid, .grade-ed, .relacionadas .grade { grid-template-columns: 1fr; gap: var(--s8); }
  .card :is(h2, h3) { font-size: 21px; }

  .secao-ed { padding-block: var(--s8); }
  .sd-destaque-lista, .sd-lista-destaque, .sd-grade-assimetrica, .em-foco .foco-corpo, .em-foco .cabeca, .duplo, .destaque-ed { grid-template-columns: 1fr; gap: var(--s6); }
  .sd-destaque-lista .card :is(h2, h3), .sd-lista-destaque .card :is(h2, h3), .sd-grade-assimetrica .card.principal :is(h2, h3), .em-foco .foco-corpo .card :is(h2, h3) { font-size: 26px; }
  .sd-lista-destaque .card, .sd-lista-destaque .lista { order: unset; }
  .sd-faixa-colunas .faixa { grid-template-columns: 1fr; gap: var(--s4); }
  .sd-faixa-colunas .faixa .media { order: unset; }
  .sd-faixa-colunas .faixa h3 { font-size: 26px; }
  .sd-faixa-colunas .colunas { grid-template-columns: 1fr; gap: 0; }
  .sd-faixa-colunas .colunas > li { border-top: 1px solid var(--linha); }
  .sd-faixa-colunas .colunas > li + li { border-left: 0; padding-left: 0; }
  .sd-faixa-colunas .colunas .item { padding-block: var(--s4); }
  .sd-grade-assimetrica .card.principal, .sd-grade-assimetrica .lateral { grid-column: auto; grid-row: auto; }
  .sd-cards-horizontais .principal { grid-template-columns: 1fr; padding: var(--s4); gap: var(--s4); }
  .sd-cards-horizontais .principal .media { order: -1; }
  .sd-cards-horizontais .principal h3 { font-size: 26px; }
  .em-foco h2 { font-size: 32px; }
  .em-foco .container { padding-block: var(--s8); }
  .entenda-grid { grid-template-columns: 1fr; }
  .entenda { min-height: 0; }

  .newsletter .container { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s8); }
  .newsletter h2 { font-size: 30px; }
  .newsletter .linha { flex-direction: column; }

  .pagina-topo h1 { font-size: 40px; }
  .destaque-ed h2 { font-size: 30px; }
  .filtros { gap: var(--s2); }
  .chip-limpar { margin-left: 0; }

  .materia-topo .subtitulo { font-size: 19px; }
  .foto-principal { margin-inline: calc(var(--gutter) * -1); }
  .foto-principal figcaption { padding-inline: var(--gutter); }
  .materia-layout { grid-template-columns: 1fr; padding-block: var(--s6) var(--s8); }
  .indice { display: none; }
  .grade-ed > li.is-lead .card { display: block; }
  .grade-ed > li.is-lead .card .media { margin-bottom: var(--s4); }
  .grade-ed > li.is-lead .card :is(h2, h3) { font-size: 26px; }
  .sd-cards-horizontais { grid-template-columns: 1fr; }
  .sd-cards-horizontais .item { padding-block: var(--s2); }
  .corpo { font-size: 18px; }
  .corpo h2 { font-size: 25px; }
  .corpo blockquote p { font-size: 22px; }
  .busca-resultados .item { grid-template-columns: 112px 1fr; gap: var(--s4); }
  .busca-resultados h3 { font-size: 20px; }
  .busca-resultados .resumo { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s8); }
}
@media (max-width: 700px) { .proto-bar .container span:last-child { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  a:hover > .media img, a:focus-visible > .media img, a:hover .media img, a:focus-visible .media img { transform: none; }
}

/* ───────── 12. Ajustes pós-revisão ───────── */
.item .resumo { margin-bottom: var(--s3); }
.foto-principal .media { aspect-ratio: 21 / 9; }
@media (max-width: 860px) { .foto-principal .media { aspect-ratio: 4 / 3; } }
@media (max-width: 860px) {
  .footer-grid li a { display: flex; align-items: center; min-height: 44px; }
  .breadcrumb a { display: inline-block; padding-block: 10px; }
}

/* ——— Matéria republicada: origem, autoria, tabelas, listas ——— */
.origem { margin-top: var(--s12); padding: var(--s6); background: var(--fundo); border-left: 4px solid var(--azul-petroleo); font-size: 15px; line-height: 1.6; color: var(--texto-corpo); }
.origem h2 { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; margin-bottom: var(--s3); color: var(--texto); }
.origem a, .autoria a { color: var(--azul-petroleo); text-decoration: underline; text-underline-offset: 3px; }
.origem a:hover { color: var(--verde-profundo); }
.origem-credito { margin-top: var(--s3); color: var(--texto-2); font-size: 14px; }
.origem-divulg { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--linha); }
.origem-divulg h3 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--s2); }
.origem-divulg p + p { margin-top: var(--s2); }
.autoria { display: block; }
.autoria h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--s3); font-family: var(--f-texto); }
.autoria ul { display: grid; gap: var(--s3); }
.autoria li strong { display: block; font-size: 16px; }
.autoria li span { display: block; color: var(--texto-2); font-size: 14px; line-height: 1.45; }
.autoria .autoria-nota { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--linha); font-size: 13px; }
.pixel-ct { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.corpo h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--texto); margin-top: 1.6em; }
.corpo ol { padding-left: 1.5em; display: grid; gap: .5em; list-style: decimal; }
.corpo ol li::marker { color: var(--azul-petroleo); font-weight: 600; }
.corpo blockquote p { font-size: 22px; }
.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); }
.tabela-wrap:focus-visible { outline: 2px solid var(--azul-petroleo); outline-offset: 2px; }
.corpo table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.corpo caption { text-align: left; font-weight: 600; padding: var(--s3) var(--s4); background: var(--fundo); color: var(--texto); }
.corpo th, .corpo td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-top: 1px solid var(--linha); }
.corpo th { background: var(--fundo); font-weight: 600; }
.fonte-bloco { margin-bottom: var(--s8); }
.fonte-bloco .lista-fontes { margin-top: var(--s3); display: grid; gap: var(--s2); padding-left: 1.2em; list-style: disc; font-size: 15px; }
.fonte-bloco .meta-inline { color: var(--texto-2); font-size: 13px; }
.fontes-pagina a { color: var(--azul-petroleo); text-decoration: underline; text-underline-offset: 3px; }
.lista-simples { padding-left: 1.2em; list-style: disc; display: grid; gap: var(--s2); }
.footer-nota a { text-decoration: underline; }

/* Artes de divulgação no corpo (ABS): sem recorte, com limite de altura */
.corpo .figura-corpo { margin-block: 1.6em; }
.corpo .figura-corpo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 640px; margin-inline: auto; border: 1px solid var(--linha); }
.corpo .figura-corpo figcaption { text-align: center; }