@import url(global.css);
@import url(resultado.css);
@import url(animation.css);

@media (width <= 24.375rem) {




}


body {
background-color: var(--background-primary);
width: 85.375rem;
height: 48rem;
}

.logo {
display: flex;
align-items: center;
gap: 11px;
width:10.75rem;
height:2.375rem;
font-family: "Rosa", sans-serif;
font-size: 1.5rem;
font-weight: 900;
color: var(--content-primary);
margin: 4.75rem 67.125rem 5.56rem 7.5rem ;

}

.container {

width: 68.625rem;
height: 25.75rem;
margin-inline: auto;


display: grid;
grid-template-columns: 1fr 1fr;



}

.content {
width: 31.75rem;
height: 25.75rem;

}

.content header {
width: 100%;
height: 14rem;
display: flex;
flex-direction: column;


}

.content header span {
font: var(--roboto-overline);
background-image: linear-gradient(var(--gradient-content));
background-clip: text;
color:transparent;
margin-bottom: 0.75rem;

}

.content header h1 {
font: var(--display-large);
color: var(--content-primary);
height: auto;
width: auto;

}

.questions {


width: 25rem;
height: 9.375rem;
display: flex;
flex-direction: column;
gap: 2rem; }


.questions .items {
display: grid;
grid-template-columns: 1fr 10fr;



}

.questions .items span {
font: var(--p-medium);
color: var(--content-brand);
}

.questions .items p {
font: var(--p-small);
color: var(--content-secondary);
}


.content-form {

width: 30.125rem;
height: 21.5rem;
margin-left: 4rem;
margin-block: 2.125rem;
display: flex;
flex-direction: column;
}

.title-form h2{
font: var(--label-medium);
color: var(--content-primary);
}

.title-form p {
font: var(--p-large);
color: var(--content-secondary);
margin-bottom: 2.5rem;
}

.content-form form {

display: flex;
flex-direction: row;
gap: 0.75rem;
height: 8rem;

margin-bottom: 2.5rem;

}

.inputs {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 5.375rem;
height: 5.5rem;
background-color: var(--background-secondary);

position: relative;
z-index: 0;

& label {
font: var(--label-medium);
color: #C7C9CC;

width: 100%;
text-align: center;
height: 1.5rem;


}

& input {
width: 100%;
height: 3.5rem;
text-align: center;
color: #FFFFFF;
font: var(--display-small);
border: 1px solid transparent;
background-color: var(--background-secondary);
border-radius: 8px;

list-style: none;


}

label::before {
content:"";
width: 0px;
height: 0px;
position: absolute;
padding: 1px;
bottom: 2px;
left: -2.8px;
border-radius: 8px;
z-index: 0;

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


}


.select {

display: flex;
align-items: center;
justify-content: start;
gap: 8px;
margin-bottom:40px;

}

.label-option {
position: relative;
width: 30px;
height: 20px;
display: inline-block;
z-index: 0;
}

.label-option input {

position: relative;
width: 100%;
height: 100%;
opacity: 0;
margin:0;
cursor:pointer;
z-index: 2;

}

.slider {
position: absolute;
content: "";
width: 30px;
height: 20px;
background-color: var(--content-tertiary);
border-radius: 16px;
left:0;
top:0;
z-index: 1;
transition: background-image 1.5s ease;


}

.slider::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--content-primary);
z-index: 2;
top: 3px;
left: 3px;
bottom: 3px;
transition: transform 200ms ease;

}

.label-option input:checked + .slider::before {
   transform: translateX(10px);
}

.label-option input:checked + .slider {
   background-image: linear-gradient(var(--gradient-background));
}

.texto {
color: var(--content-primary);
font-family: "Inter", sans-serif;
font-size: 12px;
line-height: 150%;
}

.content-form button{
width: 30.125rem;
height: 3.5rem;
border-radius: 8px;
border: 2px solid transparent;
background:
    linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box,
    linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) border-box;

  background-clip: padding-box, border-box;

  background-size: 100% 100%, 100% 100%;
  background-position: 0 0, 0 0;

  transition: background-position 1s ease;



cursor: pointer;

display: flex;
align-items: center;
justify-content: center;
gap: 8px;

font: var(--label-medium);
color: #FFFFFF;
}


.content-form button:hover {
 background:
    linear-gradient(var(--background-primary), var(--background-primary)) padding-box,
    linear-gradient(var(--gradient-border)) border-box;

  background-size: 100% 100%, 200% 200%;
  background-position: 0 0, 100% 50%;

}


.content-form button img {
transition: transform 800ms ease;
}

.content-form button:hover img{

transform: translateX(10px);

}



.inputs:hover {



& label {
   color: #C58DE7;
}

label::before {
content:"";
width: 86.5px;
height: 56.5px;
background: linear-gradient(var(--gradient-border));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
          cursor: pointer;

}}



.inputs:focus-within {


  & input {
    text-align: left;
    padding-left: 28px;
    box-sizing: border-box;
    border: none;
}

  & label::before {
content:"";
width: 86.5px;
height: 56.5px;
background: linear-gradient(var(--gradient-border));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
padding: 2px;
}

}