/* ==========================================================================
   INAEC · SEÇÃO 2: APRESENTAÇÃO INSTITUCIONAL / QUEM SOMOS
   Bloco editorial — missão, visão e atuação.

   >>> MIGRAÇÃO ELEMENTOR PRO
   Container "institucional" (full width · fundo Branco)
     └── Container "institucional__inner" (flex · row · gap 64 · align start)
           ├── Container "institucional__editorial" (column · gap 24 · 52%)
           └── Container "institucional__pilares"   (column · gap 16 · 48%)
   ========================================================================== */

.institucional__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}

.institucional__editorial {
  flex: 1 1 52%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.institucional__editorial .section-head { margin-block-end: var(--space-2xs); }

/* Primeiro parágrafo com peso editorial — abertura do bloco */
/* Abertura editorial: acima do corpo, abaixo de um h3 — usa o corpo de
   apoio (17px), não o de título. */
.institucional__abertura {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--color-text);
}
.institucional__editorial p { color: var(--color-text-muted); }
.institucional__editorial .institucional__abertura { color: var(--color-text); }

.institucional__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-2xs);
}

/* --- Pilares: Missão · Visão · Atuação ---------------------------------- */
.institucional__pilares {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
}

.pilar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.pilar__icone {
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--inaec-verde) 10%, transparent);
  color: var(--inaec-verde);
}
.pilar__icone svg {
  inline-size: 22px; block-size: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pilar__titulo {
  margin: 0;
  align-self: center;
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* 17px */
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-heading);
}
.pilar__texto {
  margin: 0;
  grid-column: 2;
  font-size: var(--fs-legend);   /* 14px */
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .institucional__inner { flex-direction: column; }
  .institucional__editorial, .institucional__pilares { flex: 1 1 auto; inline-size: 100%; }
}
@media (max-width: 767px) {
  .institucional__acoes { flex-direction: column; align-items: stretch; }
  .institucional__acoes .btn { inline-size: 100%; }
}