* {

box-sizing: border-box;
font-family: system-ui, 'Segoe UI', 'Open Sans', 
'Helvetica Neue', sans-serif;

}

body{
background: linear-gradient( rgb(251, 236, 236),rgb(135, 135, 229))


}

body{
height: auto;

}
.boton_container {
display: flex;
gap: 1px;
}

button{
font-family: sans-serif;
font-size: 1.5rem;
color:black;
background-color: rgb(231, 229, 233);
padding:5px;
cursor: pointer;
border: none;


}

button:hover {
background-color: rgb(176, 201, 239);
}

button:active{
    background-color: rgb(91, 151, 235);

}

.boton_activo{
background-color: rgb(91, 151, 235);

}

.hero{
min-width: 20px;
width: auto;
text-align: center;
}

.titulo{
font-size: 2rem;

}

p,label,option{
font-size: 18px;
}


.container1, .container2, .container3 {
background-color: rgba(148, 58, 245, 0.278);
border-radius: 5px;
width: auto;
height:auto;
display: grid;

}

.sueldo_container{
width: 300px;
display: flex;
flex-direction:column;

padding-left: 5px;
gap: 15px;


}

.titulo{
padding: 10px;
}

.footer {
background-color: blueviolet;
height: 60px;
border-radius: 5px;;
font-size: 1.2rem;

}

.hide {
display: none;
}

.show{
display: block;
}

.display, .display_vacaciones, .display_aguinaldo{
background: linear-gradient( rgba(148, 58, 245, 0.278));
min-height: 50px;
max-width: 500px;
padding-left:8px;
border-radius: 5px;
}

.total_neto{
    color: rgb(21, 19, 19);
font-family: system-ui, -apple-system, BlinkMacSystemFont,
 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 25px;
font-weight: bolder;

}


.notice{
    opacity: 1;
color: rgb(217, 211, 222);
transition: opacity ease 2s;
}

.notice_2{
opacity: 0;
transform: translateX(100px);
transition: all ease-in 0.5s;
}

img {
width: 30px;
height: 25px;
}

input{
border-radius: 15px;
}


.banner{
width: 400px;
height: 80px;
border-radius: 15px;
filter: drop-shadow(5px 5px rgb(98, 98, 245));
transition: transform ease-in 100ms;

}

.banner:hover {
transform: translateX(10px);
}

.btn-callaction{
    display: inline-block;
background-color: rgb(80, 197, 191);
color: rgb(34, 32, 32);
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
border: solid rgb(58, 89, 191) 1px;
border-radius: 5px;
padding: 4px;
transition: all ease-out 100ms
}

.btn-callaction:hover{
background-color: rgb(65, 123, 222);
transform: translateY(2px) translateX(2px);
}




/*Css de carrusel */

.imagenes{
height: 90px;
position: relative;
}

.card {

opacity: 0;
position: absolute;

}

#banner1:checked ~ .imagenes #img-1,
#banner2:checked ~ .imagenes #img-2 {
    
    opacity: 1;
    z-index: 1;
    transition: all ease-in 500ms;
}

#banner1:checked ~ .puntos label[for='banner1'],
#banner2:checked ~ .puntos label[for='banner2'] {

width: 20px;
background-color: rgb(255, 255, 255);

}



.puntos{
position: relative;
display: flex;
top: 10px;

}

.puntos label{

width: 12px;
height: 12px;
border-radius: 50px;
margin-left: 8px;
transition: all ease 300ms;
}



.puntos label{
background-color: rgb(59, 147, 219);
width: 12px;
height: 12px;
border-radius: 50px;
margin-left: 8px;
}

input[type='radio']{
display: none;
}