/* ==========================================================
   GUIAS.CSS
   BOA COMPANHIA NA TRILHA
   Ecossistema Alta Piatã
========================================================== */



/* ==========================================================
   RESET LOCAL
========================================================== */


#companhia-trilha {

    width: 100%;

    overflow: hidden;

}


#companhia-trilha *,
#modal-profissional * {

    box-sizing: border-box;

}




/* ==========================================================
   ESTRUTURA DA SEÇÃO
========================================================== */


#companhia-trilha .container {

    width: min(1200px, 92%);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 2.5rem;

}




/* ==========================================================
   CABEÇALHO
========================================================== */


#companhia-trilha .section-header {

    max-width: 850px;

}



#companhia-trilha .section-label {

    display: inline-flex;

    align-items: center;

    margin-bottom: 1rem;

    padding: .45rem 1rem;

    border-radius: 50px;

    background: rgba(38, 120, 80, .12);

    color: #267850;

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}



#companhia-trilha h2 {

    margin: 0 0 1rem;

    color: #1c2b24;

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.15;

}



#companhia-trilha .section-header p {

    margin: 0;

    color: #4b5563;

    font-size: 1.05rem;

    line-height: 1.8;

}





/* ==========================================================
   BUSCA E EXPLORAÇÃO
========================================================== */


.profissionais-explorar {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}




/* ==========================================================
   CAMPO DE BUSCA
========================================================== */


.profissionais-busca {

    width: 100%;

}



.profissionais-busca label {

    display: block;

    margin-bottom: .6rem;

    color: #1f2937;

    font-size: .9rem;

    font-weight: 700;

}



.campo-busca {

    position: relative;

}



#busca-profissionais {

    width: 100%;

    height: 56px;

    padding: 0 1.4rem;

    border-radius: 16px;

    border: 1px solid #d1d5db;

    background: #ffffff;

    color: #111827;

    font-size: 1rem;

    transition: .25s ease;

}



#busca-profissionais::placeholder {

    color: #9ca3af;

}



#busca-profissionais:hover {

    border-color: #9ca3af;

}



#busca-profissionais:focus {

    outline: none;

    border-color: #267850;

    box-shadow:

        0 0 0 4px rgba(38,120,80,.15);

}





/* ==========================================================
   FILTROS
========================================================== */


.profissionais-filtros {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;

}



.filtro-profissional {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: .55rem 1.1rem;

    border-radius: 50px;

    border: 1px solid #d1d5db;

    background: #ffffff;

    color: #374151;

    font-size: .85rem;

    font-weight: 700;

    cursor: pointer;

    transition: .25s ease;

}



.filtro-profissional:hover {

    border-color: #267850;

    color: #267850;

}



.filtro-profissional.ativo {

    background: #267850;

    border-color: #267850;

    color: #ffffff;

}





/* ==========================================================
   RESUMO DO CATÁLOGO
========================================================== */


.profissionais-resumo {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 1rem 1.25rem;

    border-radius: 18px;

    background: #f3f4f6;

}



.profissionais-resumo p {

    margin: 0;

    color: #374151;

    font-size: .95rem;

    font-weight: 600;

}



#contador-profissionais {

    color: #267850;

    font-size: .85rem;

    font-weight: 700;

}

/* ==========================================================
   CATÁLOGO DE CONDUTORES
========================================================== */


.profissionais-grid {

    display: grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 2rem;

}





/* ==========================================================
   CARD
========================================================== */


.profissional-card {

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 24px;

    box-shadow:

        0 12px 35px rgba(0,0,0,.08);

    transition:

        transform .3s ease,
        box-shadow .3s ease;

}



.profissional-card:hover {

    transform:

        translateY(-8px);


    box-shadow:

        0 25px 55px rgba(0,0,0,.14);

}





/* ==========================================================
   IMAGEM
========================================================== */


.profissional-imagem {

    position: relative;

    height: 260px;

    overflow: hidden;

}



.profissional-imagem img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:

        transform .6s ease;

}



.profissional-card:hover
.profissional-imagem img {

    transform:

        scale(1.08);

}




/* Camada de leitura sobre a imagem */



/* ==========================================================
   TIPO DO PROFISSIONAL
========================================================== */


.profissional-tipo {

    position:absolute;

    top:1.2rem;

    left:1.2rem;

    z-index:2;

    padding:.45rem .8rem;

    border-radius:50px;

    background:rgba(255,255,255,.90);

    color:#267850;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.05em;

    text-transform:uppercase;

}




/* ==========================================================
   CONTEÚDO
========================================================== */


.profissional-info {

    display:

        flex;


    flex-direction:

        column;


    gap:

        1rem;


    padding:

        1.5rem;

}



.profissional-cidade {

    color:

        #6b7280;


    font-size:

        .82rem;


    font-weight:

        600;

}




.profissional-info h3 {

    margin:

        0;


    color:

        #111827;


    font-size:

        1.45rem;


    line-height:

        1.2;

}





.profissional-descricao {

    margin:

        0;


    color:

        #4b5563;


    font-size:

        .95rem;


    line-height:

        1.7;

}





/* ==========================================================
   ESPECIALIDADES
========================================================== */


.profissional-especialidades {

    display:

        flex;


    flex-wrap:

        wrap;


    gap:

        .5rem;

}



.profissional-especialidades span {

    display:

        inline-flex;


    align-items:

        center;


    padding:

        .4rem .75rem;


    border-radius:

        50px;


    background:

        #f3f4f6;


    color:

        #374151;


    font-size:

        .75rem;


    font-weight:

        700;

}





/* ==========================================================
   EXPERIÊNCIAS
========================================================== */


.profissional-trilhas {

    padding-top:

        1rem;


    border-top:

        1px solid #e5e7eb;

}



.profissional-trilhas h4 {

    margin:

        0 0 .8rem;


    color:

        #111827;


    font-size:

        .95rem;

}



.profissional-trilhas p {

    position:

        relative;


    margin:

        0 0 .45rem;


    padding-left:

        1rem;


    color:

        #4b5563;


    font-size:

        .9rem;

}



.profissional-trilhas p::before {

    content:

        "";


    position:

        absolute;


    left:

        0;


    top:

        .55rem;


    width:

        6px;


    height:

        6px;


    border-radius:

        50%;


    background:

        #267850;

}





/* ==========================================================
   BOTÕES
========================================================== */


.profissional-acoes {

    display:

        flex;


    gap:

        .75rem;


    margin-top:

        .5rem;

}



.profissional-acoes button,
.profissional-acoes a {

    flex:

        1;


    display:

        inline-flex;


    align-items:

        center;


    justify-content:

        center;


    min-height:

        44px;


    padding:

        .7rem 1rem;


    border-radius:

        50px;


    font-size:

        .85rem;


    font-weight:

        800;


    text-decoration:

        none;


    cursor:

        pointer;


    transition:

        .25s ease;

}





.btn-perfil {

    border:

        1px solid #d1d5db;


    background:

        #ffffff;


    color:

        #1f2937;

}



.btn-perfil:hover {

    border-color:

        #267850;


    color:

        #267850;

}




.btn-whatsapp {

    background:

        #267850;


    color:

        #ffffff;


}



.btn-whatsapp:hover {

    transform:

        translateY(-2px);


    opacity:

        .9;

}

/* ==========================================================
   ESTADO VAZIO
========================================================== */


.estado-vazio {

    padding:

        3rem 2rem;

    text-align:

        center;

    border-radius:

        24px;

    background:

        #f9fafb;

    border:

        1px solid #e5e7eb;

}


.estado-vazio h3 {

    margin:

        0 0 .7rem;

    color:

        #111827;

}



.estado-vazio p {

    margin:

        0;

    color:

        #6b7280;

}



/* ==========================================================
   MODAL
========================================================== */


.modal-profissional {

    position:

        fixed;

    inset:

        0;

    z-index:

        9999;

    display:

        flex;

    align-items:

        center;

    justify-content:

        center;

    padding:

        1.5rem;

}



.modal-profissional[hidden] {

    display:

        none;

}



.modal-profissional-overlay {

    position:

        absolute;

    inset:

        0;

    background:

        rgba(0,0,0,.65);

    backdrop-filter:

        blur(8px);

}





.modal-profissional-container {

    position:

        relative;

    z-index:

        2;

    width:

        100%;

    max-width:

        900px;

    max-height:

        90vh;

    overflow:

        hidden;

    background:

        #ffffff;

    color:

        #1f2937;

    border-radius:

        28px;

    box-shadow:

        0 30px 80px rgba(0,0,0,.35);

}





#conteudo-modal-profissional {

    max-height:

        90vh;

    overflow-y:

        auto;

}





/* ==========================================================
   FECHAR MODAL
========================================================== */


.modal-fechar {

    position:

        absolute;

    top:

        1rem;

    right:

        1rem;

    z-index:

        10;

    width:

        42px;

    height:

        42px;

    border:

        none;

    border-radius:

        50%;

    background:

        rgba(0,0,0,.55);

    color:

        #ffffff;

    font-size:

        1.5rem;

    cursor:

        pointer;

}





/* ==========================================================
   PERFIL HERO
========================================================== */


.perfil-hero {

    position:

        relative;

    height:

        420px;

}



.perfil-hero img {

    width:

        100%;

    height:

        100%;

    object-fit:

        cover;

}



.perfil-hero::after {

    content:

        "";

    position:

        absolute;

    inset:

        0;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.85),

            transparent

        );

}




.perfil-resumo {

    position:

        absolute;

    left:

        2rem;

    bottom:

        2rem;

    right:

        2rem;

    z-index:

        2;

    color:

        #ffffff;

}



.perfil-tipo {

    display:

        inline-flex;

    margin-bottom:

        .8rem;

    padding:

        .45rem .85rem;

    border-radius:

        50px;

    background:

        rgba(255,255,255,.2);

    color:

        #ffffff;

    font-size:

        .75rem;

    font-weight:

        800;

    text-transform:

        uppercase;

}



.perfil-resumo h2 {

    margin:

        0 0 .5rem;

    font-size:

        clamp(1.8rem,4vw,2.5rem);

}



.perfil-resumo p {

    margin:

        0;

    color:

        rgba(255,255,255,.9);

}





/* ==========================================================
   GALERIA
========================================================== */


.perfil-galeria {

    padding:

        2rem;

}



.perfil-galeria h3 {

    margin:

        0 0 1rem;

    color:

        #111827;

}



.perfil-galeria-grid {

    display:

        grid;

    grid-template-columns:

        repeat(

            auto-fit,

            minmax(160px,1fr)

        );

    gap:

        1rem;

}



.perfil-galeria-grid img {

    width:

        100%;

    height:

        160px;

    object-fit:

        cover;

    border-radius:

        18px;

}





/* ==========================================================
   SEÇÕES DO PERFIL
========================================================== */


.perfil-secao {

    padding:

        0 2rem 2rem;

}



.perfil-secao h3 {

    margin:

        0 0 1rem;

    color:

        #111827;

    font-size:

        1.15rem;

}



.perfil-secao p {

    margin:

        0;

    color:

        #374151;

    line-height:

        1.8;

}



.perfil-secao ul {

    display:

        flex;

    flex-wrap:

        wrap;

    gap:

        .6rem;

    padding:

        0;

    margin:

        0;

    list-style:

        none;

}



.perfil-secao li {

    padding:

        .45rem .8rem;

    border-radius:

        50px;

    background:

        #f3f4f6;

    color:

        #374151;

    font-size:

        .85rem;

}





/* ==========================================================
   CONTATOS
========================================================== */


.perfil-contatos {

    display:

        flex;

    flex-wrap:

        wrap;

    gap:

        .8rem;

}



.perfil-contatos a {

    display:

        inline-flex;

    align-items:

        center;

    justify-content:

        center;

    padding:

        .7rem 1.2rem;

    border-radius:

        50px;

    background:

        #267850;

    color:

        #ffffff;

    font-weight:

        800;

    text-decoration:

        none;

}





/* ==========================================================
   BLOQUEIO DE FUNDO
========================================================== */


body.modal-aberto {

    overflow:

        hidden;

}





/* ==========================================================
   RESPONSIVIDADE
========================================================== */


@media (max-width: 768px) {


    .profissionais-resumo {

        flex-direction:

            column;

        align-items:

            flex-start;

    }



    .profissionais-grid {

        grid-template-columns:

            1fr;

    }



    .profissional-acoes {

        flex-direction:

            column;

    }



    .modal-profissional {

        padding:

            .5rem;

    }



    .modal-profissional-container {

        border-radius:

            20px;

        max-height:

            95vh;

    }



    .perfil-hero {

        height:

            320px;

    }



    .perfil-resumo {

        left:

            1.2rem;

        right:

            1.2rem;

        bottom:

            1.2rem;

    }



    .perfil-galeria,
    .perfil-secao {

        padding-left:

            1.2rem;

        padding-right:

            1.2rem;

    }


}