#umbral-masonico {
  width: 100%;
  padding: 35px 15px;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", serif;
}

.umbral-marco {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: 45px 50px;
  overflow: hidden;
  color: #f7f1df;
  text-align: center;
  background:
    linear-gradient(rgba(6, 10, 18, 0.94), rgba(19, 15, 12, 0.94)),
    radial-gradient(circle at center, #49391f, #05070b 70%);
  border: 1px solid #bd9b53;
  box-shadow:
    0 0 0 5px rgba(189, 155, 83, 0.12),
    0 15px 45px rgba(0, 0, 0, 0.45);
}

.umbral-marco::before,
.umbral-marco::after {
  content: "✦";
  position: absolute;
  color: rgba(202, 169, 94, 0.25);
  font-size: 90px;
}

.umbral-marco::before {
  top: -26px;
  left: 15px;
}

.umbral-marco::after {
  right: 15px;
  bottom: -28px;
}

.umbral-simbolo {
  width: 70px;
  height: 70px;
  margin: 0 auto 12px;
  color: #d5b56b;
  font-size: 47px;
  line-height: 70px;
  border: 1px solid #d5b56b;
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(213, 181, 107, 0.2);
}

.umbral-subtitulo {
  margin: 5px 0;
  color: #bda46d;
  font-size: 13px;
  letter-spacing: 4px;
}

.umbral-marco h2 {
  margin: 8px 0 16px;
  color: #ffffff;
  font-size: 40px;
  font-weight: normal;
  letter-spacing: 1px;
}

.umbral-intro {
  max-width: 650px;
  margin: 0 auto 25px;
  color: #d7d0c0;
  font-size: 17px;
  line-height: 1.7;
}

.umbral-progreso {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 28px 0;
}

.umbral-progreso span {
  width: 45px;
  height: 4px;
  background: #514937;
  transition: all 0.4s ease;
}

.umbral-progreso span.activo {
  background: #d5b56b;
  box-shadow: 0 0 10px rgba(213, 181, 107, 0.8);
}

.numero-pregunta {
  margin-bottom: 10px;
  color: #c5a860;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 3px;
}

#pregunta {
  max-width: 680px;
  margin: 0 auto 25px;
  color: #ffffff;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.45;
}

.respuestas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.respuestas button,
.reiniciar {
  min-width: 180px;
  padding: 13px 20px;
  cursor: pointer;
  color: #f5ecd7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #9e844d;
  transition: all 0.25s ease;
}

.respuestas button:hover,
.reiniciar:hover {
  color: #111111;
  background: #d5b56b;
  box-shadow: 0 0 18px rgba(213, 181, 107, 0.35);
  transform: translateY(-2px);
}

.mensaje {
  min-height: 28px;
  margin-top: 20px;
  font-size: 16px;
  font-style: italic;
}

.mensaje.correcto {
  color: #d5b56b;
}

.mensaje.incorrecto {
  color: #d9a2a2;
}

.resultado-final {
  display: none;
  animation: aparecer 0.8s ease;
}

.gran-simbolo {
  color: #d5b56b;
  font-size: 70px;
  text-shadow: 0 0 25px rgba(213, 181, 107, 0.5);
}

.resultado-final h3 {
  margin: 10px 0 15px;
  color: #ffffff;
  font-size: 31px;
}

.resultado-final p {
  max-width: 620px;
  margin: 0 auto 18px;
  color: #ddd4c2;
  font-size: 18px;
  line-height: 1.7;
}

.resultado-final .lema {
  color: #d5b56b;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 5px;
}

.reiniciar {
  margin-top: 10px;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 650px) {
  .umbral-marco {
    padding: 35px 20px;
  }

  .umbral-marco h2 {
    font-size: 31px;
  }

  #pregunta {
    font-size: 20px;
  }

  .respuestas {
    flex-direction: column;
  }

  .respuestas button {
    width: 100%;
  }
}

#simbolo-dialog{width:min(700px,90vw);height:min(600px,85vh);padding:0;border:1px solid #c8a45d;background:#050914;color:white;overflow:hidden}#simbolo-dialog::backdrop{background:#000d}#simbolo-dialog .cosmos{position:absolute;inset:-40%;background:url('images/test.png') center/cover;animation:cosmosRotate 24s linear infinite}#simbolo-dialog .symbol-light{position:relative;width:min(420px,75vw);height:min(420px,75vw);margin:30px auto 20px;background:url('images/step2.webp') center/contain no-repeat;mix-blend-mode:screen;animation:cosmosPulse 3s infinite}#cerrar-simbolo{position:relative;display:block;margin:0 auto;background:#c8a45d;color:#111}@keyframes cosmosRotate{to{transform:rotate(360deg)}}@keyframes cosmosPulse{50%{transform:scale(1.04)}}@media(prefers-reduced-motion:reduce){#simbolo-dialog .cosmos,#simbolo-dialog .symbol-light{animation:none}}