/* ==========================================================================
   Bloque del quiz, dentro de la landing · espejo → formulario → 9 preguntas →
   cálculo → resultado. Prefijo: qz-  ·  Solo tokens --db-* y clases db-*
   ========================================================================== */

.qz { position: relative; overflow: clip; background: var(--db-papel); border: 1px solid var(--db-hilo); border-radius: var(--db-radius-lg); box-shadow: var(--db-shadow-float); }

/* Cabecera del bloque */
.qz__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--db-hilo); }
.qz__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--db-oro); }
.qz__progress { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(420px, 100%); margin-inline: auto; }
.qz__progress[hidden] { display: none; }
.qz__progress .db-mono { letter-spacing: 0.08em; text-transform: uppercase; }
.qz__track { display: block; width: 100%; height: 2px; border-radius: var(--db-radius-pill); background: var(--db-hilo); overflow: hidden; }
.qz__fill { display: block; height: 100%; width: 0; background: var(--db-oro); border-radius: inherit; transition: width 600ms var(--db-ease-quint); }
.qz__meta { grid-column: 3; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 600px) {
  .qz__head { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 18px; }
  .qz__meta { display: none; }
  .qz__progress { align-items: flex-end; width: 100%; }
}

/* Escenario */
.qz__stage { position: relative; padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) clamp(32px, 4vw, 56px); min-height: 520px; display: flex; flex-direction: column; justify-content: center; animation: qz-fade 450ms var(--db-ease-quint) both; }
.qz__stage[hidden] { display: none; }
@keyframes qz-fade { from { opacity: 0; } to { opacity: 1; } }
.qz__screen { width: min(680px, 100%); margin-inline: auto; display: flex; flex-direction: column; gap: 22px; animation: qz-in 500ms var(--db-ease-quint) both; }
.qz__screen.is-out { animation: qz-out 180ms ease both; pointer-events: none; }
@keyframes qz-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes qz-out { to { opacity: 0; transform: translateY(-8px); } }
.qz__h { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.03em; line-height: 1.05; }
.qz__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.qz__actions .db-btn { padding-right: 20px; }
@media (max-width: 600px) {
  .qz__stage { min-height: 440px; }
  .qz__actions { flex-direction: column-reverse; align-items: stretch; }
  .qz__actions .db-btn { width: 100%; }
}

/* Portada: mitad texto y botón, mitad imagen. Al comenzar, da paso al quiz en el mismo bloque. */
.qz__cover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); transition: opacity 260ms ease; }
.qz__cover[hidden] { display: none; }
.qz__cover.is-off { opacity: 0; pointer-events: none; }
.qz__cover-copy { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(32px, 4.5vw, 60px) clamp(24px, 3.5vw, 48px) clamp(32px, 4.5vw, 60px) clamp(24px, 4vw, 56px); }
.qz__cover-title { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1.04; }
.qz__cover-copy .db-lead { max-width: none; }
.qz__cover-label { letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-oro-oscuro); }
.qz__cover-label[hidden] { display: none; }
.qz__start { height: 58px; padding: 0 28px 0 32px; font-size: 16px; box-shadow: 0 24px 40px -20px rgba(3, 45, 70, 0.55); }
.qz__start svg { width: 20px; height: 20px; }
.qz__cover-art { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--db-crema); border-left: 1px solid var(--db-hilo); }
.qz__cover-rings { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: repeating-radial-gradient(circle at 50% 50%, rgba(3, 45, 70, 0.09) 0 1px, transparent 1px 64px); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 68%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 68%); }
.qz__cover-glow { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--db-oro-claro) 0%, rgba(243, 237, 227, 0.6) 40%, rgba(244, 243, 238, 0) 70%); }
/* Animación de burbujas de pensamiento: los cuatro desafíos suben desde el centro de la diana. */
.qz-bubbles { position: absolute; inset: 0; }
.qz-bubbles[hidden], .qz-orbit[hidden] { display: none; }
.qz-bubbles__origin { position: absolute; left: 50%; top: 72%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--db-oro); box-shadow: 0 0 0 10px rgba(188, 139, 76, 0.14), 0 0 0 22px rgba(188, 139, 76, 0.07); animation: qz-pulse 2.4s ease-in-out infinite; }
.qz-bubble { position: absolute; left: var(--x); top: 72%; display: flex; flex-direction: column; align-items: var(--align, center); gap: 6px; transform: translate(var(--tx, -50%), 0); pointer-events: none; animation: qz-rise var(--dur, 7s) linear forwards; }
.qz-bubble__body { display: inline-flex; align-items: center; gap: 11px; padding: 6px 20px 6px 6px; border-radius: 999px; background: var(--db-papel); border: 1px solid var(--db-hilo); box-shadow: 0 18px 30px -18px rgba(3, 45, 70, 0.35); font-family: var(--db-font-display); font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.01em; line-height: 1; color: var(--db-tinta); white-space: nowrap; }
.qz-bubble__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--db-crema); box-shadow: inset 0 0 0 1px var(--db-hilo); }
.qz-bubble__icon img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(3, 45, 70, 0.18)); animation: qz-icon 3.2s ease-in-out infinite; }
@keyframes qz-icon { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-2px); } }
.qz-bubble__label { padding-top: 1px; }
.qz-bubble--ink .qz-bubble__icon { background: var(--db-crema); box-shadow: none; }
.qz-bubble--gold .qz-bubble__icon { background: var(--db-papel); box-shadow: inset 0 0 0 1px var(--db-oro-claro); }
.qz-bubble--ink .qz-bubble__body { background: var(--db-tinta); border-color: var(--db-tinta); color: var(--db-crema); }
.qz-bubble--gold .qz-bubble__body { background: var(--db-oro-sutil); border-color: var(--db-oro-claro); }
.qz-bubble__body em { font-style: italic; color: var(--db-oro); }
.qz-bubble--ink .qz-bubble__body em { color: var(--db-oro-calido); }
.qz-bubble__dot { display: block; border-radius: 50%; background: var(--db-papel); border: 1px solid var(--db-hilo); }
.qz-bubble--ink .qz-bubble__dot { background: var(--db-tinta); border-color: var(--db-tinta); }
.qz-bubble--gold .qz-bubble__dot { background: var(--db-oro-sutil); border-color: var(--db-oro-claro); }
.qz-bubble__dot:nth-of-type(1) { width: 11px; height: 11px; margin-inline: var(--tail, 0); }
.qz-bubble__dot:nth-of-type(2) { width: 7px; height: 7px; margin-inline: var(--tail2, 0); }
@keyframes qz-rise {
  0% { opacity: 0; transform: translate(var(--tx, -50%), 0) scale(0.6); }
  12% { opacity: 1; transform: translate(var(--tx, -50%), calc(var(--top, -270px) * 0.12)) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--tx, -50%) + var(--drift, 0px)), var(--top, -270px)) scale(0.97); }
}
}
}
.qz-bubbles.is-static .qz-bubble { animation: none; opacity: 1; transform: translate(var(--tx, -50%), var(--top)); }
@media (max-width: 760px) { .qz-bubble__body { padding: 6px 18px 6px 6px; gap: 10px; font-size: 19px; } .qz-bubble__icon { width: 42px; height: 42px; } .qz-bubble__icon img { width: 34px; height: 34px; } .qz-bubbles__origin { top: 80%; } .qz-bubble { top: 80%; } }

/* Animación de los cuatro desafíos: giran despacio alrededor del centro de la diana; uno a la vez pasa al frente. */
.qz-orbit { --r: clamp(92px, 11vw, 150px); --size: clamp(104px, 11.5vw, 156px); position: relative; width: calc(var(--r) * 2 + var(--size)); aspect-ratio: 1; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform 900ms var(--db-ease-quint); }
.qz-orbit__center { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--db-oro); box-shadow: 0 0 0 10px rgba(188, 139, 76, 0.14), 0 0 0 22px rgba(188, 139, 76, 0.07); animation: qz-pulse 2.4s ease-in-out infinite; }
@keyframes qz-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.qz-orbit__item {
  position: absolute; left: 50%; top: 50%; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  transform: rotate(calc(var(--turn, 0deg) + var(--i) * 90deg - 45deg)) translate(var(--r)) rotate(calc(-1 * (var(--turn, 0deg) + var(--i) * 90deg - 45deg)));
  opacity: 0.68;
  transition: opacity 700ms var(--db-ease-quint), filter 700ms var(--db-ease-quint);
}
.qz-orbit__item img { display: block; width: 100%; height: auto; transform: scale(0.82); transition: transform 900ms var(--db-ease-quint), filter 900ms var(--db-ease-quint); filter: drop-shadow(0 10px 14px rgba(3, 45, 70, 0.18)); animation: qz-float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.25s); }
@keyframes qz-float { 0%, 100% { translate: 0 -5px; } 50% { translate: 0 5px; } }
.qz-orbit__item.is-active { opacity: 1; filter: none; z-index: 2; }
.qz-orbit__item.is-active img { transform: scale(1.14); filter: drop-shadow(0 22px 26px rgba(3, 45, 70, 0.32)); }
.qz-orbit.is-in .qz-orbit__item { animation: qz-enter 900ms var(--db-ease-quint) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes qz-enter { from { opacity: 0; } }
.qz__cover-art.is-photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.qz__cover-art.is-photo .qz__cover-rings, .qz__cover-art.is-photo .qz__cover-glow { display: none; }
@media (max-width: 760px) {
  .qz__cover { grid-template-columns: minmax(0, 1fr); }
  .qz__cover-art { order: -1; min-height: 240px; height: 240px; border-left: 0; border-bottom: 1px solid var(--db-hilo); }
  .qz__cover-art { min-height: 300px; height: 300px; }
  .qz-orbit { --r: 88px; --size: 88px; }
  .qz__cover-copy { padding: 28px 22px 32px; }
  .qz__cover-copy .db-btn { width: 100%; }
}

/* Espejo */
.qz__mirror .db-lead { max-width: none; }

/* Formulario */
.qz__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.qz__field { display: flex; flex-direction: column; gap: 8px; }
.qz__field .db-field { height: 52px; font-size: 16px; background: var(--db-crema); }
.qz__field.is-error .db-field { border-color: var(--db-oro-oscuro); box-shadow: 0 0 0 3px var(--db-oro-sutil); }
.qz__err { font-size: 13px; color: var(--db-oro-oscuro); min-height: 1em; }
.qz__note { font-size: 13px; color: var(--db-piedra); line-height: 1.5; }
@media (max-width: 600px) { .qz__fields { grid-template-columns: minmax(0, 1fr); } }

/* Preguntas: filas con separador, sin cajas */
.qz__qhead { display: flex; flex-direction: column; gap: 10px; }
.qz__question { font-size: clamp(24px, 2.9vw, 32px); letter-spacing: -0.02em; line-height: 1.12; }
.qz__hint { font-family: var(--db-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-piedra); }
.qz__options { display: flex; flex-direction: column; border-top: 1px solid var(--db-hilo); }
.qz__opt {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; text-align: left;
  padding: 16px 14px 16px 0; margin: 0; border: 0; border-bottom: 1px solid var(--db-hilo); border-radius: 0; background: transparent;
  font-family: var(--db-font-sans); font-size: 16px; line-height: 1.5; color: var(--db-tinta); cursor: pointer;
  transition: background-color var(--db-dur-card) var(--db-ease), padding var(--db-dur-card) var(--db-ease-quint);
}
.qz__opt:hover { background: var(--db-crema); padding-left: 12px; }
.qz__opt:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--db-oro); }
.qz__opt[aria-pressed="true"] { background: var(--db-oro-sutil); padding-left: 12px; }
.qz__opt.is-shake { animation: qz-shake 400ms ease; }
@keyframes qz-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.qz__mark { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--db-hilo); background: var(--db-papel); font-family: var(--db-font-mono); font-size: 11px; font-weight: 500; color: var(--db-piedra); transition: background-color var(--db-dur-card) var(--db-ease), border-color var(--db-dur-card) var(--db-ease), color var(--db-dur-card) var(--db-ease); }
.qz__mark svg { position: absolute; width: 15px; height: 15px; color: var(--db-crema); opacity: 0; transform: scale(0.6); transition: opacity var(--db-dur-micro) var(--db-ease), transform var(--db-dur-card) var(--db-ease-quint); }
.qz__opt[aria-pressed="true"] .qz__mark { background: var(--db-tinta); border-color: var(--db-tinta); color: transparent; }
.qz__opt[aria-pressed="true"] .qz__mark svg { opacity: 1; transform: scale(1); }
@media (max-width: 600px) { .qz__opt { font-size: 15px; gap: 12px; grid-template-columns: 28px minmax(0, 1fr); } .qz__mark { width: 28px; height: 28px; } .qz__opt:hover { padding-left: 0; background: transparent; } .qz__opt[aria-pressed="true"] { padding-left: 8px; } }

/* Cálculo: la diana y el dardo */
.qz__calc { align-items: center; text-align: center; gap: 28px; }
.qz__target { width: 168px; height: 168px; }
.qz__target svg { width: 100%; height: 100%; overflow: visible; }
.qz__ring-a, .qz__ring-b, .qz__ring-c { transform-origin: 50% 50%; animation: qz-ring 900ms var(--db-ease-quint) both; }
.qz__ring-b { animation-delay: 120ms; } .qz__ring-c { animation-delay: 240ms; }
@keyframes qz-ring { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.qz__dart { transform-origin: 50% 50%; animation: qz-dart 900ms var(--db-ease-expo) 500ms both; }
@keyframes qz-dart { from { opacity: 0; transform: translate(140px, 120px) rotate(-8deg) scale(1.4); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.qz__hit { transform-origin: 50% 50%; animation: qz-hit 1200ms var(--db-ease-quint) 1300ms both; }
@keyframes qz-hit { from { opacity: 0.9; transform: scale(0.2); } to { opacity: 0; transform: scale(1.6); } }
.qz__calc-text { font-family: var(--db-font-display); font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.01em; color: var(--db-tinta); }

/* Resultado: bloques separados por hilo, sin cajas */
.qz__result { gap: 0; }
.qz__result > * + * { border-top: 1px solid var(--db-hilo); padding-top: 24px; margin-top: 24px; }
.qz__result-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.qz__result-head > div { display: flex; flex-direction: column; gap: 14px; }
.qz__result-3d { width: clamp(76px, 11vw, 128px); height: auto; filter: drop-shadow(0 14px 22px rgba(3, 45, 70, 0.25)); }
.qz__result-title { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.035em; line-height: 1.04; }
.qz__dart-line { font-family: var(--db-font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; color: var(--db-tinta); border-left: 2px solid var(--db-oro); padding-left: 16px; margin-bottom: 16px; }
.qz__result .db-text { color: var(--db-piedra); font-size: 16px; }
.qz__block { display: flex; flex-direction: column; gap: 10px; }
.qz__block .db-label { margin-bottom: 2px; }
.qz__step-text { font-family: var(--db-font-display); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.3; letter-spacing: -0.01em; color: var(--db-tinta); }
.qz__mail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.qz__mail h3 { font-family: var(--db-font-display); font-size: 24px; letter-spacing: -0.01em; margin-bottom: 6px; }
.qz__mail .db-text strong { color: var(--db-tinta); font-weight: 500; }
.qz__book { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px; border-radius: var(--db-radius-lg); background: var(--db-oro-sutil); }
.qz__result > .qz__book { border-top: 0; padding-top: 28px; }
.qz__book img { width: 100%; height: auto; border-radius: 8px; box-shadow: var(--db-shadow-pop); }
.qz__book > div { display: flex; flex-direction: column; gap: 10px; }
.qz__book h3 { font-family: var(--db-font-display); font-size: 32px; letter-spacing: -0.02em; line-height: 1; }
.qz__book-sub { font-family: var(--db-font-display); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--db-piedra); }
.qz__book .db-actions { margin-top: 8px; }
.qz__share { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; }
.qz__error { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: var(--db-radius-md); background: var(--db-crema); }
.qz__result > .qz__error { border-top: 0; padding-top: 16px; }
.qz__error[hidden] { display: none; }
@media (max-width: 600px) {
  .qz__result-head { grid-template-columns: minmax(0, 1fr) 72px; gap: 14px; align-items: start; }
  .qz__mail { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qz__book { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px; }
  .qz__book img { width: 130px; }
  .qz__error { flex-direction: column; align-items: stretch; }
}

/* Aviso pequeño */
.qz__toast { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 0); z-index: 4; padding: 12px 18px; border-radius: var(--db-radius-pill); background: var(--db-tinta); color: var(--db-crema); font-family: var(--db-font-sans); font-size: 14px; box-shadow: var(--db-shadow-pop); animation: qz-toast 3.2s var(--db-ease-quint) both; max-width: calc(100% - 32px); text-align: center; }
.qz__toast[hidden] { display: none; }
@keyframes qz-toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }

@media (prefers-reduced-motion: reduce) {
  .qz-orbit__item img, .qz-orbit__center, .qz-bubbles__origin, .qz-bubble__icon img { animation: none; }
  .qz__screen, .qz__screen.is-out { animation: qz-in 200ms ease both; }
  .qz__ring-a, .qz__ring-b, .qz__ring-c, .qz__dart, .qz__hit { animation: none; opacity: 1; }
  .qz__hit { opacity: 0; }
}