/* ===========================================
   FUTURYCRAFT - RECRUTAMENTO STAFF
   STYLE.CSS
=========================================== */


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


*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:'Montserrat',sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

min-height:100vh;

background:

radial-gradient(
circle at top,
rgba(0,180,255,.18),
transparent 35%
),

linear-gradient(
135deg,
#030712,
#050816 60%,
#02030a
);

color:#ffffff;

overflow-x:hidden;

}




/* ===========================================
   PARTÍCULAS
=========================================== */


.particles{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:0;

}



.particle{

position:absolute;

width:4px;

height:4px;

background:#00d9ff;

border-radius:50%;

opacity:.5;

animation:

particleMove 12s infinite linear;

}




.particle:nth-child(1){

left:10%;

top:90%;

animation-delay:0s;

}



.particle:nth-child(2){

left:35%;

top:80%;

animation-delay:3s;

}



.particle:nth-child(3){

left:60%;

top:95%;

animation-delay:6s;

}



.particle:nth-child(4){

left:80%;

top:75%;

animation-delay:2s;

}



.particle:nth-child(5){

left:90%;

top:90%;

animation-delay:5s;

}





@keyframes particleMove{


0%{

transform:translateY(0);

opacity:0;

}


30%{

opacity:1;

}


100%{

transform:translateY(-120vh);

opacity:0;

}


}





/* ===========================================
   LOGO
=========================================== */


.tf-logo{

position:absolute;

top:20px;

left:50%;

transform:translateX(-50%);

z-index:10;

}


.tf-logo img{


width:130px;


filter:
drop-shadow(
0 0 30px rgba(0,217,255,.8)
);


}





/* ===========================================
   CONTAINER
=========================================== */


.container{


position:relative;

z-index:2;


max-width:1400px;


margin:auto;


padding:90px 30px 40px;


}





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


.main-card{


background:

rgba(7,13,28,.85);


border:

1px solid rgba(0,217,255,.18);


border-radius:35px;


padding:35px;

backdrop-filter:blur(15px);


box-shadow:


0 0 60px rgba(0,180,255,.12);


}





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


.card-header{

display:block;

position:relative;

padding-top:20px;

}



.header-content{

max-width:800px;

margin:auto;

padding-top:20px;

text-align:center;

}


.hero-buttons{

justify-content:center;

}


.hero-badge{


display:inline-flex;


align-items:center;


gap:10px;


padding:10px 20px;


border-radius:30px;


background:

rgba(0,217,255,.12);


border:

1px solid rgba(0,217,255,.3);


color:#00d9ff;


font-size:13px;


font-weight:700;


letter-spacing:1px;


margin-bottom:20px;

margin-top:10px;


position:relative;

margin-left:auto;
margin-right:auto;

}

/* ===========================================
   TITULO HERO
=========================================== */


.card-title{


font-size:48px;


line-height:1.1;


font-weight:800;


margin-bottom:20px;


}



.card-title span{


background:


linear-gradient(
90deg,
#00d9ff,
#7b5cff
);



-webkit-background-clip:text;


-webkit-text-fill-color:transparent;


}






.card-subtitle{


font-size:16px;


line-height:1.6;


color:#aebbd0;


margin-bottom:25px;


}




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


.hero-buttons{


display:flex;


align-items:center;


gap:20px;


margin-bottom:20px;


}




.hero-primary,
.hero-secondary{


height:55px;


padding:0 32px;


border-radius:16px;


display:flex;


align-items:center;


justify-content:center;


gap:12px;


font-weight:700;


font-size:15px;


cursor:pointer;


transition:.3s;


text-decoration:none;


}





.hero-primary{


background:


linear-gradient(
135deg,
#00d9ff,
#006eff
);



color:#fff;


box-shadow:


0 10px 35px rgba(0,217,255,.35);


}





.hero-primary:hover{


transform:translateY(-5px);


box-shadow:


0 20px 45px rgba(0,217,255,.5);


}






.hero-secondary{


background:


rgba(255,255,255,.05);


border:


1px solid rgba(255,255,255,.15);


color:white;


}





.hero-secondary:hover{


background:


rgba(0,217,255,.12);


border-color:#00d9ff;


transform:translateY(-5px);


}







/* ===========================================
   ESTATÍSTICAS
=========================================== */


.hero-stats{


display:grid;


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


gap:20px;


}




.hero-stat{


padding:25px;


background:


rgba(255,255,255,.04);


border:


1px solid rgba(255,255,255,.08);


border-radius:22px;


text-align:center;


transition:.3s;


}





.hero-stat:hover{


transform:translateY(-8px);


border-color:rgba(0,217,255,.5);


}






.hero-stat h2{


font-size:36px;


font-weight:800;


background:


linear-gradient(
90deg,
#00d9ff,
#8b6cff
);



-webkit-background-clip:text;


-webkit-text-fill-color:transparent;


}





.hero-stat span{


display:block;


margin-top:8px;


color:#94a3b8;


font-size:14px;


}







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


.ImagemPrincipal-container{


position:relative;


max-width:550px;


}





.imagem-glow{


position:absolute;


inset:20px;


background:


radial-gradient(
circle,
rgba(0,217,255,.45),
transparent 70%
);



filter:blur(50px);


}





.ImagemPrincipal{

position:relative;


width:100%;


}







@keyframes floating{


0%,
100%{


transform:translateY(0);


}


50%{


transform:translateY(-15px);


}


}

/* ===========================================
   PROCESSO SELETIVO
=========================================== */


.processo-seletivo{


margin-top:100px;


padding-top:50px;


border-top:


1px solid rgba(255,255,255,.08);


}





.processo-header{


text-align:center;


margin-bottom:60px;


}





.processo-header h2{


font-size:38px;


font-weight:800;


}





.processo-header p{


margin-top:15px;


color:#94a3b8;


}





/* ===========================================
   TIMELINE
=========================================== */


.timeline{


display:flex;


align-items:center;


justify-content:center;


gap:20px;


}





.timeline-item{


width:220px;


text-align:center;


}





.timeline-icon{


width:75px;


height:75px;


margin:auto;


display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


background:


linear-gradient(
135deg,
#00d9ff,
#006eff
);



font-size:28px;


box-shadow:


0 0 35px rgba(0,217,255,.35);


margin-bottom:20px;


}





.timeline-item h3{


font-size:20px;


margin-bottom:10px;


}





.timeline-item p{


color:#a8b5c8;


font-size:14px;


line-height:1.6;


}





.timeline-line{


width:80px;


height:2px;


background:


linear-gradient(
90deg,
transparent,
#00d9ff,
transparent
);


}







/* ===========================================
   SEÇÃO CARGOS
=========================================== */


.staff-section{


margin-top:100px;


}





.section-header{


text-align:center;


max-width:800px;


margin:0 auto 60px;


}





.section-badge{


display:inline-flex;


align-items:center;


gap:10px;


padding:10px 22px;


border-radius:30px;


background:


rgba(0,217,255,.1);


border:


1px solid rgba(0,217,255,.25);


color:#00d9ff;


font-size:13px;


font-weight:700;


}





.section-header h2{


font-size:42px;


margin-top:25px;


font-weight:800;


}





.section-header p{


margin-top:15px;


color:#9eacc0;


line-height:1.7;


}







/* ===========================================
   BOTÕES DOS CARGOS
=========================================== */


.staff-buttons{


display:grid;


grid-template-columns:


repeat(5,1fr);


gap:25px;


}





.staff-role{


text-align:center;


}





.staff-button{


position:relative;


width:100%;


height:260px;


border-radius:25px;


overflow:hidden;


cursor:pointer;


background:


rgba(255,255,255,.04);



border:


1px solid rgba(255,255,255,.1);


transition:.35s;


}





.staff-button::before{


content:"";


position:absolute;


inset:0;


background:


linear-gradient(
135deg,
rgba(0,217,255,.2),
transparent
);



opacity:0;


transition:.3s;


}





.staff-button:hover::before{


opacity:1;


}





.staff-button:hover{


transform:translateY(-12px);


border-color:#00d9ff;


box-shadow:


0 20px 50px rgba(0,217,255,.25);


}





.staff-button img{


position:absolute;


bottom:0;


left:50%;


transform:translateX(-50%);


height:220px;


max-width:90%;


object-fit:contain;


transition:.35s;


}





.staff-button:hover img{


transform:


translateX(-50%)
scale(1.08);


}





.staff-level{


position:absolute;


top:15px;


left:15px;


z-index:2;


padding:7px 15px;


border-radius:20px;


background:


rgba(0,217,255,.15);


border:


1px solid rgba(0,217,255,.35);


color:#00d9ff;


font-size:12px;


font-weight:700;


}





.staff-role span{


display:block;


margin-top:18px;


font-size:20px;


font-weight:800;


}





.staff-role small{


display:block;


margin-top:8px;


font-size:13px;


color:#8998ad;


}

/* ===========================================
   EVOLUÇÃO DA STAFF
=========================================== */


.career-path{


margin-top:80px;


padding:35px;


border-radius:25px;


background:


rgba(255,255,255,.03);


border:


1px solid rgba(255,255,255,.08);


}





.career-title{


display:flex;


justify-content:center;


align-items:center;


gap:12px;


font-size:22px;


font-weight:800;


margin-bottom:35px;


}





.career-title i{


color:#00d9ff;


}





.career-line{


display:flex;


justify-content:center;


align-items:center;


gap:18px;


}





.career-step{


text-align:center;


}





.step-circle{


width:50px;


height:50px;


display:flex;


align-items:center;


justify-content:center;


margin:auto;


border-radius:50%;


background:


rgba(255,255,255,.08);


border:


1px solid rgba(255,255,255,.15);


font-weight:800;


}





.career-step.active .step-circle{


background:


linear-gradient(
135deg,
#00d9ff,
#006eff
);



box-shadow:


0 0 25px rgba(0,217,255,.5);


}





.career-step span{


display:block;


margin-top:12px;


color:#cbd5e1;


font-size:14px;


}





.career-arrow{


color:#00d9ff;


font-size:20px;


}







/* ===========================================
   INFORMAÇÕES DOS CARGOS
=========================================== */


.role-information{


margin-top:100px;


}





.role-info-header{


text-align:center;


margin-bottom:50px;


}





.role-info-header h2{


font-size:38px;


margin-top:25px;


}





.role-info-header p{


margin-top:15px;


color:#94a3b8;


}





.role-card{


display:flex;


align-items:center;


gap:50px;


padding:45px;


background:


rgba(255,255,255,.04);


border:


1px solid rgba(255,255,255,.1);


border-radius:30px;


}





.role-card-image{


width:300px;


height:300px;


display:flex;


align-items:center;


justify-content:center;


background:


radial-gradient(
circle,
rgba(0,217,255,.18),
transparent 70%
);



}





.role-card-image img{


max-height:280px;


max-width:100%;


}





.role-card-content h3{


font-size:35px;


font-weight:800;


}





.role-tag{


display:inline-block;


margin:15px 0;


padding:8px 20px;


border-radius:20px;


background:


rgba(0,217,255,.15);


color:#00d9ff;


font-weight:700;


}





.role-card-content p{


color:#a8b5c8;


line-height:1.8;


}





.role-permissions{


margin-top:30px;


}





.role-permissions h4{


font-size:18px;


margin-bottom:15px;


}





.role-permissions ul{


list-style:none;


}





.role-permissions li{


padding:10px 0;


color:#d1d9e6;


}





.role-permissions li::before{


content:"✓";


color:#00d9ff;


margin-right:10px;


}







/* ===========================================
   REQUISITOS
=========================================== */


.requirements-section{


margin-top:100px;


}





.requirements-header{


text-align:center;


margin-bottom:50px;


}





.requirements-header h2{


font-size:38px;


margin-top:20px;


}





.requirements-header p{


margin-top:15px;


color:#94a3b8;


}





.requirements-grid{


display:grid;


grid-template-columns:


repeat(4,1fr);


gap:25px;


}





.requirement-card{


padding:35px 25px;


text-align:center;


background:


rgba(255,255,255,.04);


border:


1px solid rgba(255,255,255,.08);


border-radius:25px;


transition:.3s;


}





.requirement-card:hover{


transform:translateY(-8px);


border-color:#00d9ff;


}





.requirement-icon{


width:70px;


height:70px;


margin:auto;


display:flex;


align-items:center;


justify-content:center;


border-radius:20px;


background:


linear-gradient(
135deg,
#00d9ff,
#006eff
);



font-size:25px;


margin-bottom:20px;


}

/* ===========================================
   BENEFÍCIOS
=========================================== */


.benefits-section{


margin-top:100px;


}





.benefits-header{


text-align:center;


margin-bottom:50px;


}





.benefits-header h2{


font-size:38px;


margin-top:20px;


}





.benefits-header p{


margin-top:15px;


color:#94a3b8;


}





.benefits-grid{


display:grid;


grid-template-columns:


repeat(4,1fr);


gap:25px;


}





.benefit-card{


padding:35px 25px;


background:


rgba(255,255,255,.04);


border:


1px solid rgba(255,255,255,.1);


border-radius:25px;


text-align:center;


transition:.3s;


}





.benefit-card:hover{


transform:translateY(-10px);


border-color:#00d9ff;


}





.benefit-icon{


font-size:35px;


color:#00d9ff;


margin-bottom:20px;


}





.benefit-card p{


margin-top:15px;


color:#a8b5c8;


line-height:1.7;


}







/* ===========================================
   CHAMADA FINAL
=========================================== */


.final-section{


margin-top:100px;


}





.final-box{


padding:60px 40px;


text-align:center;


border-radius:35px;


background:


linear-gradient(
135deg,
rgba(0,217,255,.12),
rgba(123,92,255,.12)
);



border:


1px solid rgba(0,217,255,.25);


}





.final-icon{


font-size:55px;


color:#00d9ff;


margin-bottom:25px;


}





.final-box h2{


font-size:42px;


font-weight:800;


}





.final-box p{


max-width:700px;


margin:20px auto 35px;


color:#b4c1d5;


line-height:1.8;


}





.final-button{


display:inline-flex;


align-items:center;


gap:12px;


padding:18px 40px;


border-radius:18px;


background:


linear-gradient(
135deg,
#00d9ff,
#006eff
);



color:#fff;


font-weight:800;


text-decoration:none;


transition:.3s;


}





.final-button:hover{


transform:translateY(-6px);


box-shadow:


0 15px 40px rgba(0,217,255,.45);


}







/* ===========================================
   FOOTER
=========================================== */


.footer{


margin-top:70px;


padding-top:40px;


border-top:


1px solid rgba(255,255,255,.08);



display:flex;


align-items:center;


justify-content:space-between;


}





.footer-logo img{


width:120px;


}





.footer-text h3{


font-size:22px;


}





.footer-text p{


margin-top:8px;


color:#8998ad;


}





.footer-social{


display:flex;


gap:15px;


}





.footer-social a{


width:45px;


height:45px;


display:flex;


align-items:center;


justify-content:center;


border-radius:50%;


background:


rgba(255,255,255,.06);


color:#fff;


font-size:20px;


transition:.3s;


}





.footer-social a:hover{


background:#00d9ff;


color:#001018;


transform:translateY(-5px);


}








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


.role-modal{


position:fixed;


inset:0;


display:none;


align-items:center;


justify-content:center;


z-index:999;


}





.role-modal.active{


display:flex;


}





.modal-overlay{


position:absolute;


inset:0;


background:


rgba(0,0,0,.75);


backdrop-filter:blur(8px);


}





.modal-content{


position:relative;


z-index:2;


width:500px;


max-width:90%;


padding:45px;


border-radius:30px;


background:#071020;


border:


1px solid rgba(0,217,255,.3);


text-align:center;


box-shadow:


0 0 60px rgba(0,217,255,.25);


}





.modal-close{


position:absolute;


right:20px;


top:20px;


width:40px;


height:40px;


border:none;


border-radius:50%;


cursor:pointer;


background:


rgba(255,255,255,.1);


color:white;


}





.modal-content img{


height:180px;


}





.modal-content h2{


font-size:32px;


}





#modalRoleLevel{


display:inline-block;


margin:15px;


padding:8px 18px;


border-radius:20px;


background:


rgba(0,217,255,.15);


color:#00d9ff;


font-weight:700;


}





.modal-content p{


color:#a8b5c8;


line-height:1.7;


}





.modal-responsibilities{


margin-top:25px;


text-align:left;


}





.modal-responsibilities ul{


list-style:none;


margin-top:15px;


}





.modal-responsibilities li{


padding:8px 0;


color:#d1d9e6;


}





.modal-responsibilities li::before{


content:"✓";


color:#00d9ff;


margin-right:10px;


}







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


@media(max-width:1100px){


.card-header{


flex-direction:column;


text-align:center;


}



.staff-buttons{


grid-template-columns:


repeat(3,1fr);


}



.requirements-grid,
.benefits-grid{


grid-template-columns:


repeat(2,1fr);


}



.hero-stats{


grid-template-columns:


repeat(2,1fr);


}



.timeline{


flex-wrap:wrap;


}



.timeline-line{


display:none;


}



}







@media(max-width:700px){


.container{


padding:20px;


}



.main-card{


padding:25px;


}



.tf-logo{


position:relative;


top:20px;


left:20px;


}



.card-title{


font-size:38px;


}



.hero-buttons{


flex-direction:column;


}



.hero-primary,
.hero-secondary{


width:100%;


}



.hero-stats{


grid-template-columns:


1fr;


}



.staff-buttons{


grid-template-columns:


1fr;


}



.role-card{


flex-direction:column;


text-align:center;


padding:30px;


}



.requirements-grid,
.benefits-grid{


grid-template-columns:


1fr;


}



.career-line{


flex-wrap:wrap;


}



.career-arrow{


display:none;


}



.footer{


flex-direction:column;


gap:25px;


text-align:center;


}



.final-box h2{


font-size:30px;


}


}