:root{--fondo:#17123a;--tarjeta:#231c55;--borde:#463b8f;--texto:#fff;--suave:#d7d2f5;--acento:#ffc247;--acento-texto:#241a00;--error:#ffb4b4}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--fondo);color:var(--texto);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55;padding:24px 16px}
h1{font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.15;margin:.3em 0}
h2{font-size:1.35rem;margin:0 0 .3em}
a{color:var(--acento)}
.cabecera,.pie,.tarjeta{max-width:640px;margin:0 auto}
.cabecera{text-align:center;padding:12px 0 24px}
.cabecera p{color:var(--suave);margin:0}
.marca{color:var(--acento);font-weight:800;font-size:1.25rem;text-decoration:none}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:18px;padding:24px}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:22px;list-style:none;padding:0}
.pasos li{border-top:4px solid var(--borde);padding-top:7px;font-size:.9rem;color:var(--suave)}
.pasos li.activo{border-color:var(--acento);color:var(--texto);font-weight:700}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin:16px 0;grid-auto-rows:1fr}
.opcion,.boton,.secundario{font:inherit;border-radius:12px;cursor:pointer;min-height:48px;padding:10px 14px}
.opcion{background:transparent;color:var(--texto);border:1px solid var(--borde);text-align:left;font-weight:600}
.grupo{font-size:1rem;margin:18px 0 0;color:var(--acento)}
.ritmo{display:grid;gap:6px;grid-template-rows:1fr 40px}
.escuchar{font:inherit;font-size:.88rem;min-height:40px;border-radius:10px;background:transparent;color:var(--acento);border:1px solid var(--borde);cursor:pointer}
.opcion:hover{border-color:var(--acento)}
.opcion[aria-pressed=true]{background:var(--acento);border-color:var(--acento);color:var(--acento-texto)}
.boton{display:inline-block;background:var(--acento);color:var(--acento-texto);border:0;font-weight:800;text-decoration:none;text-align:center}
.secundario{background:transparent;color:var(--texto);border:1px solid var(--borde);text-decoration:none;text-align:center}
.acciones{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:18px}
input[type=text]{width:100%;font:inherit;padding:13px 14px;border-radius:12px;border:1px solid var(--borde);background:#fff;color:#17123a;margin-top:8px}
textarea{width:100%;font:inherit;line-height:1.6;padding:13px 14px;border-radius:12px;border:1px solid var(--borde);background:#fff;color:#17123a;margin-top:8px;resize:vertical}
.confirmar{display:flex;gap:10px;align-items:flex-start;margin-top:16px;color:var(--suave)}
.confirmar input{width:20px;height:20px;margin-top:3px;flex:none}
.error{color:var(--error);min-height:1.5em;margin:10px 0 0}
.novedad{background:var(--acento);color:var(--acento-texto);border-radius:10px;padding:9px 12px;font-weight:700;margin:10px 0}
.barra{height:8px;border-radius:8px;background:var(--borde);overflow:hidden;margin:18px 0}
.barra span{display:block;height:100%;width:35%;border-radius:8px;background:var(--acento);animation:avance 1.5s ease-in-out infinite alternate}
@keyframes avance{from{transform:translateX(-20%)}to{transform:translateX(220%)}}
audio{width:100%;margin:14px 0}
.letra{color:var(--suave);white-space:pre-line}
.nota,.pie{color:var(--suave);font-size:.88rem}
.pie{text-align:center;padding:20px 0}
.cancion{text-align:center}
.texto h2{margin-top:1.3em}
@media (prefers-reduced-motion:reduce){.barra span{animation:none;width:100%}}