/* Cabeçalho do site 2.0 nas páginas do ensino. (mesmas regras do css/site.css, só as do cabeçalho, com as variáveis
   locais para não depender dos estilos próprios de cada página). Mantenha igual ao site.css. */
.topo,.topo *{box-sizing:border-box}
.topo{--marfim:#faf6f1;--papel:#faf6f1;--marinho:#0f1c30;--texto-2:#4a5466;--ouro:#c4a05a;--filete:#d8ccb2;--foco:#0f1c30;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lateral:clamp(1rem,4vw,2.5rem);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--marinho)}
.topo a{color:var(--marinho)}
.topo ul{margin:0;padding:0}.topo li{margin:0}
.topo .envelope{max-width:72rem;margin-inline:auto;padding-inline:var(--lateral)}
.topo :focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:2px}
.topo .marca-nome{font-family:var(--serif);font-weight:500}
.topo{position:sticky;top:0;z-index:20;background:var(--marfim);border-bottom:1px solid var(--filete)}
.topo .envelope{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;min-height:4rem}
.marca{font-family:var(--serif);font-size:1.25rem;text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem}
.menu{position:relative}
.menu-botao{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;min-width:2.75rem;padding:.5rem .9rem;border:1.5px solid var(--marinho);border-radius:999px;background:transparent;color:var(--marinho);font:600 1rem/1 var(--sans);cursor:pointer}
.menu-botao .icone{font-size:1.15rem;line-height:1}
.menu-lista,.mais-lista{list-style:none;margin:0;padding:0}
.menu-lista a,.mais-botao{display:flex;align-items:center;min-height:2.75rem;padding:.5rem .9rem;text-decoration:none;font:500 1rem/1.2 var(--sans);color:var(--marinho);background:none;border:0;cursor:pointer;border-radius:4px}
.menu-lista a:hover,.mais-botao:hover{text-decoration:underline}
.menu-lista a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--ouro);text-decoration-thickness:2px}
.mais-botao .seta{margin-left:.35rem;font-size:.8em;transition:transform .15s}
.mais-botao[aria-expanded="true"] .seta{transform:rotate(180deg)}
/* Celular e tablet em pé: lista inteira atrás do botão. */
@media (max-width:51.99rem){
  .menu-botao{display:none}
  html.js .menu-botao{display:inline-flex}
  html.js .menu-lista{display:none}
  html.js .menu[data-aberto] .menu-lista{display:block}
  html.js .menu-lista{position:absolute;right:0;top:calc(100% + .5rem);min-width:15rem;background:var(--papel);border:1px solid var(--filete);border-top:2px solid var(--ouro);border-radius:6px;padding:.5rem;box-shadow:0 12px 32px rgba(15,28,48,.12)}
  .mais-botao{display:none}
  .mais-lista[hidden]{display:block}
  .mais-lista{border-top:1px solid var(--filete);margin-top:.35rem;padding-top:.35rem}
}
@media (min-width:52rem){
  .menu-botao{display:none}
  .menu-lista{display:flex;align-items:center;gap:.25rem}
  .mais{position:relative}
  .mais-botao{display:none}
  html.js .mais-botao{display:flex}
  .mais-lista{display:flex;gap:.25rem}
  html.js .mais-lista{display:block}
  html.js .mais-lista[hidden]{display:none}
  html.js .mais-lista{position:absolute;right:0;top:calc(100% + .5rem);min-width:14rem;background:var(--papel);border:1px solid var(--filete);border-top:2px solid var(--ouro);border-radius:6px;padding:.4rem;box-shadow:0 12px 32px rgba(15,28,48,.12)}
}
.menu-botao,.menu-lista a,.mais-botao{border-radius:6px}
.marca{flex-direction:column;align-items:flex-start;justify-content:center;gap:.1rem;line-height:1.15;padding-block:.35rem}
.marca-nome{font-size:1.25rem}
.marca-sub{font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.04em;color:var(--texto-2)}
@media (max-width:30rem){.marca-sub{font-size:.625rem;letter-spacing:.02em}}
@media (max-width:51.99rem){
  .topo .envelope{flex-wrap:nowrap}
  .marca{min-width:0;flex:1 1 auto}
  .marca-sub{white-space:normal;font-size:.625rem;letter-spacing:.02em;line-height:1.25}
  .menu-botao{flex:none}
}
.topo{background:var(--marfim)}
/* casinha: volta ao site principal */
.topo-acoes{display:flex;align-items:center;gap:.5rem}
.casinha{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1.5px solid var(--marinho);border-radius:999px;color:var(--marinho);text-decoration:none}
.casinha:hover{background:#eadacf}
.casinha svg{width:1.3rem;height:1.3rem;display:block}
.pular{position:absolute;left:1rem;top:-10rem;z-index:50;background:#0f1c30;color:#faf6f1;padding:.75rem 1rem;font-weight:600;border-radius:4px;font-family:var(--sans,sans-serif)}
.pular:focus{top:1rem}