:root {
    --amarelo-principal: #FFC801;
    --branco: #fff;
    --preto: #000;
    --roxo: #6C20E5;
    --fonte-texto: "Dm Sans", sans-serif;
    --fonte-titulo: "League Spartan", sans-serif;

}

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
/* !!! ================================================================================= */
/* !!! ==============================   HEADER         ============================= */
.container_traducao {
  display: flex;
  column-gap: 1rem;
  align-items: center;
  justify-content: end;
}
.container_traducao P {
  font-size: 12px;
}
.brasil, .eua {
  width: 30px;
  height: 20px;
}
header {
  background-color:var(--branco);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 180px;
}
.container_header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120px;
}
.logo_header {
  height: 80px;
}
.nav_links {
  display: flex;
  gap: 2rem;
  margin-right: 3rem;
  
}
.nav_links a {
  text-decoration: none;
  color: var(--preto);
  font-weight: 500;
  font-size: 20px;
}
.menu_toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
  height: 25px;
  justify-content: space-between;
}
.menu_toggle span {
  height: 3px;
  width: 100%;
  background: #000;
  transition: all 0.3s ease;
}
.menu_toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu_toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu_toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* !!! ================================================================================= */
/* !!! ==============================   BANNER INICIO         ============================= */
.container_inicio {
  display: flex;
  width: 100%;
  background-image: url('/assets/banner_inicio_desktop.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.inicio_transparente {
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-evenly;
  align-items: center;
  padding: 2rem;
  margin: 3rem 5rem;
  width: 45vw;
  /* Efeito vidro */
  background: rgba(255, 255, 255, 0.1); /* fundo semi-transparente */
  backdrop-filter: blur(15px);          /* desfoque atrás */
  -webkit-backdrop-filter: blur(15px);  /* suporte Safari */
  border-radius: 16px;                  /* cantos arredondados */
  border: 1px solid rgba(255, 255, 255, 0.2); /* borda "cristal" */
}
.inicio_logo {
  width: 100px;
}
.inicio_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box_treslinhas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.5rem;
  color: var(--branco);
  font-family: var(--fonte-titulo);
  
  
}
.linha_texto_inicio {
  margin: 0;
  text-transform: uppercase;
  font-size: 26px;
  font-weight: bold;
  font-family: var(--fonte-titulo);
}
.linha_texto_inicio span{
  color: var(--amarelo-principal);
}
.box_subtitulo {
  display: flex;
}
.box_subtitulo p {
  color: var(--preto);
  font-weight:500;
  font-size: 22px;
  text-align: center;
  font-family: var(--fonte-titulo);
}
.inicio_botoes {
  display: flex;
  column-gap: 2rem;
  align-items: center;
  justify-content: center;
}
.btn_visitar, .btn_pastor {
  text-decoration: none;
  color: var(--preto);
  font-family: var(--fonte-titulo);
  font-size: 22px;
  font-weight: bold;
  padding: 1rem 2rem;
  background-color: rgba(255, 200, 1, 0.7); /* Amarelo com 70% */
  border-radius: 16px;
  box-shadow: 2px 7px 4px rgba(0, 0, 0, 0.25); /* sombra do Figma */
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn_visitar:hover {
  transform: translateY(-2px);
  box-shadow: 4px 10px 6px rgba(0, 0, 0, 0.3);
}

.btn_pastor:hover {
  transform: translateY(-2px);
  box-shadow: 4px 10px 6px rgba(0, 0, 0, 0.3);
}

/* !!! ================================================================================= */
/* !!! ==============================   BANNER DIAGONAL         ============================= */
/* container pai */
.container_diagonal {
  margin-top: 2rem;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* imagem como background total */
.imagem_fundo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./assets/banner_diagonal.png');
  background-size: cover; /* <- agora cobre tudo! */
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

/* bloco amarelo com diagonal */
.bloco_amarelo {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 55%;
  background-color: #ffc801;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* conteúdo interno */
.conteudo_texto {
  padding: 4rem 4rem 4rem 6rem;
  color: #000;
  max-width: 600px;
  z-index: 3;
}

.conteudo_texto h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  text-align: center;
  font-family: var(--fonte-titulo);
}

.conteudo_texto h2 span {
  color: white;
}

.conteudo_texto p {
  font-size: 1.1rem;
  line-height: 1.4;
  font-family: var(--fonte-texto);
}

/* !!! ================================================================================= */
/* !!! ==============================   BANNER MISSÃO E VISÃO============================ */
.container_missaoevisao {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
}
.missaoevisao_top {
  display: flex;
  flex-direction: column;
  align-items: center;

}
.missaoevisao_logo {
  width: 150px;
}
.missaoevisao_title {
  font-size: 26px;
  font-weight: bold;
  color: var(--preto);
  font-family: var(--fonte-titulo);
}
.missaoevisao_boxes {
  display: flex;
  padding: 0 1rem;
  column-gap: 2rem;
}
.missao_box {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  width: 40vw;
  background-color: #dadada;
  border-radius: 16px;
  padding: 0 0 8rem 0;
}
.missao_icone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: auto;
  z-index: 1;
}
.visao_box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40vw;
  background-color: var(--amarelo-principal);
  border-radius: 16px;
  padding: 0 0 8rem 0;
}
.visao_icone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: auto;
  z-index: 1;
}
.missao_title {
  font-size: 26px;
  font-weight: bold;
  color: var(--preto);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: var(--fonte-titulo);
  
}
.visao_title {
  font-size: 26px;
  font-weight: bold;
  color: var(--branco);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: var(--fonte-titulo);
}
.missao_texto {
  padding: 0 2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  z-index: 2;
  font-family: var(--fonte-texto);
}
.visao_texto {
  padding: 0 2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  font-family: var(--fonte-texto);
}

/* !! =========================== CONTAINER FOTOS IGREJA ========================== */
/* !! ============================================================================ */
.container_fotosIgreja {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
}
.fotosIgreja_titulo {
  font-size: 22px;
  font-family: var(--fonte-titulo);
  font-weight: bold;
  text-align: center;
}
.fotosIgreja_titulo span{
  color: var(--amarelo-principal);
}
.fotosIgreja_box {
  display: flex;
  align-items: stretch;
  
  gap: 2rem;

}
.igreja1, .igreja4{
  width: 400px;
  border-radius: 8px;
  object-fit: cover;
}
.igreja2, .igreja3{
  width: 200px;
}
.coluna_meio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* !!! =========================== CONTAINER PROGRAMAÇÃO =========================== */
/* !!! =============================================================================== */
.container_programacao{
  display: flex;
  width: 100vw;
  padding: 1rem;
  background-color: var(--amarelo-principal);

}
.programacao_jesus {
  width: 40vw;
}
.programacao_box {
  width: 50vw;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.programacao_titulo {
  font-size: 26px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--fonte-titulo);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.programacao_titulo span{
  color: var(--branco);
  

}
.programacao_subtitulo{
  font-size: 22px;
  font-family: var(--fonte-texto);
}
.programacao_boxes {
  display: flex;
  align-items: stretch;
  column-gap: 2rem;
}
.programacao_semana {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--branco);
  padding: 0.5rem 1rem;
  border-radius: 16px;
  justify-content: stretch;
  width: 20vw;
}
.semana_title {
  font-size: 16x;
  font-weight: bold;
  font-family: var(--fonte-titulo);
  text-align: center;
}
.semana_dias {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  padding-bottom: 1rem;
}
.diaehorario {
  margin: 0;
}
.semana_dia {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.semana_horario {
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  margin: 0;
}

/* !!! ======================== CONTAINER COMO CHEGAR ======================= */
/* !!! ====================================================================== */
.container_comochegar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  column-gap: 2rem;
}
.comochegar_texto {
  display: flex;
  flex-direction: column;
  width: 40vw;
  align-items: center;
  justify-content: space-evenly;
}
.comochegar_titulo {
  font-size: 28px;
  font-weight: bold;
  font-family: var(--fonte-titulo);
}
.comochegar_subtitulo {
  font-size: 18px;
  font-family: var(--fonte-texto);
  text-align: center;
}
.link_mapa {
  text-decoration: none;
  color: var(--preto);
  font-weight: bold;
  background-color: var(--amarelo-principal);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
  margin-bottom: 2rem;
}

.comochegar_imagem {
  width: 20vw;
}

/* !!! =========================== CONTAINER FALE CONOSCO ============================== */
/* !!! ================================================================================= */
.container_faleconosco {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem;
}
.faleconosco_info {
  display: flex;
  flex-direction: column;
  width: 50vw;
}
.faleconosco_lista {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.faleconosco_titulo {
  font-family: var(--fonte-titulo);
  color: var(--preto);
  font-size: 28px;
  font-weight: bold;
}
.faleconosco_subtitulo {
  font-family: var(--fonte-texto);
  font-size: 18px;
  margin: 0 3rem 1rem 0;
}
.faleconosco_canais {
  font-family: var(--fonte-titulo);
  color: var(--preto);
  font-size: 16px;
  font-weight: bold;
}
.bt_canais {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--preto);
  column-gap: 1rem;
  font-family: var(--fonte-texto);
}
.bt_canais span{
  font-weight: bold;
}
.bt_canais img{
  width: 40px;
}
.faleconosco_atendente img{
  width: 30vw;
}

/* !! ===================================== CONTAINER PROPÓSITOV ====================== */
/* !! ================================================================================= */
.container_proposito {
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: space-between;
  background-color: var(--amarelo-principal);

}
.proposito_imagem img{
  width: 40vw;
}
.proposito_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  
  
}
.proposito_titulo {
  font-size: 30px;
  font-weight: bold;
  font-family: var(--fonte-titulo);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.proposito_subtitulo {
  font-size: 24px;
  padding: 1rem;
  font-family: var(--fonte-texto);

}
/* !! ================================ CONTAINER CONTRIBUIÇÃO ====================== */
/* !! ============================================================================== */
.container_contribuicao {
  display: flex;
  width: 100vw;
}
.contribuicao_texto {
  display: flex;
  flex-direction: column;
  width: 60vw;
  align-items: center;
}
.contribuicao_titulo {
  font-size: 28px;
  font-family: var(--fonte-titulo);
  color: var(--roxo);
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 2rem;
}
.contribuicao_subtitulo {
  font-family: var(--fonte-texto);
  font-size: 20px;
  padding: 0 2rem;
  color: var(--preto);
  text-align: center;
}
.contribuicao_boxes {
  display: flex;
  margin: 0 2rem;
  column-gap: 1rem;
}
.contribuicao_box {
  display: flex;
  flex-direction: column;
  background-color: var(--roxo);
  border-radius: 16px;
  width: 220px;
  align-items: center;
  background: linear-gradient(to bottom, #5C1AD0 0%, #9614FF 100%);
  backdrop-filter: blur(10px); /* efeito glass */
  -webkit-backdrop-filter: blur(10px);


}
.dizimo_titulo {
  font-size: 20px;
  color: var(--amarelo-principal);
  font-weight: bold;
  text-align: center;
  padding: 0 0.5rem;
}
.dizimo_subtitulo {
  font-size: 16px;
  color: var(--branco);
  padding: 0 0.5rem;
  text-align: center;
  font-style: italic;
}
.dizimo_telefone {
  font-size: 16px;
  color: var(--branco);
}
.contribuicao_imagem {
  width: 40vw;
}
.contribuicao_imagem img{
  width: 30vw;
}
/* !! ============================= CONTAINER TRANSPARENCIA ============================ */
/* !! =================================================================================== */
.container_transparencia {
  display: flex;
  width: 100vw;

}
.transparencia_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
}
.transparencia_titulo {
  font-size: 28px;
  text-transform: uppercase;
  color: var(--preto);
  font-weight: bold;
  font-family: var(--fonte-titulo);
}
.transparencia_subtitulo {
  font-size: 24px;
  font-family: var(--fonte-texto);
}
.transparencia_imagem img {
  width: 40vw;
}

/* !! =================================== CONTAINER BIBLIA ============================== */
/* !! ================================================================================== */
.container_biblia {
  display: flex;
  width: 100vw;
  align-items: center;
  background-color: var(--amarelo-principal);
  padding: 2rem 0;
}
.biblia_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 3rem;
  width: 50vw;
}
.biblia_versiculo {
  font-size: 32px;
  font-weight: bold;
  font-family: var(--fonte-texto);
}
.biblia_subtitulo {
  font-size: 24px;
  font-family: var(--fonte-texto);
}
.logo_branca {
  width: 220px;
}
.biblia_imagembtn {
  width: 40vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
}
.biblia_imagembtn img {
  width: 30vw;
}
.biblia_botoes {
  display: flex;
  column-gap: 1rem;
}
.btn_investir {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: black;
  background: rgba(255, 255, 255, 0.1); /* fundo translúcido */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); /* sombra preta com opacidade */
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.2); /* borda leve */
}

/* !!! ============================== CONTINER DAYANE FOTO COM MARIDO ================= */
/* !!! ================================================================================ */
.container_dayane {
  position: relative; /* necessário pro before funcionar */
  display: flex;
  width: 100vw;
  align-items: start;
  justify-content: center;
  margin-top: 2rem;
  z-index: 1;
  column-gap: 2rem;
}

/* Fundo amarelo em metade da altura */
.container_dayane::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%; /* metade da altura */
  background-color: #F4A418; /* amarelo principal */
  z-index: 0; /* fica atrás do conteúdo */
}

/* Garantir que o conteúdo fique na frente */
.container_dayane > * {
  position: relative;
  z-index: 2;
}

.dayane_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
  row-gap: 6rem;
}
.dayane_texto_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dayane_titulo {
  font-size: 32px;
  text-transform: uppercase;
  color: var(--branco);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  width: 40vw;
  font-weight: bold;
}
.dayane_subtitulo {
  font-size: 24px;
  color: var(--preto);
  text-transform: uppercase;
  width: 40vw;
}
.dayane_foto {
  width: 40vw;
}
.dayane_logo {
  width: 40vw;
}

/* !!! ================================= FOOTER ========================= */
/* !!! ================================================================== */
footer {
  display: flex;
  justify-content: center;
  width: 100vw;
  align-items: center;
  column-gap: 3rem;
  padding: 2rem 0;
}
.logo_footer {
  width: 30vw;
}
.menus_footer {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.menus_footer a{
  text-decoration: none;
  color: var(--preto);
  font-size: 22px;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}
@media (max-width: 768px) {
  html {
  scroll-behavior: smooth;
}
  body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.container_traducao {
  display: flex;
  column-gap: 1rem;
  align-items: center;
  justify-content: end;
  height: 20px;
}
.container_traducao P {
  font-size: 12px;
}
.brasil, .eua {
  width: 20px;
  height: 10px;
}
  .container_header {
    height: 140px;
    padding: 0 1rem;
  }

  nav {
    position: relative;
    
  }

  .nav_links {
    display: none;
    flex-direction: column;
    align-items: center;
    background:var(--amarelo-principal);
    position: fixed;
    top: 160px;
    left: 0;
    margin: 0;
    width: 100vw;
    padding: 1rem 0;
    gap: 1rem;
    z-index: 999;
  }

  .nav_links.active {
    display: flex;
  }

  .nav_links a {
    color:var(--preto);
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.8rem;
    width: 100%;
    text-align: center;
    background-color: transparent;
    transition: background 0.2s;
    font-weight: bold;
  }

  .nav_links a:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .menu_toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 24px;
    gap: 6px;
    cursor: pointer;
    z-index: 1001;
  }

  .menu_toggle span {
    height: 4px;
    width: 100%;
    background: var(--preto);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .menu_toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(14px);
  }

  .menu_toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu_toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-14px);
  }


  /* !!! ================================================================================= */
/* !!! ==============================   BANNER INICIO         ============================= */
.container_inicio {
  display: flex;
  width: 100%;
  background-image: url('/assets/banner_inicio_mobile.png');
  background-repeat: no-repeat;
  background-size: cover;
}
.inicio_transparente {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  height: max-content;
  justify-content: space-evenly;
  align-items: center;
  padding: 1rem;
  margin: 3rem 2rem;
  width: 80vw;
  /* Efeito vidro */
  background: rgba(255, 255, 255, 0.1); /* fundo semi-transparente */
  backdrop-filter: blur(15px);          /* desfoque atrás */
  -webkit-backdrop-filter: blur(15px);  /* suporte Safari */
  border-radius: 16px;                  /* cantos arredondados */
  border: 1px solid rgba(255, 255, 255, 0.2); /* borda "cristal" */
}
.inicio_logo {
  width: 80px;
}
.inicio_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box_treslinhas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.3rem;
  color: var(--branco);
  
  
}
.linha_texto_inicio {
  margin: 0;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
}
.linha_texto_inicio span{
  color: var(--amarelo-principal);
}
.box_subtitulo {
  display: flex;
}
.box_subtitulo p {
  color: var(--preto);
  font-weight:500;
  font-size: 16px;
  text-align: center;
}
.inicio_botoes {
  display: flex;
  column-gap: 2rem;
  align-items: center;
  justify-content: center;
}
.btn_visitar, .btn_pastor {
  text-decoration: none;
  color: var(--preto);
  font-size: 14px;
  font-weight: bold;
  padding: 1rem;
  background-color: rgba(255, 200, 1, 0.7); /* Amarelo com 70% */
  border-radius: 16px;
  box-shadow: 2px 7px 4px rgba(0, 0, 0, 0.25); /* sombra do Figma */
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn_visitar:hover {
  transform: translateY(-2px);
  box-shadow: 4px 10px 6px rgba(0, 0, 0, 0.3);
}

.btn_pastor:hover {
  transform: translateY(-2px);
  box-shadow: 4px 10px 6px rgba(0, 0, 0, 0.3);
}

  /* !!! ================================================================================= */
/* !!! ==============================   BANNER DIAGONAL        ============================= */
/* !!! ==============================   BANNER DIAGONAL MOBILE ============================= */

.container_diagonal {
  display: flex;
  flex-direction: column-reverse;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Bloco amarelo com diagonal embaixo */
.bloco_amarelo {
  position: relative;
  width: 100%;
  background-color: #ffc801;
  padding: 2rem 0 8rem 0;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
  z-index: 2;
}

/* Texto interno responsivo */
.conteudo_texto {
  padding: 0 2.5rem;
  max-width: 100vw;
}
.conteudo_texto h2 {
  font-size: 26px;
}
.conteudo_texto p{
  line-height: 1.3;
}

/* Imagem que vai por trás do bloco amarelo */
.imagem_fundo {
  position: relative;
  width: 100%;
  height: 250px;
  background-image: url('./assets/banner_diagonal_mobile.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  margin-top: -60px; /* 💥 sobe a imagem pra ficar atrás da ponta diagonal */
}

/* !============================== MISSÃO E VISÃO BOXES ======================== */
/* !! ======================================================================== */
.missaoevisao_boxes {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  row-gap: 2rem;
  
}
.container_missaoevisao {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
}
.missaoevisao_top {
  display: flex;
  flex-direction: column;
  align-items: center;

}
.missaoevisao_logo {
  width: 100px;
}
.missaoevisao_title {
  font-size: 24px;
  font-weight: bold;
  color: var(--preto);
  font-family: var(--fonte-titulo);
}

.missao_box {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  width: 80vw;
  background-color: #dadada;
  border-radius: 16px;
  padding: 0 0 2rem 0;
}
.missao_icone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: auto;
  z-index: 1;
}
.visao_box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80vw;
  background-color: var(--amarelo-principal);
  border-radius: 16px;
  padding: 0 0 2rem 0;
}
.visao_icone {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: auto;
  z-index: 1;
}
.missao_title {
  font-size: 22px;
  font-weight: bold;
  color: var(--preto);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: var(--fonte-titulo);
  
}
.visao_title {
  font-size: 22px;
  font-weight: bold;
  color: var(--branco);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: var(--fonte-titulo);
}
.missao_texto {
  padding: 0 2rem;
  font-size: 16px;
  line-height: 1.5;
  z-index: 2;
  font-family: var(--fonte-texto);
}
.visao_texto {
  padding: 0 2rem;
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--fonte-texto);
}

/* !! =========================== CONTAINER FOTOS IGREJA ========================== */
/* !! ============================================================================ */
.container_fotosIgreja {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fotosIgreja_titulo {
  font-size: 22px;
  font-family: var(--fonte-titulo);
  font-weight: bold;
}
.fotosIgreja_box {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;

}
.fotosIgreja_box img {
  width: 70vw;
}

/* !!! =========================== CONTAINER PROGRAMAÇÃO =========================== */
/* !!! =============================================================================== */
.container_programacao{
  display: flex;
  flex-direction: column-reverse;
  
  align-items: center;
  justify-content: center;
  background-color: var(--amarelo-principal);

}
.programacao_jesus {
  width: 50vw;
}
.programacao_box {
  width: 100vw;
  margin: 0;padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.programacao_titulo {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--fonte-titulo);
}
.programacao_titulo span{
  color: var(--branco);
}
.programacao_subtitulo{
  font-size: 14px;
  font-family: var(--fonte-texto);
  margin: 0 1rem;
  width: 80vw;
}
.programacao_boxes {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  align-items: center;
}
.programacao_semana {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--branco);
  padding: 0.5rem 1rem;
  border-radius: 16px;
  
  width: 60vw;
}
.semana_title {
  font-size: 14x;
  font-weight: bold;
  font-family: var(--fonte-titulo);
  text-align: center;
}
.semana_dias {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  padding-bottom: 1rem;
}
.diaehorario {
  margin: 0;
}
.semana_dia {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.semana_horario {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  margin: 0;
}

/* !!! ======================== CONTAINER COMO CHEGAR ======================= */
/* !!! ====================================================================== */
.container_comochegar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  column-gap: 2rem;
}
.comochegar_texto {
  display: flex;
  flex-direction: column;
  width: 80vw;
  align-items: center;
  justify-content: space-evenly;
}
.comochegar_titulo {
  font-size: 28px;
  font-weight: bold;
  font-family: var(--fonte-titulo);
}
.comochegar_subtitulo {
  font-size: 18px;
  font-family: var(--fonte-texto);
  text-align: center;
}
.link_mapa {
  text-decoration: none;
  color: var(--preto);
  font-weight: bold;
  background-color: var(--amarelo-principal);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
  margin-bottom: 2rem;
}

.comochegar_imagem {
  display: none;
}
.comochegar_mapa iframe{
  width: 70vw;
}

/* !!! =========================== CONTAINER FALE CONOSCO ============================== */
/* !!! ================================================================================= */
.container_faleconosco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem;
}
.faleconosco_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
}
.faleconosco_lista {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.faleconosco_titulo {
  font-family: var(--fonte-titulo);
  color: var(--preto);
  font-size: 26px;
  font-weight: bold;
}
.faleconosco_subtitulo {
  font-family: var(--fonte-texto);
  font-size: 16px;
  text-align: center;
  margin: 0;
  padding: 0 1rem;

}
.faleconosco_canais {
  font-family: var(--fonte-titulo);
  color: var(--preto);
  font-size: 16px;
  font-weight: bold;
}
.bt_canais {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--preto);
  column-gap: 1rem;
  font-family: var(--fonte-texto);
  font-size: 14px;
}
.bt_canais span{
  font-weight: bold;
}
.bt_canais img{
  width: 30px;
}
.faleconosco_atendente img{
  width: 40vw;
}
/* !! ===================================== CONTAINER PROPÓSITOV ====================== */
/* !! ================================================================================= */
.container_proposito {
  display: flex;
  flex-direction: column-reverse;
  width: 100vw;
  align-items: center;
  
  background-color: var(--amarelo-principal);

}
.proposito_imagem img{
  width: 100vw;
}
.proposito_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  
  
}
.proposito_titulo {
  font-size: 26px;
  font-weight: bold;
  font-family: var(--fonte-titulo);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.proposito_subtitulo {
  font-size: 18px;
  padding: 1rem;
  font-family: var(--fonte-texto);

}
/* !! ================================ CONTAINER CONTRIBUIÇÃO ====================== */
/* !! ============================================================================== */
.container_contribuicao {
  display: flex;
  flex-direction: column;
  width: 100vw;
  align-items: center;
}
.contribuicao_texto {
  display: flex;
  flex-direction: column;
  
  align-items: center;
}
.contribuicao_titulo {
  font-size: 22px;
  font-family: var(--fonte-titulo);
  color: var(--roxo);
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 2rem;
  text-align: center;
}
.contribuicao_subtitulo {
  display: none;
}
.contribuicao_boxes {
  display: flex;
  flex-direction: column;
  margin: 0 2rem;
  
  row-gap: 1rem;
}
.contribuicao_box {
  display: flex;
  flex-direction: column;
  background-color: var(--roxo);
  border-radius: 16px;
  width: 60vw;
  align-items: center;
  background: linear-gradient(to bottom, #5C1AD0 0%, #9614FF 100%);
  backdrop-filter: blur(10px); /* efeito glass */
  -webkit-backdrop-filter: blur(10px);


}
.dizimo_titulo {
  font-size: 20px;
  color: var(--amarelo-principal);
  font-weight: bold;
  text-align: center;
  padding: 0 0.5rem;
}
.dizimo_subtitulo {
  font-size: 16px;
  color: var(--branco);
  padding: 0 0.5rem;
  text-align: center;
  font-style: italic;
}
.dizimo_telefone {
  font-size: 16px;
  color: var(--branco);
}
.contribuicao_imagem {
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contribuicao_imagem img{
  width: 50vw;
  
}
/* !! ============================= CONTAINER TRANSPARENCIA ============================ */
/* !! =================================================================================== */
.container_transparencia {
  display: flex;
  flex-direction: column;
  width: 100vw;
  align-items: center;

}
.transparencia_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 1rem;
  
}
.transparencia_titulo {
  font-size: 26px;
  text-transform: uppercase;
  color: var(--preto);
  font-weight: bold;
  font-family: var(--fonte-titulo);
  text-align: center;
  
}
.transparencia_subtitulo {
  font-size: 18px;
  font-family: var(--fonte-texto);
  
}
.transparencia_imagem img {
  width: 80vw;
}

/* !! =================================== CONTAINER BIBLIA ============================== */
/* !! ================================================================================== */
.container_biblia {
  display: flex;
  flex-direction: column;
  width: 100vw;
  align-items: center;
  background-color: var(--amarelo-principal);
  
}
.biblia_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80vw;
  
  
}
.biblia_versiculo {
  font-size: 20px;
  font-weight: bold;
  font-family: var(--fonte-texto);
}
.biblia_subtitulo {
  font-size: 18px;
  font-family: var(--fonte-texto);
}
.logo_branca {
  width: 60vw;
}
.biblia_imagembtn {
  width: 40vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
}
.biblia_imagembtn img {
  width: 50vw;
}
.biblia_botoes {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}
.btn_investir {
  display: inline-block;
  padding: 1rem;
  border-radius: 18px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: black;
  background: rgba(255, 255, 255, 0.1); /* fundo translúcido */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); /* sombra preta com opacidade */
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.2); /* borda leve */
}

/* !!! ============================== CONTINER DAYANE FOTO COM MARIDO ================= */
/* !!! ================================================================================ */
.container_dayane {
  position: relative; /* necessário pro before funcionar */
  display: flex;
  flex-direction: column-reverse;
  width: 100vw;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  z-index: 1;
  
}

/* Fundo amarelo em metade da altura */
.container_dayane::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%; /* metade da altura */
  background-color: #F4A418; /* amarelo principal */
  z-index: 0; /* fica atrás do conteúdo */
}

/* Garantir que o conteúdo fique na frente */
.container_dayane > * {
  position: relative;
  z-index: 2;
}

.dayane_texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  
}
.dayane_texto_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dayane_titulo {
  font-size: 26px;
  text-transform: uppercase;
  color: var(--branco);
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  width: 80vw;
  font-weight: bold;
}
.dayane_subtitulo {
  font-size: 18px;
  color: var(--preto);
  text-transform: uppercase;
  width: 80vw;
}
.dayane_foto {
  width: 60vw;
}
.dayane_logo {
  width: 50vw;
}

/* !!! ================================= FOOTER ========================= */
/* !!! ================================================================== */
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  align-items: center;
  column-gap: 3rem;
  padding: 2rem 0;
}
.logo_footer {
  width: 60vw;
  margin-bottom: 2rem;
}
.menus_footer {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.menus_footer a{
  text-decoration: none;
  color: var(--preto);
  font-size: 22px;
  text-transform: uppercase;
  font-family: var(--fonte-titulo);
}
}