@charset "utf-8";
/* ==========================================================================
   FAESB — páginas internas, no formato do site original.
   Herói com foto e onda, corpo em duas colunas com trilha visual à direita.
   ========================================================================== */

/* --- Herói com foto ------------------------------------------------------- */
.capa-pagina{position:relative;background:var(--marinho);overflow:hidden;isolation:isolate}
.capa-pagina__arte{position:absolute;inset:0;z-index:-2;background-image:var(--arte);
  background-size:cover;background-position:center}
.capa-pagina::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,19,35,.42),rgba(6,19,35,.58))}
.capa-pagina__interno{display:grid;place-items:center;text-align:center;
  min-height:clamp(240px,27vw,400px);padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,7vw,5.5rem)}
.capa-pagina__olho{display:block;color:#fff;font-family:var(--fonte);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2.1rem);margin-bottom:.25em;
  text-shadow:0 2px 14px rgba(6,19,35,.55)}
.capa-pagina h1{color:var(--marinho);background:#fff;display:inline-block;
  padding:.06em .4em;border-radius:var(--raio-xs);margin:0;font-family:var(--fonte);font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.2}
.capa-pagina__onda{position:absolute;left:0;right:0;bottom:-1px;z-index:0;display:block;
  width:100%;height:clamp(26px,3.4vw,48px)}
.capa-pagina__onda path{fill:#fff}
@media (max-width:700px){
  .capa-pagina__arte{background-image:var(--arte-mob,var(--arte))}
}

/* --- Corpo em duas colunas ------------------------------------------------ */
.dupla{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
@media (min-width:920px){
  .dupla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .dupla--texto-maior{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
}
/* O original justifica o texto corrido das internas. Abaixo de 600 px a linha
   fica curta demais e a justificação abre rios de espaço entre as palavras,
   então ela só vale a partir daí. */
@media (min-width:600px){
  .dupla__texto p{text-align:justify;hyphens:auto}
}
.dupla__texto h2{margin-top:0}
.dupla__texto h2+h3{margin-top:0}
.dupla__texto> :last-child{margin-bottom:0}

/* --- Trilha visual (fotos, ícone e tramas, ligados por uma linha) --------- */
.trilha{position:relative;display:grid;gap:clamp(1.25rem,3vw,2.25rem);justify-items:center}
/* a linha vertical que costura os elementos */
.trilha::before{content:"";position:absolute;top:8%;bottom:8%;left:50%;width:3px;
  translate:-50% 0;background:var(--azul);opacity:.75;border-radius:999px}
.trilha>*{position:relative;z-index:1;width:100%}
.trilha img{width:100%;border-radius:var(--raio);box-shadow:var(--sombra-media)}
.trilha__icone{display:grid;place-items:center;padding:.5rem 0}
.trilha__icone svg{width:clamp(80px,9vw,120px);height:auto;color:var(--azul-escuro)}
/* trama de pontos decorativa, como no original */
.trama{width:clamp(80px,9vw,118px);aspect-ratio:1;justify-self:start;
  background-image:radial-gradient(var(--azul-escuro) 1.6px,transparent 1.7px);
  background-size:11px 11px;opacity:.85}
.trama--direita{justify-self:end}
@media (max-width:919px){
  .trilha::before{display:none}
  .trama{display:none}
}

/* --- "Veja também" -------------------------------------------------------- */
.veja-tambem{margin-top:clamp(2rem,4vw,3rem)}
.veja-tambem h2{margin-bottom:.8rem}
.veja-tambem ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.veja-tambem a{display:flex;align-items:center;gap:.7rem;padding:.55rem 0;
  color:var(--marinho);text-decoration:none;font-size:var(--t-base)}
.veja-tambem a:hover{color:var(--azul)}
.veja-tambem svg{width:21px;height:21px;color:var(--azul-escuro);flex:0 0 auto}

/* --- Missão e visão (cartões escuros do institucional) -------------------- */
.pilares{display:grid;gap:clamp(1rem,2.5vw,1.75rem);margin-block:clamp(1.75rem,4vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.pilar{background:var(--marinho);color:#D7E1EC;border-radius:var(--raio);
  padding:1.5rem;display:flex;gap:1.1rem;align-items:flex-start}
.pilar__icone{flex:0 0 auto;width:62px;height:62px;border-radius:50%;background:#fff;
  display:grid;place-items:center}
.pilar__icone svg{width:32px;height:32px;color:var(--marinho)}
.pilar h3{color:#fff;margin:0 0 .35rem;font-size:var(--t-xl)}
.pilar p{margin:0;font-size:var(--t-sm);line-height:1.6;color:#C3D0DE}

/* --- Lista de links com ícone de globo (biblioteca) ----------------------- */
.lista-links{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.1rem}
.lista-links a,.lista-links span{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;
  color:var(--marinho);text-decoration:none;font-size:var(--t-sm);
  text-transform:uppercase;letter-spacing:.02em}
.lista-links a:hover{color:var(--azul)}
.lista-links svg{width:20px;height:20px;color:var(--azul-escuro);flex:0 0 auto}
.qr{max-width:230px;margin-block:1rem}

/* --- Bloco de texto + imagem --------------------------------------------- */
.dupla__figura{margin:0}
.dupla__figura img{width:100%;border-radius:var(--raio);box-shadow:var(--sombra-media)}
.dupla__figura figcaption{margin-top:.6rem;font-size:var(--t-sm);color:var(--texto-suave)}
@media (min-width:920px){
  .dupla--invertido .dupla__texto{order:2}
  .dupla--invertido .dupla__figura{order:1}
}

/* --- B4: no celular o histórico vem antes da lista de acessos ------------
   Empilhada na ordem do código, a lista de dezessete itens ficava entre o
   título e o conteúdo que as pessoas de fato procuram (horários e regras). */
@media (max-width:919px){
  .dupla--biblioteca .dupla__texto{order:1}
  .dupla--biblioteca .dupla__lado{order:2;
    padding-top:1.5rem;border-top:1px solid var(--borda)}
}

/* O acesso ao acervo físico aponta para um endereço de rede interna: avisa,
   em vez de deixar o visitante clicar e não acontecer nada. */
.so-campus{flex:0 0 auto;font-size:var(--t-xs);font-weight:500;letter-spacing:.01em;
  text-transform:none;background:var(--fundo-alt);color:var(--texto-suave);
  border:1px solid var(--borda);border-radius:999px;padding:.08rem .5rem}
.lista-links a{flex-wrap:wrap}
.dica-acervo{font-size:var(--t-sm);color:var(--texto-suave);
  margin:.5rem 0 1.75rem;line-height:1.55}