/* REASCYL — Aprende jugando (Test + Auditoría). Usa los tokens --rc-* */

#rc-aprende .rc-wrap{ max-width:880px; margin:0 auto; padding:0 24px; }
#rc-aprende h1,#rc-aprende h2,#rc-aprende h3{ font-family:var(--rc-display); }
#rc-aprende .rc-kicker{ font-family:var(--rc-mono); font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--rc-earth-deep); margin:0 0 12px; }
#rc-aprende .rc-h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); color:var(--rc-ink); margin:0 0 10px; line-height:1.12; }
#rc-aprende .rc-lead{ color:var(--rc-ink-soft); max-width:60ch; }

.rc-aprende-hero{ padding:72px 0 28px; background:radial-gradient(120% 90% at 88% -10%,var(--rc-green-wash),transparent 55%),var(--rc-cream); }
.rc-juego{ padding:48px 0; border-top:1px solid var(--rc-line); background:var(--rc-cream); }
.rc-juego--alt{ background:var(--rc-white); }

.rc-juego-box{ background:var(--rc-white); border:1px solid var(--rc-line); border-radius:18px; padding:26px 28px; margin-top:22px; box-shadow:0 24px 50px -40px rgba(33,80,58,.5); }
.rc-juego--alt .rc-juego-box{ background:var(--rc-cream); }
.rc-juego-progress{ height:6px; background:var(--rc-green-wash); border-radius:99px; overflow:hidden; margin-bottom:20px; }
.rc-juego-progress span{ display:block; height:100%; width:0; background:var(--rc-green); transition:width .35s var(--rc-ease); }

.rc-q-num{ font-family:var(--rc-mono); font-size:.74rem; color:var(--rc-earth-deep); text-transform:uppercase; letter-spacing:.08em; margin:0 0 8px; }
.rc-q-text{ font-size:1.32rem; color:var(--rc-ink); margin:0 0 18px; line-height:1.25; }
.rc-q-opts{ display:grid; gap:10px; }
.rc-opt{ text-align:left; background:var(--rc-cream); border:1.5px solid var(--rc-line); border-radius:12px; padding:.85rem 1.1rem; font-family:var(--rc-body); font-size:1rem; color:var(--rc-ink); cursor:pointer; transition:border-color .2s,background .2s,transform .15s var(--rc-ease); }
.rc-juego--alt .rc-opt{ background:var(--rc-white); }
.rc-opt:hover{
    border-color:var(--rc-green-deep);
    background:var(--rc-green-wash);
    color:var(--rc-green-deep);
    font-weight:600;
    transform:translateX(3px);
}
.rc-opt:active{
    background:var(--rc-green);
    color:var(--rc-white);
    border-color:var(--rc-green-deep);
}
.rc-opt.is-selected{
    border-color:var(--rc-green-deep);
    background:var(--rc-green-wash);
    color:var(--rc-green-deep);
    font-weight:600;
}

.rc-res{ animation:rcfade .4s var(--rc-ease) both; }
@keyframes rcfade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.rc-res-k{ font-family:var(--rc-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--rc-earth-deep); margin:0 0 4px; }
.rc-res-t{ font-size:1.7rem; color:var(--rc-green-deep); margin:0 0 8px; }
.rc-res-claim{ color:var(--rc-ink); font-size:1.06rem; margin:0 0 10px; }
.rc-res-ent{ color:var(--rc-ink-soft); font-size:.96rem; margin:0 0 18px; }
.rc-res-ent strong{ color:var(--rc-ink); }

.rc-res--audit{ display:grid; grid-template-columns:240px 1fr; gap:26px; align-items:center; }
.rc-res-radar{ display:flex; justify-content:center; }
.rc-radar{ width:220px; height:220px; }
.rc-radar-ring{ fill:none; stroke:var(--rc-line); }
.rc-radar-axis{ stroke:var(--rc-line); }
.rc-radar-area{ fill:rgba(47,107,79,.28); stroke:var(--rc-green); stroke-width:2; }
.rc-radar-lbl{ font-family:var(--rc-mono); font-size:8.5px; fill:var(--rc-ink-soft); text-anchor:middle; dominant-baseline:middle; }

.rc-btn{ display:inline-block; font-weight:600; font-size:.92rem; padding:.6rem 1.15rem; border-radius:10px; text-decoration:none; cursor:pointer; font-family:var(--rc-body); }
.rc-btn--ghost{ background:transparent; color:var(--rc-green-deep); border:1.5px solid var(--rc-green); }
.rc-btn--ghost:hover{ background:var(--rc-green-wash); }

@media (max-width:680px){
  .rc-res--audit{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .rc-opt,.rc-juego-progress span,.rc-res{ transition:none; animation:none; }
}