/* SR Group global button system.
   This file is loaded last so buttons stay consistent across pages. */
:root {
  --sr-btn-height: 54px;
  --sr-btn-mobile-height: 56px;
  --sr-btn-radius: 18px;
  --sr-btn-pad-x: 24px;
  --sr-btn-font: "Optima", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --sr-btn-primary-text: #17120a;
  --sr-btn-secondary-text: #fff8e8;
  --sr-btn-gold-1: #f6dc7e;
  --sr-btn-gold-2: #d4af37;
  --sr-btn-gold-3: #b8860b;
  --sr-btn-glass: rgba(28, 25, 21, .72);
  --sr-btn-border: rgba(231, 201, 120, .68);
  --sr-btn-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 24px rgba(212, 175, 55, .14);
}

html body a.btn,
html body button.btn,
html body .btn,
html body .read-link,
html body .blog-card a.read-link,
html body .guide-row a.read-link,
html body .service-card a,
html body .contact-actions a.btn,
html body .blog-cta-actions a.btn,
html body .cta-actions a.btn,
html body .service-actions a.btn,
html body .footer-contact a.btn,
html body .site-footer .footer-contact a.btn,
html body .footer a.btn,
html body .contact-method,
html body button.btn-primary,
html body .home-form button,
html body input[type="submit"],
html body:not(:has(.hero-carousel)) main > .hero .hero-actions a.btn,
html body:not(:has(.hero-carousel)) main > .services-hero .hero-actions a.btn,
html body:not(:has(.hero-carousel)) main > .blog-hero .hero-actions a.btn,
html body:not(:has(.hero-carousel)) main .contact-actions a.btn,
html body:not(:has(.hero-carousel)) main .blog-cta-actions a.btn,
html body:not(:has(.hero-carousel)) main .cta-actions a.btn,
html body:not(:has(.hero-carousel)) main .service-actions a.btn,
html body:has(.hero-carousel) main .hero .hero-actions a.btn,
html body:has(.hero-carousel) main .contact-actions a.btn {
  display: inline-flex !important;
  min-width: 0 !important;
  min-height: var(--sr-btn-height) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1px solid var(--sr-btn-border) !important;
  border-radius: var(--sr-btn-radius) !important;
  padding: 0 var(--sr-btn-pad-x) !important;
  color: var(--sr-btn-primary-text) !important;
  background:
    linear-gradient(135deg, var(--sr-btn-gold-1) 0%, var(--sr-btn-gold-2) 48%, var(--sr-btn-gold-3) 100%) !important;
  box-shadow: var(--sr-btn-shadow) !important;
  font-family: var(--sr-btn-font) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
}

html body .btn-light,
html body .btn-secondary,
html body a.btn.btn-light,
html body a.btn.btn-secondary,
html body .hero-actions .btn-light,
html body .contact-actions .btn-light,
html body .blog-cta-actions .btn-light,
html body .cta-actions .btn-light,
html body .service-actions .btn-light,
html body:not(:has(.hero-carousel)) main > .hero .hero-actions a.btn-light,
html body:not(:has(.hero-carousel)) main > .services-hero .hero-actions a.btn-light,
html body:not(:has(.hero-carousel)) main > .blog-hero .hero-actions a.btn-light,
html body:not(:has(.hero-carousel)) main .contact-actions a.btn-light,
html body:not(:has(.hero-carousel)) main .blog-cta-actions a.btn-light,
html body:not(:has(.hero-carousel)) main .cta-actions a.btn-light,
html body:not(:has(.hero-carousel)) main .service-actions a.btn-light,
html body:has(.hero-carousel) main .hero .hero-actions a.btn-light,
html body:has(.hero-carousel) main .contact-actions a.btn-light {
  color: var(--sr-btn-secondary-text) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .045)),
    var(--sr-btn-glass) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .24), 0 0 18px rgba(212, 175, 55, .08) !important;
  backdrop-filter: blur(14px) saturate(1.18);
}

html body a.btn:hover,
html body button.btn:hover,
html body .btn:hover,
html body .read-link:hover,
html body .service-card a:hover,
html body .contact-method:hover,
html body button.btn-primary:hover,
html body .home-form button:hover,
html body input[type="submit"]:hover,
html body .float-whatsapp:hover,
html body .whatsapp-float:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 232, 164, .9) !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .32), 0 0 30px rgba(212, 175, 55, .22) !important;
}

html body a.btn:focus-visible,
html body button.btn:focus-visible,
html body .read-link:focus-visible,
html body .contact-method:focus-visible,
html body button.btn-primary:focus-visible,
html body .home-form button:focus-visible,
html body input[type="submit"]:focus-visible,
html body .float-whatsapp:focus-visible,
html body .whatsapp-float:focus-visible {
  outline: 3px solid rgba(245, 215, 120, .42) !important;
  outline-offset: 3px !important;
}

html body .hero-actions,
html body .contact-actions,
html body .blog-cta-actions,
html body .cta-actions,
html body .service-actions {
  gap: 12px !important;
}

html body .contact-method small,
html body .contact-method strong {
  color: inherit !important;
}

html body .contact-icon {
  background: rgba(255, 255, 255, .26) !important;
}

html body .float-whatsapp,
html body .whatsapp-float {
  display: inline-flex !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--sr-btn-border) !important;
  border-radius: var(--sr-btn-radius) !important;
  padding: 0 18px !important;
  color: var(--sr-btn-primary-text) !important;
  background:
    linear-gradient(135deg, var(--sr-btn-gold-1) 0%, var(--sr-btn-gold-2) 48%, var(--sr-btn-gold-3) 100%) !important;
  box-shadow: var(--sr-btn-shadow) !important;
  font-family: var(--sr-btn-font) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

@media (max-width: 720px) {
  html body main .hero-actions,
  html body main .contact-actions,
  html body main .blog-cta-actions,
  html body main .cta-actions,
  html body main .service-actions,
  html body main .guide-row {
    gap: 10px !important;
  }

  html body main .hero-actions .btn,
  html body main .contact-actions .btn,
  html body main .blog-cta-actions .btn,
  html body main .cta-actions .btn,
  html body main .service-actions .btn,
  html body main .read-link,
  html body main .contact-method,
  html body main button.btn-primary,
  html body main .home-form button,
  html body main input[type="submit"] {
    width: 100% !important;
    min-height: var(--sr-btn-mobile-height) !important;
  }
}

html body .float-whatsapp,
html body .whatsapp-float {
  display: none !important;
}