/* On Your Marks Co — interactividad compartida (hover, focus, motion) */
/* No toca colores/backgrounds inline existentes: solo agrega transform, shadow, filter, opacity */

html {
  scroll-behavior: smooth;
}

a, button {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid oklch(70% 0.19 45);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Botones sólidos tipo píldora (CTAs primarios y secundarios) */
.btn-pill:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 28px -14px oklch(20% 0.05 300 / .45);
}
.btn-pill:active {
  transform: translateY(0);
  filter: brightness(0.97);
  box-shadow: none;
}

/* Links de navegación (header y footer) */
.nav-link:hover {
  opacity: .68;
}

/* Tarjetas completas que son un solo <a> clickeable */
.card-link {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 34px -20px oklch(20% 0.05 300 / .35);
  border-color: oklch(70% 0.19 45 / .5) !important;
}

/* Links de texto con flecha ("Ver más →") */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cta-link:hover {
  gap: 8px;
  opacity: .8;
}

/* Tabs de filtro (Finalizadas / Próximas) */
.filter-tab:hover {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, button, .card-link, .btn-pill, .cta-link, .filter-tab {
    transition: none !important;
  }
  .btn-pill:hover, .card-link:hover {
    transform: none !important;
  }
}