@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  scroll-behavior: smooth;
  font-family: "Montserrat", sans-serif;
}

/* [data-aos]{
    transition-property: transform, opacity !important;
    transition-duration: 1s !important;
    transition-timing-function: ease !important;
} */

hr {
  color: rgb(0, 0, 0);
  background-color: rgb(0, 0, 0);
  height: 2px;
  border: none;
}

:root {
  --cor-principal: black;
  --cor-secundaria: #9ca3af;
}

body {
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle, rgb(226, 233, 235) 0%, rgb(238, 237, 237) 52%, rgba(237, 247, 255, 1) 100%);
}

main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

strong {
  color: #141f38;
}



/* cabecalho*/
.topo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.paginas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 4vh;
    font-size: 1.5vh;
    align-items: center;
    justify-content: center;


}

#paginas_link {
    text-decoration: none;
    font-weight: 550;
    color: #1e40af;
    padding-bottom: 0.5vh;
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 0.3s ease-in-out;
    text-align: center;
    white-space: nowrap;
}

#iconMenu {
   display: none;
    width: 4vh;
    height: 4vh;
    color: #1e40af;
    cursor: pointer;
}



#wcpsemfundo {
  width: 18vh;
  display: grid;
}

.div_Logo {
  display: grid;
  grid-template-columns: 1fr;

}s


#paginas_link:hover {
  border-bottom-color: rgb(255, 174, 0);
}


/* mainn */

.bloco_hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20vh 0vh ;
  text-align: center;
  background-color: #232f42;
  width: 100%;
  gap: 3vh;
  
}








#tituloHero {
  font-size: 6.5rem;
  font-weight: 500;
  color: rgba(223, 215, 215, 0.952);
 

}

#subtituloHero {
  font-size: 2.5vh;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.842);
}



#textoHero {
  font-weight: 300;
  color: #fdfdff91;
  width: 30%;
}




.bloquinhos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4vh;


}



.configBloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1vh;
  padding: 2vh;
  color: white;
  transition: background-color 0.3s ease-in-out ;
  width: 20vh;
  height: 15vh;


}

.configBloco:hover {

  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.configBloco:hover .bloquinho_icon {
  background-color: #05050750;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);

}

.bloquinho_icon {
  display: flex;
  padding: 2vh;
  border-radius: 1vh;
  background-color: #0507111a;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}

.bloco_timeline {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  padding-top: 10vh;
  padding-bottom: 10vh;
}



.timelineEsquerda {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  align-items: start;
  flex: 0 0 auto;
  max-width: 45%;


}

.armazenaTitulo {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 2vh;
  width: max-content;

}

.mudaLinha {
  display: flex;
  flex-direction: column;

}



#tituloNossa {
  font-size: 9vh;
  font-weight: 300;
}

.linhaNossa {
  width: 100%;

}

#tituloNossa strong {
  font-weight: 550;
  color: #0d1d52;
}

.subtituloTimeline {
  font-size: 2.5vh;
  font-weight: 500;
}

.paragrafoTimeline {
  font-weight: 400;
  font-size: 1.8vh;
}

.bloco_textos {
  display: flex;
  flex-direction: column;
  width: 60%;
  gap: 2vh;

}

.bloco_mensagem {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  gap: 2vh;
  border-radius: 1vh;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 3vh;
  width: 80%;
  background-color: #a09c9c13;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.esquerdaMensagem {
  display: flex;
  align-items: start;
}

.blocoIconluz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  background-color: #232f42;
}

.iconLuz {
  color: white;
  width: 2.2vh;
  height: 2.2vh;
}

.direitaMensagem {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  justify-content: start;
}

.textoMensagem {
  font-style: italic;
  font-size: 2vh;
  color: #1e293b;
  font-weight: 500;
}

.assinatura {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2vh;
  text-align: center;
}

.bolaWP {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  background-color: #232f42;
  color: white;
  font-weight: 600;
}

.nomeCargo {
  display: flex;
  flex-direction: column;
  color: #334155;
  font-size: 1.6vh;
}

.nomeCargo p:first-child {
  font-weight: 600;
}

.nomeCargo p:last-child {
  font-size: 1.4vh;
  color: #64748b;
}

.bloco_timelineDireita {
  display: flex;
  flex-direction: column;
  gap: 6vh;
  align-items: center;
  max-width: 45%;
}

.bloco_invisivel {
  display: flex;
  flex-direction: row;
  gap: 2vh;
  width: max-content;
}

.esquerdaInvisivel {
  display: flex;
  align-items: start;

}

.blocoIconFoguete {
  display: flex;
  align-items: center;
  padding: 1.5vh;
  border-radius: 1vh;
  border: 1px solid rgba(0, 0, 0, 0.315);
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  transition: box-shadow 0.3s ease-in-out;

}

.blocoIconFoguete:hover {
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(13, 15, 17, 0.582) 0px 0px 0px 1px;
}


.blocoIconFoguete i {
  width: 8vh;
  height: 8vh;
  font-size: 3vh;

}

.iconFoguete {
  width: 3.5vh;
  height: 3.5vh;

}

.direitaInvisivel {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.096);
  padding: 3vh;
  border-radius: 1vh;
  max-width: 40vh;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 0px;
  gap: 1vh;
  transition: box-shadow 0.3s ease-in-out;
  align-items: start
}

.direitaInvisivel:hover {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.bloco_invisivel:hover .direitaInvisivel {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 4px 6px, rgba(0, 0, 0, 0.23) 0px 1px 3px;
}

.bloco_invisivel:hover .blocoIconFoguete {
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(13, 15, 17, 0.582) 0px 0px 0px 1px;
}



.direitaInvisivel p {
  font-weight: 300;
}

.direitaInvisivel h4 {
  width: 30%;
  font-weight: 600;
}



.bloco_missaovalores {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #c8c8ca15;
  gap: 5vh;

  padding: 8vh 0vh;
}

.armazenaMissaoValores {
  display: flex;
  flex-direction: row;
  gap: 16px;

}

.armazenaMissaoValores h1 {
  font-size: 6vh;
  font-weight: 400;

}

#visao {
  color: #141f38;
  font-weight: 550;
}

.juncaoMissaoVisao {
  display: flex;
  flex-direction: row;
  gap: 5vh;
  margin: 0 auto;

}


.blocoMissao {
  display: flex;
  flex-direction: column;
  gap: 3vh;
  max-width: max-content;
  background-color: #ffffff59;
  border-radius: 1vh;
  padding: 5vh;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.blocoMissao:hover {
  transform: scale(1.01);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.SupBloco {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 2vh;
}

.SupBloco h2 {
  font-size: 2.5vh;
  font-weight: 300;
}

.blocoIconLampada {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh;
  border-radius: 1vh;
  background-color: #232f42;

}

.iconLampada {
  width: 3vh;
  height: 3vh;
  color: white;
}

.textoMissao {
  font-weight: 420;
  font-size: 1.8vh;
  color: #050507b9;
  width: 55vh;
}

.textoMissao strong {
  color: #232f42;
}

.blocoValores {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 10vh 0vh;
}

.blocoValores h1 {
  font-size: 6vh;
  font-weight: 400;
}


.bloco_quadradosValores {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-column-gap: 20vh;
  grid-row-gap: 5vh;
  margin: 0 auto;
}

.configQuadrados {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  background-color: #a09c9c13;
  padding: 5vh;
  border-radius: 1vh;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  gap: 2vh;
  transition: box-shadow 0.3s ease-in-out;

}

.configQuadrados h1 {
  color: #141f38;
  font-size: 4vh;
  font-weight: 400;
  margin-bottom: 1vh;

}

.configQuadrados:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


.configQuadrados p {
  max-width: 50vh;
  font-weight: 400;
  color: #334155d2;
}


.iconQuadrados {
  display: flex;
  align-items: center;
  background-color: #232f42;
  padding: 2vh;
  border-radius: 1vh;
}

#iconQuadrado {
  color: white;
  width: 3vh;
  height: 3vh;

}

.blocoEquipe {
  display: flex;
  background-color: #c8c8ca15;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  padding: 7vh 0vh;
}

.supEquipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh;
}

.supEquipe h1 {
  font-size: 6vh;
  font-weight: 400;
}


.blocoOrganizaEquipe {
  display: flex;
  flex-direction: row;
  gap: 2vh;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}


.blocoFunc {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 30%;
  background: radial-gradient(circle, rgb(226, 233, 235) 0%, rgba(238, 243, 245, 0.747) 52%, rgba(237, 247, 255, 1) 100%);
  gap: 2.5vh;
  padding: 2vh;
  border-radius: 1vh;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.blocoSupFunc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
}

.blocoIconEquipe {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5vh;
  padding: 2vh;
  background-color: #232f42;

}

#iconUsuario {
  width: 3vh;
  height: 3vh;
  color: white;

}


.blocoTextoFun {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80%;
  text-align: center;
}


.BlocoQuadradosFunc {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  align-items: center;
  justify-content: center;
}


.quadradosFunc {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-column-gap: 2vh;
  grid-row-gap: 1vh;
  width: max-content;
}

.blocoQualidades {
  display: flex;
  flex-direction: column;
  padding: 1vh;
  border-radius: 1vh;
  background-color: #a09c9c13;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  transition: background-color 0.3s ease-in-out;
  align-items: center;
  justify-content: center;

}

.blocoQualidades:hover {
  background-color: #03030313;
  cursor: default;

}

.blocoQualidades p {
  font-size: 1.3vh;

}


#func1 {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#func2 {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#func3 {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#func1:hover {
  transform: scale(1.05);
  background-color: rgb(150, 150, 153);

}

#func2:hover {
  transform: scale(1.05);
  background-color: rgb(129, 156, 230);
}

#func3:hover {
  transform: scale(1.05);
  background-color: rgb(235, 179, 179);
}


.blocoContato {
  display: flex;
  flex-direction: column;
  background-color: #232f42;
  align-items: center;
  justify-content: center;
  padding: 7vh 0vh;
  gap: 4vh;
  margin-bottom: 5vh;

}

.supContato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}

.supContato h1 {
  font-size: 6vh;
  font-weight: 400;
  color: white;
}


.supContato p {
  width: 70%;
  text-align: center;
  color: rgb(194, 189, 189);
}

.blocoAlinhaBotaoContato {
  display: flex;
  flex-direction: row;
  gap: 2vh;


}

.blocoFunc,
.botaoContato .blocoMissao {
  transform-origin: center center;
  will-change: transform;
}

.botaoContato {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 1vh;
  gap: 1vh;
  padding: 2vh;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.botaoContato:hover {
  transform: scale(1.02);
}

#botao1 {
  border: 1.2px solid white;
  color: white;
  transition: background-color 0.3s ease-in-out;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

#botao1:hover {
  background-color: rgba(255, 255, 255, 0.699);
  color: #141f38;

}

#botao1:hover~#botao2 {
  background-color: transparent;
  color: white;
  border: 1.2px solid white;
}

#botao2 {
  background-color: rgba(255, 255, 255, 0.699);
  color: #141f38;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#setaDireita {
  transition: transform 0.3s ease-in-out;

}

.botaoContato:hover #setaDireita {
  transform: translateX(1vh);

}

































/* footer*/
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg,
      #070d1b 0%,
      #0d1530 50%,
      #111c3c 100%);
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  margin-top: 4vh;
}

footer p {
  color: #797575;
  font-weight: 480;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10vh;
  margin-top: 5vh;
  padding-bottom: 1rem;
  border-bottom: 2px solid gray;
}

.blocoUm,
.blocoDois {
  display: flex;
  flex-direction: column;
  align-items: start;
}

#blocoUmWcp {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1vh;
}

.textosBlocoUm {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  align-items: start;
  justify-content: center;
  gap: 2rem;
}

.div_icons {
  padding: 1.3vh;
  background: linear-gradient(145deg, #162d63 0%, #102255 100%);
  color: #f0c93d;
  border-radius: 1vh;
  align-items: center;
  justify-content: center;
}

.div_org_encontrar {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  margin-top: 1.5rem;
  color: #E9B224;
}

.numeroLia,
#endereco {
  color: #797575;
}

.blocoTelefone,
.blocoMail,
.blocoLocalizacao {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1vh;
  transition: transform 0.3s ease-in-out;
}

.blocoTelefone:hover,
.blocoLocalizacao:hover {
  transform: scale(1.08);
}

.div_relogio_horario {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  color: #E9B224;
}

.blocoRelogio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#horario {
  color: rgb(230, 227, 227);
}

#direitosWCP {
  margin-top: 2vh;
  font-size: 0.8rem;
  margin-bottom: 1vh;
}

/* ===========================
   RESPONSIVIDADE PARA MAX-WIDTH: 576px
   =========================== */

@media (max-width: 576px) {

    /* RESET GERAL PARA MOBILE */
    * {
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden;
        width: 100%;
    }

    main {
        overflow-x: hidden;
    }

    /* HEADER */
    
  #iconMenu {
    display: block;
    margin-right: 1rem;
  }

  .topo {
    justify-content: center;
    justify-content: space-between;
    align-items: center;
  }

  .paginas {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-right: 1rem;
    display: none;
    justify-content: center;
  }
    #wcpsemfundo {
        width: 18vh;
    }

    /* HERO */
    .bloco_hero {
        padding: 6vh 2vh;
        gap: 2vh;
        width: 100%;
    }

    #tituloHero {
        font-size: 2.2rem;
        width: 100%;
        word-wrap: break-word;
    }

    #subtituloHero {
        width: 90%;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    #textoHero {
        width: 90%;
        font-size: 0.8rem;
    }

    .bloquinhos {
        flex-direction: column;
        gap: 2vh;
        width: 100%;
        padding: 0 2vh;
    }

    .configBloco {
        width: 100%;
        max-width: 280px;
        height: auto;
        padding: 2vh;
    }

    .configBloco h1 {
        font-size: 1.5rem;
    }

    .configBloco p {
        font-size: 0.8rem;
    }

    /* TIMELINE */
    .bloco_timeline {
        flex-direction: column;
        padding: 5vh 2vh;
        gap: 4vh;
        width: 100%;
    }

    .timelineEsquerda,
    .bloco_timelineDireita {
        max-width: 100%;
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .armazenaTitulo {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }

    .mudaLinha {
        width: 100%;
    }

    #tituloNossa {
        font-size: 2.5rem;
    }

    .linhaNossa {
        width: 50%;
        margin: 0 auto;
    }

    .bloco_textos {
        width: 100%;
        padding: 0 1vh;
    }

    .subtituloTimeline {
        font-size: 1rem;
    }

    .paragrafoTimeline {
        font-size: 0.85rem;
    }

    .bloco_mensagem {
        flex-direction: column;
        width: 100%;
        padding: 2vh;
        text-align: center;
        gap: 1.5vh;
    }

    .esquerdaMensagem {
        justify-content: center;
    }

    .textoMensagem {
        font-size: 0.9rem;
    }

    .assinatura {
        justify-content: center;
    }

    .nomeCargo {
        font-size: 0.8rem;
    }

    .nomeCargo p:last-child {
        font-size: 0.7rem;
    }

    /* Timeline Direita */
    .bloco_timelineDireita {
        gap: 3vh;
    }

    .bloco_invisivel {
        flex-direction: row;
        width: 100%;
        padding: 0 1vh;
        gap: 1.5vh;
    }

    .esquerdaInvisivel {
        flex-shrink: 0;
    }

    .blocoIconFoguete {
        padding: 1vh;
    }

    .blocoIconFoguete i {
        width: 4vh;
        height: 4vh;
    }

    .iconFoguete {
        width: 2.5vh;
        height: 2.5vh;
    }

    .direitaInvisivel {
        max-width: 100%;
        width: 100%;
        padding: 2vh;
        text-align: left;
        align-items: flex-start;
    }

    .direitaInvisivel h4 {
        font-size: 0.85rem;
        width: auto;
    }

    .direitaInvisivel p {
        font-size: 0.8rem;
    }

    /* MISSAO & VISAO */
    .bloco_missaovalores {
        padding: 5vh 2vh;
        gap: 3vh;
    }

    .armazenaMissaoValores {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .armazenaMissaoValores h1 {
        font-size: 2rem;
    }

    .armazenaMissaoValores div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .juncaoMissaoVisao {
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 2vh;
    }

    .blocoMissao {
        width: 100%;
        max-width: 320px;
        padding: 2.5vh;
    }

    .SupBloco h2 {
        font-size: 1rem;
    }

    .blocoIconLampada {
        padding: 1.5vh;
    }

    .iconLampada {
        width: 2.5vh;
        height: 2.5vh;
    }

    .textoMissao {
        width: 100%;
        font-size: 0.8rem;
        text-align: left;
    }

    /* VALORES */
    .blocoValores {
        padding: 5vh 2vh;
        gap: 2vh;
    }

    .blocoValores h1 {
        font-size: 2rem;
    }

    .blocoValores > p {
        text-align: center;
        font-size: 0.85rem;
        padding: 0 1vh;
    }

    .blocoValores > div > hr {
        width: 80%;
    }

    .bloco_quadradosValores {
        grid-template-columns: 1fr;
        gap: 2vh;
        width: 100%;
        padding: 0;
    }

    .configQuadrados {
        padding: 2.5vh;
        width: 100%;
        text-align: left;
        align-items: flex-start;
        flex-direction: row;
        gap: 1.5vh;
    }

    .configQuadrados h1 {
        font-size: 1.2rem;
        margin-bottom: 0.5vh;
    }

    .configQuadrados p {
        max-width: 100%;
        font-size: 0.8rem;
    }

    .iconQuadrados {
        padding: 1.5vh;
        flex-shrink: 0;
    }

    #iconQuadrado {
        width: 2.5vh;
        height: 2.5vh;
    }

    /* EQUIPE */
    .blocoEquipe {
        padding: 5vh 2vh;
        gap: 3vh;
    }

    .supEquipe h1 {
        font-size: 2rem;
    }

    .supEquipe p {
        font-size: 0.85rem;
        text-align: center;
        padding: 0 1vh;
    }

    .blocoOrganizaEquipe {
        flex-direction: column;
        width: 100%;
        gap: 2vh;
    }

    .blocoFunc {
        width: 100%;
        max-width: 320px;
        padding: 2.5vh;
        gap: 2vh;
    }

    .blocoSupFunc h2 {
        font-size: 1.1rem;
    }

    .blocoSupFunc h4 {
        font-size: 0.9rem;
    }

    .blocoSupFunc p {
        font-size: 0.8rem;
    }

    .blocoIconEquipe {
        padding: 1.5vh;
    }

    #iconUsuario {
        width: 2.5vh;
        height: 2.5vh;
    }

    .blocoTextoFun p {
        font-size: 0.8rem;
    }

    .BlocoQuadradosFunc p {
        font-size: 0.8rem;
    }

    .quadradosFunc {
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 1vh;
    }

    .blocoQualidades {
        padding: 0.8vh;
    }

    .blocoQualidades p {
        font-size: 0.65rem;
        text-align: center;
    }

    /* Desabilitar hover scale no mobile */
    #func1:hover,
    #func2:hover,
    #func3:hover {
        transform: none;
    }

    
    .blocoContato {
        padding: 5vh 2vh;
        gap: 3vh;
        margin-bottom: 3vh;
    }

    .supContato h1 {
        font-size: 1.8rem;
    }

    .supContato p {
        width: 100%;
        font-size: 0.85rem;
    }

    .blocoAlinhaBotaoContato {
        flex-direction: column;
        width: 100%;
        gap: 1.5vh;
    }

    .botaoContato {
        width: 100%;
        padding: 1.5vh;
        font-size: 0.9rem;
    }

    .botaoContato h4 {
        font-size: 0.85rem;
    }

    .botaoContato i {
        width: 2vh;
        height: 2vh;
    }

    .footer{
      flex-direction: column;
      padding:0vh 2vh ;
    }
}