@media(max-width:600px){.app-shell{padding:0}.screen{min-height:100svh;border:0;border-radius:0}.lesson-screen{padding:18px 16px 20px}.lesson-header{gap:10px}.score-pill{padding:8px 11px}.teacher-zone{margin:16px 0 8px}.teacher-orb{width:55px;height:55px;font-size:2.15rem}.listen-btn{width:72px;height:72px;margin-bottom:17px}.options-grid{gap:11px}.animal-card{min-height:142px;font-size:4.3rem;border-radius:22px}.feedback{margin-top:11px}.parent-screen{padding:25px 18px}.stats-grid{gap:10px}.stats-grid article{padding:17px}.stats-grid strong{font-size:1.65rem}}@media(max-height:720px){.animal-card{min-height:112px;font-size:3.8rem}.teacher-zone{margin:10px 0 5px}.listen-btn{width:62px;height:62px;margin-bottom:12px}.feedback{margin-top:8px}}

@media(max-width:600px){.animal-emoji{font-size:4rem}.animal-name{font-size:1rem}}
@media(max-height:720px){.animal-emoji{font-size:3.4rem}}
@media(max-width:600px){.worlds-screen{padding:22px 16px}.category-list{grid-template-columns:repeat(2,1fr)}.category-card{min-height:115px}}
@media(max-width:600px){.home-screen .mascot{width:246px;height:230px;margin:-12px auto -2px}.home-screen .mascot img{width:246px;height:230px}}
@media(max-width:600px){.auth-area{left:14px;top:14px}.parent-link{right:14px;top:14px}.google-login{min-height:44px;padding:0 13px}.google-login span{font-size:.85rem}.user-profile{max-width:210px;height:46px}.user-profile img{width:34px;height:34px}}
@media(max-width:600px){.login-screen{padding:82px 18px 68px}.login-brand{left:18px;top:16px}.login-brand img{width:48px;height:43px}.login-content h1{font-size:clamp(2rem,9.5vw,2.8rem);margin-bottom:12px}.login-content>p:not(.eyebrow):not(.login-error){font-size:.95rem;margin-bottom:15px}.login-required{padding:12px 13px;margin-bottom:13px}.login-required strong{font-size:.9rem}.login-required small{font-size:.7rem}.login-google{min-height:62px}.login-google span{font-size:.95rem}.login-safety{margin-top:18px;font-size:.72rem}.login-footer{bottom:18px}}
@media(max-width:600px){.progress-hero{padding:18px;gap:15px}.progress-ring{flex-basis:92px;width:92px}.progress-ring strong{font-size:1.35rem}.parent-screen .stats-grid{grid-template-columns:1fr 1fr}.category-progress-list{grid-template-columns:1fr}.performance-card,.category-progress-section{padding:18px}.difficult-item{grid-template-columns:38px 1fr 42px}.practice-metrics{grid-column:2/-1;width:100%}.practice-score{grid-column:3;grid-row:1}.section-heading{align-items:start;flex-direction:column;gap:5px}}

/* Layout resiliente para navegadores mobile, inclusive webviews do Instagram. */
@media(max-width:600px){
  html,body{width:100%;min-height:100%;overflow:hidden}
  .app-shell{width:100%;height:100vh;height:100svh;padding:0;display:block}
  .screen{width:100%;height:100vh;height:100svh;min-height:0;max-height:none;border:0;border-radius:0;box-shadow:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}
  .lesson-screen{padding-left:clamp(12px,4vw,18px);padding-right:clamp(12px,4vw,18px);display:none;gap:0}
  .lesson-screen.active{display:flex}
  .lesson-header{flex:0 0 auto;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(8px,2.5vw,12px)}
  .score-pill{white-space:nowrap;border-radius:16px;padding:8px 10px}
  .progress-wrap{min-width:0;gap:8px}
  .progress-track{min-width:40px}
  .icon-btn{flex:0 0 auto;width:46px;height:46px}
  .teacher-zone{flex:0 0 auto;margin:clamp(12px,2.5vh,20px) 0 8px}
  .teacher-orb{flex:0 0 54px;width:54px;height:54px;font-size:2rem}
  .speech-bubble{padding:11px 16px;font-size:1rem}
  .listen-btn{flex:0 0 auto;width:70px;height:70px;margin:2px auto clamp(12px,2vh,18px);box-shadow:0 6px 0 var(--primary-dark),0 10px 20px rgba(13,225,83,.18)}
  .listen-btn span{font-size:1.7rem}
  .options-grid{flex:1 0 auto;width:100%;min-height:292px;max-height:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(136px,1fr));gap:clamp(9px,3vw,13px);margin:0 auto}
  .animal-card{width:100%;min-width:0;min-height:136px;padding:10px 6px;border-radius:21px}
  .animal-emoji{font-size:clamp(3.35rem,16vw,4.4rem)}
  .animal-name{max-width:100%;font-size:clamp(.78rem,3.6vw,1rem);overflow-wrap:anywhere}
  .feedback{flex:0 0 auto;min-height:30px;margin:9px 0 0;font-size:1.05rem}
  .speak-panel{position:fixed;inset:0;min-height:100vh;min-height:100svh;border-radius:0;padding:max(70px,env(safe-area-inset-top)) 20px max(30px,env(safe-area-inset-bottom));overflow-y:auto}
  .speak-animal{font-size:clamp(5rem,24vw,7rem)}
  .speak-panel p{font-size:clamp(1.35rem,6vw,1.7rem)}
  .login-form{max-width:100%}
}

@media(max-width:360px){
  .score-pill{font-size:.95rem}.score-pill span{font-size:1.05rem}.progress-wrap{font-size:.72rem}.icon-btn{width:42px;height:42px}
  .options-grid{min-height:270px;grid-template-rows:repeat(2,minmax(126px,1fr))}.animal-card{min-height:126px}
}

@media(max-height:650px) and (max-width:900px){
  .screen{overflow-y:auto}
  .lesson-screen{padding-top:10px;padding-bottom:12px}
  .teacher-zone{margin:8px 0 5px}.teacher-orb{width:46px;height:46px;flex-basis:46px;font-size:1.7rem}.speech-bubble{padding:8px 13px}
  .listen-btn{width:58px;height:58px;margin-bottom:10px}.listen-btn span{font-size:1.35rem}
  .options-grid{min-height:224px;grid-template-rows:repeat(2,minmax(104px,1fr))}.animal-card{min-height:104px}.animal-emoji{font-size:3rem}.animal-name{font-size:.76rem}
}

@media(orientation:landscape) and (max-height:500px){
  .lesson-screen.active{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(320px,1.2fr);grid-template-rows:auto auto 1fr;column-gap:18px}
  .lesson-header{grid-column:1/-1}.teacher-zone{grid-column:1;grid-row:2}.listen-btn{grid-column:1;grid-row:3;align-self:start}.options-grid{grid-column:2;grid-row:2/4;min-height:220px}.feedback{grid-column:1/-1}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

button:focus-visible,a:focus-visible{outline:3px solid #20263a;outline-offset:3px}