/* ==========================================================================
   home.css — página inicial (page ID 11)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.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%;
  }
}

/* --------------------------------------------------------------------------
   2. O que fazemos na prática
   -------------------------------------------------------------------------- */

.pratica {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: var(--esp-16);
  background-image: url('../../img/fundo-projetos.webp');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.pratica__intro {
  width: 65%;
  margin-inline: auto;
  padding-bottom: var(--esp-12);
}

.pratica .card-grade {
  grid-template-columns: repeat(3, 1fr);
}

.pratica__destaque {
  margin-top: var(--esp-6);
}

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

@media (max-width: 1024px) {
  .pratica .card-grade {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pratica__intro {
    width: 100%;
    text-align: justify;
    padding-bottom: var(--esp-5);
  }
}

/* --------------------------------------------------------------------------
   3. Projetos & Impacto
   -------------------------------------------------------------------------- */

.projetos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: var(--esp-16) 14px;
  background-image: url('../../img/fundo-o-que-fazemos.webp');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.projetos__intro {
  width: 65%;
  margin-inline: auto;
  padding-bottom: 10px;
}

.projetos__grade {
  grid-template-columns: repeat(2, 1fr);
}

.projeto-card {
  display: flex;
}

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

@media (max-width: 767px) {
  .projetos__grade {
    grid-template-columns: 1fr;
  }

  .projetos__intro {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   4. Quem Somos / Como apoiar
   -------------------------------------------------------------------------- */

.institucional {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  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`). */
.institucional__texto {
  width: 100%;
}

/* O original renderiza este mosaico a 800px, não à largura do contêiner.
   Medido contra o site no ar: 800×488. */
.institucional__imagem {
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-top: var(--esp-8);
  margin-inline: auto;
  border-radius: var(--raio-card);
}

.institucional__acao {
  display: flex;
  justify-content: center;
  padding-top: var(--esp-6);
}

.institucional__acao--apoiar {
  padding-top: var(--esp-12);
}

.institucional .divisor {
  margin-block: var(--esp-10);
}

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

@media (max-width: 767px) {
  .institucional {
    padding: var(--esp-5) 14px;
  }

  .institucional__texto {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5. Acolhimento
   -------------------------------------------------------------------------- */

.acolhimento {
  background-color: var(--nexa-preto);
  padding-bottom: var(--esp-12);
}

.acolhimento__titulo {
  text-align: center;
  font-size: var(--texto-acolher);
  font-weight: var(--peso-forte);
  color: #B1B1B1;
  padding-top: var(--esp-8);
}

.acolhimento__texto {
  width: 100%;
  color: #B1B1B1;
  padding-top: var(--esp-4);
}

.acolhimento__form {
  width: 100%;
  padding-top: var(--esp-8);
}

/* Campos escuros sobre o fundo preto */
.acolhimento__form .campo__label {
  color: #B1B1B1;
}

.acolhimento__form .campo__controle {
  background-color: #575757;
  color: var(--nexa-branco);
  box-shadow: none;
}

.acolhimento__form .campo__controle::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.acolhimento__form .campo__controle:focus {
  border-color: var(--nexa-primario);
  box-shadow: 0 0 0 3px rgba(0, 208, 255, 0.45);
}

.acolhimento__form .botao {
  justify-self: center;
  width: fit-content;
  margin-top: var(--esp-2);
  border-radius: 30px;   /* o botão da home usa 30px; o do contato, 20px */
}

.acolhimento__emergencia {
  text-align: center;
  font-size: 14px;
  font-weight: var(--peso-medio);
  color: var(--nexa-branco);
  padding-top: 12px;
}

@media (max-width: 767px) {
  .acolhimento__form .botao {
    width: 100%;
  }
}