/* =========================================================
   Botones estilo "Spacious74" (Uiverse.io): marco con brillo
   blanco arriba a la derecha, mancha cian abajo a la izquierda
   e interior azul de la marca (en el original era gris oscuro). Hecho solo con fondos en capas
   (sin agregar spans), así sirve para todos los botones.
   :not(#_) sube la especificidad para ganarle a los estilos viejos.
   ========================================================= */
:is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_) {
  --blob: 70px;
  --tint: #e1251b1a;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 25px; border: 2px solid transparent; border-radius: 16px;
  color: #ffffff; font: 600 15px var(--sans); text-shadow: none; cursor: pointer; white-space: nowrap;
  background:
    radial-gradient(circle 60px at 0% 100%, var(--tint), #8b3dff11, transparent) padding-box,
    radial-gradient(circle 80px at 80% -50%, #e1251b, #8b3dff 45%, #1f2026) padding-box,
    radial-gradient(circle 60px at 0% 100%, #e1251b, #8b3dff80, transparent) left bottom / var(--blob) 100% no-repeat border-box,
    radial-gradient(circle 80px at 80% -10%, #ffffff, #020203) border-box;
  box-shadow: -10px 10px 30px #8b3dff2d;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), --blob .4s;
}
/* Brillo blanco que asoma por la esquina de arriba */
:is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_)::after {
  content: ""; position: absolute; top: 0; right: 0; width: 65%; height: 60%;
  border-radius: 120px; box-shadow: 0 0 20px #ffffff38; z-index: -1; pointer-events: none;
}
@property --blob { syntax: "<length-percentage>"; inherits: false; initial-value: 70px; }
/* Brillo que respira: la sombra ya está dibujada y solo cambia su opacidad (no repinta) */
:is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_)::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; pointer-events: none;
  box-shadow: -10px 10px 34px #8b3dff55, -4px 4px 14px #e1251b22;
  opacity: 0; animation: btnGlow 3.6s ease-in-out infinite;
}
@keyframes btnGlow { 50% { opacity: 1; } }
@media (hover: hover) {
  :is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_):hover {
    --blob: 160%; --tint: #e1251b33; color: #ffffff; transform: translateY(-2px);
  }
}
:is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_):active { transform: translateY(1px) scale(.98); }
:is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_):focus-visible { outline: 2px solid #e1251b; outline-offset: 3px; }

/* Ajustes por botón */
.btn-sm:not(#_) { padding: 9px 18px; font-size: 14px; }
.pill:not(#_), .dream-play:not(#_) { padding: 8px 20px 8px 10px; }
.pill-ico, .dream-play-ico { width: 30px !important; height: 30px !important; font-size: 12px !important; border: 1.5px solid rgba(255, 255, 255, .6) !important; color: #ffffff !important; background: rgba(255, 255, 255, .06) !important; }
.todos-search button:not(#_) { padding: 10px 20px; border-radius: 12px; font-size: 14px; }
.orbit-arrow:not(#_) { width: 52px; height: 52px; padding: 0; font-size: 18px; }
.link:not(#_) { padding: 11px 20px; font-size: 14px; margin-top: 6px; }
@media (max-width: 640px) {
  .orbit-arrow:not(#_) { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_), :is(.btn, .btn-sm, .pill, .dream-play, .todos-search button, .orbit-arrow, .link):not(#_)::before { animation: none; transition: none; }
}