body {
font-family: 'Montserrat' sans-serif;
}
h5 {
color: #2C6D97;
font-weight: 700;
font-size: 24px;
line-height: 32px;
margin-top: 1.5rem;
margin-bottom: .75rem;
}
#formEtapa1 label {
font-family: 'Montserrat' sans-serif;
font-size: 16px;
font-weight: 500;
color: #454F60;
}
#formEtapa1 .form-control {
border: 1px solid #D5DADF;
border-radius: 10px;
padding: 16px;
font-family: 'Montserrat' sans-serif;
font-size: 16px;
color: #637381;
}
#formEtapa2 {
position: relative;
}
#formEtapa2 button {
position: absolute;
right: 0;
width: auto;
}
.btn-warning {
background-color: #EF7D00;
border: none;
}
.btn-warning:hover {
background-color: #e86c00;
}
#stylus {
border-radius: 25px;
box-shadow: 0 4px 8px rgb(0, 0, 0, 0.1);
}
#stylus label {
font-size: 20px;
font-weight: 600;
line-height: 19px;
color: #454F60;
}
#stylus span {
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: #454F60;
}
#stylus .rank span {
font-size: 16px;
font-weight: 400;
line-height: 19px;
color: #637381;
}
.swiper-container {
padding: 10px 0;
overflow: hidden;
}
.swiper-slide {
display: flex;
justify-content: center;
}
.nps-box {
max-width: 90px;
max-height: 90px;
border: 2px solid #2C6D97;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 8px;
font-weight: bold;
background-color: rgb(44, 109, 151, 0.08);
transition: all 0.2s ease;
color: #2C6D97;
aspect-ratio: 1/1;
width: 100%;
}
.nps-box:hover {
border-color: #f90;
}
.nps-box.selected {
background-color: #f90;
color: #fff;
border-color: #f90;
} .popup-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.1);
display: none; justify-content: center;
align-items: center;
z-index: 9999;
} .popup-content {
background: white;
padding: 30px;
border-radius: 8px;
text-align: center;
max-width: 600px;
box-shadow: 8px 6px 10px rgba(0, 0, 0, 0.18);
animation: popupShow 0.3s ease;
}
.popup-content h4 {
color: #2C6D97;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.popup-content .btn-warning {
color: #EF7D00;
border: 2px solid #EF7D00;
background: none;
padding: 12px 60px;
}
@keyframes popupShow {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 998px) {
#stylus label, #stylus span {
font-size: 16px;
line-height: normal;
text-align: center;
display: block;
}
#stylus .rank span {
font-size: 12px;
}
#formEtapa2 {
padding-bottom: 6rem;
}
#formEtapa2 button {
width: 100%;
}
.popup-content {
max-width: 400px;
}
}