/* section-cta.css — CTA compartido de sección (p. ej. "Explorar todos los productos")
   ═══════════════════════════════════════════════════════════════════
   Usado en la homepage (Productos Destacados) y en la tienda (/tienda/:slug,
   sección de productos). Requiere que la página defina --purple, --purple-dark,
   --purple-light y --purple-20 (todas las páginas marketplace las definen).
   ═══════════════════════════════════════════════════════════════════ */

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.cta-explore-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* COMPACTO: era una píldora ancha (8x16, letra 12.5, icono 14). Con 6x12,
     letra 11.5 e icono 12 ocupa lo justo — sigue siendo un botón claro y ya no
     roba una franja entera de la portada. */
  padding: 6px 12px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid var(--purple-20);
  box-shadow: 0 3px 10px rgba(var(--purple-rgb),0.20);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}

.cta-explore-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--purple-rgb),0.32);
  background: linear-gradient(135deg, var(--purple-light), var(--purple));
}

.cta-explore-all:active { transform: translateY(0); }

.cta-explore-all svg {
  width: 12px; height: 12px;
  flex: none;
  transition: transform 0.25s ease;
}

.cta-explore-all:hover svg { transform: translateX(3px); }

.cta-explore-all:focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cta-explore-all, .cta-explore-all svg { transition: none; }
}