/**
 * Diferenciació visual respecte a op-service-card (mateixa mida, radi i
 * tipografia, reutilitzades via classes compartides al Twig): només fons,
 * vora, color del títol i estat hover/focus són propis d'aquesta targeta,
 * perquè no es confongui amb un servei real.
 */
.op-service-cta-card {
  display: block;
  background: var(--op-brand-light);
  border: 2px solid var(--op-brand);
  text-decoration: none;
  color: inherit;
}

.op-service-cta-card .op-service-cta-card__title {
  color: var(--op-brand-dark);
}

.op-service-cta-card__icon svg {
  transition: transform .18s ease;
}

/* Hover/focus més evident que una targeta normal: a més de l'elevació
   que ja aplica .op-card:hover, la vora s'intensifica i la fletxa
   avança lleugerament. No depèn només del color: també canvia la
   posició de la icona. */
.op-service-cta-card:hover,
.op-service-cta-card:focus-visible {
  border-color: var(--op-brand-dark);
}
.op-service-cta-card:hover .op-service-cta-card__icon svg,
.op-service-cta-card:focus-visible .op-service-cta-card__icon svg {
  transform: translateX(4px);
}
.op-service-cta-card:focus-visible {
  outline: 3px solid var(--op-brand-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .op-service-cta-card__icon svg { transition: none; }
}