/* Ponle Marketing — CTA hover system v18
   Shared by the institutional website, package landings and intake forms.
   Preserves the distinct button palettes while standardizing motion. */
:root {
  --pm-cta-lift: -3px;
  --pm-cta-duration: 220ms;
  --pm-cta-shadow: 0 12px 24px rgba(10, 10, 10, .18);
}

/* Unified motion for actionable controls (not regular text navigation). */
:is(
  .nav-cta, .button, .service-card .service-link, .web-plan-button,
  .contact-wa, .header-cta, .btn, .primary, .secondary,
  a.pm-unified-wa, .pm-social-icons a
) {
  transition-property: transform, box-shadow, background-color, color, border-color;
  transition-duration: var(--pm-cta-duration);
  transition-timing-function: ease;
}

:is(
  .nav-cta, .button, .service-card .service-link, .web-plan-button,
  .contact-wa, .header-cta, .btn, .primary, .secondary,
  a.pm-unified-wa, .pm-social-icons a
):is(:hover, :focus-visible) {
  transform: translateY(var(--pm-cta-lift));
  box-shadow: var(--pm-cta-shadow);
}

/* Prevent the generic nav anchor hover rule from making yellow-on-yellow text.
   Higher specificity than .nav-links > a:hover in the site stylesheet. */
.nav-links > a.nav-cta,
.nav-links > a.nav-cta:hover,
.nav-links > a.nav-cta:focus-visible {
  background-color: #F2B70C;
  color: #222124;
}
.nav-links > a.nav-cta:focus-visible {
  outline: 3px solid #67B6F9;
  outline-offset: 3px;
}

/* Keep legible text colors for all button variants. */
.button-yellow:is(:hover,:focus-visible),
.btn-yellow:is(:hover,:focus-visible),
.primary:is(:hover,:focus-visible) { color: #202124; }
.button-dark:is(:hover,:focus-visible),
.btn-dark:is(:hover,:focus-visible),
.secondary:is(:hover,:focus-visible),
.header-cta:is(:hover,:focus-visible) { color: #fff; }
.service-card .service-link:is(:hover,:focus-visible) { color: #fff; }
.web-plan-button-essential:is(:hover,:focus-visible) { color: #242326; }
.web-plan-button-express:is(:hover,:focus-visible) { color: #fff; }
a.pm-unified-wa:is(:hover,:focus-visible) { color: #0e3420; }
.contact-wa:is(:hover,:focus-visible) { color: #103821; }

/* Identical small diagonal-arrow movement across our primary CTAs. */
.pm-button-arrow,
.nav-cta > span,
.button > span,
.service-card .service-link > span,
.header-cta > span,
.web-plan-button .web-plan-arrow {
  display: inline-block;
  transition: transform var(--pm-cta-duration) ease;
}
:is(
  .nav-cta, .button, .service-card .service-link,
  .header-cta, .btn, .primary, .secondary, .web-plan-button
):is(:hover, :focus-visible) :is(
  .pm-button-arrow, .web-plan-arrow
) {
  transform: translate(2px, -2px);
}
.nav-cta:is(:hover,:focus-visible) > span,
.button:is(:hover,:focus-visible) > span,
.service-card .service-link:is(:hover,:focus-visible) > span,
.header-cta:is(:hover,:focus-visible) > span {
  transform: translate(2px, -2px);
}

/* The navigation/WhatsApp floating actions retain their own positioning logic. */
@media (prefers-reduced-motion: reduce) {
  :is(
    .nav-cta,.button,.service-card .service-link,.web-plan-button,
    .contact-wa,.header-cta,.btn,.primary,.secondary,a.pm-unified-wa,.pm-social-icons a
  ) {
    transition-duration: 0.01ms;
  }
  :is(
    .nav-cta,.button,.service-card .service-link,.web-plan-button,
    .contact-wa,.header-cta,.btn,.primary,.secondary,a.pm-unified-wa,.pm-social-icons a
  ):is(:hover,:focus-visible),
  .nav-cta:is(:hover,:focus-visible) > span,
  .button:is(:hover,:focus-visible) > span,
  .service-card .service-link:is(:hover,:focus-visible) > span,
  .header-cta:is(:hover,:focus-visible) > span,
  .pm-button-arrow,
  .web-plan-button .web-plan-arrow {
    transform: none;
    transition-duration: 0.01ms;
  }
}

/* V18.1 — hover del botón Hablemos: el texto SIEMPRE visible.
   Sin efectos de opacidad o cambios de color al levantar el botón. */
.nav-links > a.nav-cta,
.nav-links > a.nav-cta:hover,
.nav-links > a.nav-cta:focus-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #222124 !important;
  -webkit-text-fill-color: #222124 !important;
  background-color: #F2B70C !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.nav-links > a.nav-cta .nav-cta-label,
.nav-links > a.nav-cta:is(:hover,:focus-visible) .nav-cta-label,
.nav-links > a.nav-cta .nav-cta-arrow,
.nav-links > a.nav-cta:is(:hover,:focus-visible) .nav-cta-arrow {
  color: #222124 !important;
  -webkit-text-fill-color: #222124 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}
.nav-links > a.nav-cta .nav-cta-label {
  display: inline-block;
  transform: none !important;
}
.nav-links > a.nav-cta .nav-cta-arrow {
  display: inline-block;
  margin-left: 0;
}
.nav-links > a.nav-cta:hover .nav-cta-arrow,
.nav-links > a.nav-cta:focus-visible .nav-cta-arrow {
  transform: translate(2px,-2px);
}