/* Carrusel de cursos · portada CryptoPrime · prefijo .cpx- (no choca con cp.css) · v3: marco metálico */
:root{
  /* Marco de las portadas. Para pasarlo a plateado basta con cambiar UNA variable:
     --cpx-metal: var(--cpx-metal-plata);   (o añadir la clase .cpx-plata a <html> o a un contenedor) */
  --cpx-metal-oro:linear-gradient(135deg,#d9aa33 0%,#f2d37a 45%,#d9aa33 70%,#f2d37a 100%);
  --cpx-metal-plata:linear-gradient(135deg,#9aa4b1 0%,#eef2f6 45%,#9aa4b1 70%,#eef2f6 100%);
  --cpx-metal:var(--cpx-metal-oro);
  --cpx-marco-ancho:4px;
  --cpx-marco-sombra:0 10px 26px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --cpx-marco-brillo:0 0 0 1px rgba(255,255,255,.35),0 0 22px rgba(255,236,190,.38);
}
.cpx-plata{--cpx-metal:var(--cpx-metal-plata)}
.cpx-carrusel{position:relative;margin:26px 0 0 calc(50% - 50vw);width:100vw;overflow:hidden}
.cpx-carrusel:not(.cpx-3d) .cpx-ring{padding-left:max(16px,calc(50vw - 590px));padding-right:16px}
.cpx-carrusel .cpx-titulo{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cpx-stage{position:relative}
/* Modo plano (sin JS o con movimiento reducido): tira desplazable */
.cpx-ring{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 18px;list-style:none;margin:0;scrollbar-width:thin;scrollbar-color:#d9aa33 transparent}
.cpx-slide{flex:0 0 220px;width:220px;height:220px;scroll-snap-align:center;display:block;color:inherit;text-decoration:none;border-radius:8px;outline:none}
.cpx-card{position:relative;width:100%;height:100%;box-sizing:border-box;border-radius:10px;overflow:hidden;border:var(--cpx-marco-ancho) solid transparent;background:linear-gradient(#0b2240,#0b2240) padding-box,var(--cpx-metal) border-box;box-shadow:var(--cpx-marco-sombra);transition:box-shadow .3s,filter .3s}
.cpx-slide:hover .cpx-card,.cpx-slide:focus-visible .cpx-card{box-shadow:var(--cpx-marco-sombra),var(--cpx-marco-brillo);filter:brightness(1.06)}
.cpx-card img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
.cpx-etq{position:absolute;left:10px;top:10px;right:10px;z-index:3;display:flex;align-items:center;gap:6px;font:600 11.5px/1.25 Inter,system-ui,sans-serif;color:#e8eef5;letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.cpx-etq b{flex:0 0 auto;background:rgba(7,24,39,.82);border:1px solid rgba(217,170,51,.45);color:#f2d37a;border-radius:5px;padding:2px 6px;font-size:10.5px;text-shadow:none}
.cpx-precio{position:absolute;left:10px;bottom:10px;z-index:3;background:#d9aa33;color:#071827;font:800 13px/1 Inter,system-ui,sans-serif;padding:6px 11px;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.cpx-precio small{font-weight:600;font-size:10px;margin-left:4px;opacity:.85}
.cpx-badge{position:absolute;left:10px;bottom:10px;z-index:3;background:#102a45;color:#f2d37a;border:1px solid rgba(217,170,51,.55);font:700 12px/1 Inter,system-ui,sans-serif;padding:6px 10px;border-radius:6px}
.cpx-glow{position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(4,16,31,.55) 0,transparent 30%,transparent 55%,rgba(4,16,31,.62));opacity:.85;transition:opacity .3s}
.cpx-slide:hover .cpx-glow,.cpx-slide:focus-visible .cpx-glow{opacity:1}
.cpx-slide:focus-visible .cpx-card{outline:3px solid #f2d37a;outline-offset:3px}
.cpx-prox{cursor:default}
.cpx-prox img{filter:saturate(.55) brightness(.8)}
.cpx-arrow{display:none;width:44px;height:44px;border-radius:8px;background:#102a45;border:1px solid rgba(217,170,51,.45);color:#f2d37a;font-size:22px;line-height:1;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 16px 28px rgba(0,0,0,.24);transition:background .15s,color .15s,transform .15s}
.cpx-arrow:hover{background:#d9aa33;color:#071827;transform:translateY(-1px)}
.cpx-arrow:focus-visible{outline:3px solid #f2d37a;outline-offset:2px}
.cpx-js .cpx-arrow{display:flex}
.cpx-plano .cpx-controles{display:flex;justify-content:center;gap:14px;margin-top:4px}
/* Modo 3D (como el carrusel de anillo de Academy) */
.cpx-3d .cpx-stage{height:315px;max-width:1100px;margin:0 auto;perspective:1500px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cpx-3d .cpx-ring{position:absolute;top:30px;left:50%;width:220px;height:220px;margin-left:-110px;padding:0;gap:0;overflow:visible;display:block;transform-style:preserve-3d;will-change:transform}
.cpx-3d .cpx-slide{position:absolute;top:0;left:0;transform-style:preserve-3d;cursor:pointer}
.cpx-3d .cpx-prox{cursor:default}
.cpx-3d .cpx-card img{-webkit-user-drag:none}
.cpx-3d .cpx-arrow{position:absolute;bottom:6px;z-index:6}
.cpx-3d .cpx-prev{left:calc(50% - 52px)}
.cpx-3d .cpx-next{left:calc(50% + 8px)}
@media (max-width:640px){
  :root{--cpx-marco-ancho:3px}
  .cpx-carrusel{margin-top:18px}
  .cpx-slide{flex-basis:166px;width:166px;height:166px}
  .cpx-3d .cpx-stage{height:270px}
  .cpx-3d .cpx-ring{width:166px;height:166px;margin-left:-83px}
  .cpx-etq{font-size:10.5px;left:8px;top:8px}
  .cpx-precio{font-size:12px;padding:5px 9px;left:8px;bottom:8px}
  .cpx-precio small{display:none}
  .cpx-badge{font-size:10.5px;left:8px;bottom:8px}
}
@media (prefers-reduced-motion:reduce){.cpx-arrow,.cpx-glow,.cpx-card{transition:none}}