/* =====================================================================
   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:grid!important;place-items: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}
.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:0!important;width:auto!important;max-height:86vh;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)}
.zn-cuenta__rejilla a{min-height:72px}
.zn-cuenta__pie a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- 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}
.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}
.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}
}
@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}
/* 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}
}
/* en el móvil la muestra va siempre sin sonido: fuera el botón de sonido de las tarjetas */
@media (max-width:820px){
[data-previa] .sonido{display:none!important}
}
/* 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}
}