/* V5: laboratori de fraccions; responsive i accessible */
.frac-stage{padding:12px;background:linear-gradient(140deg,#152b4d,#14203d);border:1px solid #5a729b70;border-radius:22px;overflow:hidden}.frac-stage svg{width:100%;height:auto;display:block;min-height:175px;max-height:340px}.frac-workspace{margin:18px auto;padding:18px;border:1px solid #8299d950;background:linear-gradient(150deg,#1a2e52,#14213d);border-radius:20px;max-width:680px}.frac-answer-caption{font-weight:750;text-align:center;color:#e9f1ff;margin-bottom:15px}.frac-answer-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:190px;margin:auto}.frac-input-label{display:flex;flex-direction:column;gap:9px;font-weight:650;font-size:14px;color:#d7eaff;align-items:center}.frac-input{color:#fff;background:#0e1b37;border:1px solid #8295c4;border-radius:12px;width:150px;min-height:55px;text-align:center;font-size:23px;font-weight:750;box-shadow:inset 0 1px 6px #0002;touch-action:manipulation}.frac-input:focus-visible{outline:3px solid #ffe49a;outline-offset:2px}.frac-answer-line{background:#d5f7ee;height:4px;width:151px;border-radius:6px}.frac-input.single{display:block;margin:10px auto 0}.frac-preview{margin:15px 0 0;padding:11px;border:1px solid #6c9fbd70;background:#11264a;border-radius:10px;color:#b9e9dc;font-size:14px;line-height:1.45}.frac-triplet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;padding:22px 11px;border:1px solid #769bd66e;border-radius:18px;margin-top:20px}.frac-triplet .frac-input{width:min(100%,130px)}.frac-tools{margin:20px 0;padding:13px 17px;background:#122547;border:1px solid #738cac7d;border-radius:14px}.frac-tools summary{cursor:pointer;font-weight:700;color:#abf3e4;padding:6px 0}.frac-tools p{color:#d5e6f5;font-size:14px;line-height:1.6}.frac-filter{white-space:normal;background:#284e54!important;color:#e0fff7!important}.frac-teacher{margin-top:20px}.frac-teacher .guide-exp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.frac-teacher .guide-exp-list p{margin:5px 0;padding:12px 0;border-bottom:1px solid #879dc438}
@media(max-width:620px){.frac-stage{padding:7px}.frac-input{font-size:20px;min-height:52px}.frac-triplet{grid-template-columns:1fr;gap:19px}.frac-triplet .frac-input{width:155px}.frac-teacher .guide-exp-list{grid-template-columns:1fr}.frac-filter{width:100%}}
@media(prefers-reduced-motion:reduce){.frac-stage *{animation:none!important;transition:none!important}}
/* Pantalles estretes: evitem que la barra superior forci desplaçament lateral. */
@media(max-width:360px){.topbar{gap:6px;padding-inline:10px}.brand{gap:6px;min-width:0}.brand-copy{font-size:15px}.brand-copy small{font-size:6px;letter-spacing:.45px}.brand-icon{width:32px;height:32px;flex-shrink:0;font-size:22px}.top-actions{gap:3px;flex-shrink:0}.top-actions .icon-btn{width:33px;height:37px;padding:6px;font-size:16px}.xp-pill{padding:8px 5px;font-size:12px}.wrap{padding-left:12px;padding-right:12px}}

.frac-home-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;background:linear-gradient(120deg,#173e4d,#1f2857);border:1px solid #74d3bd85;border-radius:22px;padding:19px 23px;margin:20px 0 34px}.frac-home-icon{font-size:clamp(48px,7vw,74px);filter:drop-shadow(0 8px 16px #0007)}.frac-home-banner h2{font-size:clamp(22px,2.6vw,32px);margin:3px 0 9px}.frac-home-banner p{color:#c2dbe6;font-size:14px;margin-bottom:0}.frac-home-banner .btn{white-space:nowrap}@media(max-width:680px){.frac-home-banner{grid-template-columns:auto 1fr;gap:10px;padding:15px}.frac-home-banner .btn{grid-column:1/-1;width:100%}.frac-home-icon{font-size:48px}}