/* quiz.css: quiz con resultado (J03). Usa los tokens del motor (--noche, --oro, --papel, --display, --serif, --sans...).
   No inventa colores ni fuentes: cada var() lleva de respaldo el valor de paleta.txt. Todo lo propio va con prefijo .quiz- */
.juego[data-espejo-quiz] noscript::after{content:" Más abajo están los 12 resultados, uno por signo."}
.juego[data-espejo-quiz]:empty::before{content:"Este quiz necesita JavaScript. Más abajo están los 12 resultados, uno por signo.";display:block;
  padding:18px 20px;border:1px solid var(--filete,#DDD5C7);border-radius:14px;background:var(--papel,#F7F3EA);color:var(--tinta,#1A1A22);
  font:500 17px/1.5 var(--sans,"Barlow",sans-serif)}
.quiz{max-width:680px;margin:28px auto;scroll-margin-top:88px}
.quiz [hidden]{display:none!important}
.quiz .gl{font-family:var(--glifo,"Segoe UI Symbol","Noto Sans Symbols",sans-serif);font-weight:400;font-style:normal}
.quiz-aviso,.quiz-oculto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.quiz button{cursor:pointer}
.quiz :focus-visible{outline:3px solid var(--oro-tinta,#8A6A21);outline-offset:3px}
.quiz-res :focus-visible,.quiz-doce :focus-visible{outline-color:var(--oro,#C9A227)}
/* el titulo de cada pantalla recibe el foco por script para que el lector de pantalla lo lea; no es un control, no lleva contorno */
.quiz h2[tabindex="-1"]{scroll-margin-top:96px}
.quiz h2[tabindex="-1"]:focus,.quiz h2[tabindex="-1"]:focus-visible{outline:0}

/* la hoja: pregunta sobre papel, como en la maqueta */
.quiz .quiz-hoja,.quiz .quiz-inicio{background:var(--papel,#F7F3EA);color:var(--tinta,#1A1A22);border-radius:18px;padding:30px 34px 28px;border:1px solid var(--filete,#DDD5C7)}
.quiz .quiz-inicio .kicker,.quiz .quiz-hoja .kicker{color:var(--oro-tinta,#8A6A21);margin:0}
.quiz-nombre{font:700 30px/1.15 var(--serif,"Source Serif 4",Georgia,serif);letter-spacing:-.01em;margin:8px 0 10px;color:var(--tinta,#1A1A22)}
.quiz-bajada,.quiz-previo{font:400 18px/1.55 var(--serif,"Source Serif 4",Georgia,serif);color:var(--cuerpo,#3A3A45);margin:0 0 14px}
.quiz-previo{font:500 15.5px/1.5 var(--sans,"Barlow",sans-serif)}
.quiz-error{font:600 15.5px/1.5 var(--sans,"Barlow",sans-serif);color:var(--tinta,#1A1A22);border-left:4px solid var(--oro-tinta,#8A6A21);padding:6px 0 6px 12px;margin:16px 0 0}
.quiz-fila{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.quiz .quiz-boton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border:0;border-radius:999px;
  background:var(--noche,#0B1B33);color:var(--luna,#F2E9D0);font:600 16px/1.2 var(--sans,"Barlow",sans-serif);letter-spacing:.04em;text-decoration:none}
.quiz .quiz-res .quiz-boton{background:var(--oro,#C9A227);color:var(--noche-tinta,#050D1C)}
.quiz-boton:disabled{opacity:.6;cursor:default}
.quiz-son{min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid var(--filete,#DDD5C7);background:transparent;color:var(--cuerpo,#3A3A45);
  font:600 14px/1.2 var(--sans,"Barlow",sans-serif);letter-spacing:.04em}
.quiz-son[aria-pressed="true"]{border-color:var(--oro-tinta,#8A6A21);color:var(--oro-tinta,#8A6A21)}
.quiz-pr{display:flex;justify-content:space-between;gap:12px;font:600 13px/1.4 var(--sans,"Barlow",sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--suave,#726C7F)}
.quiz-pts{display:flex;gap:5px;margin-top:12px}
.quiz-pts i{flex:1;height:4px;border-radius:4px;background:var(--filete,#DDD5C7)}
.quiz-pts i.h{background:var(--oro-tinta,#8A6A21)}
.quiz-q{font:700 29px/1.22 var(--serif,"Source Serif 4",Georgia,serif);letter-spacing:-.01em;margin:26px 0 22px;color:var(--tinta,#1A1A22)}
.quiz-ayuda{font:500 15px/1.5 var(--sans,"Barlow",sans-serif);color:var(--cuerpo,#3A3A45);margin:-10px 0 18px}
.quiz-ops{display:grid;gap:10px}
.quiz-op{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:center;width:100%;min-height:58px;text-align:left;padding:13px 18px;
  border:1px solid var(--filete,#DDD5C7);border-radius:12px;background:var(--hueso,#FDFBF6);color:var(--tinta,#1A1A22);font:500 17.5px/1.35 var(--sans,"Barlow",sans-serif);
  transition:border-color .15s,background .15s,color .15s}
.quiz-op b{width:30px;height:30px;border-radius:50%;border:1px solid var(--filete,#DDD5C7);display:grid;place-items:center;font:600 13px/1 var(--sans,"Barlow",sans-serif);color:var(--suave,#726C7F)}
.quiz-op:hover{border-color:var(--tinta,#1A1A22)}
.quiz-op.el{border-color:var(--tinta,#1A1A22);background:var(--tinta,#1A1A22);color:var(--hueso,#FDFBF6)}
.quiz-op.el b{border-color:rgba(253,251,246,.5);color:var(--hueso,#FDFBF6)}
.quiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.quiz-volver{min-height:50px;padding:12px 6px;border:0;background:transparent;color:var(--cuerpo,#3A3A45);font:600 13.5px/1.2 var(--sans,"Barlow",sans-serif);letter-spacing:.1em;text-transform:uppercase}
.quiz-sig{min-height:50px;margin-left:auto;padding:13px 26px;border:0;border-radius:999px;background:var(--noche,#0B1B33);color:var(--luna,#F2E9D0);
  font:700 13.5px/1.2 var(--sans,"Barlow",sans-serif);letter-spacing:.1em;text-transform:uppercase}
.quiz-sig:disabled{opacity:.45;cursor:default}
.quiz-signos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quiz-signo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;padding:10px 4px;border:1px solid var(--filete,#DDD5C7);
  border-radius:12px;background:var(--hueso,#FDFBF6);color:var(--tinta,#1A1A22);font:600 14.5px/1.2 var(--sans,"Barlow",sans-serif)}
.quiz-signo .gl{font-size:22px;line-height:1;color:var(--oro-tinta,#8A6A21)}
.quiz-signo:hover,.quiz-signo.el{border-color:var(--tinta,#1A1A22)}
.quiz-signo.el{background:var(--tinta,#1A1A22);color:var(--hueso,#FDFBF6)}
.quiz-signo.el .gl{color:var(--hueso,#FDFBF6)}

/* el resultado: tarjeta de noche con la criatura */
.quiz .quiz-res{padding:0;background:linear-gradient(170deg,var(--noche-alta,#16294A),var(--noche,#0B1B33));border:1px solid rgba(201,162,39,.5);border-radius:18px;overflow:hidden;color:var(--luna,#F2E9D0)}
.quiz-res+.quiz-res{margin-top:18px}
.quiz-img{position:relative;aspect-ratio:3/2;max-height:320px;width:100%;background:var(--noche-tinta,#050D1C)}
.quiz-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.quiz-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--noche,#0B1B33) 0,transparent 55%)}
.quiz-cu{position:relative;margin-top:-50px;padding:0 34px 30px}
.quiz .quiz-res .kicker{color:var(--oro,#C9A227);margin:0}
.quiz-titulo{font:400 38px/1.08 var(--display,"Cinzel",serif);letter-spacing:.12em;text-transform:uppercase;color:var(--oro,#C9A227);margin:10px 0 0;overflow-wrap:anywhere}
.quiz-cuenta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:18px 0 0;padding:14px 0;border-top:1px solid var(--filete-noche,#2A3D5E);border-bottom:1px solid var(--filete-noche,#2A3D5E)}
.quiz-cuenta b{font:700 34px/1 var(--sans,"Barlow",sans-serif);color:#FBF6E6;white-space:nowrap}
.quiz-cuenta span{font:500 15.5px/1.35 var(--sans,"Barlow",sans-serif);color:rgba(242,233,208,.8)}
.quiz-solar{font:600 15.5px/1.4 var(--sans,"Barlow",sans-serif);color:#FBF6E6;margin:12px 0 0}
.quiz-retrato{font:400 18px/1.62 var(--serif,"Source Serif 4",Georgia,serif);color:rgba(242,233,208,.92);margin:18px 0 0}
.quiz-sim{font:italic 400 15px/1.5 var(--serif,"Source Serif 4",Georgia,serif);color:rgba(242,233,208,.62);margin:12px 0 0}
.quiz-porque{font:400 16.5px/1.58 var(--serif,"Source Serif 4",Georgia,serif);color:rgba(242,233,208,.92);margin:16px 0 0;padding-top:16px;border-top:1px solid var(--filete-noche,#2A3D5E)}
.quiz-bts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.quiz .quiz-bts .quiz-boton,.quiz .quiz-linea{flex:1 1 200px;text-align:center}
.quiz .quiz-linea{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 20px;border:1px solid var(--oro,#C9A227);border-radius:999px;
  background:transparent;color:var(--oro,#C9A227);font:700 15px/1.25 var(--sans,"Barlow",sans-serif);letter-spacing:.03em;text-decoration:none}
.quiz .quiz-linea.quiz-meta{flex-basis:100%;background:rgba(201,162,39,.14)}
.quiz-nota{font:500 14.5px/1.5 var(--sans,"Barlow",sans-serif);color:rgba(242,233,208,.85);margin:14px 0 0}
.quiz-nota a{color:var(--oro,#C9A227)}
.quiz-regla{font:500 15px/1.5 var(--sans,"Barlow",sans-serif);color:var(--cuerpo,#3A3A45);background:var(--papel,#F7F3EA);border:1px solid var(--filete,#DDD5C7);border-radius:12px;padding:12px 16px;margin:14px 0}
.quiz-panel{margin-top:18px;padding:18px;border-radius:16px;background:var(--noche,#0B1B33);border:1px solid var(--filete-noche,#2A3D5E)}
.quiz-panel .quiz-clara{margin:12px 2px 0;color:rgba(242,233,208,.78)}
.quiz-panel .quiz-fila{margin-top:16px}
.quiz-panel .quiz-volver{padding:12px 22px;border:1px solid var(--oro,#C9A227);border-radius:999px;color:var(--oro,#C9A227)}
.quiz-panel .quiz-son{border-color:var(--filete-noche,#2A3D5E);color:rgba(242,233,208,.85)}
.quiz-panel .quiz-son[aria-pressed="true"]{border-color:var(--oro,#C9A227);color:var(--oro,#C9A227)}
.quiz-panel :focus-visible{outline-color:var(--oro,#C9A227)}
.quiz-doce{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.quiz-doce div{text-align:center;border:1px solid var(--filete-noche,#2A3D5E);border-radius:9px;padding:7px 0 6px}
.quiz-doce .gl{display:block;font-size:17px;line-height:1.2;color:rgba(242,233,208,.75)}
.quiz-doce em{font:600 13px/1.2 var(--sans,"Barlow",sans-serif);font-style:normal;color:rgba(242,233,208,.75)}
.quiz-doce .on{border-color:var(--oro,#C9A227);background:rgba(201,162,39,.14)}
.quiz-doce .on .gl,.quiz-doce .on em{color:var(--oro,#C9A227)}
.quiz-doce .sol{border-style:dashed;border-color:var(--luna,#F2E9D0)}

/* confeti: fijo, no recibe clics, se limpia solo */
.quiz-confeti{position:fixed;z-index:9999;pointer-events:none;width:0;height:0}
.quiz-confeti i{position:absolute;left:-4px;top:-6px;width:8px;height:12px;border-radius:2px;animation:quiz-confeti 1.2s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes quiz-confeti{0%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@keyframes quiz-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quiz-hoja,.quiz-res{animation:quiz-entra .28s both}

@media (max-width:560px){
  .quiz{margin:20px auto}
  .quiz .quiz-hoja,.quiz .quiz-inicio{padding:22px 18px 20px;border-radius:16px}
  .quiz-pr{letter-spacing:.12em}
  .quiz-pr span:first-child{display:none}
  .quiz-q{font-size:23px;margin:20px 0 18px}
  .quiz-nombre{font-size:25px}
  .quiz-op{font-size:16.5px;padding:12px 14px;gap:10px}
  .quiz-signos{grid-template-columns:repeat(3,1fr);gap:8px}
  .quiz-cu{padding:0 20px 24px;margin-top:-40px}
  .quiz-titulo{font-size:26px}
  .quiz-cuenta b{font-size:30px}
  .quiz-retrato{font-size:17px}
  .quiz-doce{grid-template-columns:repeat(6,1fr)}
  .quiz-panel{padding:14px}
}
@media (prefers-reduced-motion:reduce){.quiz *,.quiz-confeti i{animation:none!important;transition:none!important}}
@media print{.quiz-fila,.quiz-nav,.quiz-bts,.quiz-confeti{display:none!important}}