/* One rounded action system across the six pages. */
:root {
  --action-gradient: linear-gradient(115deg, #0055e8 0%, #5430df 58%, #8b19d9 100%);
  --action-ease: cubic-bezier(.22, 1, .36, 1);
}

.button,
.nav-cta,
.text-link,
.quiet-link,
.lead-direct a {
  border-radius: 999px;
  max-width: 100%;
  transition: transform .35s var(--action-ease), box-shadow .35s var(--action-ease),
    background-position .45s var(--action-ease), border-color .3s, color .3s;
}

.button {
  min-height: 58px;
  padding: 17px 24px;
  gap: 28px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.button.primary,
.button.dark,
.nav-cta,
.nav-cta.active {
  color: #fff;
  background: var(--action-gradient);
  background-size: 145% 100%;
  border-color: transparent;
  box-shadow: 0 7px 20px #423bd91a, inset 0 1px 0 #ffffff24;
}

.button .brand-chevron,
.nav-cta .brand-chevron {
  flex: none;
  background: #fff;
}

.button.white {
  color: #182147;
  background: linear-gradient(120deg, #fff, #f2f3ff);
  border-color: #ffffffb3;
  box-shadow: 0 7px 24px #02072b29, inset 0 1px 0 #fff;
}

.button.white .brand-chevron { background: var(--gradient); }
.nav-cta { min-height: 45px; padding: 10px 19px; gap: 21px; }

.text-link,
.footer-top .text-link,
.quiet-link,
.lead-direct a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 49px;
  padding: 12px 19px;
  border: 1px solid #dce3f5;
  background: linear-gradient(120deg, #fff, #f4f6ff);
  color: #2856aa;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 3px 12px #14234e04;
}

.text-link .brand-chevron,
.lead-direct .brand-chevron { flex: none; background: #4d3fd3; }
.quiet-link span { flex: none; color: #4d3fd3; }
.footer-top .text-link { margin: 0; }
.lead-direct { align-items: flex-start; gap: 12px; }
.lead-direct a { width: fit-content; }

.services-gradient .service-body .text-link {
  color: var(--service-ink);
  border-color: color-mix(in srgb, var(--service-mid) 22%, white);
  background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--service-mid) 7%, white));
  font-size: 14px;
  padding: 12px 19px;
}
.services-gradient .service-body .text-link .brand-chevron { background: var(--service-ink); }
.sector-bottom .text-link { font-size: 14px; }

.pricing-premium .plans-grid-five .plan-card .plan-button,
.pricing-premium .plans-grid-five #team .plan-button {
  border-radius: 999px;
  border-color: transparent;
  padding: 15px 20px;
  min-height: 56px;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--plan-deep) 88%, #08143a),
    color-mix(in srgb, var(--plan-mid) 74%, #08143a));
  background-size: 145% 100%;
  color: #fff;
  box-shadow: 0 6px 17px color-mix(in srgb, var(--plan-deep) 16%, transparent), inset 0 1px 0 #ffffff26;
}

.case-dialog-premium .case-dialog-footer .button {
  border-radius: 999px;
  background: linear-gradient(115deg, var(--case-deep), color-mix(in srgb, var(--case-deep) 70%, #4e33db));
  border-color: transparent;
  min-height: 56px;
  padding: 15px 23px;
  font-size: 14px;
}

.filter-bar button,
.portfolio-premium .filter-bar button {
  min-height: 44px;
  border-radius: 999px;
  padding: 10px 19px;
  color: #46577a;
  border: 1px solid #dce3f5;
  background: linear-gradient(120deg, #fff, #f5f7ff);
  font-size: 13px;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.filter-bar button.active,
.portfolio-premium .filter-bar button.active {
  background: var(--action-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 16px #423bd922;
}

.showcase-premium .service-card-mark,
.portfolio-premium .case-read {
  border: 1px solid color-mix(in srgb, var(--service-color, var(--case-ink)) 17%, white);
  border-radius: 999px;
  background: color-mix(in srgb, var(--service-color, var(--case-ink)) 5%, white);
  padding: 11px 17px;
  min-height: 45px;
  font-size: 14px;
}

.menu-toggle {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1px solid #dce3f5;
  border-radius: 50%;
  background: linear-gradient(130deg, #fff, #f0f2ff);
  transition: background .3s, border-color .3s;
}
.menu-toggle span { width: 22px; margin: 7px 0; }
header.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
header.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }
.case-dialog-premium .dialog-close {
  width: 44px;
  height: 44px;
  background: linear-gradient(130deg, #fff, #edf0ff);
  transition: background .3s, color .3s;
}

.route-stage { border-radius: 20px; }
.route-stage.active .route-number {
  background: var(--action-gradient);
  border-color: transparent;
  box-shadow: 0 0 0 5px #5344db0c, 0 4px 10px #4133cb26;
}
.services-gradient .service .expand,
.plan-faq .faq-list summary span {
  border-radius: 50%;
  box-shadow: inset 0 1px 0 #ffffff50;
}
.sector-group summary b { border-radius: 50%; }

.whatsapp-float {
  background: linear-gradient(115deg, #09743c, #087c72);
  border: 1px solid #ffffff25;
  box-shadow: 0 8px 24px #063b3826, inset 0 1px 0 #ffffff26;
}

:is(.button, .nav-cta, .text-link, .quiet-link, .lead-direct a, .filter-bar button,
  .menu-toggle, .dialog-close, .route-stage):focus-visible {
  outline: 3px solid #5445db;
  outline-offset: 4px;
}
.page-cta .button:focus-visible,
.case-dialog-premium .dialog-close:focus-visible { outline-color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .button:hover, .nav-cta:hover {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 10px 25px #423bd925, inset 0 1px 0 #ffffff24;
  }
  .button.primary:hover, .button.dark:hover, .nav-cta:hover { background-image: var(--action-gradient); border-color: transparent; color: #fff; }
  .button.white:hover { background: linear-gradient(120deg, #fff, #e9eaff); }
  .text-link:hover, .footer-top .text-link:hover, .quiet-link:hover, .lead-direct a:hover {
    border-color: #bbbaf0;
    box-shadow: 0 6px 19px #4036b211;
    transform: translateY(-2px);
  }
  .pricing-premium .plans-grid-five .plan-card .plan-button:hover,
  .pricing-premium .plans-grid-five #team .plan-button:hover {
    background-image: linear-gradient(115deg,
      color-mix(in srgb, var(--plan-deep) 88%, #08143a),
      color-mix(in srgb, var(--plan-mid) 74%, #08143a));
    background-position: 100% 50%;
    border-color: transparent;
  }
  .filter-bar button:hover, .portfolio-premium .filter-bar button:hover {
    color: #4032a4;
    border-color: #c8c3f4;
    background: #eeecff;
  }
  .filter-bar button.active:hover, .portfolio-premium .filter-bar button.active:hover { color: #fff; background: var(--action-gradient); border-color: transparent; }
  .menu-toggle:hover, .case-dialog-premium .dialog-close:hover { background: #e7e6ff; border-color: #cbc7f3; }
  .route-stage:hover .route-number { border-color: #7971e7; }
  .whatsapp-float:hover { background: linear-gradient(115deg, #086434, #086e67); }
}

@media (max-width: 740px) {
  .button, .hero-actions .button, .page-cta .button, .showcase-action .button,
  .contact-options .button { font-size: 14px; min-height: 56px; padding: 15px 21px; gap: 22px; }
  .nav-cta { padding: 9px 15px; font-size: 12px; min-height: 42px; gap: 13px; }
  header, header.scrolled { gap: 13px; }
  .text-link, .footer-top .text-link, .quiet-link, .sector-bottom .text-link,
  .lead-direct a { font-size: 13px; padding: 11px 17px; min-height: 47px; }
  .filter-bar button, .portfolio-premium .filter-bar button { font-size: 12px; padding: 10px 16px; }
  .case-dialog-premium .case-dialog-footer .button { padding: 15px 19px; }
  .whatsapp-float { border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .button, .nav-cta, .text-link, .quiet-link, .lead-direct a { transition: none; }
  .button:hover, .nav-cta:hover, .text-link:hover, .quiet-link:hover, .lead-direct a:hover { transform: none; }
}