/* Tests Apps — la escena: índigo de noche con el oro de la casa. Todos los
   selectores con la raíz .tst, como sus hermanas (.tapp/.napp/.tpre/.suia). */
.tst {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  --tst-alto: #241a56;
  --tst-medio: #171040;
  --tst-bajo: #0a0722;
  --tst-oro: #ffd86b;
}
.tst * { box-sizing: border-box; }
.tst [hidden] { display: none !important; }

.tst .tst-intro { margin: 0 auto 1.3rem; max-width: 38rem; text-align: center; line-height: 1.65; }
.tst .tst-empezar-wrap { text-align: center; margin: 0; }

.tst .tst-btn {
  display: inline-block;
  border: none;
  border-radius: 2rem;
  padding: .7rem 1.5rem;
  font: inherit; font-weight: 700;
  color: #221a04;
  background: linear-gradient(180deg, #ffe29a, var(--tst-oro));
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
.tst .tst-btn:hover { filter: brightness(1.06); }
.tst .tst-btn.es-secundario {
  background: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: none;
}

/* La partida */
.tst .tst-progreso {
  height: .5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.tst .tst-progreso-relleno {
  height: 100%;
  width: 0%;
  border-radius: 1rem;
  background: linear-gradient(90deg, #b9a3ff, var(--tst-oro));
  transition: width .35s ease;
}
.tst .tst-contador {
  margin: .5rem 0 1.1rem;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; opacity: .65;
  text-align: center;
}
.tst .tst-pregunta {
  margin: 0 auto 1.2rem;
  max-width: 36rem;
  text-align: center;
  font-size: clamp(1.1rem, 3.4vw, 1.45rem);
  line-height: 1.45;
}
.tst .tst-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: .7rem;
  max-width: 42rem;
  margin: 0 auto;
}
.tst .tst-opcion {
  padding: .9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .7rem;
  background: linear-gradient(170deg, var(--tst-medio), var(--tst-bajo));
  color: inherit;
  font: inherit;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.tst .tst-opcion:hover { border-color: var(--tst-oro); transform: translateY(-1px); }

/* El resultado */
.tst .tst-resultado { margin-top: 1.2rem; }
.tst .tst-resultado > .versalita {
  margin: 0 0 .7rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75;
  text-align: center;
}
.tst .tst-ficha {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255, 216, 107, .45);
  border-radius: .7rem;
  background: rgba(0, 0, 0, .22);
}
.tst .tst-img { flex: none; width: 84px; border-radius: .35rem; box-shadow: 0 3px 12px rgba(0, 0, 0, .45); }
.tst .tst-titulo { margin: 0 0 .5rem; font-size: clamp(1.1rem, 3.2vw, 1.35rem); }
.tst .tst-texto { margin: 0 0 .6rem; line-height: 1.65; }
.tst .tst-caras p { margin: .3rem 0; font-size: .9rem; line-height: 1.6; opacity: .92; }
.tst .tst-probar-wrap { margin: .9rem 0 0; }

.tst .tst-barra {
  height: 1.15rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
  margin: 0 0 .8rem;
}
.tst .tst-barra-relleno {
  height: 100%;
  width: 0%;
  border-radius: 1rem;
  background: linear-gradient(90deg, #b9a3ff, var(--tst-oro));
  transition: width .8s ease;
  display: flex; align-items: center; justify-content: flex-end;
}
.tst .tst-pct {
  padding-right: .5rem;
  font-size: .7rem; font-weight: 700; color: #221a04;
  white-space: nowrap;
}

.tst .tst-acciones { text-align: center; margin: 1.1rem 0 0; display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

.tst .tst-aviso {
  margin: 1.6rem auto 0;
  max-width: 38rem;
  text-align: center;
  font-size: .78rem;
  line-height: 1.65;
  color: #8b9ac9;
  text-wrap: pretty;
}

@container (max-width: 430px) {
  .tst .tst-ficha { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 430px) {
  .tst .tst-ficha { flex-direction: column; align-items: center; text-align: center; }
}