/* Efectos suaves de botones y enlaces (oct 2026). Archivo aparte: solo AGREGA, no reemplaza nada de style.css.
   Los efectos de "pasar el mouse" solo aplican en dispositivos con mouse; en el celular se usa el efecto al tocar (:active). */
.btn, .nav__item, .nav__public-item, .nav__cuenta-item, .hero__prueba, .plan, .board-card__fila, .rend-tier, .partidos-btn {
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, border-color .2s ease, color .2s ease, background-color .2s ease;
}
/* Brillo que cruza el boton dorado */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none; transition: left .6s ease;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover { box-shadow: 0 0 0 1px rgba(255,212,90,.6), 0 10px 26px rgba(255,190,38,.38); filter: brightness(1.06); }
  .btn--primary:hover::after { left: 130%; }
  .btn--ghost:hover { box-shadow: 0 0 0 1px rgba(0,233,155,.5), 0 8px 22px rgba(0,233,155,.18); }
  .nav__item:hover, .nav__public-item:hover { transform: translateY(-1px); }
  .hero__prueba:hover { transform: translateX(4px); color: #fff0b8; }
  .plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
  .plan--destacado:hover { transform: translateY(-4px); }
  .rend-tier:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
  .board-card__fila:hover { background: rgba(255,204,55,.06); }
  .partidos-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,233,155,.5), 0 8px 22px rgba(0,233,155,.2); }
}
/* Respuesta al tocar (celular) y con teclado */
.btn:active, .partidos-btn:active { transform: translateY(0) scale(.97); }
.btn:focus-visible, .nav__item:focus-visible, .partidos-btn:focus-visible, a:focus-visible { outline: 2px solid #ffd45a; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .btn, .plan, .rend-tier, .partidos-btn, .nav__item, .hero__prueba, .btn--primary::after { transition: none !important; }
  .btn:hover, .plan:hover, .rend-tier:hover { transform: none !important; }
}