/* 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 1.5rem;
  --tst-alto: #241a56;
  --tst-medio: #171040;
  --tst-bajo: #0a0722;
  --tst-oro: #ffd86b;
  --tst-acento: #e6ba68;
  --tst-acento-rgb: 230, 186, 104;
  --tst-secundo: #967bff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.15rem, 4vw, 2.3rem);
  border: 1px solid rgba(var(--tst-acento-rgb), .32);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 50% -18%, rgba(var(--tst-acento-rgb), .22), transparent 42%),
    linear-gradient(155deg, rgba(31, 22, 67, .94), rgba(8, 6, 28, .97));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .055);
  container-type: inline-size;
}
.tst * { box-sizing: border-box; }
.tst [hidden] { display: none !important; }

.tst::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 25rem; height: 25rem;
  left: 50%; bottom: -21rem;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(var(--tst-acento-rgb), .24);
  box-shadow: 0 0 70px rgba(var(--tst-acento-rgb), .11);
}
.tst::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .45;
  background:
    radial-gradient(circle at 9% 16%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 12%, rgba(var(--tst-acento-rgb),.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 93% 68%, rgba(255,255,255,.55) 0 1px, transparent 1.5px),
    radial-gradient(circle at 14% 78%, rgba(var(--tst-acento-rgb),.75) 0 1px, transparent 1.5px);
}

/* Cada test conserva el mismo lenguaje visual, pero no la misma personalidad. */
.tst--arcano    { --tst-acento:#e9bc68; --tst-acento-rgb:233,188,104; --tst-secundo:#9174ed; }
.tst--oraculo   { --tst-acento:#b996ff; --tst-acento-rgb:185,150,255; --tst-secundo:#65d7dd; }
.tst--intuicion { --tst-acento:#69dce1; --tst-acento-rgb:105,220,225; --tst-secundo:#aa8cff; }
.tst--elemento  { --tst-acento:#ff9a69; --tst-acento-rgb:255,154,105; --tst-secundo:#67d1c1; }
.tst--bruja     { --tst-acento:#d18cff; --tst-acento-rgb:209,140,255; --tst-secundo:#79a8ff; }
.tst--solluna   { --tst-acento:#ffda72; --tst-acento-rgb:255,218,114; --tst-secundo:#849bff; }
.tst--don       { --tst-acento:#77e0ba; --tst-acento-rgb:119,224,186; --tst-secundo:#b58cff; }
.tst--casa      { --tst-acento:#e6ad78; --tst-acento-rgb:230,173,120; --tst-secundo:#79c9b5; }
.tst--animal    { --tst-acento:#8bd086; --tst-acento-rgb:139,208,134; --tst-secundo:#d4ad72; }
.tst--amor      { --tst-acento:#ff8da7; --tst-acento-rgb:255,141,167; --tst-secundo:#d8a3ff; }
.tst--cambio    { --tst-acento:#83baff; --tst-acento-rgb:131,186,255; --tst-secundo:#7be0c5; }

/* Portada */
.tst .tst-portada { position: relative; z-index: 1; text-align: center; animation: tst-aparece .55s ease both; }
.tst.tst-en-curso .tst-portada,
.tst.tst-terminado .tst-portada { display: none; }
.tst .tst-escena {
  position: relative;
  width: clamp(7.4rem, 24vw, 9.2rem);
  aspect-ratio: 1;
  margin: -.15rem auto .9rem;
  display: grid;
  place-items: center;
}
.tst .tst-luz {
  position: absolute; inset: 19%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--tst-acento-rgb), .25), transparent 70%);
  box-shadow: 0 0 45px rgba(var(--tst-acento-rgb), .18);
  animation: tst-respira 3.4s ease-in-out infinite;
}
.tst .tst-orbita {
  position: absolute;
  border: 1px solid rgba(var(--tst-acento-rgb), .34);
  border-radius: 50%;
}
.tst .tst-orbita::after {
  content: '';
  position: absolute;
  width: .38rem; height: .38rem;
  top: -.2rem; left: 50%;
  border-radius: 50%;
  background: var(--tst-acento);
  box-shadow: 0 0 12px rgba(var(--tst-acento-rgb), .9);
}
.tst .tst-orbita-1 { inset: 7%; animation: tst-gira 15s linear infinite; }
.tst .tst-orbita-2 { inset: 21%; border-style: dashed; opacity: .7; animation: tst-gira 11s linear infinite reverse; }
.tst .tst-sigilo {
  position: relative;
  z-index: 1;
  width: 4.1rem; height: 4.1rem;
  padding: .7rem;
  color: var(--tst-acento);
  border: 1px solid rgba(var(--tst-acento-rgb), .46);
  border-radius: 50%;
  background: rgba(8, 6, 28, .78);
  filter: drop-shadow(0 0 10px rgba(var(--tst-acento-rgb), .3));
}

.tst .tst-intro {
  margin: 0 auto 1.35rem;
  max-width: 37rem;
  text-align: center;
  line-height: 1.7;
  font-size: clamp(.98rem, 2.6vw, 1.08rem);
  text-wrap: balance;
  color: rgba(244, 241, 255, .91);
}
.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(135deg, #fff0b8, var(--tst-acento));
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .34), 0 0 22px rgba(var(--tst-acento-rgb), .12);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.tst .tst-btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 28px rgba(var(--tst-acento-rgb),.2); }
.tst .tst-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tst .tst-empezar { min-width: 12.5rem; padding: .82rem 1.65rem; }
.tst .tst-empezar span { display: inline-block; margin-left: .22rem; transition: transform .16s ease; }
.tst .tst-empezar:hover span { transform: translateX(3px); }
.tst .tst-btn.es-secundario {
  background: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: none;
}

/* La partida */
.tst .tst-partida {
  position: relative;
  z-index: 1;
  padding: clamp(1rem, 3.5vw, 1.65rem);
  border: 1px solid rgba(var(--tst-acento-rgb), .26);
  border-radius: 1.05rem;
  background: rgba(6, 5, 23, .42);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.tst .tst-partida.tst-entra .tst-pregunta,
.tst .tst-partida.tst-entra .tst-opciones { animation: tst-pregunta .32s ease both; }
.tst .tst-partida.tst-entra .tst-opciones { animation-delay: .045s; }
.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, var(--tst-secundo), var(--tst-acento));
  box-shadow: 0 0 12px rgba(var(--tst-acento-rgb), .22);
  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 {
  counter-reset: tst-opcion;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: .7rem;
  max-width: 42rem;
  margin: 0 auto;
}
.tst .tst-opcion {
  counter-increment: tst-opcion;
  position: relative;
  padding: .92rem 1.05rem .92rem 3.25rem;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .7rem;
  background: linear-gradient(165deg, rgba(37, 27, 78, .92), rgba(11, 8, 35, .94));
  color: inherit;
  font: inherit;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  transition: border-color .15s ease, transform .1s ease, background .15s ease, opacity .15s ease;
}
.tst .tst-opcion::before {
  content: counter(tst-opcion, upper-alpha);
  position: absolute;
  left: .85rem; top: 50%;
  width: 1.65rem; height: 1.65rem;
  transform: translateY(-50%);
  display: grid; place-items: center;
  border: 1px solid rgba(var(--tst-acento-rgb), .42);
  border-radius: 50%;
  color: var(--tst-acento);
  font-size: .7rem; font-weight: 800;
  background: rgba(var(--tst-acento-rgb), .07);
}
.tst .tst-opcion:hover { border-color: var(--tst-acento); transform: translateY(-2px); background: linear-gradient(165deg, rgba(var(--tst-acento-rgb),.15), rgba(11,8,35,.96)); }
.tst .tst-opcion:focus-visible { outline: 2px solid var(--tst-acento); outline-offset: 2px; }
.tst .tst-opcion:disabled:not(.es-elegida) { opacity: .42; cursor: default; }
.tst .tst-opcion.es-elegida { border-color: var(--tst-acento); background: rgba(var(--tst-acento-rgb), .19); transform: scale(.99); }
.tst .tst-opcion.es-elegida::before { color: #17110a; background: var(--tst-acento); }

/* El resultado */
.tst .tst-resultado { position: relative; z-index: 1; margin-top: 0; animation: tst-aparece .5s ease both; }
.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(var(--tst-acento-rgb), .48);
  border-radius: 1.05rem;
  background: linear-gradient(145deg, rgba(var(--tst-acento-rgb), .11), rgba(0, 0, 0, .25));
  box-shadow: 0 16px 36px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.05);
}
.tst .tst-img { flex: none; width: 106px; border-radius: .65rem; border: 1px solid rgba(var(--tst-acento-rgb),.38); box-shadow: 0 8px 24px rgba(0, 0, 0, .46); }
.tst .tst-titulo { margin: 0 0 .5rem; color: var(--tst-acento); font-size: clamp(1.25rem, 3.5vw, 1.55rem); }
.tst .tst-texto { margin: 0 0 .6rem; line-height: 1.65; }
.tst .tst-caras p { margin: .45rem 0; padding: .48rem .62rem; font-size: .9rem; line-height: 1.55; border-left: 2px solid rgba(var(--tst-acento-rgb),.62); background: rgba(0,0,0,.13); opacity: .94; }
.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, var(--tst-secundo), var(--tst-acento));
  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-share-status {
  min-height: 1.35em;
  margin: .65rem 0 0;
  text-align: center;
  color: #dccb98;
  font-size: .86rem;
}

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

@keyframes tst-gira { to { transform: rotate(360deg); } }
@keyframes tst-respira { 50% { transform: scale(1.15); opacity: .72; } }
@keyframes tst-aparece { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes tst-pregunta { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@container (max-width: 430px) {
  .tst .tst-ficha { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 430px) {
  .tst { padding: 1rem; border-radius: 1rem; }
  .tst .tst-escena { width: 7rem; margin-bottom: .55rem; }
  .tst .tst-sigilo { width: 3.7rem; height: 3.7rem; }
  .tst .tst-ficha { flex-direction: column; align-items: center; text-align: center; }
  .tst .tst-img { width: min(126px, 45vw); }
  .tst .tst-caras p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .tst .tst-orbita, .tst .tst-luz, .tst .tst-portada,
  .tst .tst-resultado, .tst .tst-partida.tst-entra .tst-pregunta,
  .tst .tst-partida.tst-entra .tst-opciones { animation: none; }
  .tst .tst-btn, .tst .tst-opcion { transition: none; }
}