/* =====================================================================
   INSTITUCIONAL — nossa-historia, docentes, politicas-de-privacidade
   ---------------------------------------------------------------------
   As tres paginas que vieram do WordPress quando o catalogo assumiu o
   dominio principal. Elas nasceram com o MESMO slug que tinham la, entao
   o link indexado desde 2019 continua valendo sem nenhum redirect.

   Sem paleta propria: tudo sai dos tokens de css/styles.css e
   css/brand.css. Prefixo inst- porque classe curta solta ja colidiu
   neste projeto (o .qt do styles.css e uma aspa serifada de 4,5rem).

   Ordem das secoes: hero > sumario (so na politica) > corpo > cta.
   ===================================================================== */

/* ---------- hero simples, sem foto ---------- */
.inst-hero{background:var(--paper);border-bottom:1px solid var(--cream);
  padding:clamp(100px,11vw,136px) 0 clamp(30px,4vw,44px)}
.inst-hero .inst-eyebrow{display:inline-block;font-weight:700;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-2);margin-bottom:10px}
.inst-hero h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1.04;letter-spacing:-.02em;color:var(--green)}
.inst-hero h1 em{font-style:italic;color:var(--green-2)}
.inst-hero p{margin-top:14px;max-width:62ch;color:var(--muted);font-size:1.03rem;line-height:1.6}

/* ---------- corpo de texto ---------- */
.inst-corpo{max-width:72ch;padding:clamp(30px,4vw,46px) 0 10px}
.inst-corpo h2{font-family:var(--serif);font-weight:600;color:var(--green);
  font-size:clamp(1.42rem,2.5vw,1.9rem);line-height:1.16;letter-spacing:-.01em;
  margin:38px 0 12px;scroll-margin-top:90px}
.inst-corpo h2:first-child{margin-top:0}
.inst-corpo h3{font-family:var(--ft-font-display);font-weight:600;color:var(--green);
  font-size:1.06rem;margin:24px 0 6px}
.inst-corpo p{margin:0 0 15px;color:var(--ink);font-size:1.005rem;line-height:1.72}
.inst-corpo p strong{color:var(--green)}
.inst-corpo ul{margin:0 0 18px;padding:0;list-style:none}
.inst-corpo ul li{position:relative;padding-left:20px;margin-bottom:9px;
  color:var(--ink);font-size:1.005rem;line-height:1.66}
.inst-corpo ul li::before{content:'';position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--lime)}
.inst-corpo a{color:var(--green-2);text-decoration:underline;text-underline-offset:3px}

/* ---------- sumario (politica: 6 secoes, some ancora) ---------- */
.inst-sumario{border:1px solid var(--ft-creme-borda);border-radius:16px;
  background:var(--ft-creme-claro);padding:18px 20px;margin:0 0 8px}
.inst-sumario strong{display:block;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-2);margin-bottom:10px}
.inst-sumario ol{margin:0;padding-left:18px;color:var(--muted)}
.inst-sumario li{margin-bottom:5px;font-size:.94rem}
.inst-sumario a{color:var(--green);text-decoration:none}
.inst-sumario a:hover{text-decoration:underline}

/* ---------- foto larga dentro do texto ---------- */
.inst-foto{margin:26px 0 30px;border-radius:20px;overflow:hidden;background:var(--cream)}
.inst-foto img{width:100%;height:clamp(220px,34vw,400px);object-fit:cover}
.inst-foto figcaption{padding:11px 16px;font-size:.83rem;color:var(--muted);background:var(--ft-creme-claro)}

/* ---------- linha do tempo ---------- */
.inst-marcos{list-style:none;margin:24px 0 32px;padding:0;position:relative}
.inst-marcos::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;
  width:2px;background:var(--cream)}
.inst-marcos li{position:relative;padding-left:34px;margin-bottom:20px}
.inst-marcos li::before{content:'';position:absolute;left:1px;top:5px;width:14px;height:14px;
  border-radius:50%;background:var(--lime);border:3px solid var(--paper)}
.inst-marcos b{display:block;font-family:var(--ft-font-display);font-weight:600;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-2);margin-bottom:3px}
.inst-marcos span{display:block;color:var(--ink);font-size:1rem;line-height:1.62}

/* ---------- grade de docentes ---------- */
/* align-items:start porque as biografias tem tamanhos muito diferentes --
   sem isso o card da Marlene (3 linhas) estica ate a altura do da Fran
   (14 linhas) e fica com um vazio grande embaixo. */
.inst-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  align-items:start;gap:16px;padding:clamp(28px,3.6vw,40px) 0 8px}
.inst-card{border:1px solid var(--ft-creme-borda);border-radius:18px;background:#fff;
  padding:20px 20px 18px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.inst-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(0,60,43,.45)}
.inst-card-topo{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.inst-avatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ft-creme-claro);border:1px solid var(--ft-creme-borda);
  font-family:var(--ft-font-display);font-weight:600;font-size:1.06rem;color:var(--green)}
.inst-card h2{margin:0;font-family:var(--ft-font-display);font-weight:600;
  font-size:1.1rem;line-height:1.2;color:var(--green)}
.inst-card .inst-papel{display:block;margin-top:2px;font-size:.78rem;color:var(--green-2);
  letter-spacing:.03em}
.inst-card p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}

/* ---------- nota / aviso ---------- */
.inst-nota{border-left:3px solid var(--lime);background:var(--ft-creme-claro);
  border-radius:0 14px 14px 0;padding:15px 18px;margin:22px 0 26px}
.inst-nota p{margin:0;font-size:.93rem;line-height:1.62;color:var(--muted)}
.inst-nota p + p{margin-top:8px}
.inst-atualizado{font-size:.84rem;color:var(--muted);margin:0 0 4px}

/* ---------- chamada final ---------- */
.inst-cta{margin:clamp(34px,4.5vw,52px) 0 clamp(48px,6vw,72px);
  border:1px solid var(--ft-creme-borda);border-radius:22px;background:var(--ft-creme-claro);
  padding:clamp(24px,3.4vw,36px);text-align:center}
.inst-cta h2{font-family:var(--serif);font-weight:600;color:var(--green);
  font-size:clamp(1.3rem,2.4vw,1.72rem);line-height:1.18;margin:0 0 8px}
.inst-cta p{margin:0 auto 18px;max-width:52ch;color:var(--muted);font-size:.97rem;line-height:1.6}
.inst-cta-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

@media (max-width:640px){
  .inst-grid{grid-template-columns:1fr}
  .inst-corpo{padding-top:26px}
}