.elementor-25549 .elementor-element.elementor-element-89e095a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-25549 .elementor-element.elementor-element-ca2c3f1 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-25549 .elementor-element.elementor-element-696f304{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-25549 .elementor-element.elementor-element-89e095a{--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-25549 .elementor-element.elementor-element-ca2c3f1 > .elementor-widget-container{margin:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-25549 .elementor-element.elementor-element-89e095a{--content-width:850px;}.elementor-25549 .elementor-element.elementor-element-696f304{--content-width:850px;}}/* Start custom CSS for html, class: .elementor-element-ca2c3f1 *//* ===== TEST MÓDULO · alineación pregunta + respuestas ===== */

.manual-test{
  margin-top: 2px;
  font-family: "Montserrat", sans-serif;
}

.manual-test h3{
  font-size: 25px;
  margin-bottom: 6px;
  color: #163A4A;
}

.manual-test__intro{
  font-size: 15px;
  color: rgba(22,58,74,.75);
  margin-bottom: 18px;
}

/* ===== MARCADOR / PUNTUACIÓN ===== */

.test-score{
  max-width: 520px;            /* igual que .test-question */
  margin: 0 auto 26px;
  padding: 14px 16px;

  border-radius: 16px;
  border: 1px solid rgba(22,58,74,.18);
  background: rgba(246,251,252,.9);

  box-shadow: 0 10px 24px rgba(22,58,74,.06);
}

.test-score__line{
  margin: 0;
  font-size: 14px;
  color: rgba(22,58,74,.9);
}

.test-score__line strong{
  font-weight: 800;
  color: #163A4A;
}

/* Resultado (APTO / NO APTO) */
.js-result{
  margin: 10px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Si el texto contiene APTO/NO APTO se verá bien igual,
   pero le damos un “look” tipo badge con un contenedor suave */
.js-result:not(:empty){
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(22,58,74,.22);
  background: #ffffff;
}

/* Botón reiniciar */
.test-reset{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(2,193,203,.55);

  background: rgba(2,193,203,.12);
  color: #163A4A;

  font-weight: 700;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;

  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.test-reset:hover{
  background: rgba(2,193,203,.18);
  border-color: #02C1CB;
  box-shadow: 0 10px 22px rgba(2,193,203,.18);
}

.test-reset:active{
  transform: scale(.98);
}

.test-reset:focus{
  outline: none;
}

.test-reset:focus-visible{
  outline: 3px solid rgba(2,193,203,.35);
  outline-offset: 2px;
}

/* 👉 CLAVE: cada pregunta tiene el mismo ancho que las respuestas */
.test-question{
  max-width: 520px;      /* mismo ancho que .test-option */
  margin: 0 auto 30px;   /* centrado en la página, pero contenido a la izquierda */
  text-align: left;
}

/* Pregunta alineada a la izquierda dentro del mismo bloque */
.test-title{
  margin: 0 0 14px 0;
  font-weight: 600;
  color: #163A4A;
  text-align: left;
}

/* Opciones */
.test-option{
  display: block;
  width: 100%;
  text-align: left;

  padding: 14px 18px;
  margin: 0 0 10px 0;

  border-radius: 14px;
  border: 1px solid rgba(22,58,74,.25);
  background: #ffffff;

  cursor: pointer;
  font-size: 15px;
  font-family: "Montserrat", sans-serif;
  color: #163A4A;

  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .08s ease;
}

.test-option:hover{
  background: rgba(2,193,203,.06);
  border-color: #02C1CB;
  color: #163A4A;
  box-shadow: 0 10px 20px rgba(22,58,74,.06);
}

/* Click “táctil” */
.test-option:active{
  transform: scale(.99);
}

/* Correcta / Incorrecta (solo al responder) */
.test-option.correct{
  background: #e7f7ef;
  border-color: #2ecc71;
  color: #1e7d4f;
  font-weight: 700;
}

.test-option.wrong{
  background: #fdecea;
  border-color: #e74c3c;
  color: #9c2f25;
  font-weight: 700;
}

/* Estado deshabilitado (cuando ya se ha respondido) */
.test-option:disabled{
  opacity: 1;            /* mantenemos legibilidad */
  cursor: default;
}

/* Evitar hover raro tras responder */
.test-question.answered .test-option:hover{
  background: inherit;
  color: inherit;
  box-shadow: none;
  cursor: default;
}

/* Móvil: ancho completo */
@media (max-width: 600px){
  .test-score,
  .test-question{
    max-width: 100%;
  }
  .test-reset{
    width: 100%;
  }
}
/* ===== SEPARACIÓN ENTRE PREGUNTAS (TARJETA + DIVISOR SUAVE) ===== */

.test-question{
  padding: 18px 0 26px;
  border-bottom: 1px solid rgba(22,58,74,.12);
}

.test-question:last-child{
  border-bottom: none;
  padding-bottom: 6px;
}

/* ===== ALINEACIÓN CONSISTENTE (ELIGE CON CLASE EN .manual-test) ===== */

/* Modo centrado: título + intro + marcador + preguntas centradas */
.manual-test--center h3,
.manual-test--center .manual-test__intro{
  text-align: center;
}

.manual-test--center .test-score{
  text-align: center;
}

.manual-test--center .test-question{
  text-align: left; /* la pregunta y respuestas se leen mejor así */
}

/* Modo izquierda: todo alineado a la izquierda */
.manual-test--left h3,
.manual-test--left .manual-test__intro{
  text-align: left;
}

.manual-test--left .test-score{
  text-align: left;
}

/* En modo izquierda, evitamos que el bloque se “centre” visualmente raro */
.manual-test--left .test-question,
.manual-test--left .test-score{
  margin-left: 0;
  margin-right: 0;
}

/* Pero mantenemos el ancho máximo para no estirar demasiado */
.manual-test--left .test-question,
.manual-test--left .test-score{
  max-width: 520px;
}

/* Si quieres que en modo izquierda el panel de explicación sea un pelín más ancho */
@media (min-width: 601px){
  .manual-test--left .test-layout{
    grid-template-columns: 1fr 340px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-52f5284 *//* ===== NAVEGACIÓN FINAL DEL MÓDULO ===== */

.manual-nav{
  max-width: 720px;
  margin: 48px auto 10px;
  padding: 26px 24px;

  border-radius: 18px;
  border: 1px solid rgba(22,58,74,.18);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    rgba(246,251,252,.9) 100%
  );

  box-shadow: 0 18px 36px rgba(22,58,74,.08);
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

.manual-nav__text{
  margin: 0 0 22px 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(22,58,74,.85);
}

/* Botonera */
.manual-nav__buttons{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Botón base */
.manual-nav__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 22px;
  min-width: 180px;

  border-radius: 18px;
  text-decoration: none;

  font-size: 15px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;

  transition: transform .08s ease,
              box-shadow .2s ease,
              background .2s ease,
              border-color .2s ease,
              color .2s ease;
}

/* Botón principal */
.manual-nav__btn--primary{
  background: #02C1CB;
  color: #ffffff;
  border: 1px solid #02C1CB;
}

.manual-nav__btn--primary:hover{
  background: #02b1bb;
  box-shadow: 0 14px 28px rgba(2,193,203,.35);
}

/* Botón secundario */
.manual-nav__btn--secondary{
  background: #ffffff;
  color: #163A4A;
  border: 1px solid rgba(22,58,74,.35);
}

.manual-nav__btn--secondary:hover{
  background: rgba(22,58,74,.04);
  border-color: #163A4A;
  box-shadow: 0 10px 22px rgba(22,58,74,.15);
}

/* Click táctil */
.manual-nav__btn:active{
  transform: scale(.97);
}

/* Accesibilidad */
.manual-nav__btn:focus{
  outline: none;
}

.manual-nav__btn:focus-visible{
  outline: 3px solid rgba(2,193,203,.35);
  outline-offset: 3px;
}

/* Móvil */
@media (max-width: 600px){
  .manual-nav{
    padding: 22px 18px;
  }
  .manual-nav__btn{
    width: 100%;
  }
}/* End custom CSS */