/* ============================================
   MSS - Medical Sketch Solutions
   Brand Override Styles
   Loaded AFTER styles.css to override Studiova
   ============================================ */

/* ---------- Brand Variables ---------- */
:root,
[data-bs-theme=light] {
  /* Primary brand colors */
  --bs-primary: #099FB0;
  --bs-secondary: #29457D;
  --bs-dark: #162436;
  --bs-gray: #666666;
  --bs-accent: #1B51A1;
  --bs-light: #F0F0F0;
  --bs-white: #FFFFFF;

  /* Override Studiova green */
  --bs-blue: #099FB0;
  --bs-primary-rgb: 9, 159, 176;
  --bs-secondary-rgb: 41, 69, 125;
  --bs-dark-rgb: 22, 36, 54;

  /* Derived colors */
  --bs-primary-text-emphasis: #066d7a;
  --bs-primary-bg-subtle: #cef0f4;
  --bs-primary-border-subtle: #84cfd7;
  --bs-focus-ring-color: rgba(9, 159, 176, 0.25);
  --bs-link-hover-color: #099FB0;
  --bs-link-hover-color-rgb: 9, 159, 176;

  /* Gray overrides */
  --bs-gray-500: #162436;
  --bs-gray-100: rgba(22, 36, 54, 0.12);
  --bs-gray-200: #F0F0F0;
  --bs-gray-300: rgba(22, 36, 54, 0.6);
  --bs-gray-400: rgba(22, 36, 54, 0.7);
  --bs-light-gray: #F0F0F0;
  --bs-light-gray-rgb: 240, 240, 240;

  /* Typography — conserva Manrope del template original hasta tener Nulshock/Arista Pro */
  /* --bs-font-sans-serif: 'Nulshock', 'Arista Pro', sans-serif; */
  --bs-body-color: #666666;
  --bs-body-color-rgb: 102, 102, 102;
  --bs-heading-color: #162436;
  --bs-link-color: #162436;
  --bs-link-color-rgb: 22, 36, 54;
  --bs-secondary-color: rgba(22, 36, 54, 0.75);
  --bs-secondary-color-rgb: 22, 36, 54;
  --bs-muted: rgba(22, 36, 54, 0.6);
  --bs-dark-light: rgba(22, 36, 54, 0.7);
}

/* ---------- Typography ---------- */
/* TODO: Cuando se tengan los archivos .woff2 de Nulshock y Arista Pro,
   cargarlos con @font-face y descomentar las variables de fuente arriba */

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  letter-spacing: 0.02em;
  color: var(--bs-heading-color);
}

/* ---------- Header Overrides ---------- */
.header {
  border-top-color: var(--bs-primary) !important;
}

.header.fixed-header {
  background-color: rgba(22, 36, 54, 0.97) !important;
  backdrop-filter: blur(10px);
}

.header.fixed-header .logo .logo-dark {
  display: none !important;
}

.header.fixed-header .logo .logo-white {
  display: block !important;
}

.header.fixed-header .toggle-menu {
  background-color: var(--bs-primary) !important;
}

.header.fixed-header .toggle-menu .menu-icon {
  color: var(--bs-white) !important;
}

/* ---------- Button Overrides ---------- */
.btn {
  background-color: var(--bs-primary);
  font-family: var(--bs-font-sans-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn:hover {
  background-color: var(--bs-secondary);
}

.btn .btn-text {
  color: var(--bs-white);
}

.btn:hover .btn-text {
  color: var(--bs-white);
}

.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

/* CTA special button */
.btn-cta {
  background-color: var(--bs-primary);
  color: white;
  padding: 12px 28px;
  border-radius: 50rem;
  font-weight: 700;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-cta:hover {
  background-color: var(--bs-secondary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(9, 159, 176, 0.3);
}

.btn-cta-outline {
  background-color: transparent;
  color: var(--bs-primary);
  border: 2px solid var(--bs-primary);
  padding: 10px 26px;
  border-radius: 50rem;
  font-weight: 700;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-cta-outline:hover {
  background-color: var(--bs-primary);
  color: white;
}

/* ---------- Section Badges ---------- */
.badge.text-bg-dark {
  background-color: var(--bs-secondary) !important;
}

.round-36.bg-primary {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

/* ---------- Banner / Hero Overrides ---------- */
.banner-section {
  background-color: var(--bs-dark);
}

.banner-section::before {
  background: linear-gradient(180deg, rgba(22, 36, 54, 0.7) 0%, rgba(22, 36, 54, 0.85) 100%);
}

.hero-tagline {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Stats Section ---------- */
.stats-facts .count {
  color: var(--bs-primary);
}

/* ---------- Services Section ---------- */
.services {
  background-color: var(--bs-dark) !important;
}

.services-tab .nav-tabs .nav-item .nav-link.active {
  color: var(--bs-primary) !important;
}

/* ---------- Cards ---------- */
.card.bg-primary {
  background-color: var(--bs-primary) !important;
}

.card.bg-primary .card-body h4,
.card.bg-primary .card-body h2,
.card.bg-primary .card-body h5,
.card.bg-primary .card-body p {
  color: var(--bs-white);
}

.card.bg-dark {
  background-color: var(--bs-dark) !important;
}

/* ---------- Testimonials ---------- */
.testimonial .card.bg-primary {
  background: linear-gradient(135deg, #099FB0, #29457D) !important;
}

.testimonial .card.bg-primary .card-body * {
  color: var(--bs-white);
}

/* ---------- Team ---------- */
.meet-team-img .meet-team-overlay .social .btn:hover {
  background-color: var(--bs-primary) !important;
}

/* ---------- Accordion ---------- */
.accordion-button:not(.collapsed)::after {
  background-color: var(--bs-primary);
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--bs-dark) !important;
}

.footer .text-primary,
.footer .link-hover:hover {
  color: var(--bs-primary) !important;
}

/* ---------- Scroll to Top ---------- */
#scrollToTopBtn {
  background-color: var(--bs-primary) !important;
}

#scrollToTopBtn:hover {
  background-color: var(--bs-secondary) !important;
}

/* ---------- Links ---------- */
a:hover {
  color: var(--bs-primary);
}

.link-hover:hover {
  color: var(--bs-primary) !important;
}

/* ---------- Marquee (partners/keywords) ---------- */
.marquee-keywords .marquee-content {
  animation: marquee 30s linear infinite running;
}

.marquee-keywords .marquee-tag {
  width: auto;
  white-space: nowrap;
  font-family: var(--bs-font-sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--bs-secondary);
  letter-spacing: 0.05em;
}

.marquee-keywords .marquee-dot {
  width: 6px;
  height: 6px;
  background-color: var(--bs-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Blog / Noticias cards ---------- */
.resources-details h4 {
  font-size: 1.1rem;
}

/* ---------- Workflow Section ---------- */
.workflow-section {
  background-color: var(--bs-white);
}

.workflow-step {
  text-align: center;
  position: relative;
}

.workflow-step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--bs-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto 16px;
}

.workflow-step-title {
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--bs-dark);
  letter-spacing: 0.03em;
}

.workflow-connector {
  position: absolute;
  top: 28px;
  right: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
  z-index: 0;
}

@media (max-width: 767.98px) {
  .workflow-connector {
    display: none;
  }
  .workflow-step {
    margin-bottom: 20px;
  }
}

/* ---------- Specialties Grid ---------- */
.specialty-card {
  background-color: var(--bs-light);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.specialty-card:hover {
  border-color: var(--bs-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(9, 159, 176, 0.15);
}

.specialty-card h6 {
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bs-dark);
  margin: 0;
  font-size: 0.9rem;
}

/* ---------- Why MSS Cards ---------- */
.why-mss-card {
  padding: 30px;
  border-radius: 12px;
  border: 1px solid rgba(22, 36, 54, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  background-color: white;
}

.why-mss-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 8px 30px rgba(9, 159, 176, 0.12);
  transform: translateY(-4px);
}

.why-mss-card .why-mss-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: rgba(9, 159, 176, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.why-mss-card .why-mss-icon iconify-icon {
  font-size: 1.5rem;
  color: var(--bs-primary);
}

.why-mss-card h5 {
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
  color: var(--bs-dark);
  text-transform: uppercase;
}

/* ---------- Demo Form ---------- */
.demo-form .form-control,
.demo-form .form-select {
  border: none;
  border-bottom: 1px solid var(--bs-dark);
  border-radius: 0;
  padding: 12px 0;
  font-size: 1rem;
  background-color: transparent;
  transition: border-color 0.3s;
}

.demo-form .form-control:focus,
.demo-form .form-select:focus {
  border-bottom-color: var(--bs-primary);
  box-shadow: none;
}

.demo-form .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ---------- WhatsApp Floating Button ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 100px;
  right: 30px;
  z-index: 100;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

.whatsapp-float iconify-icon {
  font-size: 2rem;
  color: white;
}

/* ---------- Partners / Aliados ---------- */
.aliados-section {
  background-color: var(--bs-white);
}

.aliados-section .partner-logo {
  height: 50px;
  opacity: 0.7;
  transition: all 0.3s ease;
  filter: grayscale(100%);
}

.aliados-section .partner-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ---------- Service Platforms Grid ---------- */
.platform-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid rgba(22, 36, 54, 0.08);
  transition: all 0.3s ease;
}

.platform-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 4px 20px rgba(9, 159, 176, 0.12);
}

.platform-card h6 {
  color: var(--bs-primary);
  font-family: var(--bs-font-sans-serif);
  font-weight: 700;
  text-transform: uppercase;
}

/* ---------- Dropdown for Services Menu ---------- */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(9, 159, 176, 0.1);
  color: var(--bs-primary);
}

/* ---------- Nav link adjustments ---------- */
.header-menu .header-item .header-link .animate-spin {
  display: none;
}

.header-menu .header-item .header-link {
  transition: color 0.3s ease;
}

.header-menu .header-item .header-link:hover,
.header-menu .header-item .header-link.active {
  color: var(--bs-primary) !important;
}

/* ---------- Responsive Fixes ---------- */
@media (max-width: 991.98px) {
  .btn {
    padding: 12px 44px 12px 24px;
  }

  .btn .btn-text {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .why-mss-card {
    margin-bottom: 20px;
  }
}

/* ---------- Utility: bg-accent ---------- */
.bg-accent {
  background-color: var(--bs-accent) !important;
}

.text-accent {
  color: var(--bs-accent) !important;
}

/* ---------- Smooth section transitions ---------- */
section {
  scroll-margin-top: 80px;
}