/* v21: componente de abertura da área "Material para Concursos Públicos".
   Modelo: /material-para-concursos-publicos/glossarios-enriquecidos/ (classes de glossarios-enriquecidos/reader.css,
   com o resultado final de /assets/educacional-leitura.css). Mesmas classes e mesmos valores, escritos sem variáveis
   para não depender do :root de cada página. Carregar depois das folhas de estilo da página.
   Única classe que não existe no modelo: .hub-faixa, a faixa azul-marinho que no modelo vem do fundo do body
   (body.hub-body) e aqui envolve a abertura, porque cada página tem o próprio fundo. */
.hub-faixa{display:flow-root;background:linear-gradient(180deg,#072e61 0,#0f5b9e 100%);color:#fff}
.hub-top{width:min(1160px,calc(100% - 2rem));margin:auto;padding:1.1rem 0;color:#fff}
.hub-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem}
.hub-brand a{color:#fff;font-weight:900;text-decoration:none}
.hub-brand a:hover,.hub-brand a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.hub-brand nav{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;font-size:.8rem;font-weight:800}
.hub-hero{width:min(1160px,calc(100% - 2rem));margin:2.6rem auto 2rem;color:#fff}
.hub-kicker{margin:0 0 .75rem;color:#91dcff;font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.hub-hero h1{max-width:none;margin:0;color:#fff;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:clamp(36px,6vw,66px);font-style:normal;font-weight:900;line-height:1.12;letter-spacing:-.025em;text-transform:none;text-shadow:none;-webkit-text-stroke:0;overflow-wrap:normal}
.hub-hero h1 span,.hub-hero h1 em{color:#8dd9ff;font-style:normal}
.hub-lead{max-width:650px;margin:1.5rem 0 0;color:#e8f7ff;font-size:1.05rem;line-height:1.65}
.hub-stats{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.1rem 0 0;padding:0;list-style:none}
.hub-stats>*{margin:0;padding:.45rem .7rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:.76rem;font-weight:800;line-height:1.3;text-decoration:none}
.hub-stats>a:hover{background:rgba(255,255,255,.16)}
/* cards no padrão do modelo (subject-card), só dentro de .hub-main: o Banco de Questões usa .subject-card com outro desenho */
.hub-main .subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.hub-main .subject-card{position:relative;display:flex;min-height:260px;overflow:hidden;flex-direction:column;padding:1.35rem;border:1px solid #bad3e6;border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(8,45,95,.13);color:#0a1727;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.hub-main .subject-card:hover,.hub-main .subject-card:focus-visible{transform:translateY(-4px);box-shadow:0 24px 60px rgba(8,45,95,.19);outline:3px solid rgba(76,168,232,.28);outline-offset:3px}
.hub-main .subject-card:focus-visible{outline:3px solid #164e78}
.hub-main .subject-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;color:#176fca;font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
/* título grande do card: a palavra mais longa ("CONSTITUCIONAL") cabe inteira em todas as larguras */
.hub-main .subject-card h2,.hub-main .subject-card h3{max-width:14ch;margin:auto 0 .7rem;color:#082d5f;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:clamp(2.4rem,calc(5.2vw - .5rem),3.6rem);font-style:normal;font-weight:700;line-height:1.18;letter-spacing:-.025em;text-transform:uppercase;text-shadow:none;-webkit-text-stroke:0;overflow-wrap:normal}
.hub-main .subject-card p{max-width:32rem;margin:0;color:#52677d;font-size:.9rem;line-height:1.5}
.hub-main .subject-cta{margin-top:1rem;color:#082d5f;font-size:.8rem;font-weight:900;text-transform:uppercase}
@media(max-width:820px){.hub-main .subject-grid{grid-template-columns:1fr}}
@media(max-width:620px){
  .hub-top{width:calc(100% - 2rem)}
  .hub-hero{margin:1.8rem auto 1.6rem}
  .hub-main .subject-card{min-height:230px;padding:1.15rem;border-radius:18px}
  .hub-main .subject-card h2,.hub-main .subject-card h3{font-size:clamp(1.6rem,8.6vw,2.4rem)}
}
@media(prefers-reduced-motion:reduce){.hub-main .subject-card{transition:none}}
@media print{.hub-faixa{background:none;color:#0a1727}.hub-faixa .hub-hero h1,.hub-faixa .hub-hero h1 span,.hub-faixa .hub-hero h1 em,.hub-faixa .hub-kicker,.hub-faixa .hub-lead,.hub-faixa a,.hub-faixa .hub-top{color:#0a1727}.hub-stats>*{border-color:#9fb3c8;background:none;color:#0a1727}}