/*==========================================================
JACOB ENGENHARIA 2.0
TRABALHE-CONOSCO.CSS
PARTE 1
==========================================================*/


/*==========================================================
INTRODUÇÃO
==========================================================*/

.talentos-intro{

    padding:100px 0;

    background:#ffffff;

}

.talentos-intro .servico-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.talentos-intro .servico-imagem img{

    width:100%;

    border-radius:20px;

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.talentos-intro .servico-texto h2{

    font-size:2.5rem;

    color:#0F172A;

    margin:18px 0;

}

.talentos-intro .servico-texto p{

    color:#667085;

    line-height:1.8;

    margin-bottom:18px;

}


/*==========================================================
QUEM PODE PARTICIPAR
==========================================================*/

.quem-pode{

    padding:100px 0;

    background:#F8FAFC;

}

.quem-pode .servicos-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:50px;

}

.quem-pode .servico-card{

    background:#ffffff;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:28px;

    text-align:center;

    transition:.30s;

}

.quem-pode .servico-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.quem-pode .servico-card i{

    display:block;

    font-size:2.8rem;

    color:#D4AF37;

    margin-bottom:18px;

}

.quem-pode .servico-card h3{

    color:#0F172A;

    margin-bottom:15px;

}

.quem-pode .servico-card p{

    color:#667085;

    line-height:1.7;

}


/*==========================================================
POR QUE SE CADASTRAR
==========================================================*/

.porque-talentos{

    padding:100px 0;

    background:#ffffff;

}

.porque-talentos .diferenciais-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:50px;

}

.porque-talentos .diferencial-card{

    background:#F8FAFC;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:28px;

    text-align:center;

    transition:.30s;

}

.porque-talentos .diferencial-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.porque-talentos .diferencial-card i{

    display:block;

    font-size:2.8rem;

    color:#D4AF37;

    margin-bottom:18px;

}

.porque-talentos .diferencial-card h3{

    color:#0F172A;

    margin-bottom:15px;

}

.porque-talentos .diferencial-card p{

    color:#667085;

    line-height:1.7;

}


/*==========================================================
COMO FUNCIONA
==========================================================*/

.como-funciona-talentos{

    padding:100px 0;

    background:#F8FAFC;

}

.etapas-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:50px;

}

.etapa-card{

    background:#ffffff;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:28px;

    text-align:center;

    transition:.30s;

}

.etapa-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.numero{

    width:60px;

    height:60px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#D4AF37;

    color:#0F172A;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.3rem;

    font-weight:700;

}

.etapa-card h3{

    color:#0F172A;

    margin-bottom:15px;

}

.etapa-card p{

    color:#667085;

    line-height:1.7;

}

/*==========================================================
ÁREAS DE ATUAÇÃO
==========================================================*/

.areas-talentos{

    padding:100px 0;

    background:#ffffff;

}

.areas-talentos .servicos-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:50px;

}

.areas-talentos .servico-card{

    background:#F8FAFC;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:28px;

    text-align:center;

    transition:.30s;

}

.areas-talentos .servico-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.areas-talentos .servico-card i{

    display:block;

    font-size:2.8rem;

    color:#D4AF37;

    margin-bottom:18px;

}

.areas-talentos .servico-card h3{

    color:#0F172A;

    margin-bottom:15px;

}

.areas-talentos .servico-card p{

    color:#667085;

    line-height:1.7;

}


/*==========================================================
COMPROMISSO
==========================================================*/

.compromisso-talentos{

    padding:100px 0;

    background:#F8FAFC;

}

.compromisso-talentos .diferenciais-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:50px;

}

.compromisso-talentos .diferencial-card{

    background:#ffffff;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:28px;

    text-align:center;

    transition:.30s;

}

.compromisso-talentos .diferencial-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.compromisso-talentos .diferencial-card i{

    display:block;

    font-size:2.8rem;

    color:#D4AF37;

    margin-bottom:18px;

}

.compromisso-talentos .diferencial-card h3{

    color:#0F172A;

    margin-bottom:15px;

}

.compromisso-talentos .diferencial-card p{

    color:#667085;

    line-height:1.7;

}


/*==========================================================
CADASTRO
==========================================================*/

.cadastro-talentos{

    padding:100px 0;

    background:#ffffff;

}

.cadastro-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:50px;

}

.cadastro-card{

    background:#F8FAFC;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:30px;

    transition:.30s;

}

.cadastro-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.cadastro-card i{

    display:block;

    font-size:2.8rem;

    color:#D4AF37;

    margin-bottom:18px;

}

.cadastro-card h3{

    color:#0F172A;

    margin-bottom:20px;

}

.cadastro-card ul{

    padding-left:20px;

    margin:0;

}

.cadastro-card li{

    color:#667085;

    line-height:1.8;

    margin-bottom:10px;

}

.cadastro-cta{

    margin-top:60px;

    text-align:center;

    background:#F8FAFC;

    border-radius:20px;

    padding:45px;

    border:1px solid #EEF2F6;

}

.cadastro-cta h3{

    color:#0F172A;

    margin-bottom:20px;

}

.cadastro-cta p{

    max-width:800px;

    margin:0 auto 30px;

    color:#667085;

    line-height:1.8;

}


/*==========================================================
FAQ
==========================================================*/

.faq-talentos{

    padding:100px 0;

    background:#F8FAFC;

}

.faq-container{

    max-width:900px;

    margin:50px auto 0;

}

.faq-item{

    background:#ffffff;

    border:1px solid #EEF2F6;

    border-radius:18px;

    padding:28px;

    margin-bottom:20px;

}

.faq-item h3{

    color:#0F172A;

    margin-bottom:15px;

}

.faq-item p{

    color:#667085;

    line-height:1.8;

}


/*==========================================================
CTA FINAL
==========================================================*/

.cta-talentos{

    padding:100px 0;

    background:#0F172A;

    text-align:center;

}

.cta-talentos .titulo-secao{

    color:#D4AF37;

}

.cta-talentos h2{

    color:#ffffff;

    margin:20px 0;

}

.cta-talentos p{

    color:#CBD5E1;

    max-width:750px;

    margin:0 auto 35px;

    line-height:1.8;

}


/*==========================================================
RESPONSIVO
==========================================================*/

@media(max-width:1200px){

.quem-pode .servicos-grid,

.porque-talentos .diferenciais-grid,

.compromisso-talentos .diferenciais-grid,

.cadastro-grid,

.etapas-grid{

grid-template-columns:repeat(2,1fr);

}

.areas-talentos .servicos-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.talentos-intro,

.quem-pode,

.porque-talentos,

.como-funciona-talentos,

.areas-talentos,

.compromisso-talentos,

.cadastro-talentos,

.faq-talentos,

.cta-talentos{

padding:80px 0;

}

.talentos-intro .servico-grid{

grid-template-columns:1fr;

gap:40px;

}

}

@media(max-width:768px){

.quem-pode .servicos-grid,

.porque-talentos .diferenciais-grid,

.compromisso-talentos .diferenciais-grid,

.areas-talentos .servicos-grid,

.cadastro-grid,

.etapas-grid{

grid-template-columns:1fr;

}

.cadastro-cta{

padding:35px 25px;

}

}

@media(max-width:480px){

.talentos-intro .servico-texto h2{

font-size:1.8rem;

}

.numero{

width:55px;

height:55px;

font-size:1.2rem;

}

}