/* Pantalla CLASES móvil (maqueta aprobada por Guille el 14/08/2026).
   CSS tal cual lo entregó ChatGPT: todas las clases con prefijo pbc-mclases-
   para que no choque con el CSS global. Solo se carga con el flag MCLASES. */

/* COLORES DE MARCA PBC (Guille, 14/08/2026: "los colores de los botones no son
   de PBC"). La maqueta venía con un azul y un oro inventados por ChatGPT; los
   BOTONES pasan al turquesa de marca #02A9CA, que es el que ya usa el resto de
   la web (>350 sitios), con su tono oscuro #0288A9 para el borde y el pulsado.
   El oro se queda solo en los adornos (racha, puntos, chapa de rango). */
:root{--pbc-brand:hsl(var(--pbc-cyan));--pbc-brand-dark:hsl(var(--pbc-cyan-dark));--pbc-brand-soft:hsl(var(--pbc-cyan-soft))}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:hsl(var(--pbc-page));color:hsl(var(--pbc-ink));font-family:var(--pbc-font)}
button,summary{font:inherit}
.pbc-mclases-app{width:100%;max-width:390px;min-height:100vh;margin:0 auto;background:hsl(var(--pbc-page));overflow:hidden;box-shadow:0 0 42px rgba(25,66,104,.13)}
/* La CABECERA ya no se pinta aquí: es includes/mobile_topbar.html con su hoja
   static/css/mobile-topbar.css, la misma de toda la app (Guille, 14/08/2026).
   Se han borrado .pbc-mclases-header, -topbar, -logo, -user, -stats, -pill,
   -avatar(-frame), -rank y -heading: eran una copia con otros valores (azul
   #126ef8, foto con aro dorado, chapa del rango) y por eso Clases se veía
   distinta. El título de la pantalla se le pasa a la pieza con `title`. */
/* El contenido arranca justo debajo de la curva de la cabecera; ya no hace falta
   subirlo con margen negativo, porque la curva la trae la propia cabecera. */
.pbc-mclases-content{position:relative;display:flex;flex-direction:column;gap:var(--block-gap);margin-top:0;padding:var(--space-2) var(--page-gutter) var(--space-6)}
/* ESPACIADO (Viola, 14/09/2026): "Reserva tu próxima clase" iba pegada a
   "Planes" y la lista de clases pegada a "Tus créditos" (unas llevaban margin
   y otras no), y el resto a 14px. Ahora el hueco entre bloques lo pone el gap
   del panel y es el mismo que el margen lateral. El título de sección se
   pega a SU tarjeta (8px) y se aparta de la anterior (24px). */
/* La clase va repetida a propósito: con dos clases esta regla gana a las de
   una sola que van más abajo (planes, créditos y filas traen margin 0 0 14px
   y se sumaban al gap: salían 30 y 38 en vez de 16 y 24). */
.pbc-mclases-content.pbc-mclases-content>*{margin-top:0;margin-bottom:0}
.pbc-mclases-content.pbc-mclases-content>.pbc-mclases-sectiontitle{margin:var(--space-2) var(--space-1) calc(var(--space-2) * -1)}
/* PLANES QUE SE VEN (Guille, 27/08/2026: "sigue muy escondido"). El 26/08 el
   guion escondia la fila entera y dejaba una pastilla blanca en la esquina de
   la tarjeta de reservar, que se veia menos todavia. Fuera pastilla: los planes
   son una TARJETA con cabecera turquesa, del ancho de la pantalla y pegada a la
   de reservar, para que no se confunda con las filas grises de abajo.
   El modificador --destaca es solo de esta pantalla: la clase base
   .pbc-mclases-plans la reutiliza el desplegable de idiomas del temario y esa
   se tiene que quedar como estaba. */
.pbc-mclases-plans{margin:0 0 14px;border:1px solid hsl(var(--pbc-line-soft));border-radius:20px;background:hsl(var(--pbc-surface));box-shadow:0 8px 22px rgba(26,73,112,.09);overflow:hidden}
.pbc-mclases-plans summary{display:flex;align-items:center;gap:12px;min-height:62px;padding:0 16px;cursor:pointer;list-style:none;color:hsl(var(--pbc-ink));font-weight:900}
.pbc-mclases-plans summary::-webkit-details-marker{display:none}
.pbc-mclases-planicon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:var(--pbc-brand-soft);color:var(--pbc-brand)}
.pbc-mclases-planicon svg{width:21px;height:21px}
.pbc-mclases-planlabel{flex:1}
.pbc-mclases-planlabel small{display:block;margin-top:2px;color:hsl(var(--pbc-muted));font-size:12px;font-weight:700}
.pbc-mclases-chevron{width:20px;height:20px;color:var(--pbc-brand);transition:transform .2s ease}
.pbc-mclases-plans[open]>summary .pbc-mclases-chevron{transform:rotate(180deg)}
.pbc-mclases-plans--destaca{border-color:var(--pbc-brand);box-shadow:0 12px 26px rgba(2,169,202,.22)}
.pbc-mclases-plans--destaca>summary{min-height:70px;background:linear-gradient(135deg,var(--pbc-brand) 0%,var(--pbc-brand-dark) 100%);color:hsl(var(--pbc-on-color))}
.pbc-mclases-plans--destaca>summary .pbc-mclases-planicon{background:rgba(255,255,255,.22);color:hsl(var(--pbc-on-color))}
.pbc-mclases-plans--destaca>summary .pbc-mclases-planlabel{font-size:17px;letter-spacing:-.3px}
.pbc-mclases-plans--destaca>summary .pbc-mclases-planlabel small{color:rgba(255,255,255,.86)}
.pbc-mclases-plans--destaca>summary .pbc-mclases-chevron{color:hsl(var(--pbc-on-color))}
.pbc-mclases-plans--destaca>.pbc-mclases-planbody{border-top:0}
.pbc-mclases-planbody{padding:0 16px 16px;border-top:1px solid hsl(var(--pbc-page))}
.pbc-mclases-planbody p{margin:13px 0;color:hsl(var(--pbc-muted));font-size:13px;line-height:1.45}
.pbc-mclases-planlink{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;border:0;border-radius:999px;background:var(--pbc-brand);color:hsl(var(--pbc-on-color));font-weight:900;text-decoration:none;cursor:pointer}
.pbc-mclases-planlink:active{background:var(--pbc-brand-dark)}
/* Los planes, uno debajo de otro, DENTRO del propio desplegable (Guille,
   14/08/2026): al abrirlo ya se ven todos, sin pulsar nada más. */
.pbc-mclases-plan{margin-top:13px;padding:14px;border:1px solid hsl(var(--pbc-line-soft));border-radius:18px;background:hsl(var(--pbc-page))}
.pbc-mclases-plan--recommended{border-color:var(--pbc-brand);box-shadow:0 6px 16px rgba(2,169,202,.16)}
.pbc-mclases-plan--current{border-color:#bfe3c6;background:#f5fcf7}
.pbc-mclases-plantop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pbc-mclases-planname strong{display:block;font-size:17px;letter-spacing:-.3px}
.pbc-mclases-planname small{display:block;margin-top:3px;color:hsl(var(--pbc-muted));font-size:12px;font-weight:700}
.pbc-mclases-plantag{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#d9f2e0;color:#1c6b39;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.3px}
.pbc-mclases-plantag--reco{background:var(--pbc-brand-soft);color:var(--pbc-brand-dark)}
.pbc-mclases-planprice{text-align:right;flex:none}
.pbc-mclases-plannumber{display:block;font-size:21px;font-weight:900;letter-spacing:-.6px}
.pbc-mclases-planperiod{display:block;margin-top:2px;color:hsl(var(--pbc-muted));font-size:11px;font-weight:700}
.pbc-mclases-planfeatures{margin:11px 0 13px;padding:0;list-style:none}
.pbc-mclases-planfeatures li{display:flex;align-items:flex-start;gap:8px;margin-top:6px;color:hsl(var(--pbc-ink-soft));font-size:13px;font-weight:700;line-height:1.35}
.pbc-mclases-planfeatures svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--pbc-brand)}
.pbc-mclases-plan .pbc-mclases-planlink{margin-top:12px;min-height:42px;font-size:14px}
.pbc-mclases-planlink--current{background:#d9f2e0;color:#1c6b39;cursor:default}
/* Contador del credito suelto: elegir cuantos se compran (Guille, 21/08/2026).
   Botones de 40px para que se acierte con el dedo. */
.pbc-mclases-topupqty{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}
.pbc-mclases-qtybtn{width:40px;height:40px;flex:none;border:1.5px solid hsl(var(--pbc-line));border-radius:999px;background:hsl(var(--pbc-surface));color:var(--pbc-brand-dark);font-size:22px;font-weight:900;line-height:1;cursor:pointer}
.pbc-mclases-qtybtn:active{background:var(--pbc-brand-soft)}
.pbc-mclases-qtybtn:disabled{opacity:.35;cursor:default}
/* La cantidad se puede TECLEAR (Guille, 21/08/2026). 20px de letra: por debajo
   de 16px el iPhone hace zoom solo al tocarla. Sin las flechitas del navegador,
   que ya tenemos los botones -/+. */
.pbc-mclases-qtynum{width:66px;min-width:66px;padding:6px 0;border:1.5px solid hsl(var(--pbc-line));border-radius:12px;background:hsl(var(--pbc-surface));color:inherit;text-align:center;font-family:inherit;font-size:20px;font-weight:900;letter-spacing:-.4px;-moz-appearance:textfield}
.pbc-mclases-qtynum::-webkit-outer-spin-button,
.pbc-mclases-qtynum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pbc-mclases-qtynum:focus{outline:2px solid var(--pbc-brand);outline-offset:1px}
.pbc-mclases-card{position:relative;border:1px solid hsl(var(--pbc-line-soft));border-radius:24px;background:hsl(var(--pbc-surface));box-shadow:0 10px 26px rgba(26,73,112,.10)}
/* padding-bottom holgado: con los 22px de antes el botón quedaba pegado al
   borde de la tarjeta (que recorta, por la mascota) y se veía cortado por
   abajo (Guille, 14/08/2026). Ahora siempre le sobra sitio. */
/* TODO EL ANCHO (Guille, 23/09/2026). El hueco de 142px a la derecha era el
   sitio de la zorrita; sin mascota (22/09/2026) el titulo y la frase se veian
   a media pantalla con un claro vacio al lado. Ahora el bloque manda de borde
   a borde y debajo van los profes y el boton. */
.pbc-mclases-book{padding:var(--space-5);overflow:hidden}
.pbc-mclases-book h2{position:relative;z-index:2;margin:0;font-size:25px;line-height:1.08;letter-spacing:-.6px}
.pbc-mclases-book p{position:relative;z-index:2;margin:10px 0 21px;color:hsl(var(--pbc-muted));font-size:14px;line-height:1.42;font-weight:600}
/* Botón de reservar: turquesa de marca y REDONDEADO ENTERO (píldora). Antes
   llevaba un reborde macizo `0 4px 0` que dejaba el bajo del botón en recto y
   parecía cortado; ahora la sombra es blanda y no toca la forma. */
/* El botón de reservar vive en css/pbc-boton-reservar.css (Viola, 14/09/2026):
   uno solo para la portada y Clases. .pbc-mclases-primary se queda en el enlace
   sin estilo: es la parada de la zorrita (pbc-zorra-paseo.js). */
.pbc-mclases-book .pbc-btn-reservar{margin-bottom:2px}
/* El boton va el ULTIMO, debajo de los profes (23/09/2026): su propio aire. */
.pbc-profes+.pbc-btn-reservar{margin-top:12px}
.pbc-mclases-book p+.pbc-profes{margin-top:2px}
/* La zorrita es cuadrada (320x320) y se apoya en el borde de la tarjeta: caja
   cuadrada y bottom:0 para que no le corte las patas, que la tarjeta recorta. */
.pbc-mclases-mascot{position:absolute;z-index:1;right:-18px;bottom:0;width:200px;height:200px;object-fit:contain;object-position:center bottom;pointer-events:none}
.pbc-mclases-empty{padding:18px;color:hsl(var(--pbc-muted));font-size:14px;font-weight:600;line-height:1.45}
/* Tarjeta de créditos con su historial desplegable (Guille, 20/08/2026). */
.pbc-mclases-credits{margin:0 0 14px;padding:var(--space-4);overflow:hidden}
.pbc-mclases-creditstop{display:flex;align-items:center;gap:12px}
.pbc-mclases-creditstext span{display:block;color:hsl(var(--pbc-muted));font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}
.pbc-mclases-creditstext strong{display:block;margin-top:2px;font-size:26px;font-weight:900;letter-spacing:-.6px}
.pbc-mclases-history{margin-top:12px;border-top:1px solid hsl(var(--pbc-page))}
.pbc-mclases-history summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 2px 2px;cursor:pointer;list-style:none;color:hsl(var(--pbc-ink-soft));font-size:14px;font-weight:900}
.pbc-mclases-history summary::-webkit-details-marker{display:none}
.pbc-mclases-history[open] .pbc-mclases-chevron{transform:rotate(180deg)}
.pbc-mclases-moves{margin:8px 0 0;padding:0;list-style:none}
.pbc-mclases-moves li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-top:1px solid #f1f6fa}
.pbc-mclases-movetext{min-width:0}
.pbc-mclases-movetext strong{display:block;overflow:hidden;color:hsl(var(--pbc-ink));font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.pbc-mclases-movetext span{display:block;margin-top:2px;color:hsl(var(--pbc-muted));font-size:11px;font-weight:700}
.pbc-mclases-moveamount{flex:none;color:#b3392f;font-size:15px;font-weight:900}
.pbc-mclases-moveamount--plus{color:#1c6b39}
.pbc-mclases-movesempty{color:hsl(var(--pbc-muted));font-size:13px;font-weight:600}
/* Fila-enlace (deberes): misma tarjeta, en formato fila con flecha. */
.pbc-mclases-rowlink{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 16px;color:hsl(var(--pbc-ink));text-decoration:none;font-weight:900}
.pbc-mclases-rowlinktext{flex:1}
.pbc-mclases-rowlinktext small{display:block;margin-top:2px;color:hsl(var(--pbc-muted));font-size:12px;font-weight:700}
.pbc-mclases-chevron--side{flex:none}
.pbc-mclases-sectiontitle{margin:23px 4px 11px;font-size:21px;letter-spacing:-.35px}
.pbc-mclases-next{padding:var(--space-4)}
.pbc-mclases-nexttop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.pbc-mclases-language{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900}
.pbc-mclases-flag{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--pbc-brand-soft);color:var(--pbc-brand-dark)}
.pbc-mclases-flag svg{width:20px;height:20px}
.pbc-mclases-level{padding:7px 11px;border-radius:999px;background:#e8faf7;color:hsl(var(--pbc-green));font-size:13px;font-weight:900}
.pbc-mclases-details{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pbc-mclases-detail{display:flex;align-items:center;gap:9px;min-width:0;padding:12px;border-radius:15px;background:hsl(var(--pbc-page))}
.pbc-mclases-detail svg{width:20px;height:20px;flex:none;color:var(--pbc-brand-dark)}
.pbc-mclases-detailtext{min-width:0}
.pbc-mclases-detailtext span{display:block;color:hsl(var(--pbc-muted));font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}
.pbc-mclases-detailtext strong{display:block;margin-top:3px;overflow:hidden;color:hsl(var(--pbc-ink));font-size:14px;text-overflow:ellipsis;white-space:nowrap}
/* TODAS tus clases, no solo la siguiente (aviso de Lydie, 23/08/2026): filas
   cortas dentro de una sola tarjeta, con la misma linea separadora del resto
   de la pantalla. La ultima fila no lleva raya. */
.pbc-mclases-more{padding:4px 16px}
.pbc-mclases-morerow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #eef4f9}
.pbc-mclases-morerow:last-child{border-bottom:0}
.pbc-mclases-moremain{display:flex;flex-direction:column;gap:2px;min-width:0}
.pbc-mclases-moremain strong{font-size:14px;font-weight:800;letter-spacing:-.2px;color:hsl(var(--pbc-ink))}
.pbc-mclases-moremain small{font-size:12px;font-weight:600;color:hsl(var(--pbc-muted))}
.pbc-mclases-moreteacher{flex:0 0 auto;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;color:#2b5f8f}
/* La tarjeta de la próxima clase y cada fila son enlaces al ticket del
   calendario (?ticket=id), donde ya viven "Join now" y "Cancel". Antes desde
   aquí no se podía hacer nada (Guille, 24/08/2026). */
.pbc-mclases-ticketlink{display:block;color:inherit;text-decoration:none;cursor:pointer}
.pbc-mclases-morerow.pbc-mclases-ticketlink{display:flex}
.pbc-mclases-next .pbc-mclases-chevron{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:hsl(var(--pbc-subtle))}
.pbc-mclases-next.pbc-mclases-ticketlink{padding-right:38px}
.pbc-mclases-moreteacher{display:inline-flex;align-items:center;gap:4px}
.pbc-mclases-moreteacher .pbc-mclases-chevron{width:16px;height:16px;flex:none;color:hsl(var(--pbc-subtle))}
@media (max-width:360px){.pbc-mclases-mascot{right:-32px}}
/* Pantalla TEMARIO (Guille, 20/08/2026): reutiliza las piezas de Clases
   (desplegable por idioma) y añade lo suyo con prefijo pbc-mtemario-. */
.pbc-mtemario-lang{margin-bottom:14px}
.pbc-mtemario-level{margin-top:13px;border:1px solid hsl(var(--pbc-line-soft));border-radius:18px;background:hsl(var(--pbc-page))}
.pbc-mtemario-level summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;cursor:pointer;list-style:none}
.pbc-mtemario-level summary::-webkit-details-marker{display:none}
.pbc-mtemario-level[open]>summary .pbc-mclases-chevron{transform:rotate(180deg)}
.pbc-mtemario-topic{margin:8px 12px 10px;border:1px solid #e8f0f7;border-radius:14px;background:hsl(var(--pbc-surface))}
.pbc-mtemario-topic>summary{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;list-style:none;font-size:14px;font-weight:700;letter-spacing:-.2px;color:hsl(var(--pbc-ink))}
.pbc-mtemario-topic>summary::-webkit-details-marker{display:none}
.pbc-mtemario-topic[open]>summary>.pbc-mclases-chevron{transform:rotate(180deg)}
.pbc-mtemario-topic>summary>.pbc-mclases-chevron{flex:none}
.pbc-mtemario-topic>summary>.pbc-mclases-chevron:last-child{margin-left:auto}
.pbc-mtemario-topic>summary>.pbc-mtemario-count+.pbc-mclases-chevron{margin-left:0}
.pbc-mtemario-topictitle{min-width:0}
.pbc-mtemario-topicdone{border-color:#cdebd8;background:#f3fbf6}
.pbc-mtemario-topicdone>summary{color:#1c6b39}
.pbc-mtemario-topicdone>summary .pbc-mtemario-num{background:#dcf2e4;color:#1c6b39}
.pbc-mtemario-countdone{background:#dcf2e4;color:#1c6b39}
.pbc-mtemario-subtopics{margin:0;padding:0 12px 10px;list-style:none}
.pbc-mtemario-sub{width:100%}
.pbc-mtemario-sub>summary{display:flex;align-items:flex-start;gap:8px;cursor:pointer;list-style:none}
.pbc-mtemario-sub>summary::-webkit-details-marker{display:none}
.pbc-mtemario-sub>summary>.pbc-mclases-chevron{width:16px;height:16px;flex:none;margin-left:auto;margin-top:1px;color:hsl(var(--pbc-subtle))}
.pbc-mtemario-sub[open]>summary>.pbc-mclases-chevron{transform:rotate(180deg)}
.pbc-mtemario-desc{margin:5px 0 2px 23px;color:hsl(var(--pbc-muted));font-size:12.5px;font-weight:500;line-height:1.45}
.pbc-mtemario-done .pbc-mtemario-desc{color:#3f7d57}
.pbc-mtemario-desc strong{display:inline-block;margin-top:7px;color:hsl(var(--pbc-ink-soft));font-weight:800}
.pbc-mtemario-desc strong:first-child{margin-top:0}
.pbc-mtemario-done .pbc-mtemario-desc strong{color:#1c6b39}
.pbc-mtemario-flag{width:26px;height:26px;border-radius:999px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(21,38,59,.12)}
.pbc-mtemario-subtopics li{display:flex;align-items:flex-start;gap:8px;margin-top:6px;color:hsl(var(--pbc-ink-soft));font-size:13px;font-weight:600;line-height:1.35}
.pbc-mtemario-subtopics svg{width:15px;height:15px;flex:none;margin-top:2px;color:#1c6b39}
.pbc-mtemario-done span{color:#1c6b39}
.pbc-mtemario-dot{width:7px;height:7px;flex:none;margin:6px 4px 0;border-radius:999px;background:hsl(var(--pbc-line))}
.pbc-mtemario-count{margin-left:auto;flex:none;font-size:11.5px;font-weight:700;color:hsl(var(--pbc-muted));background:hsl(var(--pbc-page));border-radius:999px;padding:3px 9px}
.pbc-mtemario-level summary .pbc-mclases-chevron{flex:none}
.pbc-mtemario-num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;margin-right:7px;border-radius:6px;background:hsl(var(--pbc-blue-soft));color:#2563a8;font-size:11.5px;font-weight:800;vertical-align:-3px}
/* Pantalla DEBERES (Guille, 20/08/2026): tarjetas de notas/tareas de cada
   clase, estilo de la app, con prefijo pbc-mdeberes-. */
.pbc-mdeberes-card{margin:0 0 14px;padding:16px;scroll-margin-top:80px}
.pbc-mdeberes-teacher{font-size:16px;font-weight:900;letter-spacing:-.3px}
.pbc-mdeberes-when{margin:3px 0 8px;color:hsl(var(--pbc-muted));font-size:12px;font-weight:700}
.pbc-mdeberes-top .pbc-mclases-level{display:inline-block}
.pbc-mdeberes-title{margin:10px 0 0;color:hsl(var(--pbc-cyan-dark));font-size:15px;letter-spacing:-.2px}
.pbc-mdeberes-note{margin:8px 0 0;color:hsl(var(--pbc-ink-soft));font-size:13px;font-weight:600;line-height:1.45;white-space:pre-line}
.pbc-mdeberes-files{margin-top:10px}
.pbc-mdeberes-file{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:8px 12px;border:1px solid hsl(var(--pbc-cyan-line));border-radius:13px;background:#f2fbfd;color:hsl(var(--pbc-ink));font-size:13px;font-weight:700;text-decoration:none}
.pbc-mdeberes-file svg{width:18px;height:18px;flex:none;margin-left:auto;color:var(--pbc-brand)}
.pbc-mdeberes-filename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbc-mdeberes-open{margin-top:12px;min-height:44px;font-size:14px}


/* ── LA ZORRITA QUE SE PASEA (Guille, 23/08/2026) ────────────────────────────
   La zorrita ya era la mascota de esta pantalla, pero quieta en la esquina de
   la tarjeta de reservar. Ahora es la MISMA, metida en una capa que flota por
   encima; quien la mueve es static/js/pbc-zorra-paseo.js.

   Mismas reglas que el ajolote de la portada:
   · La capa NO recibe toques (pointer-events:none): solo el dibujo. El botón de
     reservar y los iconos de arriba siguen siendo suyos.
   · Va por debajo de la barra de abajo (z-index 1030) para no taparla nunca.
   · Con "reducir movimiento" el guion ni se enciende. */
/* EN REPOSO manda la de siempre (Guille, 23/08/2026, misma correccion que el
   ajolote en #1945): la zorrita quieta de la tarjeta solo se esconde MIENTRAS
   la otra anda suelta, y esa clase la pone el guion. Si el guion no llega, la
   pantalla se ve exactamente igual que hoy. El hueco se respeta siempre
   (visibility, no display) para que el texto de la tarjeta no se mueva. */
.pbc-mclases-mascot.is-paseo.is-paseando{visibility:hidden}
/* Y guardada, el dedo va a ESTE dibujo: es el que se coge y se arrastra. */
.pbc-mclases-mascot.is-paseo{pointer-events:auto;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-drag:none}
.pbc-zorra-paseo{display:block;position:fixed;top:0;left:0;width:137px;height:160px;z-index:1020;pointer-events:none;will-change:transform;transform-origin:50% 50%;opacity:0;transition:opacity .45s ease}
.pbc-zorra-paseo.is-listo{opacity:1}
/* Guardada: ni se ve ni recibe toques; el dedo va al dibujo de la tarjeta. */
.pbc-zorra-paseo.is-guardada{opacity:0}
.pbc-zorra-paseo.is-guardada .pbc-zorra-paseo-img{display:none}
/* La tira de verdad no se enseña: es de donde el lienzo copia los fotogramas. */
.pbc-zorra-paseo-fuente{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pbc-zorra-paseo-img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:auto;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
/* Al tocarla: botecito con squash, el mismo del ajolote. */
.pbc-zorra-paseo-img.is-tocado{animation:pbc-zpaseo-boing .6s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes pbc-zpaseo-boing{0%{transform:scale(1,1)}28%{transform:scale(1.16,.86) rotate(-5deg)}55%{transform:scale(.92,1.12) rotate(4deg)}78%{transform:scale(1.05,.97) rotate(-2deg)}100%{transform:scale(1,1)}}
.pbc-zorra-paseo.is-cogido .pbc-zorra-paseo-img{cursor:grabbing;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
/* POLVO de las patas: anda por el suelo, así que levanta tierra en vez de
   soltar burbujas como el ajolote. */
.pbc-zorra-paseo-polvo{position:absolute;bottom:14px;width:8px;height:8px;border-radius:50%;background:rgba(198,168,132,.55);pointer-events:none;animation:pbc-zpaseo-polvo 1.1s ease-out forwards}
@keyframes pbc-zpaseo-polvo{0%{transform:translate(0,0) scale(.4);opacity:0}18%{opacity:.85}100%{transform:translate(-22px,-16px) scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.pbc-zorra-paseo{display:none}.pbc-mclases-mascot.is-paseo{visibility:visible;pointer-events:none}}
/* Oferta clara en los planes (Guille, 25/09/2026): precio por clase a la
   vista, "Ver ventajas" plegado como en la web y la garantía al final. */
.pbc-mclases-perclass{display:inline-block;margin-top:10px;padding:3px 9px;border-radius:8px;background:hsl(var(--pbc-cyan-soft));color:hsl(var(--pbc-cyan-ink));font-size:12.5px;font-weight:800}
.pbc-mclases-benefits{margin-top:10px}
.pbc-mclases-plans .pbc-mclases-benefits summary{display:list-item;min-height:0;padding:0;list-style:revert;cursor:pointer;color:var(--pbc-brand);font-size:13px;font-weight:800}
.pbc-mclases-benefits .pbc-mclases-planfeatures{margin-top:4px}
.pbc-mclases-guarantee{margin:13px 2px 0;color:hsl(var(--pbc-ink-soft));font-size:12.5px;font-weight:700;line-height:1.4}
.pbc-mclases-guarantee::before{content:"🛡️ "}
.pbc-mclases-profescard{padding:var(--space-4) var(--space-4) var(--space-3);overflow:hidden}

/* Clase Special (Halloween) visible en Clases, en naranja (22/10/2026). */
.pbc-special-perch { position: relative; display: block; flex: 1 1 auto; }
.pbc-special-pumpkin { position: absolute; top: -26px; right: 14px; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; font-size: 26px; line-height: 40px; text-align: center; cursor: pointer;
  background: linear-gradient(135deg, #ff6a00, #ff9a1f); box-shadow: 0 3px 10px rgba(255, 106, 0, .45); }
.pbc-special-pop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); }
.pbc-special-pop[hidden] { display: none; }
.pbc-special-pop-card { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(86vw, 320px);
  padding: 24px 20px; border-radius: 22px; color: #fff; text-align: center;
  background: linear-gradient(135deg, #ff6a00, #ff9a1f); box-shadow: 0 10px 30px rgba(255, 106, 0, .55);
  animation: pbc-pop-in .45s cubic-bezier(.3, 1.6, .5, 1); }
.pbc-special-pop-ico { font-size: 54px; line-height: 1; animation: pbc-pumpkin-bounce 2.4s ease-in-out infinite; }
.pbc-special-pop-card strong { font-size: 18px; }
.pbc-special-pop-go { margin-top: 10px; padding: 11px 24px; border-radius: 999px; background: #fff; color: #ff6a00;
  font-weight: 800; text-decoration: none; }
@keyframes pbc-pop-in { from { transform: scale(.5) translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pbc-pumpkin-bounce {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  15% { transform: translateY(-7px) rotate(-8deg); }
  30% { transform: translateY(0) rotate(8deg); }
  45% { transform: translateY(-3px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .pbc-special-pop-card, .pbc-special-pop-ico { animation: none; } }

/* Segundo botón bajo "See classes" (cursos), más pequeño, para quien ya tiene crédito. */
.pbc-mclases-secondary { display: block; margin-top: 10px; text-align: center; font-weight: 600; font-size: 14px; color: #2b64c4; text-decoration: none; }