body.test-open {
  overflow: hidden;
}
.test-question {
  display: none;                 /* oculto por defecto */
  position: fixed;
  inset: 0;
  z-index: 999;                  /* debajo del modal, encima del contenido */
  background: #FF383C;

  overflow-y: auto;              /* scroll interno SOLO del test */
}

/* contenido centrado */
.test-container {
  margin: 0 auto;
/*   padding-top: 140px; */
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  color: white;
}

.test-container.sm {
  max-width: 500px;
  padding: 5rem 0rem;
}

.test-container.md {
  max-width: 700px;
    padding: 5rem 0rem;
}

.test-container.lg {
  max-width: 900px;
    padding: 3rem 0rem;
}


.test-counter {

  margin-bottom: 12px;
}

.test-title {
  margin-bottom: 32px;
}


.test-option {
  display: flex;
  align-items: center;
  gap: 24px;

  width: 100%;
  padding: 12px 24px;

  background: #ffffff;
   color: #333;

  border: none;
  border-radius: 10px;

  font-family: 'TitilliumWeb-SemiBold';
  font-size: 18px;
  text-align: left;

  cursor: pointer;
  margin-bottom: 0.5rem;
}

/* quitar estilos raros del navegador */
.test-option:focus,
.test-option:active {
  outline: none;
  box-shadow: none;
}


.option-letter {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  background: #ffffff;
  border-radius: 6px;
  font-family: 'TitilliumWeb-SemiBold';
  font-size: 18px;

  flex-shrink: 0;
}


.option-text {
  flex: 1;
}


/* .test-option.selected {
  background: #38b000;
  color: white;
}

.test-option.selected .option-letter {
  background: rgba(255,255,255,0.2);
  color: white;
} */

/* CORRECTA */
.test-option.correct {
  background: #5DB900;
  color: #fff;
}

.test-option.correct .option-letter {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* INCORRECTA */
.test-option.wrong {
  background: #d90429;
  color: #fff;
}

.test-option.wrong .option-letter {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* desactivar hover luego de responder */
.test-option.disabled {
  pointer-events: none;
  opacity: 0.9;
}



.test-question {
  display: none;
}

.test-question.active {
  display: block;
}


/* RESULTADOS */
.test-result {
  display: none; 
  position: fixed;
  inset: 0;
  background: #FF383C;
  z-index: 1000;
}


/* Fondo rojo a pantalla completa */
.resultado-bg {
  background: #FF383C;
  min-height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



/* Título */
.resultado-title{
  font-size: 38px;
}

.resultado-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 280px;     /* ancho como la referencia */
  /* margin: 0 auto;        */
margin-bottom: 5rem;
}

/* BASE */
.button__resultado {
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 16px;
  font-family: 'TitilliumWeb-SemiBold';
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* BLANCO */
.button__resultado--light {
  background: #ffffff;
  color: #1B1749;
}

/* MORADO */
.button__resultado--dark {
  background: #1B1749;
  color: #ffffff;
}

/* quitar efectos raros */
.button__resultado:focus,
.button__resultado:active {
  outline: none;
  box-shadow: none;
}