html,
body {
  min-height: 100%;
}

.public-form-body .text-primario {
  color: var(--primario) !important;
}

.public-form-body .bg-primario {
  background-color: var(--primario);
}

.public-form-body .bg-primario:hover,
.public-form-body .bg-primario:focus {
  background-color: var(--secundario);
}

.public-form-body {
  background: linear-gradient(145deg, var(--gris), #fff);
  font-family: Montserrat, Arial, sans-serif;
}

.public-form-container {
  max-width: 55rem;
}

.public-form-embed .public-form-container {
  max-width: 100%;
}

.public-form-body.public-form-embed {
  background: #fff;
}

.public-form-embed .public-form-card {
  border-radius: 0 !important;
  border-top: 0;
  box-shadow: none !important;
  padding: 0 !important;
}

.public-form-card {
  border-top: .4rem solid var(--primario);
}

.public-form-logo {
  max-height: 6rem;
  max-width: min(18rem, 80%);
  object-fit: contain;
}

.public-form-progress {
  height: .65rem;
}

.public-form-progress .progress-bar {
  transition: width .35s ease;
}

.public-form-choice-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-form-scale {
  display: grid;
  padding: 1rem 0 .25rem;
  position: relative;
}

.public-form-scale-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.public-form-scale-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.public-form-scale::before {
  background: var(--gris-oscuro);
  content: '';
  height: .5rem;
  left: 5%;
  position: absolute;
  right: 5%;
  top: 1.125rem;
}

.public-form-scale-11::before {
  left: 4.545%;
  right: 4.545%;
}

.public-form-scale-option {
  cursor: pointer;
  min-width: 0;
  position: relative;
  text-align: center;
  z-index: 1;
}

.public-form-scale-option input,
.public-form-face input {
  opacity: 0;
  position: absolute;
}

.public-form-scale-marker {
  background: #aeb1ba;
  border: .15rem solid #fff;
  border-radius: 50%;
  display: block;
  height: .85rem;
  margin: 0 auto;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
  width: .85rem;
}

.public-form-scale-value {
  color: #6c757d;
  display: block;
  font-size: clamp(.75rem, 2.5vw, 1rem);
  font-weight: 700;
  margin-top: 1.25rem;
}

.public-form-scale-option:hover .public-form-scale-marker {
  background: var(--terciario);
}

.public-form-scale-option input:checked + .public-form-scale-marker {
  background: var(--primario);
  box-shadow: 0 0 0 .3rem #fff, 0 0 0 .5rem rgb(126 99 200 / 22%);
  transform: scale(2.15);
}

.public-form-scale-option input:checked ~ .public-form-scale-value {
  color: var(--primario);
}

.public-form-scale-option input:focus-visible + .public-form-scale-marker {
  box-shadow: 0 0 0 .3rem #fff, 0 0 0 .55rem rgb(126 99 200 / 35%);
}

.public-form-faces {
  display: grid;
  gap: clamp(.25rem, 1vw, .5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 32rem;
}

.public-form-face {
  --face-color: var(--primario);
  cursor: pointer;
  min-width: 0;
  position: relative;
}

.public-form-face:nth-child(1) {
  --face-color: #512080;
}

.public-form-face:nth-child(2) {
  --face-color: var(--secundario);
}

.public-form-face:nth-child(3) {
  --face-color: var(--primario);
}

.public-form-face:nth-child(4) {
  --face-color: #5589cd;
}

.public-form-face:nth-child(5) {
  --face-color: var(--terciario);
}

.public-form-face-icon {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 1rem;
  color: var(--face-color);
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-width: 5rem;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
  width: 100%;
}

.public-form-face-icon i {
  font-size: clamp(2.4rem, 10vw, 4rem);
}

.public-form-face:not([data-rating-style="stars"]):hover .public-form-face-icon {
  background: rgb(126 99 200 / 8%);
  transform: translateY(-.15rem);
}

.public-form-face:not([data-rating-style="stars"]) input:checked + .public-form-face-icon {
  background: var(--face-color);
  box-shadow: 0 0 0 .3rem rgb(126 99 200 / 15%);
  color: #fff;
  transform: scale(1.04);
}

.public-form-face input:focus-visible + .public-form-face-icon {
  box-shadow: 0 0 0 .3rem rgb(126 99 200 / 30%);
}

.public-form-choice {
  position: relative;
}

.public-form-choice input {
  opacity: 0;
  position: absolute;
}

.public-form-choice span {
  border: .125rem solid var(--gris-oscuro);
  border-radius: .5rem;
  cursor: pointer;
  display: block;
  padding: .75rem;
  text-align: center;
}

.public-form-choice input:checked + span {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}

.public-form-choice input:focus-visible + span {
  box-shadow: 0 0 0 .25rem rgb(126 99 200 / 25%);
}

.public-form-honeypot {
  height: 0;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.public-form-success-icon {
  align-items: center;
  background: var(--primario);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 2rem;
  height: 4rem;
  justify-content: center;
  width: 4rem;
}

@media (max-width: 575.98px) {
  .public-form-scale {
    margin-left: -.5rem;
    margin-right: -.5rem;
  }

  .public-form-scale-marker {
    height: .7rem;
    width: .7rem;
  }

  .public-form-scale-option input:checked + .public-form-scale-marker {
    transform: scale(1.85);
  }

  .public-form-face-icon {
    border-radius: .65rem;
  }
}