/* Caelus · quiz «¿Cuál es tu mellizo griego?». Solo lo propio del quiz; el sistema está en caelus.css.
   Las preguntas van en slate; el resultado toma el fondo de su ilustración (slate o paper). */

.quiz{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;
  padding-block:clamp(3.5rem, 8vw, 6.5rem);
  transition:background .4s ease, color .4s ease;
}
.quiz > .wrap{width:100%;position:relative;z-index:1}
.quiz-col{max-width:42rem}
.quiz-col.wide{max-width:none}

.screen{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem}
.screen.enter{animation:enter .35s ease}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.quiz h1,.quiz h2{text-wrap:balance}
.quiz h1:focus,.quiz h2:focus{outline:none}
.title-xl{font-size:clamp(2.4rem, 5.6vw, 4rem);max-width:16ch}
.title-lg{font-size:clamp(1.7rem, 3.4vw, 2.4rem);max-width:24ch}
.q-text{font-size:clamp(1.6rem, 3.2vw, 2.2rem);line-height:1.22;max-width:26ch}

/* progreso */
.progress{display:flex;align-items:center;gap:0.9rem}
.dots{display:flex;gap:6px}
.dot{width:22px;height:3px;background:var(--on-slate-line)}
.dot.on{background:var(--ochre-light)}  /* el avance hacia el resultado va en ochre, el color del resultado */
.counter{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.02em;font-variant-numeric:tabular-nums;color:var(--ochre-light)}

/* opciones */
.options{display:flex;flex-direction:column;gap:0.6rem;width:100%}
.opt{text-align:left;width:100%;padding:1rem 1.25rem;background:rgba(53,68,78,0.9);border:1px solid rgba(198,204,198,0.32);box-shadow:inset 0 0 0 transparent;transition:background .15s, border-color .15s, color .15s, box-shadow .15s}
/* Al pasar y al elegir, un filete ochre a la izquierda: la misma marca que el resultado */
.opt:hover,.opt:focus-visible{border-color:rgba(230,232,229,0.75);box-shadow:inset 3px 0 0 var(--ochre-light)}
.opt.selected{background:var(--paper);color:var(--slate);border-color:var(--paper);box-shadow:inset 4px 0 0 var(--ochre)}
.opt strong{display:block;font-weight:600;font-size:1.02rem;margin-bottom:0.15rem}
.opt span{display:block;font-size:0.94rem;opacity:.8}

.actions{display:flex;flex-wrap:wrap;align-items:center;gap:0.9rem 1.4rem}

/* desempate: misma grilla de 2px que .also-grid / .partners del inicio */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(198,204,198,0.22);width:100%}
.card{text-align:left;background:var(--slate);border:0;padding:1.7rem 1.6rem;transition:background .15s}
.card:hover,.card:focus-visible{background:var(--slate-deep)}
.card .name{display:block;font-family:var(--serif);font-size:1.45rem;margin-bottom:0.6rem}
.card .hook{display:block;font-size:0.95rem;color:rgba(230,232,229,0.8)}

/* resultado: texto en una columna; la ilustración, gigante, por detrás y hacia la derecha.
   La máscara funde el dibujo hacia el texto y esconde los bordes del PNG. Con fondo slate el
   dibujo se mezcla con lighten; con fondo paper, con multiply: en ambos casos desaparece el
   fondo del archivo y quedan solo los trazos. */
.result{width:100%}
.result .screen{gap:1.4rem;max-width:40rem}
/* «Tu mellizo griego es» en ochre, como las etiquetas sobre paper del resto del sitio */
.result .eyebrow{color:var(--ochre-deep)}
.on-slate .result .eyebrow{color:var(--ochre-light)}
.myth-name{font-size:clamp(3.4rem, 10vw, 7rem);line-height:1}
.hook-quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem, 2vw, 1.4rem);line-height:1.5;max-width:34ch}
/* Diagnóstico: texto abierto bajo un filete de 1px, sin recuadro. El único recuadro de la
   pantalla es la acción, para que no compitan dos bloques con la misma forma. */
.diagnosis{width:100%;max-width:32rem;margin-top:0.8rem}
.diagnosis .filete{margin-bottom:1.3rem}
.diagnosis .label{
  display:block;font-weight:600;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ochre-deep);margin-bottom:0.7rem;
}
.on-slate .diagnosis .label{color:var(--stone)}
.diagnosis .pain{font-family:var(--serif);font-size:clamp(1.6rem, 2.8vw, 2rem);line-height:1.2;margin-bottom:0.8rem;max-width:22ch}
.diagnosis .cta{font-size:1.02rem;max-width:40ch}
.on-slate .diagnosis .cta{color:var(--on-slate-strong)}

.lead-slot{width:100%;margin-top:0.8rem}
.again{margin-top:0.4rem}

.art{position:absolute;z-index:0;pointer-events:none;mix-blend-mode:lighten}
.on-paper .art{mix-blend-mode:multiply}
.art img{display:block;opacity:0;transform:translateY(5%) scale(1.04);transition:opacity 1.6s ease, transform 2.6s cubic-bezier(.2,.6,.2,1)}

.result-art{
  top:50%;height:min(116%, 1150px);aspect-ratio:4 / 5;
  right:max(-8rem, calc((100vw - var(--maxw)) / 2 - 9rem));transform:translateY(-50%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 6%, #000 48%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0%, transparent 6%, #000 48%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-composite:intersect;
}
.result-art img{width:100%;height:100%;object-fit:cover}
.result-art.in img{opacity:.78;transform:none}

/* portada del quiz: tres mellizos al azar, superpuestos como un grupo. Cada dibujo se mezcla
   con lighten sobre los demás, así los trazos se cruzan en vez de taparse. El del centro es el
   más grande; entran uno tras otro. */
.landing-art{
  top:50%;transform:translateY(-50%);height:min(104%, 940px);aspect-ratio:1.3;
  right:max(-12rem, calc((100vw - var(--maxw)) / 2 - 12rem));
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 12%, #000 48%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent 0%, transparent 12%, #000 48%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-composite:intersect;
}
.landing-art img{position:absolute;aspect-ratio:4 / 5;width:auto;mix-blend-mode:lighten}
.landing-art .art-1{height:72%;left:6%;bottom:2%;transition-delay:.1s}
.landing-art .art-2{height:100%;left:30%;top:0;transition-delay:.45s}
.landing-art .art-3{height:80%;right:0;bottom:6%;transition-delay:.8s}
.landing-art.in img{opacity:.42;transform:none}
.landing-art.in .art-2{opacity:.62}

/* Entrada del quiz (título + primera pregunta en la misma pantalla): la pantalla es alta, así que
   las ilustraciones van con tamaño propio, arriba a la derecha y más tenues, para no quedar detrás
   del texto. Sin esto crecían con el alto de la página y tapaban la pregunta. */
@media (min-width:901px){
  .art.entry{top:clamp(1rem, 3vw, 2.5rem);transform:none;height:min(600px, calc(100vh - 7rem))}
  .landing-art.entry.in img{opacity:.26}
  .landing-art.entry.in .art-2{opacity:.36}
  .result-art.entry.in img{opacity:.5}
}

@media (max-width:900px){
  .result-art{top:0;transform:none;height:auto;width:115vw;right:-45vw}
  .result-art.in img{opacity:.42}
  .landing-art{top:auto;bottom:-4%;transform:none;height:auto;width:150vw;right:-55vw}
  .landing-art.in img,.landing-art.in .art-2{opacity:.32}
  .result-art.entry.in img{opacity:.28}
  .landing-art.entry.in img,.landing-art.entry.in .art-2{opacity:.24}
}
@media (prefers-reduced-motion:reduce){
  .art img{transition:none;transform:none}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .quiz{align-items:flex-start}
  .actions .btn{width:100%;text-align:center}
}