.l2a2-workspace.phase-0{--phase:#e8f3fb}.l2a2-workspace.phase-1{--phase:#e5f4e9}.l2a2-workspace.phase-2{--phase:#f0e8f7}.l2a2-workspace.phase-3{--phase:#faecee}
.l2a2-choice-count{display:flex;align-items:center;justify-content:center;gap:14px;margin:-4px 0 16px;color:#194e7f}.l2a2-choice-count span{display:flex;gap:7px}.l2a2-choice-count i{width:18px;height:18px;border:2px solid #39799f;border-radius:50%;background:#fff}.l2a2-choice-count i.filled{background:#39799f;box-shadow:0 0 0 3px #ddecf5}
.l2a2-recall-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:850px;margin:auto}.l2a2-recall-grid article>button:first-child{grid-template-columns:34px 130px 1fr 30px;align-items:center;text-align:left;padding:12px 48px 12px 12px}.l2a2-recall-grid article>button:first-child small{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#edf4f8;color:#31546d;font-weight:900}.l2a2-recall-grid img{height:130px}
.l2a2-word-bank{position:static}.l2a2-sentence{display:grid;grid-template-columns:64px 34px auto minmax(145px,210px) auto 36px 36px}.l2a2-sentence>img{width:60px;height:60px;object-fit:contain!important}.l2a2-sentence>.audio-button{margin:0}.l2a2-clear{width:34px;height:34px;border:1px solid #c8d5df;border-radius:50%;background:#fff;color:#7c4050;font-size:1.25rem}
.l2a2-always{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;max-width:900px;margin:auto}.l2a2-always button{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px;min-height:100px;border:2px solid #d9cde5;border-radius:19px;background:#fff;color:#503d64;padding:12px;text-align:left}.l2a2-always button img{width:70px;height:70px;object-fit:contain!important}.l2a2-always button.selected{border-color:#825da3;background:#f5effa;box-shadow:0 0 0 4px #eadff2}.l2a2-reflection-feedback{max-width:900px;margin:18px auto 0;padding:14px 17px;border-radius:16px;background:#fff;color:#3e5570;font-weight:750}
.l2a2-other-supports{max-width:1000px;margin:18px auto 0;padding:18px;border:2px solid #d8cce4;border-radius:22px;background:#fff}.l2a2-other-supports h4{margin:0;color:#4e3766;font:800 1.45rem Georgia,serif}.l2a2-other-supports>p{margin:.3rem 0 1rem;color:#5e5570}.l2a2-other-supports>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.l2a2-other-supports article{position:relative;border:2px solid #e0d8e8;border-radius:16px;background:#fff}.l2a2-other-supports article.selected{border-color:#825da3;background:#f6f0fa}.l2a2-other-supports article>button:first-child{display:grid;grid-template-columns:54px 1fr 24px;align-items:center;gap:8px;width:100%;min-height:76px;border:0;background:transparent;padding:8px 40px 8px 8px;text-align:left}.l2a2-other-supports article img{width:52px;height:52px;object-fit:contain!important}.l2a2-other-supports article>button span{opacity:0}.l2a2-other-supports article.selected>button span{opacity:1}.l2a2-other-supports article>.audio-button{position:absolute;right:7px;bottom:7px;width:29px;height:29px;opacity:.62}.l2a2-other-supports label{display:grid;gap:7px;margin-top:14px}.l2a2-other-supports textarea{width:100%;min-height:95px;padding:11px;border:2px solid #b29bc5;border-radius:13px;font:inherit}.l2a2-caa{display:flex;align-items:center;gap:10px!important;margin:.8rem 0 0!important}.l2a2-caa img{width:52px;height:52px;object-fit:contain!important}
@media(max-width:800px){.l2a2-recall-grid article>button:first-child{grid-template-columns:28px 90px 1fr 26px}.l2a2-recall-grid img{height:95px}.l2a2-sentence{grid-template-columns:52px 32px 1fr minmax(130px,180px) 30px}.l2a2-sentence>img{width:48px;height:48px}.l2a2-sentence>.audio-button{grid-column:5}.l2a2-other-supports>div{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.l2a2-recall-grid,.l2a2-always,.l2a2-other-supports>div{grid-template-columns:1fr}.l2a2-recall-grid article>button:first-child{grid-template-columns:26px 76px 1fr 24px}.l2a2-recall-grid img{height:78px}.l2a2-sentence{grid-template-columns:44px 30px 1fr 30px}.l2a2-sentence>img{width:42px;height:42px}.l2a2-sentence>span{grid-column:3}.l2a2-sentence>.l2a1-slot{grid-column:3}.l2a2-sentence>.audio-button{grid-column:4;grid-row:1}.l2a2-always button{min-height:82px;grid-template-columns:56px 1fr}.l2a2-always button img{width:54px;height:54px}}

/* Actividad 2 definitiva: una fase visible, imagen del cuento y respuesta multimodal. */
.l2a2-hero-definitive{grid-template-columns:minmax(190px,270px) 1fr auto;min-height:250px;overflow:hidden}.l2a2-hero-definitive .l2a2-ander-glasses{width:100%;height:245px;object-fit:contain!important;object-position:center bottom;align-self:end}.l2a2-hero-definitive>div{align-self:center}.l2a2-hero-definitive .audio-button{align-self:center}
.l2a2-glasses-link{display:flex;align-items:center;justify-content:center;gap:18px;margin:-8px auto 18px;color:#2d6798;font-size:2rem;font-weight:900}.l2a2-glasses-link>img{width:112px;height:80px;object-fit:contain!important}.l2a2-glasses-link .l2a2-choice-count{margin:0;padding:10px 16px;border-radius:18px;background:#edf6fc}
.l2a2-recall-grid article>button:first-child{grid-template-columns:130px 1fr 30px}.l2a2-recall-grid article>button:first-child small{display:none}.l2a2-recall-grid article>.audio-button{opacity:.66;transform:scale(.8)}
.l2a2-word-bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:920px;margin:0 auto 20px}.l2a2-word-bank>div{position:relative}.l2a2-word-bank>div>button:first-child{width:100%;min-height:118px;padding:10px 38px 10px 10px;border:2px solid #b9d8c4;border-radius:17px;background:#fff;color:#205d3c;display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;cursor:pointer}.l2a2-word-bank>div>button:first-child img{width:70px;height:70px;object-fit:contain!important}.l2a2-word-bank>div>.audio-button{position:absolute;right:5px;top:5px;transform:scale(.7);opacity:.64}
.l2a2-sentence.personal{background:#f6fbf8;border-color:#8fc8a5}.l2a2-other-trigger{grid-column:1/-1;justify-self:center;padding:9px 14px;border:2px solid #76a58a;border-radius:12px;background:#fff;color:#205d3c;font:inherit;font-weight:900}.l2a2-personal-feedback{background:#edf7f1!important;color:#205d3c!important}.l2a2-personal-expansion{max-width:1050px;margin:20px auto 0;padding:18px;border:2px solid #a9cdb6;border-radius:22px;background:#f7fcf9}.l2a2-personal-expansion>h4{margin:0;color:#205d3c;font:800 1.4rem Georgia,serif}.l2a2-personal-expansion .l2-open-response{margin-top:12px}
.l2a2-personal-meaning{display:flex;align-items:center;justify-content:center;gap:15px;margin:0 auto 14px;padding:12px 20px;width:max-content;max-width:100%;border-radius:20px;background:#f7f2fb;color:#684986;font-size:1.8rem;font-weight:900}.l2a2-personal-meaning img{width:100px;height:100px;object-fit:contain!important}.l2a2-express-definitive .l2-open-response{margin-top:10px}
@media(max-width:800px){.l2a2-hero-definitive{grid-template-columns:150px 1fr auto;min-height:210px}.l2a2-hero-definitive .l2a2-ander-glasses{height:205px}.l2a2-word-bank{grid-template-columns:repeat(2,1fr)}.l2a2-glasses-link>img{width:90px}.l2a2-recall-grid article>button:first-child{grid-template-columns:95px 1fr 28px}}
@media(max-width:580px){.l2a2-hero-definitive{grid-template-columns:100px 1fr}.l2a2-hero-definitive .l2a2-ander-glasses{height:155px}.l2a2-hero-definitive .audio-button{grid-column:2}.l2a2-glasses-link{gap:8px}.l2a2-glasses-link>img{width:70px}.l2a2-glasses-link>span{font-size:1.4rem}.l2a2-word-bank>div>button:first-child{min-height:94px}.l2a2-word-bank>div>button:first-child img{width:52px;height:52px}.l2a2-personal-meaning img{width:76px;height:76px}}

/* Corrección quirúrgica: la frase conserva el protagonismo y se lee de izquierda a derecha. */
@media(min-width:581px){.l2a2-fill .l2a2-sentence{display:grid;grid-template-columns:64px 34px minmax(320px,3fr) minmax(150px,1.35fr) auto 34px 34px;align-items:center}.l2a2-fill .l2a2-sentence>span{line-height:1.35;white-space:normal}.l2a2-fill .l2a2-sentence>.audio-button{width:32px;height:32px;margin:0;justify-self:center;transform:none}.l2a2-fill .l2a2-clear{width:32px;height:32px}}
@media(min-width:581px) and (max-width:800px){.l2a2-fill .l2a2-sentence{grid-template-columns:52px 32px minmax(250px,3fr) minmax(125px,1.25fr) auto 30px 30px}}
