/* =====================================================================
   Royal Dance 2.0 · CAPA MÓVIL (web)
   Se pone ENCIMA de royal20.css, sin tocarlo: las páginas de escritorio son
   las de siempre (mismas piezas, mismo orden, mismas clases) y esto solo las
   reordena a una columna y las pone a tamaño de dedo.
   Todo va dentro de (max-width:820px), el mismo corte que ya usa royal20.css.
   ===================================================================== */
@media (max-width:820px){

/* ---------- lo común ---------- */
html,body{overflow-x:clip}
.carril__flecha,.carril__flecha--atras{display:none!important}           /* en el móvil se desliza con el dedo */
.carril__pista{scroll-snap-type:x mandatory;scroll-padding-left:14px}
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.enlace{display:inline-flex;align-items:center;min-height:40px}
.sonido{width:40px!important;height:40px!important;display:grid!important;place-items:center}
/* lo que en escritorio sale al pasar el ratón, en el móvil está siempre */
.hs-quitar,.gb-toma__acciones{opacity:1!important}
.img.viendo video{opacity:1!important}

/* ---------- la barra de arriba de la zona: logo, buscar y la bolita ---------- */
.zn-plegar{display:none!important}                                         /* el menú va abajo, en pestañas */
.zn-barra{position:sticky;top:0;z-index:60;padding:0 8px 0 16px!important}
.zn-buscar{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;flex:none!important;margin-left:auto;padding:0!important;border:0!important;background:none!important;font-size:0!important;color:#fff}
/* (en flex: con grid, el texto escondido «Busca una clase…» ocupaba una fila y subía la lupa 9 px) */
.zn-buscar svg{width:22px;height:22px}
.zn-barra__der{margin-left:0!important}
/* el menú de la bolita: una hoja que sube desde abajo */
.zn-yo__menu{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-height:calc(100vh - 140px);overflow:auto;border-radius:16px 16px 0 0!important;z-index:120!important;transform:none!important}
.zn-yo.abierto::before{content:'';position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.55)}
/* el menú compacto en el móvil: tú en una fila y los accesos en filas cortas, para que «Cerrar sesión» se vea sin deslizar */
.zn-yo__menu.zn-cuenta{display:none;grid-template-columns:1fr!important}
.zn-yo.abierto .zn-yo__menu.zn-cuenta{display:block!important}
.zn-cuenta__yo{display:grid!important;grid-template-columns:52px 1fr;column-gap:14px;align-items:center;padding:18px 18px 16px!important;border-radius:16px 16px 0 0!important}
.zn-cuenta__foto{width:52px!important;height:52px!important;grid-row:span 2}
.zn-cuenta__yo b{margin-top:0!important}
.zn-cuenta__chapa{grid-column:1/-1;justify-self:start;margin-top:12px!important}
.zn-cuenta__cuando{grid-column:1/-1}
.zn-yo__menu a.zn-cuenta__enlace{grid-column:1/-1;justify-self:start}
.zn-cuenta__der{padding:12px!important}
.zn-cuenta__rejilla{gap:6px!important}
.zn-yo__menu .zn-cuenta__rejilla a{flex-direction:row!important;align-items:center;gap:10px!important;padding:10px!important;min-height:0}
.zn-cuenta__rejilla a small{display:none}
.zn-cuenta__rejilla svg{flex:none}
.zn-cuenta__pie a{min-height:44px;display:inline-flex;align-items:center}
/* «Cerrar sesión», bien visible: a todo el ancho y en rojo suave (la barra de abajo ya no lo tapa) */
.zn-cuenta__pie{flex-direction:column;gap:8px;padding-bottom:8px!important}
.zn-yo__menu .zn-cuenta__pie a.salir{justify-content:center;width:100%;min-height:48px;border:1px solid rgba(255,107,107,.45);border-radius:10px;color:#ff8a8a!important;font-weight:700}
.zn-yo__menu .zn-cuenta__pie a:not(.salir){justify-content:center;width:100%;color:#cfcfcf!important}

/* ---------- las pestañas de abajo (las pone movil20.js con los enlaces del menú) ---------- */
.rm-tabs{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;height:calc(64px + env(safe-area-inset-bottom,0px));padding:4px 4px env(safe-area-inset-bottom,0px);background:#000;border-top:1px solid rgba(255,255,255,.14)}
.rm-tabs a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;color:#8d8d92;font-size:10.5px;font-weight:600;text-decoration:none;cursor:pointer}
.rm-tabs a svg{width:22px;height:22px}
.rm-tabs a.on{color:#fff}
.rm-tabs a.on svg{color:#6fb1ff}
.rm-tabs a.on::before{content:'';position:absolute;top:-5px;left:30%;right:30%;height:2px;background:var(--azul)}
/* «Más»: el menú lateral de escritorio, tal cual, pero como hoja desde abajo */
.zn-menu{position:fixed!important;top:auto!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;max-height:80vh;overflow:auto;transform:translateY(105%)!important;border-radius:16px 16px 0 0;padding:12px 18px 84px!important;z-index:70!important;box-shadow:0 -20px 50px rgba(0,0,0,.5)!important}
.zn.abierto .zn-menu{transform:none!important}
.zn.abierto::after{content:'';position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.55)}
.zn-menu a{min-height:50px}
.zn-menu::before{content:'';display:block;width:40px;height:4px;margin:0 auto 10px;border-radius:2px;background:rgba(255,255,255,.3)}

/* ---------- INICIO ---------- */
.zn-contenido{padding:14px 14px 96px!important}
.zn-sigue{min-height:0!important;display:flex!important;flex-direction:column;border-radius:14px!important}
.zn-sigue__fondo{position:relative!important;width:100%!important;aspect-ratio:16/10}
.zn-sigue__fondo::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.4) 30%,transparent 60%)!important}
.zn-sigue__texto{position:relative!important;inset:auto!important;width:100%!important;margin-top:-58px;padding:0 18px 20px!important}
.zn-sigue__texto strong{font-size:25px!important}
.zn-sigue .acciones,.zn-sigue .acciones .btn{display:flex;width:100%}
.zn-cifras{grid-template-columns:repeat(4,minmax(0,1fr))!important;border-radius:10px!important}
.zn-cifras div{padding:12px 6px!important;text-align:center;border-top:0!important}
.zn-cifras div+div{border-left:1px solid var(--linea)!important}
.zn-cifras dt{font-size:19px!important}
.zn-cifras dd{font-size:7.5px!important;letter-spacing:.1em!important}
/* las cifras como franja oscura arriba de la primera tarjeta */
.zn-cifras.rm-en-tarjeta{order:-1;margin:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;background:#0b0b0c!important;color:#fff}
.zn-cifras.rm-en-tarjeta div+div{border-left:1px solid rgba(255,255,255,.12)!important}
.zn-cifras.rm-en-tarjeta dt{color:#fff}
.zn-cifras.rm-en-tarjeta dd{color:#9c9c9c!important}
/* curso en marcha + agendadas: una sola tarjeta */
.zn-lado.rm-junto{gap:0!important;border:1px solid var(--linea);border-radius:14px;background:var(--campo-fondo);overflow:hidden}
.zn-lado.rm-junto>.zn-caja{border:0!important;border-radius:0!important;background:none!important;padding:16px 16px 12px!important}
.zn-lado.rm-junto>.zn-caja .enlace{margin-top:10px}
.rm-agendadas{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border-top:1px solid var(--linea);color:inherit;text-decoration:none}
.rm-agendadas .rotulo{flex:none;margin:0}
.rm-agendadas b{flex:none;font-size:11px;font-weight:700;color:var(--azul);text-transform:uppercase;letter-spacing:.08em}
.rm-agendadas__t{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-agendadas em{flex:none;font-style:normal;font-size:11px;font-weight:700;color:var(--tenue)}
.rm-agendadas i{flex:none;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--azul)}
.zn-fila{margin-top:36px!important}
.zn-fila__cabeza h2{font-size:21px!important}
.zn-carril{margin:14px -14px 0!important;padding-left:14px!important}
.zn-carril .carril__pista{gap:12px!important;padding-right:14px!important}
/* tarjetas grandes: casi todo el ancho, y la siguiente asomando */
.zn-clase{flex:0 0 84%!important}
.zn-clase .img{border-radius:10px}
.zn-clase strong{font-size:15px}
.zn-curso{flex:0 0 74%!important}
.zn-serie{flex:0 0 66%!important}
.zn-curso--prota,.zn-carril--series .zn-serie--prota{flex:0 0 90%!important}
.zn-curso--prota .img,.zn-serie--prota .img{min-height:0!important;height:auto!important;aspect-ratio:4/5!important}
.zn-curso--prota .img::before{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 38%,transparent 62%)!important}
.zn-curso--prota .zn-curso__texto{left:18px!important;right:18px!important;bottom:18px!important}
.zn-curso--prota strong{font-size:24px!important}
.zn-curso--prota .btn{margin-top:14px}
.zn-quien a{min-height:40px;display:inline-flex;align-items:center}

/* ---------- BIBLIOTECA ---------- */
.zb-cabeza{gap:8px 18px!important}
.zb-cabeza h1{font-size:34px!important}
.zb-cabeza .cur-cabeza__dato{flex-wrap:wrap;row-gap:4px}
.zb-pestanas{margin:16px -14px 0!important;padding:0 14px;overflow-x:auto;scrollbar-width:none;gap:0!important}
.zb-pestanas::-webkit-scrollbar{display:none}
.zb-pestanas a{flex:none;padding:14px 12px!important;font-size:13px!important}
.zb-barra{position:sticky;top:60px;z-index:20;flex-wrap:wrap;margin:0 -14px!important;padding:10px 14px!important;background:var(--fondo);gap:8px!important}
.zb-barra .zb-buscar{flex:1 1 0!important;min-width:0}
.zb-barra .zb-buscar input{font-size:16px}                              /* 16 px: el iPhone no amplía al escribir */
.zb-barra .zb-abrir{display:inline-flex!important}
.zb-barra .zb-cuenta{order:3;margin:0 auto 0 0!important;font-size:12px}
.zb-barra .zb-cuenta b{font-size:16px!important}
.zb-barra .zb-select{order:4;height:40px!important}
.zb-rejilla,.zb-rejilla--cursos{grid-template-columns:minmax(0,1fr)!important;gap:30px!important;margin-top:16px!important}
.zb-rejilla--series,.zb-rejilla--profes{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 12px!important;margin-top:16px!important}
.zb-clase .img{border-radius:10px}
.zb-clase strong{font-size:16px!important}
/* el destacado (curso, serie, profesor): arriba el vídeo en marcha, debajo el texto */
.zb-destacado{position:relative;display:flex!important;flex-direction:column-reverse!important;min-height:0!important;height:auto!important;overflow:hidden;border-radius:14px!important;margin:0 0 6px}
.zb-destacado__video{position:relative!important;inset:auto!important;width:100%!important;aspect-ratio:4/5;height:auto!important}
.zb-destacado__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zb-destacado__texto{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;margin-top:-110px;padding:0 18px 22px!important;z-index:2}
.zb-destacado__texto p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.zb-destacado::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(0deg,#000 45%,transparent);pointer-events:none;z-index:1}
/* la ventana de filtros: una hoja desde abajo, a todo el ancho */
.zb-ventana{place-items:end stretch!important;padding:0!important}
.zb-ventana__caja{width:100%!important;max-height:88vh!important;border-radius:16px 16px 0 0!important}
.zb-ventana__cabeza{padding:18px 18px 12px!important}
.zb-ventana__cabeza h2{font-size:22px!important}
.zb-ventana__cerrar{width:44px!important;height:44px!important}
.zb-ventana__cuerpo{padding:0 18px 18px!important}
.zb-ventana__pie{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px))!important}
.zb-ventana__pie .btn{flex:1}
.zb-chips a{min-height:44px;display:inline-flex;align-items:center}
.zb-cartas{grid-template-columns:minmax(0,1fr)!important}
/* opción B: los estilos a la vista, en una tira que se desliza (la pone movil20.js) */
.rm-rapido{display:none}

/* ---------- FAVORITOS ---------- */
.fv-pestanas{margin:16px -14px 0!important;padding:0 14px}
.fv-sigue__cabeza{flex-wrap:wrap;gap:10px}
.fv-sigue__mando button{display:none}
.fv-sigue__ventana{margin-right:-14px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none}
.fv-sigue__ventana::-webkit-scrollbar{display:none}
.fv-sigue__pista{transform:none!important;gap:12px!important;padding-right:14px}
.fv-sigue__hoja{flex:0 0 90%!important;opacity:1!important;scroll-snap-align:start}
.mc-actual{grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding:18px!important;border-radius:14px!important}
.mc-actual__cartel{display:none!important}
.mc-actual__centro strong{font-size:22px!important}
.mc-temario{columns:1!important}
.mc-temario li:nth-child(n+5){display:none}
.fv-ahora{grid-template-columns:minmax(0,1fr)!important;border-radius:14px!important}
.fv-ahora__texto{padding:18px!important}
.fv-ahora strong{font-size:22px!important}
.mc-bloque .zn-carril .zb-curso,.fv-vista--todo .zb-curso{flex:0 0 74%!important}
.fv-vista--todo .zb-serie,.mc-bloque .zb-serie{flex:0 0 62%!important}
.fv-vista--todo .zn-clase,.mc-bloque .zn-clase{flex:0 0 84%!important}
.fv-rejilla,.fv-rejilla--cursos{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
.fv-rejilla--series{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px!important}
.mc-bloque{margin-top:36px!important}

/* ---------- HISTORIAL ---------- */
.hs-actividad{grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding:20px!important;border-radius:14px!important}
.hs-actividad strong{font-size:30px!important}
.hs-barras{height:70px!important;gap:3px!important}
.hs-barra em{display:none}
.hs-barra-filtros{flex-direction:column;align-items:stretch!important;gap:10px!important;margin-top:28px!important}
.hs-tipos{overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.hs-tipos a{flex:none;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.mc-filtro{margin:0!important;overflow-x:auto}
.mc-filtro a{min-height:40px;display:inline-flex;align-items:center}
.hs-dia{padding-left:16px!important}
.hs-dia__cabeza b{font-size:17px!important}
.hs-lista{border-radius:10px!important}
.hs-fila{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"img img" "texto texto" "visto acc";gap:10px 12px!important;padding:14px!important}
.hs-hora{display:none}
.hs-img{grid-area:img;border-radius:8px!important}
.hs-texto{grid-area:texto;min-width:0}
.hs-texto strong{font-size:15.5px!important}
.hs-visto{grid-area:visto;align-self:center}
.hs-acciones{grid-area:acc;justify-content:flex-end}
.hs-acciones .btn{min-height:44px;padding:0 16px!important}
.hs-quitar{width:44px!important;height:44px!important}

/* ---------- MIS GRABACIONES ---------- */
.gb-evolucion{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;padding:22px 18px!important;border-radius:14px!important}
.gb-evolucion::before{right:-260px!important}
.gb-evolucion strong{font-size:24px!important}
.gb-evolucion p{font-size:14px!important}
.gb-evolucion .acciones{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.gb-evolucion__par{justify-content:center;gap:10px!important;order:-1}
.gb-movilito{width:42%!important}
.gb-movilito--ahora,.gb-movilito--hueco{width:42%!important}
.gb-grabar-fila{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none}
.gb-grabar-fila::-webkit-scrollbar{display:none}
.gb-grabar{flex:0 0 84%!important;scroll-snap-align:start}
.gb-pestanas{margin:30px -14px 0!important;padding:0 14px}
.gb-grupo{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
.gb-grupo__tomas{flex-wrap:nowrap!important;overflow-x:auto;margin:0 -14px;padding:4px 14px 8px;scrollbar-width:none}
.gb-toma{flex:0 0 46%!important;width:auto!important}
.gb-toma__acciones button{width:44px!important;height:44px!important}
.gb-barra-comparar{left:10px!important;right:10px!important;bottom:76px!important;flex-wrap:wrap}

/* el comparador, a pantalla completa */
.gc{padding:0!important;z-index:150!important}
.gc__caja{width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important;display:flex!important;flex-direction:column}
.gc__cabeza{flex-wrap:wrap;gap:10px!important;padding:12px 14px!important}
.gc__cabeza>div{flex:1 1 60%;min-width:0}
.gc__cabeza strong{font-size:15px!important}
.gc__modos{order:3;flex-basis:100%;display:flex}
.gc__modos a{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.gc__cerrar{width:44px!important;height:44px!important}
.gc__escena{flex:1;min-height:0;padding:8px!important;overflow:hidden}
.gc__mando{flex-wrap:wrap;gap:10px!important;padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px))!important}
.gc__tiempo{order:-1;flex-basis:100%}
.gc__play{width:52px!important;height:52px!important}
.gc__velocidad a,.gc__espejo{min-height:44px;display:inline-flex;align-items:center}

/* ---------- MI CUENTA ---------- */
.cu input,.cu select{min-height:48px;font-size:16px!important}

/* ---------- LA CLASE (la página que queda debajo del reproductor) ---------- */
.cl-cola{margin:0!important;background:none!important;border:0!important;padding:0!important;max-height:none!important}
.cl-cola__cabeza{padding:0 14px}
.cl-cola__lista{display:flex!important;flex-direction:row!important;gap:10px;overflow-x:auto!important;max-height:none!important;padding:8px 14px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.cl-cola__lista::-webkit-scrollbar{display:none}
.cl-cola__fila{flex:0 0 74%!important;display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;gap:10px!important;padding:8px!important;border:1px solid rgba(255,255,255,.14);border-radius:10px;scroll-snap-align:start}
.cl-cola__fila>b{display:none}
.cl-cola__fila.on{border-color:var(--azul);background:rgba(11,121,251,.14)}
.cl-ficha h1{font-size:28px!important}
.cl-ficha .acciones .btn{width:100%}
.cl-valora__estrellas i{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
}
@media (max-width:820px){
.zb-barra .zb-buscar{flex:1 1 100%!important;height:46px!important}
.zb-barra .zb-abrir{order:2}
.zb-destacado .acciones,.zb-destacado__acciones{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.zb-destacado .acciones .btn{width:100%}
}
@media (max-width:820px){
.gb-grabar-fila{padding:0 14px 4px!important;margin:0 -14px!important;scroll-padding:0 14px}   /* sin el scroll-padding, el imán pegaba la primera tarjeta al borde 
}
@media (max-width:820px){
/* botones: altura de dedo sin convertirlos en flex (si no, se comen los espacios entre palabras) */
.btn{display:inline-block!important;min-height:0;padding-top:17px!important;padding-bottom:17px!important;line-height:1.1}
.gc__modos a{display:block!important;text-align:center;line-height:44px;min-height:44px}

/* comparador · lado a lado: las dos tomas enteras, una junto a otra */
.gc__escena{padding:10px 8px!important;place-items:stretch!important}
.gc[data-modo="lado"] .gc__lado{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;align-content:center;width:100%}
.gc__lado .gc-marco{width:100%!important;height:auto!important;aspect-ratio:9/16;border-radius:12px}
/* …y que quepan también de alto: a media pantalla de ancho eran más altas que el hueco y se metían bajo los mandos */
.gc[data-modo="lado"] .gc__lado{height:100%;grid-template-rows:minmax(0,1fr);grid-template-columns:repeat(2,auto)!important;justify-content:center;align-content:stretch!important}
.gc__lado .gc-marco{width:auto!important;height:100%!important;max-width:calc(50vw - 11px)}
/* comparador · con tu profe: tu toma grande y la clase en una ventanita encima, como cuando te grabas
   (elegido por el dueño el 2026-10-17; las reglas de la clase arriba quedan debajo como base) */
.gc[data-modo="profe"] .gc__escena{justify-content:flex-start!important}
.gc[data-modo="profe"] .gc__cual{margin-bottom:8px!important}
.gc[data-modo="profe"] .gc__profe{display:flex!important;flex-direction:column-reverse;align-items:center;gap:8px!important;width:100%;flex:1;min-height:0}
.gc__profe .gc-clase{flex:none!important;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:16/9}
.gc__profe .gc-marco{flex:1 1 0!important;min-height:0;height:auto!important;width:auto!important;aspect-ratio:9/16;max-width:100%}
.gc[data-modo="profe"] .gc__profe{position:relative;display:block!important}
.gc__profe .gc-marco{position:absolute!important;top:0;bottom:0;left:50%;transform:translateX(-50%);height:100%!important}
.gc__profe .gc-clase{position:absolute!important;z-index:3;right:6px;top:6px;width:52%!important;border:2px solid var(--azul)!important;box-shadow:0 10px 30px rgba(0,0,0,.6)}
}
@media (max-width:820px){
.gc__pie{flex-wrap:wrap;gap:8px!important;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))!important}
.gc__pie>span{flex-basis:100%}
.gc__pie .btn{flex:1 1 0;min-width:0;padding-left:10px!important;padding-right:10px!important;white-space:normal}
}
@media (max-width:820px){
/* ---------- LA CLASE: la página, a una columna sin desbordar ---------- */
.cl-ficha,.cl-vecinas,.cl-doble{padding-left:16px!important;padding-right:16px!important;grid-template-columns:minmax(0,1fr)!important;max-width:100vw}
.cl-ficha>*,.cl-lado,.cl-invita,.cl-amigo,.cl-valora{max-width:100%;min-width:0}
.cl-invita{grid-template-columns:84px minmax(0,1fr)!important}
.cl-invita .btn{width:100%;white-space:normal}
.cl-amigo__botones{flex-wrap:wrap;gap:6px}
.cl-cola__fila{align-items:center}
.cl-cola__fila .img{border-radius:6px}

/* ---------- WEB PÚBLICA: la portada ---------- */
.hrq-lienzo .hrl-texto,.hrl-texto{width:auto!important;right:0;padding:0 20px 28px!important;align-items:flex-end!important}
.hrl-texto .acciones{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.hrl-texto .acciones .btn{width:100%}
.hrl-fondo{width:100%!important}
.hr--lado .hrl-fondo::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.1) 75%)!important}
.hrl-turnos{display:none!important}
.metodo__cabeza{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
/* el catálogo de cursos: el destacado con el vídeo arriba y el texto debajo */
.cur-destacado{display:flex!important;flex-direction:column;min-height:0!important}
.cur-destacado__fondo{position:relative!important;inset:auto!important;width:100%!important;aspect-ratio:4/5;height:auto!important}
.cur-destacado__fondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cur-destacado__texto{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;margin-top:-120px;padding:0 20px 24px!important;z-index:2}
.cur-destacado__sub{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cur-rejilla{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:820px){
.cur-destacado .acciones{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
}
@media (max-width:820px){
.zb-cabeza .cur-cabeza__dato b{font-size:22px}
.zb-cabeza .cur-cabeza__dato i{margin:0 10px}
.zb-destacado__datos{flex-wrap:wrap;row-gap:4px}
.zb-destacado__datos b{white-space:nowrap}
}

/* Mensajería: la caja de responder queda pegada abajo, justo encima de las pestañas */
@media (max-width:820px){
.zn .ms-escribir{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.zn .ms{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* Portada en el móvil: el hero, solo lo esencial (título, una frase, el botón y una línea de confianza);
   la franja de abajo, solo los estilos y centrados (antes se salía de la pantalla) */
@media (max-width:820px){
.hrl-texto .rotulo{display:none}
.hrl-texto .garantia span:nth-child(3){display:none}
.hrl-texto .garantia{flex-wrap:nowrap;white-space:nowrap}
.hrq-firma{height:auto;justify-content:center;padding:14px 12px}
.hrq-firma span:first-child,.hrq-firma span:last-child{display:none}
.hrq-firma span:nth-child(2){text-align:center;letter-spacing:.16em;line-height:1.9;white-space:normal}
}

/* Portada en el móvil (2.º ajuste del dueño, 2026-10-17): el hero cabe siempre en la pantalla VISIBLE
   (svh: sin la parte que tapan las barras del navegador, que con vh quedaba debajo), con aire debajo de
   la línea de las estrellas; el sello V 2.0 más pequeño y el título un poco más grande */
@media (max-width:820px){
.hr--cuadro{height:calc(100vh - 60px);height:calc(100svh - 60px);min-height:540px}
.hrq-lienzo .hrl-texto,.hrl-texto{padding-bottom:40px!important}
/* el título en dos líneas, «BAILA COMO» y «NUNCA ANTES» (3.er ajuste del dueño): ocupa menos alto; el tamaño
   sale del ancho de la pantalla para que cada línea quepa entera */
/* «BAILA COMO» y «NUNCA ANTES», del mismo ancho y llenando el hueco (5.º ajuste del dueño). Medido en el
   navegador con la Sequel: NUNCA ANTES = 9,194 em y BAILA COMO = 8,177 em; la primera línea va 9,194/8,177 = 1,124
   veces más grande. Ancho útil: la pantalla menos 2 × 12 (marco) y 2 × 14 (texto), con un 2 % de holgura. */
.hrl-texto h1{max-width:none!important;white-space:nowrap;letter-spacing:-.02em!important;line-height:.94!important;font-size:calc((100vw - 52px) * .98 / 9.194)!important}
.hrl-texto h1 span:nth-child(-n+2){font-size:1.124em}
/* más sitio a los lados para que el título crezca (4.º ajuste del dueño) */
.hr--cuadro{padding-left:12px!important;padding-right:12px!important}
.hrq-lienzo .hrl-texto,.hrl-texto{padding-left:14px!important;padding-right:14px!important}
/* sin «Mira las herramientas»; el botón, a lo ancho y centrado; las estrellas, abajo del todo */
.hrl-texto .acciones .enlace{display:none!important}
.hrl-texto>div{width:100%;min-width:0}
.hrl-texto .acciones .btn{display:block!important;width:100%;margin:0;text-align:center}
.hrq-lienzo .hrl-texto,.hrl-texto{padding-bottom:18px!important}
.hrl-texto .garantia{margin-top:22px}
.hrl-texto h1 span{display:inline!important}
.hrl-texto h1 span:nth-child(odd)::after{content:" "}
.hrl-texto h1 span:nth-child(2)::after{content:"\A";white-space:pre}
.hrm-sello{width:88px!important;height:88px!important;right:16px!important;top:16px!important}
.hrm-sello b{font-size:21px!important}
.hrm-sello i{max-width:66px!important;margin-top:4px!important;font-size:6.5px!important;letter-spacing:.12em!important}
}

/* las tres cifras del hero en el móvil: tres columnas iguales */
@media (max-width:820px){
.hr-cifras{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 20px}
.hr-cifras li{padding:0 0 0 14px}
.hr-cifras li:first-child{padding-left:0}
.hr-cifras b{font-size:28px}
.hr-cifras span{font-size:9.5px;letter-spacing:.18em}
}

/* El título del hero, estirado hacia abajo un 18 % (6.º ajuste del dueño: «aunque deforme un pelín la letra,
   queda más compensado»). El estirado no ocupa sitio por sí solo: el margen de abajo le hace el hueco
   (2 líneas × 0,94 de interlínea × 18 % ≈ 0,34 em) para que no pise las cifras. */
@media (max-width:820px){
.hrl-texto h1{transform:scaleY(1.18);transform-origin:left top;margin-bottom:.62em!important}
}
@media (max-width:820px){
.hr-cifras li,.hr-cifras li:first-child{padding:0 6px}
}

/* Portada · 01 El método: los niveles en el móvil, en un carril que se desliza de lado (petición del dueño):
   cada nivel casi a todo el ancho, con su vídeo y su texto enteros, y asomando el siguiente para que se sepa
   que hay más. Se enciende el que queda delante (lo hace movil20.js). */
@media (max-width:820px){
.escalera{height:auto;gap:12px;margin:28px -18px 0;padding:0 18px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.escalera::-webkit-scrollbar{display:none}
.peldano,.peldano.on{flex:0 0 84%!important;height:min(118vw,520px);scroll-snap-align:start}
.peldano strong,.peldano.on strong{font-size:28px;white-space:normal}
.peldano em,.peldano.on em{font-size:16px;color:#fff}
.peldano__mas,.peldano.on .peldano__mas{max-height:none;opacity:1;margin-top:8px;font-size:14.5px}
}

/* Portada · 01 El método: las tres cifras en una fila de tres columnas, más pequeñas (petición del dueño:
   «me gusta lo que dice, pero es muy grande todo»), como las del hero: el número arriba y el texto debajo */
@media (max-width:820px){
.metodo__cifras{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0;margin:22px 0 0;padding:14px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.metodo__cifras>div{padding:0 8px!important;border:0!important;border-left:1px solid var(--linea)!important;text-align:center}
.metodo__cifras>div:first-child{border-left:0!important}
.metodo__cifras dt{font-size:24px!important;line-height:1;white-space:nowrap}
.metodo__cifras dt small{display:block;margin-top:3px;font-size:10px!important;font-weight:700;color:var(--azul)}
.metodo__cifras dd{margin:7px 0 0!important;font-size:8.5px!important;line-height:1.45;letter-spacing:.14em!important}
}
/* … y en el móvil, debajo de los vídeos de los niveles (se entiende más claro después de verlos) */
@media (max-width:820px){
.metodo.camino{display:flex;flex-direction:column}
.metodo.camino .metodo__cifras{order:5;margin-top:26px!important}
}
/* El carril de los niveles solo se mueve de lado: su contenido se pasaba 26 px de alto y el carril se podía
   desplazar también en vertical, así que deslizar el dedo hacia abajo sobre un vídeo movía el carril en vez de
   bajar la página. Ahora el gesto vertical es siempre de la página. */
@media (max-width:820px){
.escalera{height:auto!important;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
}

/* Portada · 02 Las herramientas en el móvil (petición del dueño: «vídeo arriba y abajo las herramientas»):
   el título, el reproductor a lo ancho, debajo los botones de las herramientas y, bajo ellos, lo que hace la
   que se está enseñando. Sin el recorrido «pegado» del ordenador (la sección medía varias pantallas). */
@media (max-width:820px){
.taller{height:auto!important}
.taller__fijo{position:static!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column;gap:0!important;padding:56px 16px 48px!important;overflow:visible!important}
.taller__texto{display:contents!important}
.taller__texto>.indice{order:1}
.taller__texto>h2{order:2;margin-bottom:22px;font-size:30px}
.taller__pantalla{order:3;width:100%}
.taller__marco{aspect-ratio:844/390!important;width:100%}
.taller__nota{margin-top:8px;font-size:12px;color:#9c9c9c}
.taller__carril{order:4;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;margin-top:18px;padding:0;border:0}
.taller__carril li{min-height:56px;padding:8px 2px!important;font-size:9.5px!important}
.taller__carril li span{white-space:normal;line-height:1.2}
.taller__pasos{order:5;height:auto!important;min-height:0!important;margin-top:22px!important}
.taller__pasos article{position:static!important;display:none;transform:none!important}
.taller__pasos article.on{display:block;opacity:1}
.taller__pasos h3{margin-top:12px!important;font-size:24px!important;max-width:none!important}
.taller__pasos article>p:last-child{margin-top:10px!important;font-size:15px!important}
}
@media (max-width:820px){
.taller__pasos,.taller__pasos article{padding-left:0!important;padding-right:0!important;margin-left:0!important}
}
@media (max-width:820px){
.taller__fijo{align-items:stretch!important}
}
/* el reproductor, con su reparto de móvil, ocupa el marco vertical entero */
@media (max-width:820px){
.taller__marco .taller__real{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important}
.taller__marco .taller__real>.rd-reproductor{height:100%}
}

/* la ventanita (iframe) del reproductor: del tamaño de un móvil tumbado, encogida al ancho por taller.js */
@media (max-width:820px){
.taller__marco .taller__real{overflow:hidden}
.taller__ventana{position:absolute;left:0;top:0;width:844px;height:390px;border:0;transform-origin:0 0;background:#000}
}
/* «Grabarme» y «Bailar» escenificados: solo cuando la demostración los usa (si no, tapaban el vídeo) */
@media (max-width:820px){
.taller__marco:not([data-escena]) .escena__boton{display:none!important}
}
/* Las escenas de la demostración (tu cámara, grábate, baila con tu amigo) se pintan al tamaño del móvil tumbado
   (844 × 390, como el reproductor de la ventanita) y se encogen con el mismo factor (--k, lo pone taller.js): así cada
   cosa queda en su sitio y a su escala, con «● Grabarme» y «Bailar» en la cabecera, como en el reproductor de verdad */
@media (max-width:820px){
.taller__marco .escena{position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:844px!important;height:390px!important;transform:scale(var(--k,1))!important;transform-origin:0 0!important}
}

/* Portada · las herramientas en el móvil (petición del dueño): los iconos en UNA línea que se desliza de lado (la que
   se enseña se centra sola, lo hace taller.js) y la explicación más arriba, pegada a ellos y con el número pequeño */
@media (max-width:820px){
.taller__carril{display:flex!important;grid-template-columns:none!important;gap:6px!important;margin:14px -16px 0!important;padding:0 16px 2px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.taller__carril::-webkit-scrollbar{display:none}
.taller__carril li{flex:0 0 88px;scroll-snap-align:center}
.taller__pasos{margin-top:14px!important}
.taller__num b{font-size:30px!important}
.taller__pasos h3{margin-top:6px!important;font-size:22px!important}
.taller__pasos article>p:last-child{margin-top:8px!important}
}
@media (max-width:820px){
.taller__carril{flex-wrap:nowrap!important;justify-content:flex-start!important}
}
/* el carril de iconos recorta lo que sobresale (solo se mueve de lado): aire por arriba y por abajo para que la
   herramienta marcada, que se levanta, y su puntito de «nuevo» no se corten */
@media (max-width:820px){
.taller__carril{padding-top:10px!important;padding-bottom:8px!important;margin-top:6px!important}
}

/* Portada · 03 Planes en el móvil (petición del dueño): «Plan de 0 a experto» arriba, a todo el ancho, y debajo los
   otros planes, cada uno también a todo el ancho; cada cosa a tamaño de móvil (antes iban lado a lado y se salían) */
@media (max-width:820px){
.precios .cabecera-fila{display:block}
.precios .cabecera-fila h2{font-size:34px}
.precios .cabecera-fila .rotulo{display:block;margin-top:10px}
.pr--b{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
.pr-prota{padding:26px 20px!important}
.pr-prota h3{font-size:32px!important}
.pr-prota__frase{font-size:15px}
.pr-prota .pr-periodo,.pr-periodo{width:100%!important;max-width:none}
.pr-periodo a{padding:12px 6px!important;white-space:normal!important;font-size:13px}
.pr-periodo a small{font-size:9px;line-height:1.3}
.pr-prota .precio b{font-size:58px!important}
.pr-prota .btn{display:block!important;width:100%;text-align:center}
.pr-prota__incluye .lista-rayas{grid-template-columns:minmax(0,1fr)!important}
.pr-lados{gap:16px}
.pr-lado{padding:24px 20px!important}
.pr-lado__cabeza{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pr-lado__precio b{font-size:40px!important}
.pr-lado .btn{display:block!important;width:100%;text-align:center}
.pr-suelto{display:flex;flex-direction:column;gap:12px}
}
@media (max-width:820px){
.pr-lado--oferta{padding-top:46px!important}
}
/* «Qué incluye» del plan, más compacto en el móvil (petición del dueño) */
@media (max-width:820px){
.pr-prota__incluye{margin-top:22px!important;padding-top:16px!important}
.pr-prota__incluye .lista-rayas{margin-top:4px!important}
.pr-prota .pr-prota__incluye .lista-rayas li{padding-top:7px!important;padding-bottom:7px!important;font-size:13.5px!important;line-height:1.35}
.pr-prota .pr-prota__incluye .lista-rayas li::before{top:15px!important}
}
/* «Qué incluye» plegado en el móvil: el título hace de botón (con su flecha) y la lista sale al tocarlo (movil20.js) */
@media (max-width:820px){
.pr-prota__incluye>.rotulo{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0;cursor:pointer}
.pr-prota__incluye>.rotulo::after{content:'';width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.pr-prota__incluye:not(.plegado)>.rotulo::after{transform:rotate(-135deg) translateY(-3px)}
.pr-prota__incluye.plegado .lista-rayas{display:none!important}
}
@media (max-width:820px){
.pr-incluye-lado{margin:14px 0 16px!important;padding-top:6px!important;border-top:1px solid var(--linea)}
}
/* el precio del plan, siempre en una línea con su «€» (en un móvil normal el «€» saltaba abajo): no se parte nunca y
   su tamaño sale del ancho de la pantalla */
@media (max-width:820px){
.pr-prota .precio b{white-space:nowrap;font-size:min(58px,calc((100vw - 96px) / 5.2))!important}
}
/* «Pruébanos»: la cinta de «Súper oferta» va en la esquina de arriba a la derecha y en un móvil estrecho pisaba el
   título; el título va arriba a la izquierda, con hueco para la cinta, y el precio debajo */
@media (max-width:820px){
.pr-lado--oferta{padding-top:24px!important}
.pr-lado--oferta .pr-lado__cabeza{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
.pr-lado--oferta .pr-lado__cabeza>div{order:1;padding-right:92px}
.pr-lado--oferta .pr-lado__precio{order:2}
}
/* Los dos planes pequeños, como el de 0 a experto (petición del dueño): «Para probar» / «Para empezar» arriba, el
   nombre grande como título y el precio debajo; y el botón con su margen para que el borde no lo recorte */
@media (max-width:820px){
.pr-lado .pr-lado__cabeza{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:12px!important}
.pr-lado .pr-lado__cabeza>div{order:1}
.pr-lado .pr-lado__precio{order:2;text-align:left!important;margin:0!important}
.pr-lado h4{margin-top:8px!important;font-size:30px!important;line-height:.95}
.pr-lado .pr-lado__precio b{font-size:44px!important}
.pr-lado{padding-bottom:26px!important}
.pr-lado .btn{margin-top:4px}
}

/* Portada · 04 Profesores en el móvil (petición del dueño): el título en dos líneas, «Conoce a los 21» una sola vez
   (abajo), y las tarjetas grandes con toda su información, casi a todo el ancho y asomando la siguiente para deslizar
   de lado; la sección cabe en una pantalla */
@media (max-width:820px){
.profes .cabecera-fila{display:block}
.profes .cabecera-fila h2{font-size:28px;line-height:1}
.profes .cabecera-fila .enlace{display:none}
.profes .desc{margin-top:10px;font-size:14px}
.profes .pf-pasarela{margin:18px -18px 0}
.profes .pf-pista{gap:12px;margin:0!important;padding:0 18px!important;scroll-padding:0 18px;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.profes .pf-pista .pf-cartel{flex:0 0 84%!important;aspect-ratio:auto!important;height:min(calc(100svh - 400px),128vw);min-height:400px}
.profes .pf-flecha{display:none!important}
.profes .pf-cartel__texto{left:16px;right:16px;bottom:16px}
.profes .pf-cartel strong{font-size:24px!important}
.profes .pf-desc{font-size:13px!important;line-height:1.45!important}
/* como en el ordenador al pasar el ratón: la tarjeta enseña la foto y el nombre, y al tocarla sube quién es y su texto */
.profes .pf-cartel.abierto .pf-desc{max-height:none!important;opacity:1!important;transform:none!important;margin-top:10px!important}
.profes .pf-desc i{display:none}
.profes .pf-suyo{margin-top:10px}
.profes .pf-suyo em{margin:8px 0 2px}
.profes .pf-suyo>span{padding:6px 0;font-size:12px}
.profes .pf-cartel.abierto::before{background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,0) 72%)}
.profes .pf-resto{margin-top:16px;padding-top:14px}
}
/* los botones de los planes: el texto centrado de verdad (antes dependía de los rellenos y quedaba descolocado) */
@media (max-width:820px){
.precios .btn{display:flex!important;align-items:center;justify-content:center;min-height:52px;padding:0 14px!important;line-height:1.2;text-align:center}
}

/* Portada · profesores, las fotos de abajo en el móvil (petición del dueño): en una fila que se desliza de lado, cada
   una en un cuadrado de 64 px con su nombre debajo (antes se repartían el ancho entre 21 y no se veía quién era), y
   «Conoce a los 21» en su línea */
@media (max-width:820px){
.profes .pf-resto{display:block}
.profes .pf-minis{display:flex;gap:10px!important;margin:0 -18px;padding:4px 18px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.profes .pf-minis::-webkit-scrollbar{display:none}
.profes .pf-minis a{flex:0 0 64px!important;max-width:none!important;height:auto!important;aspect-ratio:auto!important;overflow:visible!important;background:none!important;border-radius:0!important;opacity:.6!important;transform:none!important;box-shadow:none!important}
.profes .pf-minis a.on{opacity:1!important}
.profes .pf-minis img{display:block;width:64px!important;height:64px!important;border-radius:8px;background:var(--foto)}
.profes .pf-minis a.on img{box-shadow:0 0 0 2px var(--azul)}
.profes .pf-minis a::before{content:attr(title);display:block;margin-top:6px;font-size:10px;font-weight:600;line-height:1.2;text-align:center;color:var(--texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profes .pf-minis a.con-titulo::after{right:4px;top:3px}
.profes .pf-minis a{position:relative;display:flex!important;flex-direction:column-reverse}
.profes .pf-resto>.enlace{display:inline-block;margin-top:14px}
}

/* Profesores · la tarjeta abierta en el móvil: la información ocupa la tarjeta entera, sobre la foto oscurecida. Si
   cabe, queda abajo como siempre; si no (mucho texto o muchas cosas «En la plataforma»), se desplaza hacia abajo dentro
   de la tarjeta, sin que el nombre se salga por arriba. (El «margin-top:auto» del primer hijo la deja abajo cuando cabe
   y, a diferencia de «justify-content:flex-end», no impide desplazarla cuando no cabe.) */
@media (max-width:820px){
/* abierta: como al pasar el ratón en el ordenador, oscuro desde abajo hasta la etiqueta (--hasta, lo mide movil20.js)
   y desvaneciéndose por encima, para que se siga viendo la foto */
.profes .pf-cartel.abierto::before{background:linear-gradient(to top,rgba(0,0,0,.94) 0,rgba(0,0,0,.88) var(--hasta,60%),rgba(0,0,0,0) calc(var(--hasta,60%) + 90px))!important}
.profes .pf-cartel.abierto .pf-cartel__texto{top:16px;bottom:16px;display:flex;flex-direction:column;overflow:visible}
/* sin desplazamiento dentro de la tarjeta (se peleaba con deslizar de lado): lo que hay cabe siempre; la presentación,
   recortada a 4 líneas, y «En la plataforma» enseña 3 cosas y «y N más» */
.profes .pf-bio{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.profes .pf-cartel.abierto .pf-cartel__texto::-webkit-scrollbar{display:none}
.profes .pf-cartel.abierto .pf-cartel__texto>:first-child{margin-top:auto}
.profes .pf-cartel.abierto .pf-cartel__texto>*{flex:none}
}
/* sin el recuadro negro que el ordenador pone detrás del texto al abrir: en el móvil basta el degradado de la tarjeta */
@media (max-width:820px){
.profes .pf-cartel__texto::before{display:none!important}
}
/* el texto de la tarjeta aparece con un fundido, sin el empujón de 18 px del ordenador: así lo que se mide para que
   todo quepa (movil20.js, «cabe») es lo que se ve */
@media (max-width:820px){
.profes .pf-desc{transform:none!important}
}
/* Profesores en el móvil:
   - el borde de color de la tarjeta abierta (azul salsa, rosa bachata): el carril, que se desliza de lado, recortaba
     también arriba y abajo; se le da hueco, y el borde sale también al abrirla con el dedo (no solo con el ratón)
   - las fotos de abajo: cada hueco mide lo mismo que la foto (el nombre largo lo ensanchaba y la estrella caía fuera
     de la foto); el nombre va en dos líneas si hace falta */
@media (max-width:820px){
.profes .pf-pista{padding-top:20px!important;padding-bottom:20px!important;margin-top:-20px!important;margin-bottom:-20px!important}
.profes .pf-cartel.abierto:has(.pf-titulo--salsa){box-shadow:0 0 0 2px rgb(11,121,251),0 0 30px rgba(11,121,251,.45)}
.profes .pf-cartel.abierto:has(.pf-titulo--bachata){box-shadow:0 0 0 2px rgb(233,30,128),0 0 30px rgba(233,30,128,.45)}
.profes .pf-minis a{flex:0 0 64px!important;width:64px!important;min-width:0!important}
.profes .pf-minis a::before{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15!important}
.profes .pf-minis a.con-titulo::after{top:4px!important;right:5px!important;bottom:auto!important}
}

/* Portada · 05 Lo que hay dentro, en el móvil (petición del dueño, rehecha):
   - la cabecera: el título, y debajo «+440» grande con «clases en total» debajo
   - las tres opciones en tres columnas, solo con el nombre y su número debajo
   - la explicación: la animación arriba y su texto debajo
   - los filtros, cada uno en una línea que se desliza de lado (sin los rótulos «Estilo» / «Nivel» ocupando sitio)
   - el destacado de cada pestaña (curso, serie y la primera clase suelta) casi a todo el ancho; el resto, al 74 % */
@media (max-width:820px){
.dentro__cabeza{display:block!important}
.dentro__cabeza h2{font-size:28px!important;line-height:1}
.dentro__cabeza .cifras{display:block!important;margin-top:16px!important;border:0!important}
.dentro__cabeza .cifras div{padding:0!important;border:0!important}
.dentro__cabeza .cifras dt{font-size:48px!important}
.dentro__cabeza .cifras dd{margin-top:6px!important}
.dentro__tipo{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:22px!important}
.dentro__tipo a{display:flex!important;flex-direction:column-reverse;align-items:center;justify-content:center;gap:6px!important;padding:14px 4px!important;text-align:center}
.dentro__tipo a+a{border-left:1px solid var(--linea)!important;border-top:0!important}
.dentro__tipo span{font-size:0!important;line-height:0}
.dentro__tipo strong{margin:0!important;font-size:12.5px!important;line-height:1.1!important}
.dentro__tipo b{font-size:30px!important}
.dentro__explica article.on{display:flex!important;flex-direction:column;align-items:flex-start;gap:16px!important}
.dentro__explica .ex-dibujo{transform:scale(.85);transform-origin:left center}
.dentro__explica h3{font-size:20px!important}
.dentro__explica p{font-size:14px!important}
.dentro__filtros{margin-top:18px!important;padding-top:6px}
.dentro__filtro{display:block!important;margin:0!important;padding:8px 0 0!important;border:0!important}
.dentro__filtro>.rotulo{display:none!important}
.dentro__filtro .opciones{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;margin:0 -18px!important;padding:0 18px 2px!important;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.dentro__filtro .opciones::-webkit-scrollbar{display:none}
.dentro__filtro .opciones a{flex:none;display:inline-flex!important;align-items:center;gap:6px;min-height:38px;margin:0!important;padding:0 14px!important;border:1px solid var(--linea)!important;border-radius:999px;white-space:nowrap;font-size:13px}
.dentro__filtro .opciones a.on{background:#fff;color:#000;border-color:#fff!important}
.dentro__filtro .opciones a::after{display:none!important}
.dentro .carril{margin:18px -18px 0!important}
.dentro .carril__pista{gap:12px!important;padding:0 18px!important;scroll-padding:0 18px}
.dentro .carril__pista .cartel{flex:0 0 74%!important;width:auto!important;min-width:0!important}
.dentro .carril__pista .cartel--prota,.dentro .carril__pista .cartel--serie-prota,.dentro .carril__pista .cartel--serie+.cartel--suelta{flex:0 0 90%!important}
.dentro__pie{flex-wrap:wrap}
}
@media (max-width:820px){
.dentro__cabeza .cifras div{display:block!important}
.dentro__cabeza .cifras dd{display:block!important;margin-left:0!important}
.dentro .carril{padding:0!important}
.dentro .carril__pista{margin:0!important;padding-left:18px!important;padding-right:18px!important}
}
/* «Lo que hay dentro» en el móvil: fuera la descripción de los destacados («¡Bienvenidos al curso…»); se lee dentro
   del curso o la serie. Queda el destacado, el nivel, el título y el profe con sus clases */
@media (max-width:820px){
.dentro .cartel__frase{display:none!important}
}
/* «Lo que hay dentro» · los filtros en el móvil: dos selectores lado a lado («Estilo» y «Nivel») en vez de las filas
   de botones (no cabían y no quedaban bien); cada uno abre el selector propio del móvil (movil20.js) */
@media (max-width:820px){
.dentro__filtros .dentro__filtro{display:none!important}
.rm-selectores{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rm-selector{position:relative;display:block;padding:8px 0 0;border-bottom:1px solid rgba(255,255,255,.35);cursor:pointer}
.rm-selector small{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}
.rm-selector select{display:block;width:100%;min-height:42px;padding:0 24px 0 0;border:0;background:none;color:#fff;font:600 15px/1.2 Poppins,sans-serif;-webkit-appearance:none;appearance:none;cursor:pointer}
.rm-selector select option{color:#000}
.rm-selector::after{content:'';position:absolute;right:4px;bottom:17px;width:8px;height:8px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);pointer-events:none}
}
@media (max-width:820px){
.dentro__filtros{display:block!important}
.rm-selectores{width:100%;gap:18px}
}

/* Portada · 06 Reseñas en el móvil (petición del dueño: «sale todo descuadrado»): el título arriba en dos líneas; el
   cuadro de la nota debajo, a todo el ancho (el 5/5 a la izquierda; estrellas, reseñas y Google Play a la derecha); y
   las opiniones, que siguen moviéndose solas, del ancho del móvil */
@media (max-width:820px){
.rs-cabeza{display:block!important;margin-bottom:22px!important}
.rs-cabeza h2{max-width:none!important;font-size:28px!important;line-height:1}
.rs-nota--grande{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px!important;margin-top:20px;padding:18px!important}
.rs-nota--grande b{font-size:72px!important;line-height:.85!important;white-space:nowrap}
.rs-nota--grande b small{font-size:20px!important}
.rs-nota--grande i{font-size:18px!important;letter-spacing:3px!important}
.rs-nota--grande strong{margin-top:6px!important;font-size:14px!important}
.rs-nota--grande img{width:130px!important;margin:10px 0 0!important}
.rs-cinta{margin:0 -18px!important}
.rs-cinta .rs-cita{flex:0 0 min(78vw,320px)!important}
.rs-cinta+.rs-cinta{margin-top:12px!important}
}
/* las fotos de los profesores, todas a la misma altura: el hueco va de arriba abajo (la foto arriba, su estrella en la
   esquina y el nombre debajo); antes iba de abajo arriba y los nombres de dos líneas bajaban unas fotos y no otras */
@media (max-width:820px){
.profes .pf-minis{align-items:flex-start!important}
.profes .pf-minis a{flex-direction:column!important;justify-content:flex-start!important}
.profes .pf-minis a::before{order:2}
}

/* Portada · 07 Dispositivos en el móvil: el título arriba, los aparatos a todo el ancho y después el texto, la lista
   y el botón (antes el texto iba en una columna estrecha y los aparatos no cabían) */
@media (max-width:820px){
.aparatos{display:flex!important;flex-direction:column;gap:0!important}
.aparatos__texto{display:contents!important}
.aparatos__texto>.indice{order:1}
.aparatos__texto>h2{order:2;font-size:30px!important;line-height:1}
.aparatos__escena{order:3;width:100%;margin:34px 0 10px}
.aparatos__texto>.desc{order:4;font-size:15px}
.aparatos__lista{order:5;margin-top:18px!important}
.aparatos__texto>.acciones{order:6}
.aparatos__texto>.acciones .btn{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px}
}

/* Portada · 08 Preguntas en el móvil: el título en dos líneas, los temas en tres pestañas en una línea, las
   preguntas a todo el ancho y «¿No está tu duda?» al final */
@media (max-width:820px){
.faq{display:flex!important;flex-direction:column;gap:0!important}
.faq__lado{display:contents!important}
.faq__lado>.indice{order:1}
.faq__lado>h2{order:2;font-size:28px!important;line-height:1}
.faq__temas{order:3;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px!important;border:1px solid var(--linea)!important;border-radius:var(--grande);overflow:hidden}
.faq__temas a{flex-direction:column;align-items:center;justify-content:center;gap:4px!important;padding:12px 4px!important;border:0!important;border-left:1px solid var(--linea)!important;text-align:center;font-size:12px!important;line-height:1.2}
.faq__temas a:first-child{border-left:0!important}
.faq__temas a.on{box-shadow:inset 0 3px 0 var(--azul)}
.faq__lista{order:4;width:100%;margin-top:18px}
.faq summary{grid-template-columns:30px minmax(0,1fr) 28px!important;gap:8px!important;padding:16px 12px!important;font-size:15.5px!important;line-height:1.3}
.faq summary b{font-size:13px!important}
.faq details>p{padding:0 14px 18px 50px!important;font-size:14.5px!important;line-height:1.55}
.faq__ayuda{order:5;margin-top:26px!important}
}
@media (max-width:820px){
.aparatos,.faq{align-items:stretch!important}
.aparatos__texto>.indice{align-self:flex-start}
.aparatos__lista{width:100%;padding:0!important}
.aparatos__lista li{padding-left:0!important;padding-right:0!important}
.faq__temas{width:100%}
}

/* Portada · la barra de abajo «Tu primera clase, hoy, por 0,99 €» (petición del dueño): sale al pasar el hero y se va
   al llegar al cierre azul (movil20.js pone .visible) */
@media (max-width:820px){
.barra-empieza{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(8,8,10,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.45);color:#fff;text-decoration:none;transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s;pointer-events:none}
.barra-empieza.visible{transform:none;opacity:1;pointer-events:auto}
.barra-empieza span{font-size:13.5px;font-weight:600;line-height:1.25}
.barra-empieza b{display:block;font-family:var(--titular);font-weight:700;font-size:17px;color:#8fc3ff}
.barra-empieza em{flex:none;display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:9px;background:var(--azul);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 22px rgba(11,121,251,.5)}
}

/* Portada · el cierre (la llamada final) en el móvil: el rótulo, el título grande en pocas líneas, las estrellas y el
   botón a todo el ancho, en vez de todo apilado en una columna estrecha junto al botón */
@media (max-width:820px){
.cierre--final{display:flex!important;flex-direction:column;align-items:stretch!important;gap:22px!important;padding:40px 22px!important}
.cierre--final>div{width:100%}
.cierre--final h2{max-width:none!important;margin-top:10px;font-size:34px!important;line-height:.98}
.cierre--final .garantia{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px}
.cierre--final .btn{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:54px;margin:0!important}
}

/* El pie de la web en el móvil: el logo con su frase, los tres grupos de enlaces en tres columnas y el © abajo */
@media (max-width:820px){
.pie-web{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 14px!important;padding:40px 18px calc(28px + env(safe-area-inset-bottom,0px))!important}
.pie-web>div:first-child{grid-column:1 / -1}
.pie-web>div:first-child p{max-width:34ch;margin-top:12px;font-size:13.5px;line-height:1.5}
.pie-web>div:not(:first-child){display:flex;flex-direction:column;gap:2px;min-width:0}
.pie-web>div:not(:first-child) .rotulo{margin-bottom:6px;font-size:9.5px}
.pie-web>div:not(:first-child) a{display:block;padding:6px 0;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.pie-web__fin{grid-column:1 / -1;margin:0!important;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px}
}
@media (max-width:820px){
.pie-web__fin{flex-direction:column;align-items:flex-start;gap:12px!important}
}
/* el cierre azul en el móvil ocupa la pantalla entera, de borde a borde (no un cuadro con márgenes) */
@media (max-width:820px){
.cierre--final{margin:0!important;border-radius:0!important;min-height:calc(100svh - 60px);justify-content:center;padding:48px 22px!important}
.cierre--final h2{font-size:40px!important}
}
/* el cierre: sin el alto de pantalla (sobraba azul arriba y abajo); a todo el ancho, con márgenes justos */
@media (max-width:820px){
.cierre--final{min-height:0!important;padding:34px 18px!important;gap:18px!important}
.cierre--final h2{margin-top:6px!important}
.cierre--final .garantia{margin-top:12px!important}
}
/* el final del pie en el móvil, centrado: el © y debajo «Made with ♥ por Royal Lab» */
@media (max-width:820px){
.pie-web__fin{align-items:center!important;text-align:center}
}
/* el pie en el móvil: arriba solo el logo de Royal Dance, centrado (sin la frase de debajo) */
@media (max-width:820px){
.pie-web>div:first-child{display:flex;justify-content:center}
.pie-web>div:first-child p{display:none!important}
.pie-web>div:first-child .nav__logo{font-size:24px}
}
@media (max-width:820px){
.nav__logo img{height:30px}
.pie-web>div:first-child{flex-direction:column;align-items:center}
.pie-web .nav__logo img{height:48px}
.pie-web__fin{justify-content:center}
}

/* Los selectores «Estilo / Nivel» toman el color del fondo en el que van (claro en Cursos, oscuro en la portada) */
@media (max-width:820px){
.rm-selector{border-bottom-color:var(--borde-campo,rgba(127,127,127,.45))!important}
.rm-selector select{color:var(--texto)!important}
}

/* Cursos en el móvil (repaso página a página, 2026-10-20): el destacado sin la descripción, los filtros como los dos
   selectores (fijos arriba al bajar) y las tarjetas en apaisado, a todo el ancho y con la muestra en marcha, pero
   sin ocupar cada una más de una pantalla */
@media (max-width:820px){
.cur-destacado__sub{display:none!important}
.cur-destacado__fondo{aspect-ratio:4/4.4!important}
.cur-filtros{top:60px!important;display:block!important;padding:4px 0 10px!important}
.cur-filtros .filtro{display:none!important}
.cur-filtros .rm-selectores{gap:18px}
.cur-rejilla{gap:30px!important;margin-top:20px!important}
.cur-tarjeta .img{aspect-ratio:16/11!important}
.cur-tarjeta__desc{display:none!important}
.cur-tarjeta strong{font-size:20px!important}
}

/* Ficha de curso en el móvil (repaso 2026-10-20) */
@media (max-width:820px){
.fc-datos dt{font-size:25px!important;white-space:nowrap}
.fc-datos>div{min-width:0;padding-left:12px!important;padding-right:8px!important}
.fc-curso__texto.plegado .texto{display:none}
.fc-curso__texto.plegado .texto.fc-primero{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.fc-leer{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0;border:0;background:none;color:var(--azul);font:700 11px/1 Poppins,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.fc-claves__fila{display:block!important;width:100%}
.fc-claves{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%}
.fc-temario .cabecera-fila{display:block!important}
.fc-temario .cabecera-fila .rotulo{display:block;margin-top:10px}
.fc-barra>span{display:none!important}
.fc-barra{gap:14px!important;justify-content:space-between}
.fc-barra .btn{flex:1;display:flex!important;align-items:center;justify-content:center;min-height:48px}
}
@media (max-width:820px){
.fc-clase__titulo{font-size:15px!important;line-height:1.15!important}
.fc-clase__fila{gap:10px!important}
}
@media (max-width:820px){
.fc-clase__fila>b{font-size:17px!important;letter-spacing:-.02em}
}

/* Profesores y ficha de profesor en el móvil (repaso 2026-10-20) */
@media (max-width:820px){
.pr20 .zb-cabeza .cur-cabeza__dato{font-size:9px!important;letter-spacing:.12em!important}
.pr20 .zb-cabeza .cur-cabeza__dato b{font-size:19px!important}
.pr20 .zb-cabeza .cur-cabeza__dato i{margin:0 8px!important}
.zb-destacado--profe .zb-destacado__texto>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pr20 .zb-porestilo{margin-top:34px}
.zq-bio.plegado>p:not(.indice){display:none}
.zq-bio.plegado>p.fc-primero{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
}

/* Suscríbete en el móvil (repaso 2026-10-20): cifras en una línea, el botón del plan a todo el ancho y «Qué incluye»
   plegado como en la portada (en el plan grande y en los otros dos) */
@media (max-width:820px){
.sb-cabeza .cur-cabeza__dato{font-size:8.5px!important;letter-spacing:.1em!important;flex-wrap:nowrap!important;white-space:nowrap}
.sb-cabeza .cur-cabeza__dato b{font-size:18px!important}
.sb-cabeza .cur-cabeza__dato i{margin:0 7px!important}
.sb-prota .btn,.sb-puerta .btn{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 12px!important;text-align:center}
.sb-prota__incluye>.rotulo{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0;cursor:pointer}
.sb-prota__incluye>.rotulo::after{content:'';width:9px;height:9px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.sb-prota__incluye:not(.plegado)>.rotulo::after{transform:rotate(-135deg) translateY(-3px)}
.sb-prota__incluye.plegado .lista-rayas{display:none!important}
}

/* Zona del alumno en el móvil (repaso 2026-10-20) */
@media (max-width:820px){
/* las cifras de cabecera de todas las páginas de la zona, en una línea */
.zb-cabeza .cur-cabeza__dato{flex-wrap:nowrap!important;white-space:nowrap;overflow:hidden;font-size:8.5px!important;letter-spacing:.1em!important}
.zb-cabeza .cur-cabeza__dato b{font-size:18px!important}
.zb-cabeza .cur-cabeza__dato i{margin:0 7px!important}
/* Favoritos: sin la frase de debajo del título (lo dicen los corazones) */
.mc-intro{display:none!important}
/* Historial: el botón «Continuar» a lo ancho y con el texto centrado */
.hs-acciones{display:block;width:100%;margin-top:10px}
.hs-acciones .btn{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:46px;padding:0 12px!important}
/* Inicio: las cuatro cifras, algo más grandes */
.zn-cifras dt,.zn-cifras b{font-size:22px!important}
}
@media (max-width:820px){
.hs-tipos{display:flex!important;flex-wrap:nowrap!important;gap:8px;margin:0 -14px!important;padding:0 14px 2px!important;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.hs-tipos::-webkit-scrollbar{display:none}
.hs-tipos a{flex:none;white-space:nowrap}
}

/* Clase en el móvil (repaso 2026-10-20): la barra «Siguiente clase» compacta y fija abajo (antes pisaba el pie), el
   punto rojo de «Grabarme» separado del texto y las clases del curso más estrechas para que asomen las siguientes */
@media (max-width:820px){
.cl-barra{position:fixed!important;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:12px!important;padding:8px 8px 8px 16px!important;border-radius:14px;grid-template-columns:minmax(0,1fr) auto!important}
.cl-barra b{display:none!important}
.cl-barra span{font-size:14px!important}
.cl-barra small{font-size:8.5px!important;margin-bottom:4px!important}
.cl-barra i{display:flex;align-items:center;min-height:44px;padding:0 16px!important}
.btn .punto-rec{margin-right:9px;vertical-align:middle}
.cl-cola__lista>*{flex:0 0 72%!important}
}

/* Mensajería en el móvil: el título y «Escribir» arriba; los cuatro accesos, compactos, en una fila que se desliza
   debajo (antes ocupaban media pantalla por encima del título) */
@media (max-width:820px){
.ms{display:flex!important;flex-direction:column}
.ms-lista{order:1}
.ms-acciones{order:2;display:flex!important;gap:8px!important;padding:10px 14px!important;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;border-bottom:1px solid var(--linea)}
.ms-acciones::-webkit-scrollbar{display:none}
.ms-acciones a{flex:0 0 auto;max-width:230px;padding:10px 12px!important}
.ms-acciones small{display:none!important}
.ms-acciones strong{font-size:13px!important;white-space:nowrap}
.ms-acciones a>span:first-child{width:30px!important;height:30px!important}
.ms-acciones__particular em{display:none!important}
.ms-centro{order:3}
.ms-lista__intro{display:none}
}

/* Mis grabaciones: sin la nota de privacidad de debajo del título (lo dice el candado de cada toma) */
@media (max-width:820px){
.gb-privado{display:none!important}
}

/* Cursos en el móvil (2.º repaso, petición del dueño): tarjetas en vertical 4:5 como en el ordenador, agrupadas por
   estilo en filas que se deslizan, con la etiqueta de campeón; los filtros en una ventana con el botón «Filtros» */
@media (max-width:820px){
.cur-filtros{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:10px 0!important}
.cur-filtros .filtro,.cur-filtros .rm-selectores{display:none!important}
.cur-cuenta{margin:0!important}
.cur-abrir{display:inline-flex!important;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--texto);border-radius:6px;background:var(--texto);color:var(--fondo);font:700 11px/1 Poppins,sans-serif;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.cur-abrir svg{width:16px;height:16px}
.cur-abrir.on{background:var(--azul);border-color:var(--azul);color:#fff}
.cur-abrir b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fff;color:var(--azul);font-size:11px;letter-spacing:0}
.cur-abrir b[hidden]{display:none}
.cur-ventana{display:grid!important}
.cur-ventana[hidden]{display:none!important}
.cur-rejilla{display:none!important}
.cur-fila{margin-top:26px}
.cur-fila[hidden]{display:none}
.cur-fila__cabeza{display:flex;align-items:baseline;gap:12px}
.cur-fila__cabeza h2{margin:0;font-size:24px}
.cur-fila__pista{display:flex;gap:12px;margin:12px -18px 0;padding:0 18px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 18px;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.cur-fila__pista::-webkit-scrollbar{display:none}
.cur-fila .cur-tarjeta{flex:0 0 72%;scroll-snap-align:start}
.cur-fila .cur-tarjeta[hidden]{display:none}
.cur-tarjeta .img{aspect-ratio:4/5!important}
.cur-tarjeta strong{font-size:17px!important}
}
/* la ventana de filtros (Cursos y Biblioteca): los tres niveles en tres cuadritos en una fila, sin la descripción */
@media (max-width:820px){
.zb-ventana .zb-cartas--nivel{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
.zb-ventana .zb-cartas--nivel a{align-items:center;padding:12px 6px!important;text-align:center}
.zb-ventana .zb-cartas--nivel small{display:none!important}
.zb-ventana .zb-cartas--nivel strong{margin-top:6px!important;font-size:13px!important}
}
/* la línea de cifras de las cabeceras (Cursos, Suscríbete, Profesores…) siempre en una fila: no se parte y el tamaño
   se ajusta al ancho del móvil */
@media (max-width:820px){
.cur-cabeza .cur-cabeza__dato{display:flex!important;flex-wrap:nowrap!important;align-items:baseline;white-space:nowrap;font-size:min(9px,2.2vw)!important;letter-spacing:.08em!important}
.cur-cabeza .cur-cabeza__dato b{font-size:min(22px,5.2vw)!important;margin:0 4px}
.cur-cabeza .cur-cabeza__dato i{margin:0 min(10px,2vw)!important}
}
/* el botón de sonido de las tarjetas: tocarlo sube o quita el volumen (el resto de la tarjeta entra en la clase) */
@media (max-width:820px){
[data-previa] .sonido{z-index:3;cursor:pointer;opacity:1!important}
[data-previa] .sonido svg{width:19px;height:19px}
}
/* el cierre de Cursos en el móvil: sin el rótulo, la frase corta y el botón a todo el ancho */
@media (max-width:820px){
.cur .cierre{display:flex!important;flex-direction:column;align-items:stretch!important;gap:16px!important;margin:0!important;border-radius:0!important;padding:30px 18px!important}
.cur .cierre .rotulo,.cur .cierre h2.solo-grande{display:none!important}
.cur .cierre h2.solo-movil{display:block;margin:0;font-size:26px!important;line-height:1}
.cur .cierre .btn{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0!important}
}
/* Profesores en el móvil (como Cursos): el destacado sin la presentación y su etiqueta con estrella e hilo azul */
@media (max-width:820px){
.zb-destacado--profe .zb-destacado__texto>p{display:none!important}
.zb-destacado--profe .zb-destacado__sello{display:inline-flex!important;align-items:center;gap:8px;padding:0!important;background:none!important;border-radius:0!important;color:#8fc3ff!important;font-size:10px!important;letter-spacing:.22em;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.zb-destacado--profe .zb-destacado__sello::before{content:'★';color:#fff;font-size:11px;letter-spacing:0}
.zb-destacado--profe .zb-destacado__sello::after{content:'';order:-1;display:none}
}
/* las cifras de las cabeceras en columnas: el número arriba y el texto debajo (movil20.js las reparte) */
@media (max-width:820px){
.cur-cabeza__dato.rm-cifras{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0!important;white-space:normal!important;overflow:visible!important;margin-top:16px;width:100%;box-sizing:border-box}
.rm-cifra{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;padding:0 6px;border-left:1px solid var(--linea)}
.rm-cifra:first-child{border-left:0}
.cur-cabeza__dato.rm-cifras .rm-cifra b{margin:0!important;font-family:var(--titular);font-weight:700;font-size:min(32px,8.4vw)!important;line-height:1;letter-spacing:0;white-space:nowrap;color:var(--texto)}
.cur-cabeza__dato.rm-cifras .rm-cifra small{font-size:min(10px,2.6vw);font-weight:700;letter-spacing:.14em;line-height:1.35;text-transform:uppercase;color:var(--tenue)}
.rm-cifras .rm-cifra small .sb-estrellas{font-style:normal;letter-spacing:2px;color:var(--azul)}
}

/* Ficha de curso en el móvil, segundo repaso (2026-10-24): menos apelotonada */
@media (max-width:820px){
/* las cifras: tres columnas iguales, número arriba y texto debajo (el precio ya va en el recuadro de compra) */
.fc-datos{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important}
.fc-datos>div.solo-visitante{display:none!important}
.fc-datos>div{padding:0 8px!important}
.fc-datos>div:first-child{padding-left:0!important}
.fc-datos dt{font-size:min(24px,6.4vw)!important}
.fc-datos dd{white-space:normal!important;line-height:1.3}
/* las claves del curso: una debajo de otra, número a la izquierda */
.fc-claves{grid-template-columns:minmax(0,1fr)!important}
.fc-claves li{display:flex!important;align-items:baseline;gap:14px;padding:14px 0!important;border-right:0!important}
.fc-claves li:nth-child(even){padding-left:0!important}
.fc-claves li b{margin-bottom:0!important;flex:none;min-width:36px}
/* el temario: número, título a lo ancho, duración y +; el estado (Vista, Te toca) debajo del título */
.fc-clase__fila{grid-template-columns:30px minmax(0,1fr) auto 26px!important;gap:4px 12px!important;padding:14px 4px 14px 0!important}
.fc-clase__fila>b{grid-row:1/3;font-size:15px!important}
.fc-clase__titulo{grid-column:2;font-size:13px!important;line-height:1.25!important}
.fc-clase__titulo small{white-space:normal!important;font-size:10px!important}
.fc-clase__estado{grid-column:2;grid-row:2;font-size:9px!important}
.fc-clase__estado:empty{display:none}
.fc-clase__dur{grid-column:3;grid-row:1;font-size:12px}
.fc-clase__mas{grid-column:4;grid-row:1}
/* quién te enseña: los dos botones uno debajo de otro, sin que se salga «Ver su página» */
.fc-profe .acciones{display:flex!important;flex-direction:column;align-items:stretch;gap:10px}
.fc-profe .acciones .btn,.fc-profe .acciones .enlace{justify-content:center;text-align:center}
/* la barra de compra: el precio nunca se parte */
.fc-barra b{white-space:nowrap;font-size:22px!important}
}
@media (max-width:820px){
/* las cifras del curso a lo ancho de la tarjeta (la columna del texto es estrecha y se pisaban) */
.fc-datos{width:calc(100vw - 60px)!important;max-width:none!important}
/* «Cuando termines este»: los cursos en una fila que se desliza (la rejilla de Cursos se esconde en el móvil) */
.cur-rejilla.fc-siguen{display:flex!important;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-18px;padding-right:18px;scrollbar-width:none}
.cur-rejilla.fc-siguen::-webkit-scrollbar{display:none}
.cur-rejilla.fc-siguen>.cur-tarjeta{flex:0 0 74%;scroll-snap-align:start}
}
@media (max-width:820px){
/* los tres iconos del curso en una fila: icono y una palabra (el texto largo fuera), para no empujar lo de abajo */
.fc-utiles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;margin-top:18px!important;width:calc(100vw - 60px)!important;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.fc-utiles li{flex-direction:column!important;align-items:center!important;gap:7px!important;padding:12px 4px!important;text-align:center}
.fc-utiles li+li{border-left:1px solid rgba(255,255,255,.14)}
body:not(.visitante) .fc-utiles li.solo-visitante,body.visitante .fc-utiles li.solo-alumno{display:none!important}
.fc-utiles svg{width:34px!important;height:34px!important;padding:8px!important}
.fc-utiles b{margin:0!important;font-size:9px!important;letter-spacing:.1em!important;line-height:1.3}
.fc-utiles span{font-size:0!important;line-height:0}
.fc-utiles span b{font-size:9px!important;line-height:1.3}
}
@media (max-width:820px){
/* las cifras del curso, como franja de arriba dentro del recuadro de compra / progreso */
.fc-datos.rm-en-tablero{width:auto!important;margin:-4px 0 16px!important;padding:0 0 14px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.14)!important}
.fc-datos.rm-en-tablero>div{border-top:0!important;padding-top:0!important}
.fc-datos.rm-en-tablero dt{font-size:min(20px,5.4vw)!important}
.fc-datos.rm-en-tablero dd{font-size:9px!important;margin-top:5px!important}
/* el título de campeón: una franja larga en una sola línea */
.fc-con{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:10px}
.fc-lienzo .fc-con .pf-titulo{flex-basis:100%;width:calc(100vw - 60px)!important;max-width:none!important;flex-shrink:0}
.fc-con .pf-titulo{display:flex!important;align-items:center;width:calc(100vw - 60px);max-width:none!important;white-space:nowrap;overflow:hidden;font-size:8.5px!important;letter-spacing:.08em!important;padding:6px 10px 6px 6px!important;gap:8px}
.fc-con .pf-titulo b{flex:none}
}
@media (max-width:820px){
/* el texto de la cabecera del curso a todo el ancho (en el ordenador es la mitad izquierda, sobre el vídeo) */
.fc-lienzo__texto{width:100%!important}
.fc-lienzo .fc-con .pf-titulo,.fc-utiles{width:100%!important}
.fc-lienzo__texto>h1,.fc-lienzo__texto .fc-con>strong{max-width:72%}
}
@media (max-width:820px){
/* los iconos sin rayas: tres juntos, flotando sobre la imagen */
.fc-utiles{border:0!important;margin-top:14px!important}
.fc-utiles li+li{border-left:0!important}
.fc-utiles li{padding:6px 2px!important}
.fc-utiles svg{background:rgba(0,0,0,.35);border-color:rgba(111,177,255,.45)!important}
}
@media (max-width:820px){
.fc-utiles.rm-bajo-tablero{width:auto!important;margin:14px 14px 4px!important;position:relative;z-index:1}
}
@media (max-width:820px){
/* la cabecera del curso ocupa la primera pantalla: el recuadro del botón pegado abajo; los iconos, fuera */
.fc-lienzo.rm-pantalla{display:flex!important;flex-direction:column;min-height:calc(100svh - 60px - 24px)!important}
.fc-lienzo.rm-pantalla>.fc-tablero{margin-top:auto!important}
.fc-utiles.rm-bajo-tablero{margin:18px 10px 0!important;padding:4px 0!important}
.fc-utiles.rm-bajo-tablero li{color:var(--texto)}
.fc-utiles.rm-bajo-tablero b{color:var(--texto)!important}
.fc-utiles.rm-bajo-tablero svg{background:none!important;border-color:var(--linea)!important;color:var(--azul)!important}
}
@media (max-width:820px){
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo{position:absolute!important;inset:0!important;height:auto!important;aspect-ratio:auto!important;z-index:0}
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo video{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.75) 0,rgba(0,0,0,.2) 38%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.85) 100%)}
.fc-lienzo.rm-pantalla>.fc-lienzo__texto,.fc-lienzo.rm-pantalla>.fc-tablero{z-index:1}
.fc-lienzo.rm-pantalla{height:calc(100svh - 84px)!important;min-height:600px!important}
}
@media (max-width:820px){
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo{left:0!important;right:0!important;width:100%!important;max-width:none!important}
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo video{position:absolute;inset:0}
/* la barra fija de compra solo cuando la cabecera ya no se ve (si no, repite el recuadro y lo tapa) */
.fc-barra{transition:transform .25s ease}
body.rm-cabeza-a-la-vista .fc-barra{transform:translateY(110%)}
}
/* Ficha de curso, versión mínima (2026-10-24): que se vea el vídeo; tarjeta pequeña abajo; lo demás fuera */
@media (max-width:820px){
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo::after{background:linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 62%,rgba(0,0,0,.75) 100%)!important}
.fc-lienzo.rm-pantalla>.fc-tablero{margin:auto 12px 12px!important;padding:14px 14px 14px!important;gap:10px!important;background:rgba(6,6,8,.55)!important;backdrop-filter:blur(8px)}
.fc-lienzo.rm-pantalla .fc-tablero__nota{display:none!important}
/* visitante: precio a la izquierda, botón a la derecha, en una sola fila */
.fc-lienzo.rm-pantalla .fc-tablero.solo-visitante{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px}
.fc-lienzo.rm-pantalla .fc-tablero.solo-visitante .fc-tablero__cifra{margin:0!important;display:block}
.fc-lienzo.rm-pantalla .fc-tablero.solo-visitante .fc-tablero__cifra b{font-size:28px!important;line-height:1;white-space:nowrap}
.fc-lienzo.rm-pantalla .fc-tablero.solo-visitante .fc-tablero__cifra span{display:none}
.fc-lienzo.rm-pantalla .fc-tablero.solo-visitante .btn{margin:0!important;min-height:48px;padding:0 10px!important;font-size:11px!important}
/* alumno: cifra pequeña y barra en una fila, el botón debajo */
.fc-lienzo.rm-pantalla .fc-tablero.solo-alumno .fc-tablero__cifra{display:flex;align-items:baseline;gap:10px;margin:0!important}
.fc-lienzo.rm-pantalla .fc-tablero.solo-alumno .fc-tablero__cifra b{font-size:22px!important;line-height:1}
.fc-lienzo.rm-pantalla .fc-tablero.solo-alumno .fc-tablero__cifra span{font-size:9px!important}
.fc-lienzo.rm-pantalla .fc-tablero.solo-alumno .btn{min-height:48px;margin:0!important}
/* lo que sale fuera del bloque: cifras, iconos y «O todo» */
.rm-fc-fuera{padding:18px 10px 4px}
.fc-datos.rm-fuera{width:auto!important;margin:0 0 6px!important;padding:0 0 14px!important;border:0!important;border-bottom:1px solid var(--linea)!important;color:var(--texto)}
.fc-datos.rm-fuera>div{border-color:var(--linea)!important;border-top:0!important;padding-top:0!important}
.fc-datos.rm-fuera dt{color:var(--texto)!important;font-size:min(22px,6vw)!important}
.fc-datos.rm-fuera dd{color:var(--tenue)!important}
.rm-fc-fuera .fc-utiles.rm-bajo-tablero{margin:12px 0 0!important}
.rm-fc-fuera .btn.rm-todo{display:flex!important;justify-content:center;align-items:center;min-height:48px;margin-top:16px;color:var(--texto)!important;border-color:var(--linea)!important}
}
@media (max-width:820px){.fc-lienzo.rm-pantalla .fc-tablero.solo-visitante .btn{display:flex!important;align-items:center;justify-content:center;line-height:1.2}}
@media (max-width:820px){
/* todo el texto abajo, junto a la tarjeta: arriba solo el vídeo */
.fc-lienzo.rm-pantalla>.fc-lienzo__texto{margin-top:auto!important;padding:0 18px 12px!important}
.fc-lienzo.rm-pantalla>.fc-tablero{margin-top:0!important}
.fc-lienzo.rm-pantalla .fc-lienzo__texto h1{font-size:30px!important;line-height:1!important;margin:6px 0 8px!important}
.fc-lienzo.rm-pantalla .zq-volver,.fc-lienzo.rm-pantalla .fc-volver{position:absolute;top:16px;left:18px}
/* el vídeo más cerca y más arriba, para ver a la persona */
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo video{transform:scale(1.22);transform-origin:50% 0;object-position:50% 12%!important}
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 40%,rgba(0,0,0,.85) 72%,#000 100%)!important}
}
@media (max-width:820px){.fc-lienzo.rm-pantalla .fc-lienzo__texto>.volver{position:absolute;top:16px;left:18px;z-index:2}}
@media (max-width:820px){
.fc-lienzo.rm-pantalla>.volver.rm-volver{position:absolute;top:16px;left:18px;z-index:2;color:#fff}
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo video{object-position:36% 12%!important;transform-origin:42% 0}
}
@media (max-width:820px){.fc-lienzo.rm-pantalla>.fc-lienzo__fondo video{object-position:50% 12%!important;transform-origin:50% 0!important}}
@media (max-width:820px){
/* el vídeo más grande y subido: la persona queda encima del texto */
.fc-lienzo.rm-pantalla>.fc-lienzo__fondo video{transform:translateY(-15%) scale(1.32)!important;transform-origin:50% 50%!important;object-position:50% 50%!important}
/* cifras e iconos: una franja propia, separada, debajo del bloque */
.rm-fc-fuera{margin:14px 10px 0;padding:16px 14px 14px!important;border:1px solid var(--linea);border-radius:14px;background:var(--campo-fondo)}
.rm-fc-fuera .fc-datos.rm-fuera{padding-bottom:14px!important}
.rm-fc-fuera .fc-utiles.rm-bajo-tablero{margin:14px 0 0!important}
.rm-fc-fuera .btn.rm-todo{margin-top:14px!important}
}
/* la clase abierta del temario en el móvil: el vídeo a todo el ancho y los pasos en una fila que se desliza */
@media (max-width:820px){
.fc-clase.on .fc-clase__panel{display:block!important;padding:2px 0 20px!important}
.fc-clase__panel .fc-clase__video{width:100%;margin:0}
.fc-clase__panel>div{min-width:0}
.fc-clase__panel .fc-pasos{display:flex!important;flex-wrap:nowrap!important;gap:7px;margin:14px -18px 0 0!important;padding-right:18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.fc-clase__panel .fc-pasos::-webkit-scrollbar{display:none}
.fc-clase__panel .fc-pasos span{flex:none;white-space:nowrap;scroll-snap-align:start;font-size:10px!important;padding:9px 12px!important}
.fc-clase__panel .fc-clase__nota{margin-top:10px!important;font-size:12px}
}
/* temario en el móvil: aire a los lados (el número no pegado al borde, el vídeo no pegado a la raya azul) */
@media (max-width:820px){
.fc-clase__fila{padding:14px 12px 14px 14px!important}
.fc-clase.on{border-radius:10px;border-left-width:3px}
.fc-clase.on .fc-clase__panel{padding:4px 14px 18px 14px!important}
.fc-clase__panel .fc-clase__video{border-radius:10px}
.fc-clase__panel .fc-pasos{margin-right:-14px!important;padding-right:14px}
.fc-clase__panel .fc-clase__nota{margin:12px 0 0!important;letter-spacing:.14em}
}
/* el separador del curso (cifras + iconos + «O todo»): opción D, tarjeta blanca centrada con las cifras en azul */
@media (max-width:820px){
.rm-fc-fuera{text-align:center;background:#fff!important;border:0!important;box-shadow:0 10px 28px rgba(0,0,0,.08)}
.rm-fc-fuera .fc-datos.rm-fuera{justify-items:center}
.rm-fc-fuera .fc-datos.rm-fuera>div{text-align:center;padding:0 6px!important}
.rm-fc-fuera .fc-datos.rm-fuera dt{color:var(--azul)!important}
.rm-fc-fuera .fc-utiles li{align-items:center!important}
.rm-fc-fuera .fc-utiles.rm-bajo-tablero svg{background:rgba(11,121,251,.1)!important;border:0!important;color:var(--azul)!important}
.rm-fc-fuera .btn.rm-todo{background:var(--azul)!important;color:#fff!important;border:0!important}
}
@media (max-width:820px){.fc-lienzo.rm-pantalla>.fc-lienzo__fondo video{transform:translateY(-9%) scale(1.32)!important}}
/* las claves del curso en el móvil: un camino de tres círculos con su número, unidos por una línea, el texto centrado debajo (G3) */
@media (max-width:820px){
.fc-claves__titulo{text-align:center}
.fc-claves{position:relative;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;border:0!important;margin-top:18px!important;padding:0!important}
.fc-claves::before{content:'';position:absolute;left:16.66%;right:16.66%;top:20px;height:2px;background:var(--azul)}
.fc-claves li{position:relative;display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 6px!important;border:0!important;background:none!important;font-size:13px!important;font-weight:600;line-height:1.25!important}
.fc-claves li b{display:grid!important;place-items:center;width:40px;height:40px;margin:0 0 8px!important;min-width:0!important;border-radius:50%;background:var(--azul);color:#fff!important;font-size:14px!important;letter-spacing:0;box-shadow:0 0 0 5px var(--fondo)}
}

/* ---------- Mis grabaciones vacía y el reto del mes (la cabecera del reto y el muro) ----------
   En escritorio van en columnas (texto + móvil, imagen + texto + botones): aquí, una debajo de otra */
@media (max-width:820px){
/* la invitación cabe en una pantalla: el texto a la izquierda y el móvil a la derecha; la explicación
   plegada en «Ver más»; los tres pasos en una fila, solo el número y el nombre */
.gb-vacio{grid-template-columns:minmax(0,1fr) 132px!important;grid-template-areas:"rot movil" "tit movil" "mas movil" "pasos pasos";align-items:start!important;gap:0 16px!important;padding:22px 18px 20px!important;border-radius:14px}
.gb-vacio::before{right:-320px}
.gb-vacio__texto{display:contents}
.gb-vacio__texto>.rotulo{grid-area:rot}
.gb-vacio__texto>strong{grid-area:tit;font-size:24px}
.gb-vacio__mas{grid-area:mas;margin-top:12px;border:0!important}
.gb-vacio__mas summary{display:block!important;padding:0!important;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ff6b6b}
.gb-vacio__mas summary::after{content:' ▾'}.gb-vacio__mas[open] summary::after{content:' ▴'}
.gb-vacio__mas p{margin:10px 0 0!important;font-size:13.5px!important}
.gb-vacio__movil{grid-area:movil;justify-self:end}
.gb-vacio .gb-movilito--ahora{width:132px!important;border-radius:13px}
.gb-vacio .gb-movilito em{left:6px;right:6px;bottom:6px;padding:5px 4px;font-size:7.5px;letter-spacing:.1em}
.gb-vacio__boton{bottom:46px!important;width:46px!important;height:46px!important;margin-left:-23px!important;border-width:2px!important}
.gb-vacio__boton i{width:30px!important;height:30px!important}
.gb-pasos{grid-area:pasos;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:20px!important;padding-top:16px!important}
.gb-pasos li{flex-direction:column;gap:4px!important}
.gb-pasos b{font-size:18px!important}
.gb-pasos span{font-size:0!important}
.gb-pasos strong{margin:0!important;font-size:12.5px!important;line-height:1.25}
.gb-reto__cabeza{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:14px 14px 18px!important;border-radius:14px}
.gb-reto__cabeza strong{font-size:22px}
.gb-reto__cabeza dl{gap:20px;margin-top:12px}
.gb-reto__cabeza dd{max-width:none}
.gb-reto__cabeza .acciones{align-items:stretch!important;gap:14px!important}
.gb-reto__cabeza .acciones .btn{width:100%;justify-content:center}
.gb-reto__cabeza .acciones .enlace{align-self:center}
.gb-reto__cuerpo{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
.gb-reto__tomas{overflow-x:auto;scrollbar-width:none}
.gb-reto__muro-fila{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.gb-muro-entero{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 12px!important;margin-top:22px!important}
}

/* ---------- Mi cuenta → Facturas: la tabla no cabe (se escondía el importe y el recibo a la derecha);
   cada pago, una ficha: concepto e importe arriba, fecha y estado debajo, y el recibo ---------- */
@media (max-width:820px){
.cu-tabla__caja{overflow:visible!important}
.cu-tabla thead{display:none}
.cu-tabla,.cu-tabla tbody{display:block}
.cu-tabla tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"concepto importe" "fecha estado" "recibo recibo";gap:6px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--linea)}
.cu-tabla td{padding:0!important;border:0!important}
.cu-tabla td:nth-child(1){grid-area:fecha;font-size:12.5px;color:var(--tenue)}
.cu-tabla td:nth-child(2){grid-area:concepto;font-size:14.5px;line-height:1.3}
.cu-tabla td:nth-child(3){grid-area:estado;justify-self:end}
.cu-tabla td:nth-child(4){grid-area:importe;font-size:20px}
.cu-tabla td:nth-child(5){grid-area:recibo}
.cu-tabla td:nth-child(5):empty{display:none}
}

/* ---------- las páginas del catálogo dentro de la zona (con sesión): la zona ya pone su margen,
   así que la ficha de profesor no suma el suyo (con los dos, su cabecera se salía por la derecha) ---------- */
@media (max-width:820px){
.zn-contenido .zq-web{padding:0 0 60px!important}
.zq-cabeza__texto{max-width:100%!important;min-width:0}
.zq-cabeza{overflow:hidden}
.zq-cabeza .acciones{display:flex;flex-wrap:nowrap;gap:10px;width:100%}
.zq-cabeza .acciones .zq-preguntar{flex:1;min-width:0;padding-left:12px!important;padding-right:12px!important}
.zq-cabeza .acciones .zq-red{flex:none}
}

/* ---------- el buscador en el móvil: la lupa arriba (en la web y en la zona) y el panel a pantalla completa ---------- */
@media (max-width:820px){
.nav__buscar{display:grid!important;place-items:center;flex:none!important;width:42px;height:42px;margin-left:auto;padding:0!important;border:0!important;background:none!important;color:#fff!important}
.nav__buscar>span{display:none}
.nav__buscar svg{width:21px;height:21px}
.nav__acceso--fuera{margin-left:0!important}
.bz-panel{left:0;top:0;width:100%;height:100%;max-height:none;transform:none;border:0;border-radius:0}
.bz-barra{padding:10px 14px;gap:10px}
.bz-barra input{font-size:16px}
.bz-cuerpo{padding:16px 14px calc(30px + env(safe-area-inset-bottom,0px))}
.bz-fila{grid-auto-columns:68%;gap:12px;margin:0 -14px;padding:0 14px 4px;scroll-padding:0 14px;scroll-snap-type:x mandatory}
.bz-fila>*{scroll-snap-align:start}
.bz-fila--todos{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0}
.bz-grupo--profesores .bz-fila{grid-auto-columns:88px}
.bz-grupo--series .bz-fila,.bz-grupo--cursos .bz-fila{grid-auto-columns:38%}
.bz-grupo--series .bz-fila--todos,.bz-grupo--cursos .bz-fila--todos{grid-template-columns:repeat(3,minmax(0,1fr))}
.bz-cara span{width:66px;height:66px}
.bz-grupo--clases .bz-fila{grid-template-columns:minmax(0,1fr)!important;margin:0!important;padding:0!important;scroll-snap-type:none}
.bz-l__img{width:96px}
}

/* ---------- los planes de la portada en el móvil: el vídeo a sangre arriba del completo y las cintas de borde a borde ---------- */
@media (max-width:820px){
.pr-loncha{margin:-26px -20px 18px!important;aspect-ratio:16/8}
.pr-prota .rd-cinta{margin:18px -20px 4px}
.pr-lado .rd-cinta{margin:14px -20px 16px}
.rd-cinta__t{width:92px}
/* de los dos «Empezar ahora» (anual y mensual), solo el del pago elegido */
.precios[data-periodo="anual"] .pr-prota .btn.solo-mensual,.precios[data-periodo="mensual"] .pr-prota .btn.solo-anual{display:none!important}
}
/* los planes pequeños de la portada: en el móvil, la cinta sin la lista */
@media (max-width:820px){.pr-lado__lista{display:none}}

/* Suscríbete en el móvil: el vídeo a sangre y las cintas de borde a borde (el «Qué incluye» ya es la cinta) */
@media (max-width:820px){
.sb-loncha{margin:-26px -20px 18px!important;aspect-ratio:16/8}
.sb-prota .rd-cinta{margin:10px -20px 0}
.sb-puerta .rd-cinta{margin:14px -20px 16px}
.sb-prota__incluye .rd-cinta{display:block!important}
}