.ig20{--ig-blue:var(--inglexico-primary,var(--blue,#2563eb));--ig-accent:var(--inglexico-accent,#ff9f2d);--ig-text:#192840;--ig-line:#dce6f1;--ig-green:#15803d;--ig-red:#b91c1c;max-width:860px;margin:28px auto;padding:0 10px;font-family:inherit;color:var(--ig-text)}
.ig20 *{box-sizing:border-box}.ig20-shell{border:1px solid var(--ig-line);border-radius:24px;background:#fff;box-shadow:0 15px 45px rgba(27,49,85,.08);padding:clamp(18px,4vw,36px);overflow:hidden}.ig20 h2,.ig20 h3{color:var(--ig-text);margin:0 0 14px}.ig20 h2{font-size:clamp(25px,4vw,34px);line-height:1.25}.ig20 p{line-height:1.6}.ig20-kicker{color:var(--ig-blue);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px}.ig20-hero{text-align:center;padding:12px 0}.ig20-mascot{font-size:62px;line-height:1.4}.ig20-sub{max-width:540px;margin:12px auto 22px;color:#526278}.ig20-pills,.ig20-actions,.ig20-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.ig20-pill{border-radius:99px;padding:8px 13px;background:#eff6ff;color:#204d89;font-size:13px;font-weight:700}.ig20-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:2px solid transparent;border-radius:13px;background:var(--ig-blue);color:#fff!important;padding:12px 19px;font-size:15px;font-weight:800;cursor:pointer;min-height:46px;text-decoration:none!important}.ig20-btn:hover{filter:brightness(.94)}.ig20-btn:focus-visible,.ig20-option:focus-visible{outline:3px solid var(--ig-accent);outline-offset:3px}.ig20-btn.ghost{background:#f1f5fa;color:var(--ig-text)!important;border-color:var(--ig-line)}.ig20-btn.small{font-size:13px;padding:8px 12px;min-height:38px}.ig20-btn[disabled]{opacity:.5;cursor:not-allowed}.ig20-actions{margin-top:20px}.ig20-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:750}.ig20-meter{height:12px;background:#e8eef7;border-radius:99px;overflow:hidden;margin:14px 0 22px}.ig20-fill{height:100%;background:linear-gradient(90deg,var(--ig-blue),var(--ig-accent));transition:width .3s}.ig20-question{font-size:clamp(21px,3.5vw,27px);font-weight:850;line-height:1.4;margin:20px 0}.ig20-options{display:grid;gap:11px}.ig20-option{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--ig-line);background:#fbfdff;color:var(--ig-text);border-radius:15px;padding:13px 15px;font:inherit;font-size:16px;cursor:pointer;min-height:56px}.ig20-option:not([disabled]):hover{border-color:var(--ig-blue);background:#f2f7ff}.ig20-option .ig20-letter{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:9px;background:#e9f1ff;font-size:13px;font-weight:900}.ig20-option.correct{border-color:#16a34a;background:#ecfdf3}.ig20-option.wrong{border-color:#ef4444;background:#fff1f2}.ig20-option[disabled]{cursor:default}.ig20-feedback{margin-top:17px;padding:15px;border-radius:14px;background:#eff6ff;border-left:4px solid var(--ig-blue)}.ig20-feedback.good{background:#effcf3;border-color:#16a34a}.ig20-feedback.bad{background:#fff7ed;border-color:#f97316}.ig20-feedback strong{display:block;margin-bottom:5px}.ig20-feedback p{margin:4px 0}.ig20-tools{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:10px 0 18px}.ig20-result{text-align:center}.ig20-score{font-size:clamp(44px,9vw,68px);font-weight:900;color:var(--ig-blue);line-height:1.15;margin:12px 0}.ig20-stat{flex:1;min-width:110px;padding:13px;border-radius:13px;background:#f4f7fc}.ig20-stat b{display:block;font-size:22px}.ig20-stat span{font-size:12px;color:#526278}.ig20-note{color:#64748b;font-size:13px}.ig20-progress-resume{background:#f1f7ff;padding:12px;border-radius:12px;margin:16px auto;max-width:540px}.ig20-confetti{font-size:35px;letter-spacing:8px;animation:ig20-pop .6s ease-out}@keyframes ig20-pop{from{transform:scale(.7);opacity:.2}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.ig20 *{animation:none!important;transition:none!important}}@media(max-width:520px){.ig20-shell{border-radius:17px;padding:17px}.ig20-btn{width:100%}.ig20-actions{flex-direction:column}.ig20-tools .ig20-btn{width:auto}.ig20-option{padding:11px}}

.ig20-countdown{text-align:center;padding:55px 15px;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.ig20-count-digit{font-size:clamp(80px,18vw,160px);line-height:1;font-weight:900;color:#2563eb;animation:igcount .6s ease-out}
@keyframes igcount{from{transform:scale(.8);opacity:.3}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.ig20-count-digit{animation:none}}

.ig20-option{display:flex;align-items:center;gap:12px;cursor:pointer}
.ig20-answer-label{flex:1;text-align:left}
.ig20-listen{flex:none;display:inline-grid;place-items:center;min-width:44px;min-height:44px;border:1px solid currentColor;border-radius:12px;background:rgba(37,99,235,.07);cursor:pointer;font-size:18px}
.ig20-listen:focus-visible,.ig20-option:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.ig20-option[aria-disabled="true"]{cursor:default}

/* v3.2.0: adaptive and immersive layout */
.ig20{width:100%;max-width:1100px;min-width:0;container-type:inline-size;margin:18px auto;padding:0 8px;isolation:isolate}
.ig20-shell{position:relative;min-width:0;padding:clamp(14px,3cqw,34px)}
.ig20-mascot-img{display:block;object-fit:contain;width:clamp(88px,18cqw,145px);height:auto;margin:0 auto 12px;filter:drop-shadow(0 8px 12px rgba(30,64,175,.12))}
.ig20-mascot-corner{width:clamp(60px,12cqw,100px);float:right;margin:0 0 0 10px}
.ig20-celebrate{animation:ig20-bounce .8s ease-out}
@keyframes ig20-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-13px)}}
.ig20-option{font-family:inherit;appearance:none;line-height:1.4;min-width:0}
.ig20-option:disabled{cursor:default;opacity:1}
.ig20-answer-label{min-width:0;overflow-wrap:anywhere}
.ig20-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.ig20-btn{max-width:100%;white-space:normal;text-align:center}
.ig20-immersive{position:fixed!important;inset:0!important;z-index:2147483000!important;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;padding:clamp(8px,2vw,20px)!important;background:linear-gradient(140deg,#e9f2ff,#f6f0ff)!important;overflow:auto!important;overscroll-behavior:contain;container-type:inline-size}
.ig20-immersive .ig20-shell{max-width:950px;margin:auto;min-height:min(90dvh,760px);display:flex;flex-direction:column;justify-content:center}
.ig20-immersive:fullscreen{width:100%;height:100%;overflow:auto}
@container (max-width:620px){.ig20-options{grid-template-columns:1fr}.ig20-mascot-corner{width:58px}.ig20-shell{border-radius:16px}.ig20-actions{flex-direction:column}.ig20-actions .ig20-btn{width:100%}.ig20-top{font-size:12px}.ig20-tools{justify-content:center}.ig20-tools .ig20-btn{font-size:12px;min-height:44px}.ig20-question{clear:both}}
@media(max-width:480px){.ig20{padding:0 2px}.ig20-shell{padding:14px}.ig20-option{min-height:58px;padding:10px}.ig20-btn{min-height:46px}}
@media(prefers-reduced-motion:reduce){.ig20-celebrate{animation:none}}

/* v3.3.0: spacing, accessible toggle, compact teaching feedback */
.ig20-mode-wrap{margin:24px auto 18px;display:flex;justify-content:center;clear:both}
.ig20-mode-toggle{background:linear-gradient(120deg,#1956cb,#367be9)!important;color:#fff!important;border:1px solid #174eae!important;box-shadow:0 5px 12px rgba(29,78,216,.17);min-height:46px}
.ig20-mode-toggle:hover{filter:brightness(1.06)}
.ig20-tools .ig20-mode-toggle{flex:0 1 auto}
.ig20-intro-actions{margin-top:22px}
.ig20-completed-line{font-size:clamp(17px,2.4vw,22px);font-weight:750;color:#173c77;line-height:1.6;margin:10px 0}
.ig20-highlight{background:#ffe28a;color:#173c77;border-radius:5px;padding:2px 5px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.ig20-translation{font-weight:650}
.ig20-lesson{color:#32465e}
.ig20-immersive .ig20-shell{justify-content:flex-start;min-height:0}
.ig20-tools{justify-content:center}
@container (max-width:620px){.ig20-tools{gap:8px;margin:8px 0 16px}.ig20-tools .ig20-btn{flex:1 1 145px}.ig20-mascot-corner{width:66px}.ig20-mode-wrap{margin:20px 0 16px}}

/* Mascota oficial Inglexico 3.3.1: interacción visual ligera */
.ig20-mascot-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:max-content;max-width:100%;margin:0 auto 14px;isolation:isolate}
.ig20-mascot-wrap .ig20-mascot-img{width:clamp(100px,18cqw,154px);height:auto;max-width:100%;margin:0;object-fit:contain;filter:drop-shadow(0 8px 9px rgba(17,61,150,.15))}
.ig20-mascot-bubble{display:block;margin:0 auto;padding:5px 10px;border-radius:15px;background:#edf5ff;border:1px solid #b7d6ff;color:#17449a;font-size:12px;font-weight:800;line-height:1.25;white-space:nowrap}
.ig20-mascot-corner{float:right;width:clamp(85px,13cqw,130px);margin:0 0 4px 12px}
.ig20-mascot-corner .ig20-mascot-img{width:clamp(76px,11cqw,112px)}
.ig20-mascot-corner .ig20-mascot-bubble{font-size:10px;padding:4px 6px}
.ig20-mood-correct .ig20-mascot-img,.ig20-mood-celebrate .ig20-mascot-img{animation:ig20-mascot-cheer .65s ease-out 1}
.ig20-mood-wrong .ig20-mascot-img{animation:ig20-mascot-nod .6s ease-out 1}
@keyframes ig20-mascot-cheer{0%,100%{transform:translateY(0)}45%{transform:translateY(-7px) rotate(-3deg)}}
@keyframes ig20-mascot-nod{0%,100%{transform:rotate(0)}35%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
@container (max-width:620px){.ig20-mascot-corner{width:83px;margin-left:8px}.ig20-mascot-corner .ig20-mascot-img{width:75px}.ig20-mascot-corner .ig20-mascot-bubble{font-size:9px;white-space:normal;text-align:center}.ig20-mascot-wrap:not(.ig20-mascot-corner) .ig20-mascot-img{width:116px}}
@media(prefers-reduced-motion:reduce){.ig20-mood-correct .ig20-mascot-img,.ig20-mood-celebrate .ig20-mascot-img,.ig20-mood-wrong .ig20-mascot-img{animation:none}}

/* 3.3.2: personaje completo y expresiones reales; sin recortes laterales */
.ig20 .ig20-shell{overflow:visible}
.ig20 .ig20-mascot-wrap{box-sizing:border-box;max-width:100%;overflow:visible;float:none}
.ig20 .ig20-mascot-corner{float:none!important;width:125px!important;max-width:100%;margin:4px 0 10px auto!important;clear:both;align-self:flex-end}
.ig20 .ig20-mascot-corner .ig20-mascot-img{width:112px!important;max-width:100%;height:auto!important;object-fit:contain}
.ig20 .ig20-mascot-bubble{max-width:100%;white-space:normal;text-align:center;overflow-wrap:break-word}
.ig20 .ig20-mascot-img{aspect-ratio:1/1;object-fit:contain;max-height:none}
@container (max-width:620px){
.ig20 .ig20-mascot-corner{width:95px!important;margin:5px 0 10px auto!important}
.ig20 .ig20-mascot-corner .ig20-mascot-img{width:88px!important}
.ig20 .ig20-mascot-corner .ig20-mascot-bubble{font-size:10px}
}

/* v3.3.3: reserve a dedicated mascot row, preventing header clipping */
.ig20 .ig20-mascot-corner{float:none!important;position:relative!important;display:flex!important;clear:both!important;align-items:center;justify-content:center;width:140px!important;max-width:100%;min-height:155px;margin:8px 0 12px auto!important;overflow:visible!important}
.ig20 .ig20-mascot-corner .ig20-mascot-img{display:block;width:115px!important;max-width:100%;height:auto!important;object-fit:contain!important;aspect-ratio:auto!important}
.ig20 .ig20-mascot-corner .ig20-mascot-bubble{position:relative;max-width:100%;white-space:normal!important}
.ig20 .ig20-example{margin-top:8px;font-size:.94em;color:#214c81}
@container (max-width:620px){.ig20 .ig20-mascot-corner{width:110px!important;min-height:124px;margin:8px 0 12px auto!important}.ig20 .ig20-mascot-corner .ig20-mascot-img{width:86px!important}}

/* 3.3.4: compact in-game mascot within the progress header, no extra row */
.ig20 .ig20-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:3px;min-height:64px}
.ig20 .ig20-top>span:first-of-type{grid-column:1;grid-row:1}
.ig20 .ig20-top>span:last-of-type{grid-column:1;grid-row:2}
.ig20 .ig20-top .ig20-mascot-corner{grid-column:2;grid-row:1 / span 2;float:none!important;clear:none!important;position:static!important;min-height:0!important;width:64px!important;height:auto!important;margin:0!important;align-self:center;justify-self:end;gap:0}
.ig20 .ig20-top .ig20-mascot-corner .ig20-mascot-img{width:55px!important;height:55px!important;object-fit:contain!important;aspect-ratio:1/1!important}
.ig20 .ig20-top .ig20-mascot-corner .ig20-mascot-bubble{font-size:9px!important;line-height:1.15;padding:2px 3px;max-width:75px}
.ig20 .ig20-meter{margin:9px 0 13px}
.ig20 .ig20-tools{margin:6px 0 12px}
.ig20 .ig20-meaning{display:flex;flex-direction:column;gap:3px;padding:9px 12px;margin:9px 0;border-radius:10px;font-size:clamp(13px,2.5vw,16px)}
.ig20 .ig20-meaning strong{margin:0}
.ig20 .ig20-selected{background:#ffe9e9;border:1px solid #f3b5b5;color:#8c2020}
.ig20 .ig20-right{background:#e5f9eb;border:1px solid #a1dfb6;color:#135b34}
.ig20 .ig20-contrast{font-size:.95em}
@container (max-width:620px){.ig20 .ig20-top{min-height:60px;font-size:12px}.ig20 .ig20-top .ig20-mascot-corner{width:57px!important}.ig20 .ig20-top .ig20-mascot-corner .ig20-mascot-img{width:48px!important;height:48px!important}.ig20 .ig20-tools .ig20-btn{flex:1 1 100px;padding:8px 7px;font-size:12px}}

/* 3.3.5: separate answer and teaching screens; compact responsive app layout */
.ig20.ig20-question-stage .ig20-shell,.ig20.ig20-feedback-stage .ig20-shell{display:flex;flex-direction:column;gap:0;min-width:0}
.ig20.ig20-question-stage .ig20-top,.ig20.ig20-feedback-stage .ig20-top{flex:0 0 auto}
.ig20.ig20-question-stage .ig20-question{font-size:clamp(22px,3.3cqw,36px);line-height:1.18;margin:7px 0 12px;overflow-wrap:anywhere}
.ig20.ig20-question-stage .ig20-options{gap:clamp(8px,1.4cqw,14px);margin:0}
.ig20.ig20-question-stage .ig20-option{min-height:clamp(52px,9dvh,82px);padding:10px 12px}
.ig20.ig20-question-stage .ig20-tools,.ig20.ig20-feedback-stage .ig20-tools{display:flex;flex-wrap:wrap;gap:7px;margin:3px 0 10px}
.ig20.ig20-question-stage .ig20-tools .ig20-btn,.ig20.ig20-feedback-stage .ig20-tools .ig20-btn{min-height:40px;padding:7px 10px;font-size:clamp(11px,1.5cqw,14px)}
.ig20 .ig20-feedback-title{font-size:clamp(16px,2.1cqw,22px);line-height:1.3;margin:5px 0 10px;color:#153f84;overflow-wrap:anywhere}
.ig20.ig20-feedback-stage .ig20-feedback{margin:0;min-width:0;padding:clamp(12px,2cqw,20px);overflow-wrap:anywhere}
.ig20.ig20-feedback-stage .ig20-feedback-actions{margin-top:12px;gap:8px}
.ig20.ig20-feedback-stage .ig20-feedback-actions .ig20-btn{min-height:44px}
.ig20.ig20-feedback-stage .ig20-meaning{margin:6px 0;padding:8px 10px}
.ig20.ig20-feedback-stage .ig20-lesson,.ig20.ig20-feedback-stage .ig20-example,.ig20.ig20-feedback-stage .ig20-contrast{margin:7px 0}
.ig20.ig20-immersive.ig20-question-stage,.ig20.ig20-immersive.ig20-feedback-stage{overflow-y:auto!important}
.ig20.ig20-immersive.ig20-question-stage .ig20-shell,.ig20.ig20-immersive.ig20-feedback-stage .ig20-shell{min-height:0;justify-content:flex-start;margin:0 auto}
@container (max-width:620px){
 .ig20.ig20-question-stage .ig20-shell,.ig20.ig20-feedback-stage .ig20-shell{padding:12px}
 .ig20.ig20-question-stage .ig20-question{font-size:clamp(20px,5.5cqw,28px);margin:5px 0 10px}
 .ig20.ig20-question-stage .ig20-options{grid-template-columns:1fr;gap:7px}
 .ig20.ig20-question-stage .ig20-option{min-height:52px;padding:7px 10px}
 .ig20.ig20-question-stage .ig20-top,.ig20.ig20-feedback-stage .ig20-top{min-height:52px}
 .ig20.ig20-question-stage .ig20-tools .ig20-btn,.ig20.ig20-feedback-stage .ig20-tools .ig20-btn{flex:1 1 auto;min-height:38px;padding:6px;font-size:11px}
 .ig20.ig20-feedback-stage .ig20-feedback-actions{flex-direction:column}
 .ig20.ig20-feedback-stage .ig20-feedback-actions .ig20-btn{width:100%}
}
@media(max-height:680px){.ig20.ig20-question-stage .ig20-option{min-height:46px}.ig20.ig20-question-stage .ig20-question{font-size:clamp(19px,3cqw,30px)}}