@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    overflow-x: hidden;
}

/* SECTIONS PRINCIPAIS */
section {
    width: 100%;
    padding: 65px 5%;   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section-introducao-quem-somos{
    padding-top: 180px;
}

/* INTRODUÇÃO */
.titulo-descricao-principal {
    text-align: center;
}

.h1-primario {
    font-size: 3rem;
    color: #ff5029;
    text-transform: uppercase;
    background: linear-gradient(to left, #ff5029, rgb(255, 51, 0), rgb(222, 190, 5), rgb(255, 85, 0));
    background-size: 500% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: degrade-animado 10s infinite alternate;
    margin-bottom: 20px;
}

.descricao {
    text-align: justify;
    font-size: 1.5rem;
    max-width: 1250px;
}

/* HISTÓRIA */
.titulo-nossa-historia-quem-somos h1 {
    font-size: 2.5rem;
    color: #8338ec;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(to left, rgb(81, 25, 171), rgb(238, 0, 255), rgb(92, 9, 134));
    background-size: 500% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: degrade-animado 10s infinite alternate;
    margin-bottom: 40px;
}

.carrossel-imagens,
.galeria {
    column-gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.carrossel-imagens {
    column-count: 3;
}

.galeria {
    column-count: 4;
}

.carrossel-imagens img,
.galeria img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    break-inside: avoid;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    display: block;
}

.carrossel-imagens img:hover,
.galeria img:hover {
    transform: scale(1.03);
}

/* FLUXO */
.descricao-fluxo {
    max-width: 900px;
    text-align: justify;
    font-size: 1.5rem;
}

.descricao-fluxo span {
    font-weight: bold;
}

/* NOSSO TIME E EXPOSITOR: mesma altura */
.section-nosso-time-quem-somos,
.section-expositor-quem-somos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;       /* altura mínima igual */
    width: 100%;
    padding: 80px 20px;      /* padding padronizado */
    box-sizing: border-box;
}

/* cores e animações específicas */
.section-nosso-time-quem-somos {
    background: linear-gradient(to left, #ff5029, rgb(255, 51, 0), rgb(222, 190, 5), rgb(255, 85, 0));
    background-size: 500% 100%;
    animation: degrade-animado 10s infinite alternate;
    color: #fff;
}

.section-expositor-quem-somos {
    background: linear-gradient(to left, rgb(81, 25, 171), rgb(238, 0, 255), rgb(92, 9, 134));
    background-size: 500% 100%;
    animation: degrade-animado 10s infinite alternate;
    color: #fff;
    text-align: center;
}

.div-nt h1,
.section-expositor-quem-somos h1 {
    font-size: 2.5rem;
    text-align: center;
}

/* COLABORADORAS */
.section-colaboradoras-quem-somos {
    display: flex;           
    flex-wrap: wrap;          
    justify-content: center;  
    gap: 60px 40px;   
    flex-direction: row;       
}

/* Cada card */
.section-colaboradoras-quem-somos .image-text-carina,
.section-colaboradoras-quem-somos .image-text-denise,
.section-colaboradoras-quem-somos .image-text-fernanda {
    flex: 1 1 250px;          
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-colaboradoras-quem-somos .fotos {
    width: 100%;              
    height: auto;            
    aspect-ratio: 1/1;        
    border-radius: 50%;
    object-fit: cover;
    border: 7px solid #f8f9fa;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.section-colaboradoras-quem-somos > div:hover .fotos {
    transform: scale(1.05);
    border-color: #ff5029;
}

.section-colaboradoras-quem-somos p {
    text-align: justify;
    margin-top: 10px;
}

.section-colaboradoras-quem-somos .profission {
    font-size: 1rem;
    font-weight: 500;
    color: #ff5029;
}

/* DESCRIÇÃO COLABORADORAS */
.descricao-colaboradoras-quem-somos {
    width: 100%;
    max-width: 1250px;
    text-align: justify;
    font-size: 1.5rem;
    margin-top: 40px;
    display: block;      
}

/* BOTÃO EXPOSITOR */
.div-botao {
    margin-top: 40px;
}

.botao-expositor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 60px;
    border-radius: 15px;
    background-color: #fff;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.botao-expositor:hover {
    transform: scale(1.05);
}

.botao-expositor .botao {
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(to left, rgb(81, 25, 171), rgb(238, 0, 255), rgb(92, 9, 134));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.expositor-p p{
    font-size: 1.5rem;
    max-width: 1250px;
}

/* H1 QUINTO */
.h1-quinto {
    font-size: 2.5rem;
    text-align: center;
    color: #ff5029;
    background: linear-gradient(to left, #c93e1f, rgb(255,51,0), rgb(222,190,5), rgb(253,102,26));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 40px;
}

/* ANIMAÇÕES */
@keyframes degrade-animado {
    0% { background-position-x: 0%; }
    100% { background-position-x: 100%; }
}

/* RESPONSIVIDADE */
@media (max-width: 1200px) {
    .carrossel-imagens { column-count: 2; }
    .galeria { column-count: 2; }
}

@media (max-width: 768px) {
    .carrossel-imagens, .galeria { column-count: 1; }
    .descricao, .descricao-fluxo, .descricao-colaboradoras-quem-somos, .descricao4 {
        font-size: 1.2rem;
        padding: 0 5%;
    }
    .section-colaboradoras-quem-somos .fotos {
        width: 180px;
        height: 180px;
    }
    .div-nt h1, .section-expositor-quem-somos h1, .h1-quinto, .titulo-nossa-historia-quem-somos h1 {
        font-size: 2rem;
    }
    .section-colaboradoras-quem-somos .image-text-carina,
    .section-colaboradoras-quem-somos .image-text-denise,
    .section-colaboradoras-quem-somos .image-text-fernanda {
        flex: 1 1 100%;   /* cards ficam um embaixo do outro */
        max-width: 300px;
    }
    .expositor-p p{
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .section-colaboradoras-quem-somos .fotos { width: 140px; height: 140px; }
    .descricao, .descricao-fluxo, .descricao-colaboradoras-quem-somos, .descricao4 {
        font-size: 1rem;
        padding: 0 3%;
    }
    .h1-primario { font-size: 1.7rem; }
    .h1-quinto, .titulo-nossa-historia-quem-somos h1 { font-size: 1.5rem; }
    .botao-expositor { width: 150px; font-size: 12px; height: 50px; }
    .expositor-p p{
        font-size: 1rem;
    }
}


.descricao-fluxo{
    max-width: 1250px;
}