* {
    margin: 0;
}



.overflow {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.47);
    z-index: 1;
  }

.time-container-prof {
    display: grid !important;
    grid-template-columns: repeat(3, 4fr) !important; /* sempre 4 colunas */
    gap: 30px !important;
    padding: 40px !important;
}

/* card */
.quadrado {
    margin: 40px;
    width: 350px;
    border: 2px solid black;
    padding: 40px 20px;
    text-align: center;
    background: #fff;
    
}

.cargo {
    margin-bottom: 30px;
}

.photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

h2 {
    font-size: 32px;
    color: #4a3208;
    margin: 0;
}

.cargo {
    font-size: 18px;
    color: #4a3208;
    margin-top: 10px;
}

.icons{
    font-size: 25px;
    display: flex;
    justify-content: center;

}

.icons a{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.icons i{
    margin: 0;
    
}


.icon-zap{
    padding: 15px;
    background-color: #473417;
    border-radius: 100%;
    color: white;
    margin-right: 38px;
    
    
}

.icon-email{
    background-color: #473417;
    padding: 15px;
    border-radius: 50%;
    color: white;
    
}


.labels {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 33px;
}










/* ===============================
        RESPONSIVO MOBILE
================================*/
@media (max-width: 768px) {
    .time-container-prof {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important; /* sempre 4 colunas */
    gap: 30px !important;
    padding: 40px !important;
}

    .profissaott {
        height: 90vh;
    }

    /* conteúdo centralizado */
    .profissaott .hero-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        align-items: center;
    }

    /* logo menor */
    .profissaott .hero-logo {
        width: 160px;
        margin-bottom: 15px;
    }

    /* texto centralizado + menor */
    .profissaott .hero-text {
        font-size: 1.9rem;
        text-align: center;
    }
}

/* EXTRA: para telas muito pequenas */
@media (max-width: 420px) {
    .profissaott .hero-text {
        font-size: 1.6rem;
    }
    .profissaott .hero-logo {
        width: 130px;
    }
}


.columflex{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 2 colunas */
    gap: 24px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 200px;
}

.identidade h1{
    color:#473417;
    margin-top: 30px;
    font-size: 35px;
    font-weight: bold;
}

.identidade p{
    color: #473417;
    margin-top: 10px;
}

.identidade{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 50px;
    border: 2px solid #473417;
}

.iconesdiv i{
    background-color: #473417;
    padding: 17px;
    border-radius: 50px;
    font-size: 25px;
}

.iconesdiv a{
    color: rgb(255, 255, 255);
}

.iconesdiv p{
    color: #473417;
}


.iconesdiv{
    margin-top: 70px;
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    gap: 24px; 
}

body.dark .iconesdiv p{
    color: rgb(255, 255, 255);
}

body.dark .iconesdiv i{
    background-color: rgb(67, 67, 67);
}

body.dark .identidade{
    border: 2px solid rgb(82, 82, 82);
    background-color: rgb(0, 0, 0);
}

body.dark .identidade h1{
    color: rgb(255, 255, 255);
}

body.dark .identidade p{
    color: rgb(255, 255, 255);
}



@media screen and (max-width: 900px){

.columflex{
    display: flex;
    flex-direction: column;
}


.identidade{
    padding: 50px;
}

.iconesdiv{
    margin-top: 50px;
    margin-bottom: 10px;
    gap: 14px; 
}

.profissaott{

    margin-bottom: 50px;
    position: relative;
    display: flex;
    width: 100%;
    height: 300px;
  }

}

/* Tablet – 2 cards por linha */
@media screen and (max-width: 992px) {
    .time-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .labels {
        gap: 60px;
    }
}

/* Celular – 1 card por linha */
@media screen and (max-width: 600px) {
    .time-container {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .quadrado {
        width: 90%;
        margin: 0 auto;
    }

    h2 {
        font-size: 24px;
    }

    .icons {
        gap: 25px;
    }

    .labels {
        gap: 45px;
    }
}