:root {
  --paper: #f7f5ef;
  --surface: #fffefa;
  --ink: #18332b;
  --body-ink: #33483d;
  --muted: #52635b;
  --line: #d5ded4;
  --accent: #123d2b;
  --accent-soft: #e8eee5;
  --accent-light: #e1efe5;
  --attention: #f3ead6;
  --focus: #b97c12;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-22: 88px;
  --radius: 12px;
  --font-body: Arial, Helvetica, sans-serif;
  --font-editorial: Georgia, 'Times New Roman', serif;
}
.compara {
  --ink: #203e48; --body-ink: #364b52; --muted: #51646c;
  --accent: #204957; --accent-soft: #e7edef; --accent-light: #e1edf1;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--s-6); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
::selection { background: var(--accent); color: var(--surface); }
a { color: var(--accent); text-underline-offset: var(--s-1); }
a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: var(--s-1); }
.marca { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-3) max(var(--s-8), calc((100vw - 1256px) / 2)); background: var(--accent); color: var(--surface); }
.marca a { color: inherit; text-decoration: none; }
.marca .logo { font-size: 1.4rem; font-weight: 800; letter-spacing: -.025em; flex-shrink: 0; }
.navegacaoSite { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.navegacaoSite a { display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3); font-size: .87rem; font-weight: 600; }
.navegacaoSite a:hover, .navegacaoSite a[aria-current="page"] { background: #ffffff18; }
.marca a:focus-visible { outline-color: var(--attention); }
.pularConteudo { position: absolute; top: -100px; left: var(--s-4); z-index: 10; padding: var(--s-4); background: var(--surface); }
.pularConteudo:focus { top: var(--s-3); }
.pagina { min-height: 100vh; }
.container { max-width: 1320px; margin: 0 auto; padding: var(--s-6) var(--s-8) var(--s-22); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-12); padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); font-size: .83rem; color: var(--muted); }
.barra a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.barra a:hover { text-decoration: underline; }
.aberturaEditorial { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: center; gap: var(--s-12); margin: 0 0 var(--s-16); }
.aberturaEditorial h1 { margin: 0; font-family: var(--font-editorial); font-size: clamp(2.25rem, 4.2vw, 3.7rem); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.figuraEditorial { margin: 0; }
.produtosFigura { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-3); padding: var(--s-6) var(--s-3); background: var(--surface); }
.produtoFigura { flex: 1; min-width: 0; text-align: center; }
.produtoFigura img { display: block; width: 100%; height: auto; max-height: 184px; object-fit: contain; }
.produtoFigura span { display: block; margin-top: var(--s-3); font-size: .74rem; font-weight: 700; line-height: 1.4; }
.figuraEditorial figcaption { margin-top: var(--s-3); color: var(--muted); font-size: .72rem; line-height: 1.5; }
.figuraIndividual .produtosFigura { padding: var(--s-6); }
.figuraIndividual .produtoFigura img { max-height: 232px; }
.leituraEditorial { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: start; gap: var(--s-16); }
.apoioEditorial { position: sticky; top: var(--s-6); max-height: calc(100vh - var(--s-12)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-bottom: var(--s-4); }
.indiceMateria { border-top: 2px solid var(--accent); padding-top: var(--s-4); }
.indiceMateria h2, .leituraRelacionada h2 { margin: 0 0 var(--s-3); font-family: var(--font-editorial); font-weight: 400; font-size: 1.3rem; }
.indiceMateria a { display: flex; align-items: center; min-height: 44px; padding: var(--s-2) 0; color: var(--muted); font-size: .82rem; line-height: 1.45; text-decoration: none; }
.indiceMateria a:hover { color: var(--accent); text-decoration: underline; }
.leituraRelacionada { margin-top: var(--s-8); border-top: 1px solid var(--line); padding-top: var(--s-6); }
.leituraRelacionada a { display: block; padding: var(--s-3) 0; text-decoration: none; }
.leituraRelacionada a:hover strong { text-decoration: underline; }
.leituraRelacionada small { display: block; margin-bottom: var(--s-1); color: var(--muted); font-size: .69rem; line-height: 1.4; }
.leituraRelacionada strong { font-size: .85rem; line-height: 1.4; }
.artigo { min-width: 0; }
.artigo p, .artigo li { margin: 0 0 var(--s-3); color: var(--body-ink); font-size: 1.04rem; line-height: 1.75; max-width: 74ch; }
.artigo strong { color: var(--ink); font-weight: 700; }
.introducao { margin: 0 0 var(--s-12); max-width: 74ch; }
.introducao > p:first-child { font-family: var(--font-editorial); font-size: 1.5rem; line-height: 1.55; color: var(--ink); margin-bottom: var(--s-6); }
.introducao > p:last-child { margin-bottom: 0; }
.artigo .fraseDestaque { font-family: var(--font-editorial); font-size: 1.5rem; line-height: 1.5; margin: var(--s-6) 0; }
.fraseDestaque strong { font-weight: 400; }
.secaoEditorial { margin-top: var(--s-16); border-top: 1px solid var(--line); padding-top: var(--s-8); }
.secaoEditorial h2, .quadroCabecalho h2 { margin: 0 0 var(--s-6); font-family: var(--font-editorial); font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.secaoEditorial > :last-child { margin-bottom: 0; }
.artigo h3 { font-size: 1.05rem; line-height: 1.4; margin: 0 0 var(--s-3); }
.artigo ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); row-gap: var(--s-3); margin: var(--s-4) 0 var(--s-6); padding-left: var(--s-6); }
.artigo li { padding-left: var(--s-1); margin: 0; }
.artigo li::marker { color: var(--accent); }
.trioEditorial { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: var(--s-8) 0; }
.contrasteProduto { border-top: 2px solid var(--accent); padding-top: var(--s-4); }
.contrasteProduto p { font-size: .99rem; line-height: 1.65; }
.contrastesEditoriais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); margin-top: var(--s-16); border-top: 1px solid var(--line); padding-top: var(--s-8); }
.contrastesEditoriais .secaoEditorial { border: 0; padding-top: 0; margin-top: 0; }
.contrastesEditoriais .secaoEditorial + .secaoEditorial { border-left: 1px solid var(--line); padding-left: var(--s-8); }
.contrastesEditoriais h2 { font-size: 1.75rem; }
.escolhaPrincipal, .atencaoEditorial { padding: var(--s-8); border: 0; background: var(--accent-soft); }
.atencaoEditorial { background: var(--attention); }
.fechamento { background: var(--accent); padding: var(--s-12); border: 0; color: var(--surface); }
.fechamento h2, .fechamento h3, .fechamento p, .fechamento li, .fechamento strong { color: var(--surface); }
.fechamento .contrasteProduto { border-color: var(--accent-light); }
.fechamento .fraseDestaque { color: var(--accent-light); font-size: 1.6rem; }
.fechamento li::marker { color: var(--accent-light); }
.quadroComparativo { margin: var(--s-12) 0 var(--s-16); border-top: 2px solid var(--accent); padding-top: var(--s-8); }
.quadroCabecalho > p { font-size: .91rem; line-height: 1.65; color: var(--muted); margin-bottom: var(--s-6); }
.tabelaComparativaScroll, .tabelaScroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); scrollbar-width: thin; scrollbar-color: var(--accent) var(--accent-soft); }
.tabelaComparativaScroll table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tabelaComparativaScroll thead th { padding: var(--s-6) var(--s-4); width: 25%; background: var(--surface); vertical-align: top; text-align: left; color: var(--ink); font-size: .9rem; }
.tabelaComparativaScroll thead th:first-child { position: sticky; left: 0; z-index: 2; width: 20%; min-width: 136px; }
.produtoComparado { display: flex; flex-direction: column; gap: var(--s-2); color: var(--ink); text-decoration: none; line-height: 1.35; }
.produtoComparado:hover strong { text-decoration: underline; }
.produtoComparado img { width: 84px; height: 84px; object-fit: contain; }
.produtoComparado strong { font-size: .94rem; }
.produtoComparado span { font-size: .73rem; color: var(--muted); }
.tabelaComparativaScroll tbody th, .tabelaComparativaScroll tbody td { border-top: 1px solid var(--line); padding: var(--s-4); font-size: .88rem; line-height: 1.55; text-align: left; vertical-align: top; background: var(--surface); color: var(--body-ink); }
.tabelaComparativaScroll tbody th { position: sticky; left: 0; z-index: 1; color: var(--ink); }
.tabelaComparativaScroll tbody tr:nth-child(even) th, .tabelaComparativaScroll tbody tr:nth-child(even) td { background: var(--accent-soft); }
.artigo .quadroNota { margin: var(--s-3) 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.tabelaScroll { margin: var(--s-6) 0; }
.tabelaScroll table { width: 100%; min-width: 440px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.tabelaScroll th { background: var(--accent-soft); color: var(--ink); text-align: left; }
.tabelaScroll td { background: var(--surface); color: var(--body-ink); }
.tabelaScroll td, .tabelaScroll th { border-bottom: 1px solid var(--line); padding: var(--s-4); line-height: 1.5; vertical-align: top; }
.tabelaScroll tr:last-child td { border-bottom: 0; }
.rodapeSite { border-top: 1px solid var(--line); padding: var(--s-8) max(var(--s-8), calc((100vw - 1256px) / 2)); background: var(--surface); color: var(--muted); font-size: .82rem; line-height: 1.7; }
.rodapeSite p { margin: 0 0 var(--s-2); }
.rodapeSite a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.srOnly { clip: rect(0, 0, 0, 0); width: 1px; height: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
@media (max-width: 1050px) {
  .aberturaEditorial { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: var(--s-8); }
  .leituraEditorial { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-8); }
  .fechamento { padding: var(--s-8); }
}
@media (max-width: 850px) {
  .marca { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .leituraEditorial { grid-template-columns: 1fr; }
  .apoioEditorial { position: static; max-height: none; overflow: visible; padding-bottom: 0; }
  .indiceMateria { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
  .indiceMateria h2 { width: 100%; margin-bottom: 0; }
  .indiceMateria a { padding: var(--s-2) 0; }
  .leituraRelacionada { display: none; }
  .aberturaEditorial { margin-bottom: var(--s-12); }
}
@media (max-width: 600px) {
  .container { padding: var(--s-4) var(--s-6) var(--s-16); }
  .marca { padding: var(--s-4) var(--s-6); }
  .navegacaoSite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: var(--s-1); }
  .navegacaoSite a { justify-content: center; font-size: .8rem; }
  .barra { margin-bottom: var(--s-8); font-size: .78rem; }
  .aberturaEditorial { grid-template-columns: 1fr; gap: var(--s-8); }
  .aberturaEditorial h1 { font-size: clamp(2rem, 8.2vw, 2.75rem); }
  .figuraEditorial figcaption { font-size: .7rem; }
  .figuraIndividual .produtosFigura { padding: var(--s-4); }
  .figuraIndividual .produtoFigura img { max-height: 180px; }
  .figuraTrio .produtosFigura { padding: var(--s-4) var(--s-2); gap: var(--s-2); }
  .produtoFigura span { font-size: .68rem; }
  .indiceMateria { column-gap: var(--s-4); }
  .indiceMateria a { font-size: .79rem; }
  .introducao > p:first-child { font-size: 1.3rem; }
  .secaoEditorial, .contrastesEditoriais { margin-top: var(--s-12); }
  .secaoEditorial h2 { font-size: 1.75rem; }
  .artigo p, .artigo li { font-size: 1rem; line-height: 1.7; }
  .trioEditorial, .contrastesEditoriais, .artigo ul { grid-template-columns: 1fr; }
  .trioEditorial { gap: var(--s-6); }
  .contrastesEditoriais .secaoEditorial + .secaoEditorial { padding: var(--s-8) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .escolhaPrincipal, .atencaoEditorial, .fechamento { padding: var(--s-6); }
  .artigo .fraseDestaque { font-size: 1.35rem; }
  .tabelaComparativaScroll table { min-width: 660px; }
  .tabelaComparativaScroll thead th:first-child { min-width: 112px; width: 18%; }
  .tabelaComparativaScroll thead th, .tabelaComparativaScroll tbody th, .tabelaComparativaScroll tbody td { padding: var(--s-3); }
  .rodapeSite { padding: var(--s-6); }
}
@media (max-width: 340px) {
  .container, .marca { padding-left: var(--s-4); padding-right: var(--s-4); }
  .navegacaoSite a { font-size: .75rem; padding: var(--s-2); }
  .escolhaPrincipal, .atencaoEditorial, .fechamento { padding: var(--s-4); }
}
.avisoEdicao { margin: 0 0 24px; color: var(--muted); font-size: .85rem; line-height: 1.6; max-width: 80ch; }
.fontesEdicao { max-width: 1256px; margin: 0 auto 32px; padding: 24px 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; line-height: 1.7; }
.fontesEdicao h2 { font-family: var(--font-editorial); color: var(--ink); font-weight: 400; }
.fontesEdicao a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) { .fontesEdicao { padding: 24px; } }
