/* ESCORCIA ACADEMY — Motion Lite + Responsive UI */
:root{--ea-motion:cubic-bezier(.2,.8,.2,1)}
@keyframes eaPageIn{from{opacity:.96;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes eaPageOut{from{opacity:1}to{opacity:.96}}
@keyframes eaRipple{to{transform:scale(2.4);opacity:0}}

/* Motion intentionally light: no blur, no large movement, no staggered page elements. */
html{scroll-behavior:smooth}
body{animation:eaPageIn .16s ease-out both}
body.ea-page-exit{animation:eaPageOut .10s ease-out forwards;pointer-events:none}
button,.btn,[role="button"],input[type="submit"],input[type="button"]{transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease,background-color .12s ease}
button:hover,.btn:hover,[role="button"]:hover,input[type="submit"]:hover,input[type="button"]:hover{transform:translateY(-1px)}
button:active,.btn:active,[role="button"]:active,input[type="submit"]:active,input[type="button"]:active{transform:scale(.985)}
button:focus-visible,.btn:focus-visible,[role="button"]:focus-visible,input:focus-visible{outline:2px solid currentColor;outline-offset:2px}
input,textarea,select{transition:border-color .12s ease,box-shadow .12s ease}
.ea-ripple{position:absolute;border-radius:999px;pointer-events:none;width:18px;height:18px;background:currentColor;opacity:.12;transform:scale(0);animation:eaRipple .28s ease-out forwards}

/* Do not add expensive continuous effects globally. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* ================= RESPONSIVE BASE ================= */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}

@media (max-width:700px){
  .top{height:auto;min-height:58px;flex-wrap:wrap;gap:8px;padding:8px 12px}
  .brand{min-width:0;flex:1 1 auto}
  .brand>div:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
  .nav{width:100%;margin-left:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:1 0 auto;text-align:center;white-space:nowrap;padding:8px 9px;font-size:11px}
  .shell{width:calc(100% - 16px);padding:14px 0 40px}
  .hero,.panel{border-radius:16px;padding:15px}
  .hero h1{font-size:clamp(23px,7vw,34px)}
  .grid{grid-template-columns:1fr!important;gap:12px}
  .vocab{grid-template-columns:1fr 1fr!important}
  .s-grid{grid-template-columns:1fr!important}
  .s-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .s-actions button,.check-row button,.listen-btn,.primary{width:100%;min-height:44px}
  .check-row{align-items:stretch;gap:8px}
  .complete{padding:16px;border-radius:16px}
  .complete-copy{min-width:0!important;width:100%}
  .complete .primary{width:100%}
  .options label{width:100%;min-width:0;overflow-wrap:anywhere}
  .listen-phrase-top,.s-top{align-items:flex-start;flex-wrap:wrap}
  .meta{gap:6px}
  .pill{font-size:10px}
  .transcript,.concept-box,.explain-box,.tip{overflow-wrap:anywhere}
}

@media (max-width:480px){
  .top{padding:7px 9px}
  .logo{width:34px!important;height:34px!important;flex-basis:34px!important}
  .shell{width:calc(100% - 12px)}
  .hero,.panel{padding:13px;border-radius:14px}
  .panel h2{font-size:19px}
  .vocab{grid-template-columns:1fr!important}
  .listen-player{align-items:stretch}
  .listen-player>*{width:100%}
  .q-card,.s-card{padding:13px}
  .s-top{font-size:9px}
  .score{font-size:22px}
}

/* Course page: prevent header/nav/button collisions on phones. */
@media (max-width:700px){
  .barra-superior{flex-wrap:wrap!important;align-items:center!important;gap:8px!important;padding:8px 10px!important}
  .logo-area{flex:1 1 180px;min-width:0}
  .nombre-academia{font-size:13px!important;overflow:hidden;text-overflow:ellipsis}
  .curso-nav-principal{order:3!important;width:100%!important;margin:0!important;display:flex!important;flex-wrap:wrap!important;gap:6px!important}
  .curso-nav-principal button,.curso-nav-principal a{flex:1 1 0!important;min-width:0!important;min-height:42px!important;white-space:normal!important}
  .menu-perfil{max-width:calc(100vw - 20px)!important}
  .nodo-boton{width:58px!important;height:58px!important;flex-basis:58px!important}
  .nodo-icono{width:27px!important;height:27px!important}
  .nodo-info{max-width:calc(100vw - 90px)!important}
  .s-actions{width:100%!important}
}

/* Never run decorative infinite motion on small devices. */
@media (max-width:700px){
  body::before,body::after,.contenedor::before,.contenedor::after{animation:none!important}
  .logo,.nodo-leccion.siguiente-leccion .nodo-boton,.nodo-leccion.siguiente-leccion .nodo-boton::before,.record.recording{animation:none!important}
}