@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fontes/schibsted-grotesk-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fontes/schibsted-grotesk-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fontes/newsreader-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("fontes/newsreader-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;
  --fundo: #ffffff;
  --superficie: #f6f5fc;
  --violeta: #4936b8;
  --violeta-forte: #3a2a99;
  --violeta-claro: #ece9fb;
  --violeta-medio: #9d92e0;
  --sobre-violeta: #ffffff;
  --bloco: #4936b8;
  --sobre-bloco: #ffffff;
  --barra: #dcd7f6;
  --tinta: #1d1a2e;
  --tinta-suave: #5a5670;
  --linha: #dad7e6;
  --erro: #b3261e;
  --foco: #4936b8;
  --interface: "Schibsted Grotesk", system-ui, sans-serif;
  --capa: "Newsreader", Georgia, serif;
  --r: 6px;
  --e1: .25rem; --e2: .5rem; --e3: 1rem; --e4: 1.5rem; --e5: 2.5rem; --e6: 4rem;
  --largura: 72rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #15122b;
    --superficie: #1f1b3a;
    --violeta: #a99bff;
    --violeta-forte: #c4baff;
    --violeta-claro: #2c2652;
    --violeta-medio: #6a5cc4;
    --sobre-violeta: #15122b;
    --bloco: #2e2470;
    --sobre-bloco: #f3f0ff;
    --barra: #3a3270;
    --tinta: #eeeafb;
    --tinta-suave: #b4aecb;
    --linha: #38325a;
    --erro: #ffb4a9;
    --foco: #c4baff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--interface);
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: var(--violeta); text-underline-offset: .18em; }
a:hover { color: var(--violeta-forte); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--e3); }
h1 { font: 600 clamp(2rem, 4.5vw, 3rem)/1.1 var(--capa); letter-spacing: -.01em; }
h2 { font-size: 1.35rem; font-weight: 650; }
p { margin: 0 0 var(--e3); }
.dica { color: var(--tinta-suave); font-size: .92rem; }
.ni { color: var(--tinta-suave); }
.lead { font-size: 1.2rem; max-width: 40em; }
.pular { position: absolute; left: -999px; top: 0; background: var(--violeta); color: var(--sobre-violeta); padding: var(--e2) var(--e3); z-index: 10; }
.pular:focus { left: var(--e3); }

/* topo */
.topo { border-bottom: 1px solid var(--linha); background: var(--fundo); }
.topo-dentro { max-width: var(--largura); margin: 0 auto; padding: var(--e2) var(--e3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.marca { display: inline-flex; align-items: center; gap: .45em; font: 700 1.25rem/1 var(--interface); color: var(--tinta); text-decoration: none; padding: var(--e2) 0; min-height: 44px; }
.marca-simbolo { width: 1.3em; height: 1.3em; fill: var(--violeta); flex: none; }
.inicio .topo .marca-simbolo { fill: var(--sobre-bloco); }
.topo nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e1); }
.topo nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e2); color: var(--tinta); text-decoration: none; border-bottom: 3px solid transparent; }
.topo nav a:hover { color: var(--violeta); }
.topo nav a[aria-current="page"] { border-bottom-color: var(--violeta); font-weight: 600; }
.inicio .topo { background: var(--bloco); border-bottom-color: transparent; }
.inicio .topo .marca, .inicio .topo nav a { color: var(--sobre-bloco); }
.inicio .topo nav a[aria-current="page"], .inicio .topo nav a:hover { border-bottom-color: var(--sobre-bloco); }

/* início */
.abertura { background: var(--bloco); color: var(--sobre-bloco); }
.abertura-dentro { max-width: var(--largura); margin: 0 auto; padding: var(--e5) var(--e3) var(--e6); }
.abertura h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); max-width: 14em; }
.abertura .lead { margin-bottom: var(--e5); }
.portas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.porta {
  display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) var(--e4) var(--e5);
  background: var(--fundo); color: var(--tinta); text-decoration: none; border-radius: var(--r) var(--r) 0 0;
  min-height: 12rem; position: relative;
}
/* a porta: soleira em baixo e maçaneta à direita */
.porta::after { content: ""; position: absolute; right: var(--e4); top: 50%; width: .7rem; height: .7rem; border-radius: 50%; background: var(--violeta); }
.porta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .5rem; background: var(--violeta-claro); }
.porta:hover { color: var(--tinta); background: var(--superficie); }
.porta-titulo { font: 600 1.9rem/1.1 var(--capa); color: var(--violeta); }
.porta-texto { max-width: 26em; padding-right: var(--e4); }
.faixa { max-width: var(--largura); margin: 0 auto; padding: var(--e5) var(--e3); }

/* régua do Qualis */
.regua { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--e2); align-items: end; }
.regua-links { height: 14rem; margin-top: var(--e4); }
.regua-links li, .regua-links a { height: 100%; }
.regua-links a { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-decoration: none; color: var(--tinta); gap: var(--e1); }
.regua-barra { display: block; height: var(--h); min-height: 4px; background: var(--barra); border-radius: 3px 3px 0 0; position: relative; overflow: hidden; }
.regua-links a:hover .regua-barra { background: var(--violeta-medio); }
.regua-n { font-size: .85rem; color: var(--tinta-suave); text-align: center; font-variant-numeric: tabular-nums; }
.regua-e { font-weight: 650; text-align: center; border-top: 2px solid var(--tinta); padding-top: var(--e1); }

.regua-filtro { height: 7rem; gap: 3px; }
.regua-filtro label { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; position: relative; min-width: 0; }
.regua-filtro input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.regua-filtro .regua-barra { height: calc(var(--h) * .8); }
.regua-filtro .regua-e { font-size: .82rem; border-top-width: 2px; }
.regua-filtro label.dentro .regua-barra { background: var(--violeta-medio); }
.regua-filtro label.fora .regua-e { color: var(--tinta-suave); border-top-color: var(--linha); }
.regua-filtro input:focus-visible + .regua-barra { outline: 3px solid var(--foco); outline-offset: 2px; }
.regua-filtro.modo-prox label.dentro .regua-barra { background: var(--violeta); }
.regua-filtro.modo-prox .regua-barra { min-height: 2px; }

/* páginas internas */
.cabeca { max-width: var(--largura); margin: 0 auto; padding: var(--e5) var(--e3) var(--e4); }
.campo { display: flex; flex-direction: column; gap: var(--e1); margin-bottom: var(--e3); }
label, legend { font-weight: 600; }
input[type="search"], select, textarea {
  font: inherit; color: var(--tinta); background: var(--fundo); border: 1.5px solid var(--tinta-suave);
  border-radius: var(--r); padding: .6rem .75rem; min-height: 44px; width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
.campo-busca { max-width: 40rem; }
.caixa-resumo { max-width: 48rem; }
.caixa-resumo label { font-size: 1.1rem; }
.aviso-modelo { margin-top: var(--e2); font-size: .95rem; color: var(--tinta-suave); }
.acoes { display: flex; gap: var(--e3); flex-wrap: wrap; }
.botao, .botao-secundario {
  font: 600 1rem/1.2 var(--interface); display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .65rem 1.2rem; border-radius: var(--r); cursor: pointer; text-decoration: none;
}
.botao { background: var(--violeta); color: var(--sobre-violeta); border: 2px solid var(--violeta); }
.botao:hover { background: var(--violeta-forte); border-color: var(--violeta-forte); color: var(--sobre-violeta); }
.botao[disabled] { opacity: .6; cursor: progress; }
.botao-secundario { background: transparent; color: var(--violeta); border: 2px solid var(--violeta); }
.botao-secundario:hover { background: var(--violeta-claro); }
.botao-texto { font: inherit; color: var(--violeta); background: none; border: 0; padding: .5rem 0; min-height: 44px; text-decoration: underline; cursor: pointer; }
.progresso { margin-top: var(--e3); }
.progresso progress { width: 100%; height: .6rem; accent-color: var(--violeta); }
.erro { margin-top: var(--e3); padding: var(--e3); border: 2px solid var(--erro); border-radius: var(--r); }
.erro p:last-child { margin: 0; }

/* filtros e lista */
.filtros-e-lista { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e3) var(--e6); display: grid; grid-template-columns: 17rem 1fr; gap: var(--e5); align-items: start; }
.filtros { position: sticky; top: var(--e3); }
.filtros-caixa > summary { font-size: 1.1rem; color: var(--tinta); margin-bottom: var(--e2); }
@media (min-width: 52.01rem) { .filtros-caixa > summary { pointer-events: none; list-style: none; } .filtros-caixa > summary::-webkit-details-marker { display: none; } }
.filtros fieldset { border: 0; padding: 0; margin: 0 0 var(--e4); }
.filtros legend { margin-bottom: var(--e2); padding: 0; }
.opcao { display: flex; align-items: center; gap: var(--e2); min-height: 40px; font-weight: 400; cursor: pointer; }
.opcao input { width: 1.15rem; height: 1.15rem; accent-color: var(--violeta); }
.resultados-topo { border-bottom: 2px solid var(--tinta); margin-bottom: 0; padding-bottom: var(--e2); }
.resultados-topo h2 { margin-bottom: var(--e1); }
.ordem { color: var(--tinta-suave); margin: 0; font-size: .95rem; }
.lista { list-style: none; margin: 0 0 var(--e4); padding: 0; }
.item { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: var(--e1) var(--e3); padding: var(--e3) 0; border-bottom: 1px solid var(--linha); align-items: start; }
.item-qualis { font-weight: 700; font-size: 1.15rem; text-align: center; padding: .3rem 0; border: 2px solid var(--tinta); border-radius: var(--r); }
.item-nome { font: 600 1.25rem/1.3 var(--capa); }
.item-nome a { color: var(--tinta); text-decoration: none; }
.item-nome a:hover { color: var(--violeta); text-decoration: underline; }
.item-fatos { margin: var(--e1) 0 0; color: var(--tinta-suave); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 0 var(--e3); }
.item-temas { margin: var(--e1) 0 0; font-size: .9rem; color: var(--tinta-suave); }
.item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: var(--e1); }
.faixa-prox { font-size: .85rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.faixa-prox[data-f="1"] { background: var(--violeta); color: var(--sobre-violeta); }
.faixa-prox[data-f="2"] { background: var(--violeta-claro); color: var(--tinta); }
.faixa-prox[data-f="3"] { border: 1px solid var(--linha); color: var(--tinta-suave); }
.item .botao-texto { font-size: .9rem; padding: 0; white-space: nowrap; }
.vazio { padding: var(--e4) 0; }

/* ficha */
.ficha { max-width: 52rem; margin: 0 auto; padding: var(--e4) var(--e3) var(--e6); }
.texto { max-width: 42rem; margin: 0 auto; padding: var(--e4) var(--e3) var(--e6); }
.voltar a::before { content: "← "; }
.ficha-topo { border-bottom: 2px solid var(--tinta); padding-bottom: var(--e4); margin-bottom: var(--e3); }
.issns { color: var(--tinta-suave); }
.ficha-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.sumario { display: flex; flex-wrap: wrap; gap: 0 var(--e3); margin-bottom: var(--e4); }
.sumario a { display: inline-flex; align-items: center; min-height: 44px; }
.ficha section, .texto section { margin-bottom: var(--e5); scroll-margin-top: var(--e3); }
.dados { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 var(--e4); }
.dados > div { padding: var(--e2) 0 var(--e3); border-top: 1px solid var(--linha); }
.dados dt { font-size: .9rem; color: var(--tinta-suave); }
.dados dd { margin: var(--e1) 0 0; font-size: 1.05rem; }
.selo-qualis { display: inline-block; font-weight: 700; font-size: 1.6rem; padding: 0 .6rem; border: 2px solid var(--violeta); color: var(--violeta); border-radius: var(--r); }
.temas, .links, .fontes { padding-left: 1.2rem; }
.temas li, .links li, .fontes li { margin-bottom: var(--e2); }
details { border-top: 1px solid var(--linha); padding-top: var(--e2); }
summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--violeta); }

/* comparar */
.comparacao { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e3) var(--e6); overflow-x: auto; }
.comparacao + .vazio { max-width: var(--largura); margin: 0 auto; padding: var(--e4) var(--e3); }
.comparacao table { border-collapse: collapse; width: 100%; min-width: 36rem; }
.comparacao th, .comparacao td { text-align: left; vertical-align: top; padding: var(--e2) var(--e3) var(--e2) 0; border-bottom: 1px solid var(--linha); }
.comparacao thead th { font: 600 1.15rem/1.25 var(--capa); border-bottom: 2px solid var(--tinta); }
.comparacao tbody th { font-weight: 400; color: var(--tinta-suave); font-size: .92rem; width: 11rem; }

.rodape { border-top: 1px solid var(--linha); color: var(--tinta-suave); font-size: .92rem; }
.rodape p { max-width: var(--largura); margin: 0 auto; padding: var(--e4) var(--e3); }

@media (max-width: 52rem) {
  .portas { grid-template-columns: 1fr; }
  .filtros-e-lista { grid-template-columns: 1fr; gap: var(--e3); }
  .filtros { position: static; border: 1px solid var(--linha); border-radius: var(--r); padding: 0 var(--e3); }
  .filtros-caixa > summary { margin: 0; }
  .filtros-caixa[open] { padding-bottom: var(--e3); }
  .regua-links { height: 10rem; gap: 3px; }
  .regua-n { font-size: .7rem; }
  .item { grid-template-columns: 2.8rem 1fr; }
  .item-lado { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }