/* Casca Grossa · App del alumno. Mismo estilo que Mi Academia (vidrio, menú flotante); el color sale de cada academia. */
:root{
  --bg:#060606;--s1:#101010;--s2:#161616;--s3:#1e1e1e;
  --border:#222;--border2:#2c2c2c;
  --acc:#7a9e3b;--acc2:#9cc44f;
  --amber:#ffb800;--red:#ff3b3b;--nogi:#dc2626;--fuego:#ff8a3d;
  --text:#f0f0f0;--text2:#9a9a9a;--text3:#5a5a5a;
  --glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.07);--glass-b:rgba(255,255,255,.09);
  --disp:'Bebas Neue',sans-serif;--body:'DM Sans',system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;color:var(--text);font-family:var(--body);overflow:hidden}
body{background:radial-gradient(130% 55% at 50% -12%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 62%),var(--bg)}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}

.cargando{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.85rem}

/* Logo de la academia: imagen o iniciales */
.logo{display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0;font-family:var(--disp);letter-spacing:.04em;
  background:color-mix(in srgb,var(--acc) 18%,var(--s2));border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);color:var(--acc2)}
.logo img{width:100%;height:100%;object-fit:contain}
.logo.img{background:none;border:0;border-radius:0}
.logo.grande{width:118px;height:118px;font-size:2.8rem;filter:drop-shadow(0 6px 24px color-mix(in srgb,var(--acc) 28%,transparent))}
.logo.chico{width:38px;height:38px;font-size:1rem}
.nombre-acad{font-family:var(--tit,var(--disp))}

/* Pantallas de entrada */
.pantalla-llena{position:fixed;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b))}
.titulo{font-family:var(--disp);font-weight:400;font-size:2.3rem;letter-spacing:.06em;color:var(--text);text-align:center;line-height:1;margin-top:6px;text-transform:uppercase}
.sub-titulo{font-size:.68rem;color:var(--text3);letter-spacing:.28em;text-transform:uppercase;margin-bottom:18px}
.txt{font-size:.88rem;color:var(--text2);text-align:center;max-width:300px;line-height:1.45;margin:4px 0 12px}
.form{width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px}
.form label{font-size:.68rem;color:var(--text3);letter-spacing:.16em;text-transform:uppercase;margin-top:4px}
.form input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-b);border-radius:14px;padding:14px;font-size:1.15rem;outline:none;letter-spacing:.08em}
.form input:focus{border-color:var(--acc)}
.form .btn{margin-top:10px}
.msg-err{color:var(--red);font-size:.84rem;text-align:center;min-height:1.2em}
.ayuda{font-size:.74rem;color:var(--text3);text-align:center;line-height:1.4}
.marca-faixa{position:absolute;bottom:calc(14px + var(--safe-b));font-size:.6rem;color:var(--text3);letter-spacing:.3em;text-transform:uppercase}

/* Botones */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:16px;padding:14px;font-weight:700;font-size:.95rem;transition:transform .12s,box-shadow .25s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5}
.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 22%,#0b0b0b),#090909);color:var(--acc2);border:1.5px solid var(--acc);
  box-shadow:0 8px 26px color-mix(in srgb,var(--acc) 20%,transparent),inset 0 0 20px color-mix(in srgb,var(--acc2) 12%,transparent)}
.btn.ghost{background:var(--glass);border:1px solid var(--glass-b);color:var(--text)}
.btn.rojo{background:transparent;border:1px solid #3a1515;color:var(--red)}
.link{color:var(--text2);font-size:.78rem;text-decoration:underline;padding:6px}

/* Estructura */
.app{position:relative;display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto}
.topbar{display:flex;align-items:center;gap:10px;padding:calc(8px + var(--safe-t)) 14px 8px;background:rgba(8,8,8,.55);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-b);flex-shrink:0}
.tb-belt{flex:1;display:flex;justify-content:center;min-width:0}
.tb-belt svg{height:30px;width:auto;max-width:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.tb-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f2f2f2;box-shadow:0 6px 18px rgba(0,0,0,.55)}
.tb-btn svg{width:17px;height:17px;fill:none;stroke:#111;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tb-btn.gira svg{animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.aviso-red{background:rgba(255,184,0,.1);color:var(--amber);font-size:.72rem;text-align:center;padding:5px}
main{flex:1;overflow:hidden;position:relative}
.screen{display:none;height:100%;overflow-y:auto;padding:16px 14px 110px;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.on{display:block;animation:entra .25s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav{position:absolute;left:12px;right:12px;bottom:calc(10px + var(--safe-b));z-index:40;display:flex;padding:6px;border-radius:28px;
  border:1px solid var(--glass-b);background:rgba(20,20,20,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 34px rgba(0,0,0,.6)}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;border-radius:22px;color:var(--text3);transition:background .2s,color .2s}
.nb svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nb span{font-size:.6rem;font-weight:600}
.nb.on{background:color-mix(in srgb,var(--acc2) 15%,transparent);color:var(--acc2)}

/* Piezas */
.hola{font-size:1.5rem;font-weight:600;line-height:1.15;margin-bottom:2px}
.hola .nombre-acad{display:block;font-size:1.05rem;letter-spacing:.12em;color:var(--acc2);font-weight:400;text-transform:uppercase}
.fecha{font-size:.74rem;color:var(--text3);margin-bottom:14px}
.fecha::first-letter{text-transform:uppercase}
.card{background:var(--glass);border:1px solid var(--glass-b);border-radius:22px;padding:16px;margin-bottom:12px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ct{display:flex;align-items:center;gap:7px;font-size:.66rem;color:var(--text3);letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.ct svg{width:15px;height:15px;fill:none;stroke:var(--acc2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aviso{border-radius:18px;padding:12px 14px;margin-bottom:12px;font-size:.85rem;line-height:1.4;display:flex;gap:10px;align-items:flex-start}
.aviso b{display:block;font-size:.95rem}
.aviso.amarillo{background:rgba(255,184,0,.08);border:1px solid rgba(255,184,0,.35);color:#ffd46b}
.aviso.rojo{background:rgba(255,59,59,.08);border:1px solid rgba(255,59,59,.4);color:#ff8a8a}
.aviso.verde{background:color-mix(in srgb,var(--acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc2)}
.aviso .emo{font-size:1.5rem;line-height:1}

.grado .faja svg{width:100%;max-width:260px;height:auto;display:block;margin:2px auto 12px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.grado-txt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.grado-txt b{font-family:var(--disp);font-size:1.6rem;font-weight:400;letter-spacing:.04em}
.grado-txt span{font-size:.8rem;color:var(--text2)}
.barra{height:12px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .8s ease}
.grado-pie{font-size:.78rem;color:var(--text2);margin-top:8px}
.grado-pie.listo{color:var(--acc2);font-weight:600}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.kpi{background:var(--glass);border:1px solid var(--glass-b);border-radius:18px;padding:12px 8px;text-align:center}
.kpi b{display:block;font-family:var(--disp);font-size:2rem;font-weight:400;line-height:1}
.kpi small{font-size:.66rem;color:var(--text2)}
.kpi.fuego b{color:var(--fuego)}

.medallas{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.medallas::-webkit-scrollbar{display:none}
.med{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;width:62px}
.med svg{width:56px;height:62px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
.med small{font-size:.6rem;color:var(--text2);text-align:center}
.med.no svg{opacity:.35;filter:grayscale(1)}
.prox{font-size:.8rem;color:var(--text2);margin-top:10px}
.prox b{color:var(--text)}

.hoy-fila{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--glass-b)}
.hoy-fila:first-of-type{border-top:0}
.hoy-fila .h{font-family:var(--disp);font-size:1.25rem;letter-spacing:.03em;width:96px}
.hoy-fila .a{flex:1;font-weight:600;font-size:.9rem}
.hoy-fila .a small{display:block;font-weight:400;color:var(--text3);font-size:.72rem}
.chip{font-size:.62rem;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--glass-2);color:var(--text2)}
.chip.nogi{background:var(--nogi);color:#fff}
.chip.ahora{background:var(--acc);color:#0b0b0b}
.vacio{font-size:.82rem;color:var(--text3);text-align:center;padding:10px 0}

/* Calendario */
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-top b{font-family:var(--disp);font-size:1.5rem;font-weight:400;letter-spacing:.05em;text-transform:capitalize}
.cal-top button{width:36px;height:36px;border-radius:50%;background:var(--glass-2);border:1px solid var(--glass-b);font-size:1.1rem;color:var(--text2)}
.cal-top button:disabled{opacity:.25}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal .dsem{font-size:.62rem;color:var(--text3);padding-bottom:4px}
.cal .d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:.85rem;color:var(--text2)}
.cal .d.fue{background:var(--acc);color:#0b0b0b;font-weight:700;box-shadow:0 0 12px color-mix(in srgb,var(--acc) 35%,transparent)}
.cal .d.hoy{outline:1.5px solid var(--acc2)}
.cal .d.fut{color:var(--text3);opacity:.5}
.cal-pie{font-size:.8rem;color:var(--text2);margin-top:10px;text-align:center}

/* Ranking */
.rk{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:14px}
.rk+.rk{margin-top:4px}
.rk .p{width:28px;text-align:center;font-family:var(--disp);font-size:1.3rem;color:var(--text2)}
.rk .p.oro{color:#f5c542}.rk .p.plata{color:#cfd4da}.rk .p.bronce{color:#d08a4e}
.rk .n{flex:1;font-weight:600;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .c{font-family:var(--disp);font-size:1.3rem}
.rk svg{width:44px;height:auto;flex-shrink:0}
.rk.yo{background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.mi-pos{text-align:center;margin-bottom:12px}
.mi-pos b{display:block;font-family:var(--disp);font-size:3.2rem;font-weight:400;line-height:1;color:var(--acc2)}
.mi-pos small{color:var(--text2);font-size:.8rem}

/* Cuota */
.estado-cuota{text-align:center;padding:6px 0 2px}
.estado-cuota b{display:block;font-family:var(--disp);font-size:2.2rem;font-weight:400;letter-spacing:.04em}
.estado-cuota small{color:var(--text2);font-size:.82rem}
.estado-cuota.ok b{color:var(--acc2)} .estado-cuota.pend b{color:var(--amber)} .estado-cuota.venc b{color:var(--red)}
.fila{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--glass-b);font-size:.88rem}
.fila:first-of-type{border-top:0}
.fila small{display:block;color:var(--text3);font-size:.72rem}
.fila .m{font-family:var(--disp);font-size:1.25rem;letter-spacing:.03em}

/* Perfil */
.perfil-top{text-align:center;margin-bottom:12px}
.perfil-top .faja svg{width:220px;max-width:80%;height:auto;margin:6px auto 10px;display:block}
.perfil-top b{display:block;font-size:1.3rem}
.perfil-top small{color:var(--text2);font-size:.8rem}
.botones{display:flex;flex-direction:column;gap:8px}
.legal{font-size:.7rem;color:var(--text3);line-height:1.5;text-align:center;margin-top:14px}

.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);z-index:90;background:rgba(30,30,30,.95);border:1px solid var(--glass-b);
  border-radius:14px;padding:10px 16px;font-size:.85rem;max-width:90vw;text-align:center}

/* Festejo de cumpleaños */
.confeti{position:fixed;inset:0;pointer-events:none;z-index:95;overflow:hidden}
.confeti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:cae 3.2s linear forwards}
@keyframes cae{to{transform:translateY(110vh) rotate(720deg)}}

/* Avisos, novedades y logros */
.aviso.azul{background:rgba(92,160,255,.08);border:1px solid rgba(92,160,255,.35);color:#a9cbff}
.aviso.azul .chip{vertical-align:2px;margin-left:4px}
.nov{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--glass-b);font-size:.86rem;line-height:1.35}
.nov:first-of-type{border-top:0}
.nov small{display:block;color:var(--text3);font-size:.7rem;margin-top:2px}
.nov-ic{width:44px;flex-shrink:0;text-align:center;font-size:1.5rem;line-height:1}
.nov-ic svg{width:44px;height:auto;display:block}
.logros{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lo{background:rgba(255,255,255,.03);border:1px solid var(--glass-b);border-radius:16px;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.lo-ic{font-size:1.7rem;line-height:1.1;filter:grayscale(1);opacity:.45}
.lo b{font-size:.78rem;line-height:1.2}
.lo small{font-size:.66rem;color:var(--text3)}
.lo.on{border-color:color-mix(in srgb,var(--acc) 45%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.lo.on .lo-ic,.lo.esp .lo-ic{filter:none;opacity:1}
.lo.on small{color:var(--acc2)}
.lo.esp{border-color:rgba(255,200,60,.5);background:rgba(255,200,60,.08)}
.lo.esp small{color:#ffd46b}
.barra.chica{height:6px;width:100%;margin-top:4px}

/* Instalar la app */
.inst-caja{width:100%;max-width:320px;margin-top:6px}
.inst-caja .btn{font-size:1.05rem;padding:16px}
.pasos{list-style:none;display:flex;flex-direction:column;gap:10px;text-align:left}
.pasos li{display:flex;gap:12px;align-items:center;background:var(--glass);border:1px solid var(--glass-b);border-radius:16px;padding:12px 14px;font-size:.95rem}
.pasos li small{display:block;color:var(--text3);font-size:.74rem;margin-top:2px}
.paso-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);flex-shrink:0}
.paso-ic svg{width:22px;height:22px;fill:none;stroke:var(--acc2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Portada de la academia */
.portada{position:relative;margin:-16px -14px 14px;height:150px;background-size:cover;background-position:center;border-radius:0 0 26px 26px;overflow:hidden}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,0) 30%,var(--bg) 100%)}
/* Ranking: podio y flechas */
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin:4px 0 14px}
.pod{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pod .av{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-size:1.4rem;background:var(--s2);border:3px solid var(--c,#999)}
.pod.p1 .av{width:72px;height:72px;font-size:1.8rem}
.pod .nm{font-size:.78rem;font-weight:600;line-height:1.2;min-height:2.4em}
.pod .base{width:100%;border-radius:14px 14px 4px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--disp);background:var(--glass-2);border:1px solid var(--glass-b)}
.pod .base b{font-size:1.6rem;font-weight:400;line-height:1}
.pod .base small{font-size:.62rem;color:var(--text2);font-family:var(--body)}
.pod.p1 .base{height:96px;background:linear-gradient(180deg,rgba(245,197,66,.25),rgba(245,197,66,.05));border-color:rgba(245,197,66,.45)}
.pod.p2 .base{height:72px;background:linear-gradient(180deg,rgba(207,212,218,.2),rgba(207,212,218,.04))}
.pod.p3 .base{height:56px;background:linear-gradient(180deg,rgba(208,138,78,.22),rgba(208,138,78,.04))}
.pod.yo .nm{color:var(--acc2)}
.mov{font-size:.68rem;font-weight:700;min-width:30px;text-align:center}
.mov.sube{color:#4ade80} .mov.baja{color:#f87171} .mov.igual{color:var(--text3)} .mov.nuevo{color:var(--acc2)}

/* ════════ Rediseño deportivo premium ════════
   Menos vidrio y menos "tarjetas iguales"; títulos con peso, números grandes, íconos propios, jerarquía. */
:root{--sup:#0f0f10;--sup2:#151517;--linea:#202024}
body{background:radial-gradient(120% 40% at 50% -10%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%),#070708}
.card{background:var(--sup);border:1px solid var(--linea);border-radius:22px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.ct{font-size:1rem;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--text);margin-bottom:12px;gap:8px}
.ct svg{width:18px;height:18px;stroke:var(--acc2)}
.hola{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.hola .nombre-acad{font-size:.95rem;letter-spacing:.14em;margin-bottom:4px}
.fecha{font-size:.8rem;color:var(--text2)}
/* Próximo grado: la tarjeta protagonista */
.card.grado{position:relative;overflow:hidden;padding:20px 18px;background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 14%,var(--sup)) 0%,var(--sup) 55%);border-color:color-mix(in srgb,var(--acc) 30%,var(--linea))}
.card.grado .faja svg{max-width:300px;margin:4px auto 16px}
.grado-txt b{font-size:2rem}
.barra{height:10px;background:rgba(255,255,255,.06)}
.grado-pie{display:flex;align-items:center;gap:6px}
/* Números: una tira en lugar de tres cajitas */
.kpis{gap:0;background:var(--sup);border:1px solid var(--linea);border-radius:22px;overflow:hidden}
.kpi{background:none;border:0;border-radius:0;border-left:1px solid var(--linea);padding:16px 6px 14px}
.kpi:first-child{border-left:0}
.kpi b{font-size:2.4rem;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.kpi small{font-size:.68rem;display:block;margin-top:2px}
/* Avisos: barra de color a la izquierda, sin cajas chillonas */
.aviso{background:var(--sup);border:1px solid var(--linea);border-left:3px solid currentColor;border-radius:16px;color:var(--text2)}
.aviso b{color:var(--text);font-size:.95rem;margin-bottom:2px}
.aviso.amarillo{color:var(--amber)} .aviso.rojo{color:var(--red)} .aviso.verde{color:var(--acc2)} .aviso.azul{color:#7fb2ff}
.aviso .emo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 12%,transparent);flex-shrink:0;font-size:1.2rem}
.aviso > div{color:var(--text2)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-4px}
.emo-libre{font-size:1.35rem;line-height:1}
/* Novedades */
.nov-ic{width:42px;height:42px;border-radius:14px;background:var(--sup2);display:grid;place-items:center;color:var(--acc2)}
.nov-ic svg.ico{width:22px;height:22px}
.nov-ic svg:not(.ico){width:38px}
/* Logros: insignias */
.lo{background:var(--sup2);border:1px solid var(--linea);border-radius:18px;padding:14px 8px}
.lo-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--linea);filter:none;opacity:1;color:var(--text3);margin-bottom:4px}
.lo-ic .ico{width:24px;height:24px}
.lo.on .lo-ic{border-color:var(--acc);color:var(--acc2);background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--acc) 25%,transparent)}
.lo.esp .lo-ic{border-color:#e8b93a;background:rgba(232,185,58,.12);box-shadow:0 0 18px rgba(232,185,58,.25)}
.lo:not(.on):not(.esp) b{color:var(--text2)}
/* Menú de abajo: sólido */
.nav{background:rgba(14,14,16,.94);border-color:var(--linea)}
.nb.on{background:color-mix(in srgb,var(--acc2) 14%,transparent)}
/* Topbar */
.topbar{background:rgba(7,7,8,.85);border-bottom-color:var(--linea)}
/* Botones */
.btn.primary{background:var(--acc);color:#0a0a0a;border:0;box-shadow:0 8px 24px color-mix(in srgb,var(--acc) 30%,transparent)}
.btn.ghost{background:var(--sup2);border:1px solid var(--linea)}
/* Cargando: bloques que se animan */
.cargando{flex-direction:column;gap:12px;padding:80px 20px;justify-content:flex-start;color:transparent}
.cargando::before,.cargando::after{content:"";display:block;width:100%;max-width:440px;border-radius:22px;background:linear-gradient(90deg,#121214 25%,#1b1b1e 37%,#121214 63%);background-size:400% 100%;animation:esq 1.4s ease infinite}
.cargando::before{height:180px}.cargando::after{height:90px}
@keyframes esq{0%{background-position:100% 50%}100%{background-position:0 50%}}

.rk-sep{text-align:center;color:var(--text3);letter-spacing:.3em;padding:2px 0}
.rk .mov{flex-shrink:0}