.consulta { font-size: 28px; width: 100%; padding: 0; line-height: 34px; font-weight: 600; color: #555;}
.section-all-nps { padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; margin: 16px 0}
.section-options-nps {margin: 8px 0; display: flex; justify-content: space-between;}
.section-options-nps a {height: 72px; width: 72px; border-radius: 8px; display: inline-flex; margin-right: 4px; font-size: 24px; align-items: center; justify-content: center; color: #FFF;}
.section-options-nps a:hover {color: #FFF}
.bot-0 { background-color: #d1000c}
.bot-1 { background-color: #fd0011}
.bot-2 { background-color: #f55d16}
.bot-3 { background-color: #f78c1c}
.bot-4 { background-color: #feb223}
.bot-5 { background-color: #ffd028}
.bot-6 { background-color: #ffe32c}
.bot-7 { background-color: #b5d025}
.bot-8 { background-color: #85d023}
.bot-9 { background-color: #179d17}
.bot-10 { background-color: #118011; margin-right: 0!important}

.bot-0:hover { background-color: #920008}
.bot-1:hover { background-color: #b1000c}
.bot-2:hover { background-color: #ab410f}
.bot-3:hover { background-color: #ac6214}
.bot-4:hover { background-color: #b17c18}
.bot-5:hover { background-color: #b2911c}
.bot-6:hover { background-color: #b29e1f}
.bot-7:hover { background-color: #7e911a}
.bot-8:hover { background-color: #5d9118}
.bot-9:hover { background-color: #106e10}
.bot-10:hover { background-color: #0c590c; margin-right: 0!important}

/* bot-10 lleva margin-right:0 porque en el mock era el ultimo de los 11. La escala de v3 tiene 10
   opciones, asi que el ultimo es bot-9: se expresa por posicion para que valga con cualquier escala */
.section-options-nps a:last-child { margin-right: 0 !important }

/* El mock del diseno no tiene estado elegido porque ahi cada numero navegaba a otra pagina. Aca la
   calificacion se elige sin recargar y viaja en un hidden, asi que hace falta mostrar cual quedo
   seleccionada. Solo un anillo: no se toca la paleta de los bot-N */
.section-options-nps a.selected {
    box-shadow: 0 0 0 3px #555;
    font-weight: 700;
}

.textarea-nps {
    border-radius: 8px;
    border-color: #D6D6D6;
    padding: 16px;
    width: 100%;
    margin-top: 24px;
}

.first-text {text-align: left; padding-left: 0px; color: #d1000c}
.last-text {text-align: right; padding-right: 0px; color: #118011}

@media (max-width:1200px) {

.section-options-nps a {height: 64px; width: 64px; border-radius: 8px; display: inline-flex; margin-right: 4px; font-size: 24px; align-items: center; justify-content: center; color: #FFF;}

}

@media (max-width:860px) {
.down-mobile { display: block; margin-top: 16px;}

.section-options-nps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.section-options-nps a {
  flex: 0 0 calc((100% - 40px) / 6);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-right: 0 !important;
  border-radius: 8px;
  display: inline-flex;
  font-size: 40px;
  align-items: center;
  justify-content: center;
  color: #FFF;
}

}

@media (max-width:576px) {

.section-options-nps a {
  font-size: 24px;
}
.textarea-nps {
    margin-top: 16px;
}

}

@media (max-width:591px){
.section-all { margin: 0;}
}

@media (max-width:382px){

}