.quiro {
  --q-noche: #0b0821;
  --q-indigo: #18103f;
  --q-violeta: #765be2;
  --q-oro: #f3cd73;
  --q-crema: #fff7df;
  width: 100%; max-width: 880px; margin: 0 auto;
  color: var(--q-crema);
}
.quiro * { box-sizing: border-box; }
.quiro [hidden] { display: none !important; }
.quiro button { font: inherit; }

.quiro-inicio, .quiro-juego, .quiro-resultado {
  overflow: hidden;
  border: 1px solid rgba(243, 205, 115, .28);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 50% 0, rgba(118, 91, 226, .2), transparent 38%),
    linear-gradient(160deg, #171038, var(--q-noche) 72%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
  scroll-margin-top: 7rem;
}
.quiro-inicio { padding: 0 0 1.6rem; text-align: center; }
.quiro-hero { position: relative; margin: 0 0 1.25rem; aspect-ratio: 3 / 1.42; overflow: hidden; }
.quiro-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #171038 100%); pointer-events: none; }
.quiro-hero img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 49%; }
.quiro-intro { max-width: 39rem; margin: 0 auto 1rem; padding: 0 1.25rem; font-size: 1.05rem; line-height: 1.7; }
.quiro-promesas { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 1rem 1.25rem; padding: 0; list-style: none; }
.quiro-promesas li { padding: .32rem .72rem; border: 1px solid rgba(255,255,255,.16); border-radius: 2rem; color: rgba(255,255,255,.8); font-size: .78rem; letter-spacing: .03em; }
.quiro-accion, .quiro-acciones { margin: 0; text-align: center; }

.quiro-btn {
  min-height: 44px; padding: .72rem 1.4rem; border: 0; border-radius: 2rem;
  color: #251a04; background: linear-gradient(180deg, #ffe6a5, var(--q-oro));
  font-weight: 750; cursor: pointer; box-shadow: 0 5px 18px rgba(0, 0, 0, .3);
  transition: transform .15s ease, filter .15s ease;
}
.quiro-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.quiro-btn:focus-visible, .quiro-opcion:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.quiro-btn.es-secundario { color: var(--q-crema); background: transparent; border: 1px solid rgba(255,255,255,.3); box-shadow: none; }

.quiro-juego { padding: clamp(1.1rem, 4vw, 2rem); }
.quiro-progreso { height: .42rem; margin-bottom: .55rem; overflow: hidden; border-radius: 1rem; background: rgba(255,255,255,.1); }
.quiro-progreso span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a98cff, var(--q-oro)); transition: width .35s ease; }
.quiro-contador { margin: 0 0 1.2rem; text-align: center; color: rgba(255,255,255,.62); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.quiro-pregunta { margin: 0 auto .35rem; text-align: center; font-size: clamp(1.35rem, 4vw, 1.85rem); line-height: 1.2; }
.quiro-ayuda { max-width: 37rem; margin: 0 auto 1.35rem; text-align: center; color: rgba(255,255,255,.72); line-height: 1.55; }
.quiro-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.quiro-opcion {
  display: grid; grid-template-columns: 90px 1fr; gap: .75rem; align-items: center;
  min-height: 132px; padding: .72rem .85rem; border: 1px solid rgba(255,255,255,.17); border-radius: .85rem;
  color: inherit; background: rgba(4, 2, 17, .35); text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.quiro-opcion:hover { border-color: rgba(243,205,115,.72); transform: translateY(-1px); }
.quiro-opcion[aria-checked="true"] { border-color: var(--q-oro); background: rgba(118,91,226,.2); box-shadow: inset 0 0 0 1px rgba(243,205,115,.25); }
.quiro-opcion b { display: block; margin-bottom: .22rem; color: #fff; font-size: .96rem; }
.quiro-opcion small { display: block; color: rgba(255,255,255,.69); font-size: .8rem; line-height: 1.45; }
.quiro-error { margin: .7rem 0 0; color: #ffd0c6; text-align: center; font-size: .85rem; }
.quiro-nav { display: flex; justify-content: space-between; gap: .7rem; margin-top: 1.25rem; }

.qvisual { display: block; width: 82px; height: 104px; margin: auto; overflow: visible; color: #d9bdfb; }
.qmano { fill: rgba(196,148,114,.14); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qline { fill: none; stroke: var(--q-oro); stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(243,205,115,.55)); }
.qfine { stroke-width: 1.5; stroke-dasharray: 3 2; }
.qabsence { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.qangle { fill: none; stroke: var(--q-oro); stroke-width: 2; stroke-dasharray: 3 2; }
.qv-mirror { transform: scaleX(-1); }
.qv-tierra { transform: scaleX(1.12) scaleY(.9); }
.qv-aire { transform: scaleX(1.06) scaleY(1.12); }
.qv-fuego { transform: scaleX(.92) scaleY(1.02); }
.qv-agua { transform: scaleX(.82) scaleY(1.18); }
.qv-pulgar-abierto { transform: skewX(-5deg); }
.qv-pulgar-cerrado { transform: skewX(5deg) scaleX(.94); }

.quiro-resultado { padding: clamp(1.15rem, 4vw, 2rem); }
.quiro-rotulo { margin: 0 0 .55rem; color: var(--q-oro); text-align: center; font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; }
.quiro-retrato { display: grid; grid-template-columns: 115px 1fr; gap: 1rem; align-items: center; max-width: 42rem; margin: 0 auto 1rem; }
.quiro-mini-mano { display: grid; place-items: center; min-height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(118,91,226,.28), transparent 68%); }
.quiro-mini-mano .qvisual { width: 98px; height: 124px; }
.quiro-arquetipo { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.55rem, 5vw, 2.25rem); line-height: 1.05; }
.quiro-resumen { margin: 0; color: rgba(255,255,255,.83); line-height: 1.65; }
.quiro-basada { margin: 1.2rem 0 .65rem; text-align: center; color: rgba(255,255,255,.68); }
.quiro-pistas { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1.35rem; }
.quiro-pista { padding: .35rem .65rem; border: 1px solid rgba(243,205,115,.28); border-radius: 2rem; background: rgba(243,205,115,.07); font-size: .78rem; }
.quiro-triada { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1.55rem; }
.quiro-triada article { padding: 1rem; border: 1px solid rgba(255,255,255,.13); border-radius: .8rem; background: rgba(4,2,17,.28); }
.quiro-triada article > span { color: var(--q-oro); font-size: 1.1rem; }
.quiro-triada h3 { margin: .4rem 0 .35rem; color: #fff; font-size: .98rem; }
.quiro-triada p { margin: 0; color: rgba(255,255,255,.75); font-size: .84rem; line-height: 1.55; }
.quiro-detalles-titulo { margin: 0 0 .7rem; font-size: 1.15rem; text-align: center; }
.quiro-detalles { display: grid; gap: .55rem; max-width: 45rem; margin: 0 auto 1.3rem; }
.quiro-detalle { display: grid; grid-template-columns: 42px 1fr; gap: .75rem; padding: .75rem .85rem; border-left: 2px solid rgba(243,205,115,.5); background: rgba(255,255,255,.04); }
.quiro-detalle .qvisual { width: 40px; height: 52px; }
.quiro-detalle b { display: block; margin-bottom: .18rem; color: #fff; font-size: .88rem; }
.quiro-detalle p { margin: 0; color: rgba(255,255,255,.75); font-size: .84rem; line-height: 1.5; }
.quiro-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.quiro-privacidad { margin: 1rem auto .25rem; text-align: center; color: rgba(255,255,255,.62); font-size: .78rem; }
.quiro-aviso { max-width: 44rem; margin: .25rem auto 0; text-align: center; color: rgba(255,255,255,.5); font-size: .72rem; line-height: 1.5; }

@media (max-width: 640px) {
  .quiro-inicio, .quiro-juego, .quiro-resultado { scroll-margin-top: 13.5rem; }
  .quiro-hero { aspect-ratio: 1.45 / 1; }
  .quiro-hero img { object-position: 50% 48%; }
  .quiro-opciones { grid-template-columns: 1fr; }
  .quiro-opcion { grid-template-columns: 76px 1fr; min-height: 112px; }
  .qvisual { width: 68px; height: 88px; }
  .quiro-triada { grid-template-columns: 1fr; }
  .quiro-retrato { grid-template-columns: 86px 1fr; }
  .quiro-mini-mano .qvisual { width: 78px; height: 102px; }
}
@media (prefers-reduced-motion: reduce) {
  .quiro *, .quiro *::before, .quiro *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}