/* ==========================================================================
   quem-somos.css — página Quem somos (page ID 44)
   ========================================================================== */

/* Hero idêntico ao da home, sem os botões */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--esp-5);
  min-height: 100vh;
  padding: 0 0 0 10vw;
  background-image: url('../../img/fundo-hero.webp');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero__selo { width: auto; max-width: 100%; height: auto; }
.hero .titulo-hero { width: 100%; }
.hero__lead { max-width: 32vw; text-align: justify; }

@media (max-width: 1366px) { .hero { padding-left: 4vw; } }
@media (max-width: 1024px) { .hero__lead { max-width: 60vw; } }
@media (max-width: 767px) {
  .hero {
    min-height: 65vh;
    padding: 0 3vw;
    background-position: center left;
  }
  .hero__lead { max-width: 100%; font-size: 1rem; line-height: 1.25; }
}

/* --------------------------------------------------------------------------
   Sobre o Instituto
   -------------------------------------------------------------------------- */

.sobre {
  padding-block: var(--esp-20);
  background-color: var(--nexa-branco);
}

/* Largura total do contêiner: no Elementor o `_element_custom_width`
   deste bloco não se aplica (falta `_element_width: initial`). */
.sobre__texto {
  width: 100%;
  padding-top: var(--esp-6);
}

@media (max-width: 1366px) {
  .sobre .titulo-secao { padding-top: var(--esp-8); }
}

@media (max-width: 767px) {
  .sobre { padding-block: var(--esp-10); }
}

/* --------------------------------------------------------------------------
   Equipe
   -------------------------------------------------------------------------- */

.equipe {
  padding-bottom: var(--esp-20);
  background-color: var(--nexa-branco);
}

.equipe__intro {
  padding-bottom: var(--esp-10);
}

/* Grade da equipe */
.equipe__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.equipe__grade .card {
  padding: var(--esp-6) var(--esp-5);
}

@media (max-width: 1024px) {
  .equipe__grade { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .equipe { padding-bottom: var(--esp-10); }
  .equipe__grade { grid-template-columns: 1fr; }
}