/* ============================================================
   AKDMY · el Top 10 de la portada (ApiCLASES/top10.js)

   Las portadas ya eran bonitas; lo que faltaba era que se notara
   que llevan a algún sitio y cuánto cuestan.
   ============================================================ */

.ak-top10 {
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1), box-shadow .3s;
}

.ak-top10:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.ak-top10:focus-visible {
  outline: 3px solid #7d7cff;
  outline-offset: 3px;
}

/* El precio, abajo a la izquierda de la portada.

   Con una sombra por detrás y no solo la píldora: las diez
   portadas son ilustraciones distintas y algunas son claras justo
   en esa esquina. Sin el degradado, el texto blanco desaparecía
   en unas y se leía en otras. */
/* Las tarjetas llevan las clases de proporción de Tailwind
   (aspect-w-2 / aspect-h-3), y ese plugin obliga a TODOS sus hijos
   directos a ocupar la tarjeta entera: inset 0, ancho y alto al
   100%. Sin desactivarlo, la píldora del precio se estiraba hasta
   cubrir la portada completa.

   De ahí los !important: no son un capricho, hay que ganarle a una
   regla que apunta a «> *». */
.ak-top10__precio {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  left: 14px !important;
  bottom: 14px !important;
  width: auto !important;
  height: auto !important;
  z-index: 2;

  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 99px;

  background: linear-gradient(105deg, #6d28d9, #c026d3);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);

  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
}

.ak-top10__precio::after {
  content: "por curso";
  font-size: .72em;
  font-weight: 500;
  opacity: .82;
}

@media (max-width: 640px) {
  .ak-top10__precio { left: 10px !important; bottom: 10px !important;
                      font-size: .78rem; padding: 4px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ak-top10, .ak-top10:hover { transition: none; transform: none; }
}