/* ============================================================
   Responsive
   Escritorio ≥1081 · Tableta 621–980 · Móvil ≤620
   ============================================================ */
@media (min-width:621px){
  .pasos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pie-in{gap:18px}
}
@media (min-width:1081px){
  .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:620px){
  /* La hamburguesa cierra la fila. En escritorio ese empuje lo daba
     .nav-right con margin-left:auto, pero aquí .nav-right está oculto y la
     hamburguesa quedaba pegada al lockup, a 24px de él y lejos del borde.
     El mismo recurso sobre .burger la deja contra el padding del contenedor
     a cualquier ancho, y flex-shrink:0 protege el área táctil de 44px, que
     se comprimía a 34px cuando el lockup no cabía. El hueco mínimo baja a
     --e-2 porque los 24px de escritorio no dejaban sitio a 360px. */
  .topnav-in{gap:var(--e-2)}
  .burger{display:inline-flex;margin-left:auto;flex-shrink:0}
  .nav-links,.nav-right{display:none}
  .mobile-panel{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:890;
    background:var(--ink-950);border-top:1px solid var(--hairline);overflow-y:auto;padding-bottom:16px}
  .mobile-panel button{display:flex;width:100%;align-items:center;gap:12px;color:var(--txt-medio);
    padding:14px var(--container-pad);font-size:20px;font-weight:var(--p-medio);min-height:56px;text-align:left;
    border-bottom:1px solid var(--hairline)}
  .mobile-panel button:hover{color:#fff}
  .mobile-panel button[aria-current="page"]{color:#fff;box-shadow:inset 3px 0 0 var(--oro-400)}
  .mobile-panel .mp-user{display:flex;gap:12px;align-items:center;padding:16px var(--container-pad);
    border-bottom:1px solid var(--hairline);color:#fff}
  /* Acotado al bloque de texto: en su forma anterior, .mp-user span, también
     alcanzaba al <span class="avatar"> y le ganaba en especificidad, así que
     el círculo perdía su display:inline-flex y con él el centrado de la
     inicial, que caía arriba a la izquierda y en color atenuado. */
  .mobile-panel .mp-user .mp-user-txt span{display:block;font-size:var(--text-sm);color:var(--txt-suave)}
  .wb-pop-movil{position:static;transform:none;width:auto;margin:0 var(--container-pad) 4px;
    box-shadow:none;background:var(--ink-900)}
  .mobile-panel .mp-salir{margin-top:auto;border-bottom:0;border-top:1px solid var(--hairline);color:var(--txt-suave);font-size:var(--text-base)}
  .ring-wrap{display:none}
  .avance-barra{display:block}
  .table-wrap{display:none}
  .ucards{display:block}
  .cta-row .btn{flex:1 1 100%}
  .auth-body{padding:18px}
  .barra-rep .lbl{width:40%}
  /* piso de 13px también en los textos del lockup */
  .logo{gap:10px}
  .logo-marca{height:32px}
  /* Con la hamburguesa ya en el borde, por debajo de ~365px el lockup a 13px
     no cabe junto al botón y se le encimaba. El tope fluido lo cede solo
     donde falta sitio: a 375px o más sigue siendo 13px exactos. */
  .logo-txt{padding-left:0;border-left:0;font-size:min(13px,3.5vw)}
  .logo small{font-size:13px}
  .pie .logo-txt{font-size:13px}
}
/* Orden de Sesión en una sola columna (móvil y tableta): reproductor, título,
   tu calificación, descripción, siguiente sesión, comentarios, lista del bloque.
   Es el orden de la v2, justificado en su día y verificado aquí de nuevo. */
@media (max-width:1080px){
  .o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}
}
/* Alturas del marquee — al final para ganar el cascade a la regla base */
@media (max-width:1080px){ .retratos{height:420px} }
@media (max-width:620px){ .retratos{height:360px} }