/* ============================================================
   INSTITUTO OSY — página /instituto
   Folha exclusiva desta página. Ela não é carregada nas outras,
   porque o Instituto é o único território do site que sai da
   paleta comercial: aqui manda o verde-sálvia e o teal da marca
   do Instituto, e não o navy + âmbar do Grupo.

   Tipografia é a mesma do site (Chivo). A diferença é de cor,
   de ritmo e de respiro — nunca de fonte, senão quebra a
   unidade do ecossistema.
   ============================================================ */

:root {
  /* Paleta do Instituto — valores lidos da própria marca
     (Instituto OSY - Logo.svg), para que o fundo nunca brigue
     com o logotipo aplicado em cima dele. */
  --inst-navy:    #083955;   /* Prussian Blue — hero, fechamento, texto */
  --inst-teal:    #1f7a8b;   /* títulos de seção, ícones, detalhes     */
  --inst-yellow:  #eade00;   /* selo, fase atual, números              */
  --inst-salvia:  #b6d5ce;   /* etiquetas, estados vazios, fundo       */

  /* Derivadas: fundos claros o bastante para carregar texto navy */
  --inst-salvia-15: #f2f8f6;
  --inst-salvia-30: #e6f1ed;
  --inst-teal-dark: #17606d;
}

/* ============================================================
   RITMO GERAL
   A leitura aqui é mais lenta do que nas páginas comerciais e
   não tem pressa de converter: as seções respiram mais.
   ============================================================ */
.inst-secao {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 136px);
}
/* A mesma trama diagonal das seções claras do resto do site:
   é o que impede que a área clara chegue chapada. */
.inst-secao--clara {
  background-color: #fdfbf6;
  background-image: repeating-linear-gradient(135deg, rgba(8,57,85,.030) 0 1px, transparent 1px 26px);
}
.inst-secao--salvia {
  background-color: var(--inst-salvia-15);
  background-image: repeating-linear-gradient(135deg, rgba(31,122,139,.035) 0 1px, transparent 1px 26px);
}
.inst-secao--salvia2 {
  background-color: var(--inst-salvia-30);
  background-image: repeating-linear-gradient(135deg, rgba(31,122,139,.045) 0 1px, transparent 1px 30px);
}

/* Cunha diagonal da marca, no canto de cada seção. É o mesmo
   elemento dos backgrounds do Brand Book, só que aplicado em
   opacidade baixa para virar fundo e não ilustração. */
.inst-secao__cunha {
  position: absolute;
  top: 0; right: 0;
  width: clamp(180px, 26vw, 420px);
  pointer-events: none;
  user-select: none;
  opacity: .5;
  z-index: 0;
}
.inst-secao--salvia .inst-secao__cunha { opacity: .38; }
.inst-secao > .container { position: relative; z-index: 1; }

/* Cabeçalho de bloco: título em teal, o sinal mais constante de
   que o leitor saiu da área comercial. */
.inst-cab { max-width: 760px; margin-bottom: var(--space-12); }
.inst-cab__label {
  display: block;
  color: var(--inst-teal);
  margin-bottom: var(--space-4);
}
.inst-cab__titulo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--inst-navy);
}
.inst-cab__texto {
  margin-top: var(--space-5);
  font-size: 17px;
  line-height: 1.7;
  color: var(--neutral-700);
  max-width: 62ch;
}

/* ============================================================
   ETIQUETA DE ESTÁGIO
   Vocabulário único em toda a página: Acontecendo, Em andamento,
   A iniciar. Card de frente que ainda não começou NÃO fica
   apagado — só muda a etiqueta. Cinza comunicaria abandono, e
   nenhuma frente foi abandonada.
   ============================================================ */
.inst-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
}
.inst-etiqueta::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.inst-etiqueta--acontecendo {
  background: var(--inst-salvia);
  color: #0d4b41;
}
.inst-etiqueta--andamento {
  background: var(--inst-yellow);
  color: var(--inst-navy);
}
.inst-etiqueta--iniciar {
  background: #dfe9ec;
  color: var(--inst-teal-dark);
}

/* ============================================================
   BLOCO 1 — HERO
   Prussian Blue com a marca do Instituto em versão negativa.
   Sem foto de caminhão, de implemento ou de componente: a página
   do Instituto não pode parecer a home de uma frente comercial.
   ============================================================ */
.inst-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h);
  padding-bottom: clamp(64px, 8vw, 112px);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(31,122,139,.55) 0%, rgba(31,122,139,0) 58%),
    linear-gradient(148deg, #062c42 0%, var(--inst-navy) 52%, #0a4359 100%);
  color: #fff;
}
/* Cunha teal no canto — vem do Brand Book, em blend para virar luz */
.inst-hero__cunha {
  position: absolute;
  top: 0; right: 0;
  width: clamp(220px, 34vw, 560px);
  opacity: .5;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}
.inst-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(48px, 7vw, 88px);
  max-width: 900px;
}
.inst-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: var(--space-8);
}
.inst-hero__breadcrumb a { color: rgba(255,255,255,.55); transition: color var(--transition); }
.inst-hero__breadcrumb a:hover { color: #fff; }
.inst-hero__breadcrumb span { color: rgba(255,255,255,.32); }

.inst-hero__marca {
  width: clamp(190px, 24vw, 280px);
  height: auto;
  margin-bottom: var(--space-8);
}

/* O selo é o primeiro elemento que o olho encontra depois da
   marca, e isso é proposital: o leitor precisa saber o estágio
   antes de ler a promessa. */
.inst-selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--inst-yellow);
  color: var(--inst-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: var(--space-6);
}
.inst-selo::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--inst-navy);
  flex: none;
}
.inst-hero__titulo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-6);
}
.inst-hero__apoio {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.76);
  max-width: 62ch;
}

/* ============================================================
   BLOCO 2 — O QUE É O INSTITUTO
   Coluna estreita, no máximo ~65 caracteres por linha. É o único
   momento da página em que se lê texto corrido, e ele precisa de
   conforto. Nada de coluna dupla aqui.
   ============================================================ */
.inst-sobre__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}
.inst-sobre__titulo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--inst-navy);
  max-width: 20ch;
  margin-bottom: var(--space-10);
}
.inst-prosa {
  max-width: 65ch;
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--neutral-700);
}
.inst-prosa p + p { margin-top: var(--space-6); }
.inst-prosa strong { color: var(--inst-navy); font-weight: 700; }

/* Faixa discreta para a natureza jurídica. É aqui que a
   qualificação (OSCIP, utilidade pública) entra no dia em que
   sair — como fato, em uma linha, e não como argumento. */
.inst-juridico {
  margin-top: var(--space-10);
  max-width: 65ch;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5) var(--space-6);
  background: var(--inst-salvia-30);
  border-left: 3px solid var(--inst-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--inst-teal-dark);
}
.inst-juridico svg { flex: none; margin-top: 2px; color: var(--inst-teal); }

/* ============================================================
   BLOCO 3 — ONDE ESTAMOS HOJE
   Linha de fases. Sem percentual de conclusão: número inventado
   em barra de progresso é a forma mais rápida de perder a
   credibilidade que o resto da página constrói.

   No desktop é uma fileira; no celular vira lista vertical com
   a régua à esquerda — é um dos dois blocos que mais quebram em
   tela estreita, então ele muda de forma em vez de encolher.
   ============================================================ */
.inst-fases {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  counter-reset: fase;
}
.inst-fase {
  position: relative;
  padding-top: var(--space-8);
}
/* A régua: trilho contínuo com o marcador da fase por cima */
/* O trilho de cada fase avança sobre o gap da grade, senão a
   régua vira tracejado em vez de linha contínua. */
.inst-fase::before {
  content: '';
  position: absolute;
  top: 7px; left: 0;
  right: calc(var(--space-5) * -1);
  height: 2px;
  background: #d3ddd9;
}
.inst-fase::after {
  content: '';
  position: absolute;
  top: 1px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fdfbf6;
  border: 2px solid #b9c8c4;
}
.inst-fase--atual::after {
  background: var(--inst-yellow);
  border-color: var(--inst-yellow);
  box-shadow: 0 0 0 5px rgba(234,222,0,.28);
}
.inst-fase--feita::after { background: var(--inst-salvia); border-color: #8fb9ae; }
.inst-fase:last-child::before { right: 50%; }

.inst-fase__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--inst-teal);
  margin-bottom: 6px;
}
.inst-fase__nome {
  font-size: 16px;
  font-weight: 700;
  color: var(--inst-navy);
  line-height: 1.3;
  margin-bottom: 8px;
}
.inst-fase--atual .inst-fase__nome { color: var(--inst-navy); }
.inst-fase__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--neutral-600);
  margin-bottom: var(--space-4);
}
.inst-fase .inst-etiqueta { font-size: 10px; padding: 4px 9px; }

/* A data fica visível na página, não escondida no rodapé. É ela
   que transforma "em construção" de desculpa em compromisso. */
.inst-atualizacao {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--space-10);
  padding: 9px 16px;
  border: 1px solid #c9d8d3;
  border-radius: 100px;
  background: #fff;
  font-size: 13.5px;
  color: var(--inst-teal-dark);
}
.inst-atualizacao svg { color: var(--inst-teal); flex: none; }

/* ============================================================
   BLOCO 4 — AS CINCO FRENTES
   Cards com o mesmo peso visual, independente do estágio.
   ============================================================ */
/* São cinco cards, e cinco não fecha grade par. Em vez de deixar
   um buraco na última linha, a fileira é flex: sobram dois
   embaixo, centralizados sob os três de cima. Lê como escolha,
   não como sobra. */
.inst-frentes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}
/* A largura é fixada por breakpoint em vez de deixada para o
   flex-basis: com basis em pixel, quatro cards cabiam na linha e
   sobrava um sozinho na segunda. Aqui são sempre 3 · 2 no
   desktop, 2 · 2 · 1 no tablet e 1 por linha no celular. */
.inst-frente {
  flex: 0 1 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: #fff;
  border: 1px solid #dfe7e4;
  border-top: 3px solid var(--inst-teal);
  border-radius: var(--radius-sm);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
/* Só a frente com projetos cadastrados vira link. Enquanto não
   tiver, o card não é clicável e não mostra link quebrado. */
a.inst-frente:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(8,57,85,.10);
}
.inst-frente__icone {
  width: 38px; height: 38px;
  color: var(--inst-teal);
}
.inst-frente__icone svg { width: 100%; height: 100%; }
.inst-frente__nome {
  font-size: 19px;
  font-weight: 700;
  color: var(--inst-navy);
}
.inst-frente__desc {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--neutral-600);
  flex: 1;
}
.inst-frente__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.inst-frente__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--inst-teal);
}
@media (min-width: 640px) {
  .inst-frente { flex-basis: calc(50% - (var(--space-6) / 2)); max-width: calc(50% - (var(--space-6) / 2)); }
}
@media (min-width: 1024px) {
  .inst-frente { flex-basis: calc(33.333% - (var(--space-6) * 2 / 3)); max-width: calc(33.333% - (var(--space-6) * 2 / 3)); }
}

/* ============================================================
   BLOCO 5 — PROJETOS  ·  BLOCO 6 — AÇÕES
   Estado vazio é um bloco DESENHADO, com o grafismo da marca e a
   frase centralizada. Nunca uma área branca com uma linha de
   texto solta — a página vai passar meses assim, e precisa
   parecer intencional o tempo todo.
   ============================================================ */
.inst-vazio {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 320px;
  padding: var(--space-16) var(--space-8);
  background: var(--inst-salvia-30);
  border: 1px solid #d3e4de;
  border-radius: var(--radius-md);
}
/* Faixas diagonais da marca por baixo: é o que faz o vazio virar
   bloco desenhado em vez de retângulo vazio com uma linha solta. */
.inst-vazio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(31,122,139,.07) 0 2px,
    transparent 2px 22px
  );
  pointer-events: none;
}
.inst-vazio__grafismo {
  position: absolute;
  width: 480px;
  max-width: 86%;
  opacity: .14;
  pointer-events: none;
  user-select: none;
}
.inst-vazio__texto {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  font-size: 19px;
  line-height: 1.62;
  color: var(--inst-teal-dark);
  font-weight: 500;
}

/* Filtro por frente: só aparece quando houver projetos de mais
   de uma frente cadastrados. */
.inst-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.inst-filtro__btn {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid #cfdcd8;
  color: var(--inst-teal-dark);
  background: #fff;
  transition: all var(--transition);
}
.inst-filtro__btn:hover { border-color: var(--inst-teal); }
.inst-filtro__btn.is-ativo {
  background: var(--inst-navy);
  border-color: var(--inst-navy);
  color: #fff;
}

/* Grade alinhada à esquerda: com um ou dois cards ela não estica
   para preencher a linha. */
.inst-projetos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}
.inst-projeto {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #dfe7e4;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.inst-projeto__img {
  aspect-ratio: 16 / 10;
  background: var(--inst-salvia-30) url('../img/grafismo-ativo2.png') no-repeat center / 78%;
}
.inst-projeto__img img { width: 100%; height: 100%; object-fit: cover; }
.inst-projeto__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.inst-projeto__frente {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inst-teal);
}
.inst-projeto__nome { font-size: 18px; font-weight: 700; color: var(--inst-navy); }
.inst-projeto__desc { font-size: 14.5px; line-height: 1.6; color: var(--neutral-600); }
.inst-projeto__quem { font-size: 13px; color: var(--neutral-500); }

/* CARROSSEL DA CAPA (projeto com mais de uma foto). Mesmo desenho
   da galeria do cartão de Implementos: trilho em scroll-snap, que
   rola no dedo sem JavaScript; setas nas laterais que apagam nas
   pontas; pontos no canto. Não troca sozinho. */
.inst-projeto__img--galeria { position: relative; overflow: hidden; }
.inst-galeria {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y pinch-zoom;
}
.inst-galeria::-webkit-scrollbar { display: none; }
.inst-galeria__item { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.inst-galeria__item img { width: 100%; height: 100%; object-fit: cover; }

.inst-galeria__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(4, 20, 31, .55);
  backdrop-filter: blur(3px);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}
.inst-galeria__seta--tras   { left: 10px; }
.inst-galeria__seta--frente { right: 10px; }
.inst-galeria__seta:hover { background: rgba(4, 20, 31, .8); }
.inst-galeria__seta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Na ponta a seta apaga em vez de sumir: sumir faria a outra
   dançar de lugar a cada clique. */
.inst-galeria__seta[disabled] { opacity: .25; cursor: default; }

.inst-galeria__pontos {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(4, 20, 31, .5);
  backdrop-filter: blur(3px);
}
.inst-galeria__ponto {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
}
.inst-galeria__ponto[aria-current="true"] { background: #fff; transform: scale(1.25); }
.inst-galeria__ponto:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* O alvo de toque precisa de 24px; o ponto tem 7. */
.inst-galeria__ponto::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .inst-galeria { scroll-behavior: auto; }
}

/* Linha do tempo das ações — do mais recente para o mais antigo.
   Foto é opcional em cada item, porque nem toda ação vai ter
   foto boa e a ausência dela não pode quebrar o layout. */
.inst-linha { position: relative; padding-left: var(--space-10); }
.inst-linha::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--inst-teal), rgba(31,122,139,.14));
}
.inst-acao { position: relative; padding-bottom: var(--space-10); }
.inst-acao:last-child { padding-bottom: 0; }
.inst-acao::before {
  content: '';
  position: absolute;
  left: calc(var(--space-10) * -1);
  top: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fdfbf6;
  border: 3px solid var(--inst-teal);
}
.inst-acao__topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.inst-acao__data {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inst-teal);
}
.inst-acao__frente {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neutral-500);
}
.inst-acao__titulo { font-size: 19px; font-weight: 700; color: var(--inst-navy); margin-bottom: var(--space-2); }
.inst-acao__relato { font-size: 15.5px; line-height: 1.7; color: var(--neutral-700); max-width: 62ch; }
/* As fotos de um registro (0059). Uma só ocupa a largura de antes;
   duas ou mais viram grade. Cada uma leva à foto inteira. */
.inst-acao__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  max-width: 560px;
}
.inst-acao__fotos--uma { grid-template-columns: 1fr; max-width: 460px; }
.inst-acao__fotos a {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--inst-salvia-30);
}
.inst-acao__fotos--uma a { aspect-ratio: auto; }
.inst-acao__fotos img { width: 100%; height: 100%; object-fit: cover; }
.inst-acao__fotos--uma img { height: auto; }

.inst-mais { margin-top: var(--space-10); }
/* Com mais de seis ações, o botão das anteriores vem ANTES da linha
   do tempo, que é onde elas aparecem. */
.inst-mais--antes { margin-top: 0; margin-bottom: var(--space-8); }
.inst-mais__btn {
  font-size: 14px;
  font-weight: 700;
  color: var(--inst-navy);
  padding: 13px 26px;
  border: 2px solid var(--inst-navy);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.inst-mais__btn:hover { background: var(--inst-navy); color: #fff; }

/* ============================================================
   BLOCO 7 — NÚMEROS
   O bloco não existe até haver número real: quando a lista está
   vazia ele não é renderizado, e não há estado vazio para ele.
   Número zero em destaque é pior do que número nenhum.
   ============================================================ */
.inst-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
  justify-items: center;
  text-align: center;
}
.inst-numero__valor {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
  color: var(--inst-yellow);
  letter-spacing: -0.03em;
}
.inst-numero__rotulo {
  margin-top: var(--space-3);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.inst-numero__data { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.42); }
.inst-secao--numeros {
  background: linear-gradient(140deg, #062c42 0%, var(--inst-navy) 100%);
  color: #fff;
}
.inst-secao--numeros .inst-cab__titulo { color: #fff; }
.inst-secao--numeros .inst-cab__texto { color: rgba(255,255,255,.66); }
.inst-secao--numeros .inst-cab__label { color: var(--inst-salvia); }

/* ============================================================
   BLOCO 8 — ONDE ATUAMOS
   Sem mapa interativo: a página não tem função de rota, e mapa
   embutido pesa e pede consentimento de cookie sem necessidade.
   O desenho abaixo é uma abstração do entorno da operação, não
   uma planta — e por isso não promete precisão que não tem.
   ============================================================ */
.inst-onde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.inst-onde__texto { max-width: 54ch; }
.inst-onde__mapa {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  width: 100%;
  justify-self: center;
}
.inst-onde__mapa svg { width: 100%; height: 100%; }

/* ============================================================
   BLOCO 9 — FECHAMENTO
   Sem botão de contato, sem formulário e sem newsletter: a
   página informa e não pede nada. A saída é a navegação normal
   do site, que já leva a Novidades e a Contato do Grupo.
   ============================================================ */
.inst-fecho {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 10vw, 148px);
  background: linear-gradient(148deg, var(--inst-navy) 0%, #0a4359 100%);
  color: #fff;
  text-align: center;
}
.inst-fecho__cunha {
  position: absolute;
  bottom: 0; left: 0;
  width: clamp(160px, 22vw, 340px);
  transform: rotate(180deg);
  opacity: .28;
  mix-blend-mode: screen;
  pointer-events: none;
}
.inst-fecho__inner { position: relative; z-index: 1; }
.inst-fecho__frase {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-8);
}
.inst-fecho__marca { width: clamp(150px, 18vw, 210px); margin: 0 auto var(--space-5); }
.inst-fecho__assinatura {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ============================================================
   RESPONSIVIDADE
   A linha de fases e a linha do tempo são os dois blocos que
   mais quebram em tela estreita — os dois mudam de forma, em
   vez de só encolher.
   ============================================================ */
@media (max-width: 1024px) {
  .inst-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .inst-fase::before { display: none; }
  .inst-fase::after { top: 0; }
  .inst-onde { grid-template-columns: minmax(0, 1fr); }
  .inst-onde__mapa { max-width: 340px; }
}

@media (max-width: 640px) {
  /* Fases viram lista vertical com régua contínua à esquerda:
     em 5 colunas cada fase caberia em ~60px, o que é ilegível. */
  .inst-fases {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: var(--space-8);
    position: relative;
  }
  .inst-fases::before {
    content: '';
    position: absolute;
    left: 6px; top: 8px; bottom: 8px;
    width: 2px;
    background: #d3ddd9;
  }
  .inst-fase { padding-top: 0; padding-bottom: var(--space-8); }
  .inst-fase:last-child { padding-bottom: 0; }
  .inst-fase::before { display: none; }
  .inst-fase::after {
    display: block;
    top: 4px;
    left: calc(var(--space-8) * -1);
  }

  .inst-linha { padding-left: var(--space-8); }
  .inst-acao::before { left: calc(var(--space-8) * -1); }

  .inst-vazio { min-height: 240px; padding: var(--space-12) var(--space-5); }
  .inst-vazio__grafismo { width: 300px; }
  .inst-juridico { padding: var(--space-5); }
}

/* Quem prefere menos movimento não recebe nenhum */
@media (prefers-reduced-motion: reduce) {
  .inst-frente { transition: none; }
  a.inst-frente:hover { transform: none; }
}