/* ===========================================
   FUTURYCRAFT - RECRUTAMENTO STAFF
   RECRUTAMENTO.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,217,255,.18),
transparent 35%
),


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



color:#fff;


overflow-x:hidden;


}







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


.page-logo{

display:flex;

justify-content:center;

margin-bottom:0;

}


.page-logo img{

width:110px;

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

}










/* ===========================================
   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;

}


}









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


.recruit-container{

position:relative;

z-index:2;

min-height:100vh;

height:auto;

display:flex;

justify-content:center;

align-items:flex-start;

padding:20px 15px 30px;

}









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


.recruit-card{


width:100%;


max-width:1050px;


padding:24px;


border-radius:35px;



background:


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




border:


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




backdrop-filter:blur(15px);




box-shadow:


0 0 70px rgba(0,180,255,.15);



/* mantido e juntado */

position:relative;

overflow:hidden;


animation:

cardEnter .8s ease;



}



.recruit-card::before{


content:"";


position:absolute;


inset:0;


border-radius:35px;


background:


linear-gradient(
135deg,
rgba(0,217,255,.12),
transparent 40%
);



pointer-events:none;



}









/* ===========================================
   HEADER
=========================================== */


.recruit-header{


text-align:center;


max-width:850px;


margin:auto;



}




.recruit-badge{


display:inline-flex;


align-items:center;


justify-content:center;


gap:10px;



padding:10px 22px;



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:8px;



}




.recruit-header h1{


font-size:40px;


line-height:1;


font-weight:800;


margin-bottom:8px;


}




.recruit-header h1 span{


display:block;


background:


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



-webkit-background-clip:text;


-webkit-text-fill-color:transparent;


}




.recruit-description{


max-width:750px;


margin:0 auto 8px;



font-size:15px;



line-height:1.45;



color:#aebbd0;



}

/* ===========================================
   GRID DE INFORMAÇÕES
=========================================== */


.recruit-grid{


display:grid;


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


gap:25px;


width:100%;


margin-bottom:20px;



}









/* ===========================================
   CARD DE INFORMAÇÃO
=========================================== */


.info-card{


padding:18px;



background:


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




border:


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




border-radius:25px;



text-align:left;



transition:.35s;



}







.info-card:hover{


transform:translateY(-8px);



border-color:


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




box-shadow:


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



}









.info-card h2{


text-align:center;


font-size:18px;


font-weight:800;


margin-bottom:25px;




background:


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



-webkit-background-clip:text;


-webkit-text-fill-color:transparent;



}











/* ===========================================
   LISTAS
=========================================== */


.info-card ul{


list-style:none;


padding:0;



}







.info-card li{


position:relative;


padding:5px 0 5px 28px;




font-size:13px;



line-height:1.45;



color:#cbd5e1;



}







.info-card li::before{


content:"✓";



position:absolute;


left:0;


top:10px;




color:#00d9ff;




font-weight:900;




font-size:16px;



}













/* ===========================================
   BOTÃO PRINCIPAL
=========================================== */


.recruit-button{


width:100%;


max-width:420px;



height:58px;



margin:0 auto;



display:flex;



align-items:center;



justify-content:center;




border-radius:16px;



border:none;



cursor:pointer;



background:


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





color:white;



font-size:15px;



font-weight:800;



letter-spacing:.08em;



text-decoration:none;



transition:.35s;



box-shadow:


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



position:relative;


overflow:hidden;



}








.recruit-button:hover{


transform:translateY(-6px);



box-shadow:


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



}








.recruit-button::after{


content:"";


position:absolute;


top:0;


left:-100%;



width:100%;


height:100%;



background:


linear-gradient(
90deg,
transparent,
rgba(255,255,255,.25),
transparent
);



transition:.6s;



}




.recruit-button:hover::after{


left:100%;



}











/* ===========================================
   SEGUNDA ETAPA
=========================================== */


.hidden-step{


display:none;



}







#segunda-etapa{


text-align:center;


max-width:850px;


margin:auto;


flex-direction:column;


justify-content:flex-start;


min-height:auto;


transform:translateY(-60px);



}







#segunda-etapa 

.recruit-description{


margin-bottom:8px;



}







#segunda-etapa .recruit-badge{


margin-bottom:8px;


}


#segunda-etapa{

transform:translateY(-120px);

}







/* ===========================================
   ANIMAÇÕES DAS ETAPAS
=========================================== */


.fade-out{


opacity:0;


transform:translateY(-20px);




transition:.4s ease;



}







.fade-in{


animation:


showStep .5s ease forwards;



}








@keyframes showStep{


from{



opacity:0;


transform:translateY(10px);



}



to{



opacity:1;


transform:translateY(0);



}



}

/* ===========================================
   EFEITO CARD ENTRADA
=========================================== */


@keyframes cardEnter{


from{


opacity:0;


transform:translateY(30px);



}



to{


opacity:1;


transform:translateY(0);



}



}









/* ===========================================
   AJUSTES DE TELA PRINCIPAL
=========================================== */


/*
   Mantém o conteúdo centralizado
   sem criar rolagem desnecessária
*/



@media(min-width:1000px){


.recruit-container{


padding-top:25px;

padding-bottom:15px;


#segunda-etapa{

transform:translateY(-160px);




.recruit-card{


padding:24px;



}




.recruit-header h1{


font-size:40px;



}




.recruit-description{


margin-bottom:15px;



}




.info-card{


padding:18px;



}





.info-card li{


padding-top:8px;


padding-bottom:8px;



}



}












/* ===========================================
   TABLET
=========================================== */



@media(max-width:1000px){





.recruit-container{



padding:100px 20px 40px;




}







.recruit-card{



max-width:850px;



padding:35px;




}








.recruit-header h1{



font-size:42px;




}








.recruit-grid{



grid-template-columns:1fr;




}








.info-card{



text-align:left;




}



}















/* ===========================================
   MOBILE
=========================================== */



@media(max-width:700px){





.page-logo{


position:fixed;


top:10px;


left:50%;


transform:translateX(-50%);


z-index:999;



#segunda-etapa{

transform:translateY(-80px);

}




.page-logo img{


width:110px;



}











.recruit-container{



padding:60px 15px 30px;




}








.recruit-card{



padding:25px 20px;



border-radius:25px;




}









.recruit-header h1{



font-size:32px;


line-height:1.2;




}








.recruit-badge{



font-size:11px;




padding:8px 16px;




}









.recruit-description{



font-size:15px;




line-height:1.6;




margin-bottom:25px;




}








.recruit-grid{



grid-template-columns:1fr;




gap:18px;




}








.info-card{



padding:22px;




border-radius:20px;




}









.info-card h2{



font-size:16px;




}









.info-card li{



font-size:13px;




padding-left:28px;




}








.recruit-button{



height:52px;




font-size:13px;




}



}

/* ===========================================
   CELULARES PEQUENOS
=========================================== */


@media(max-width:400px){



.recruit-header h1{


font-size:28px;



}




.recruit-card{


padding:20px 15px;



}





.info-card{


padding:18px;



}



}









/* ===========================================
   FOCO DOS ELEMENTOS
=========================================== */


.recruit-button:focus{


outline:none;



box-shadow:


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

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




}









/* ===========================================
   LINKS
=========================================== */


a{


color:inherit;



}









/* ===========================================
   SELEÇÃO DE TEXTO
=========================================== */


::selection{


background:#00d9ff;


color:#001018;



}









/* ===========================================
   MELHORIAS PARA GRANDES TELAS
=========================================== */


@media(min-width:1400px){





.recruit-card{



max-width:1150px;




}






.recruit-header h1{



font-size:46px;




}




}









/* ===========================================
   REDUÇÃO DE MOVIMENTO
=========================================== */


@media(prefers-reduced-motion:reduce){





*{



animation-duration:.01ms!important;


animation-iteration-count:1!important;


transition-duration:.01ms!important;




}



}