.whatsapp-float.lower {
  bottom: 20px;
  transition: bottom 0.3s;
}
/* ===============================
   VARIABLES GLOBALES
================================= */
:root {
  /* Colores base */
  --background-color: #0C1623;
  --background-color-secondary: #020C19;
  --surface-color: #141e2b;
  --default-color: #fafdff;
  --heading-color: #ffffff;
  --accent-color: #2f9fb8;
  --contrast-color: #ffffff;

  /* Navbar específico */
  --nav-color: #d8e4f0;
  --nav-hover-color: #ffffff;
  --nav-mobile-bg: #1b2634;
  --nav-dropdown-bg: #1b2634;
  --nav-dropdown-color: #fafdff;
  --nav-dropdown-hover: var(--accent-color);
  --nav-mobile-toggle: #cfd8e3;

  /* Bootstrap variables adaptadas */
  --bs-primary: var(--accent-color);
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;

  /* Breakpoints */
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;

  /* Gradient for buttons */
  --brackground-button: linear-gradient(135deg, #2f9fb8, #258a9e);
  
  /* Button effects */
  --button-hover-shadow: 0 8px 20px rgba(70, 255, 240, 0.418);
}

html {
  scroll-behavior: smooth;
}

#banner {
  scroll-margin-top: 96px;
}

@media (max-width: 1199px) {
  #banner {
    scroll-margin-top: 86px;
  }
}

/* ===============================
   BOTONES GLOBALES
================================= */
.btn {
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .3s ease;
}

.btn-primary {
  background: var(--brackground-button);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--button-hover-shadow);
}

.btn-outline,
.btn-secondary {
  background: var(--brackground-button);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--default-color);
  transition: 
    background-size .35s ease,
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.btn-outline:hover,
.btn-secondary:hover {
  background-size: 100% 100%;
  border-color: transparent;
  color: white;
  transform: translateY(-3px);
  box-shadow: var(--button-hover-shadow);
}

.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brackground-button);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s ease;

  box-shadow: var(--button-hover-shadow);
  z-index: 999;
}

.scroll-top svg {
  width: 20px;
  height: 20px;
  color: white;
}

.scroll-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--button-hover-shadow);
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.whatsapp-float {
  position: fixed;
  right: 19px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  font-size: 22px;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: bottom 0.3s;
}

.whatsapp-float.pushed {
  bottom: 72px;
  transition: bottom 0.3s;
}
.whatsapp-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

.section-dark {
  background: var(--background-color-secondary) !important;
  color: var(--default-color) !important;
}

.section-light {
  background: #fff !important;
  color: #222 !important;
}

.section.section-dark {
  background: var(--background-color-secondary) !important;
  color: var(--default-color) !important;
}

.section.section-light, .contact-section.section-light {
  background: #fff !important;
  color: #222 !important;
}

.section.section-light h1,
.section.section-light h2,
.section.section-light h3,
.section.section-light h4,
.contact-section.section-light h1,
.contact-section.section-light h2,
.contact-section.section-light h3,
.contact-section.section-light h4 {
  color: #2f9fb8 !important;
}

.section.section-light p,
.section.section-light .lead,
.section.section-light span,
.contact-section.section-light p,
.contact-section.section-light .lead,
.contact-section.section-light span {
  color: #333;
}

/* Botones en secciones light */
.section.section-light .btn-outline,
.section.section-light .btn-secondary,
.contact-section.section-light .btn-outline,
.contact-section.section-light .btn-secondary {
  border-color: #2f9fb8 !important;
  color: #2f9fb8 !important;
}

.section.section-light .btn-outline:hover,
.section.section-light .btn-secondary:hover,
.contact-section.section-light .btn-outline:hover,
.contact-section.section-light .btn-secondary:hover {
  background: var(--brackground-button) !important;
  color: white !important;
}

/* ===============================
   ESTILOS GENERALES SECTION-LIGHT
================================= */

/* Fondo uniforme */
.section-light,
.services-section.section-light,
.industrial-section.section-light,
.about.section-light,
.partners.section-light {
  background: #f8f9fa !important;
}

/* Eliminar pseudo-elementos de fondo */
.section-light::before,
.services-section.section-light::before,
.industrial-section.section-light::before,
.about.section-light::before,
.partners.section-light::before {
  display: none !important;
}

/* Tarjetas/Cards generales */
.section-light .service-content,
.section-light .industrial-card,
.section-light .mv-card,
.section-light .swiper-slide img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.section-light .service-card:hover .service-content,
.section-light .industrial-card:hover,
.section-light .mv-card:hover,
.section-light .swiper-slide img:hover {
  box-shadow: 0 4px 16px rgba(47, 159, 184, 0.15) !important;
}

/* Imágenes */
.section-light .service-image {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Iconos */
.section-light .service-icon,
.section-light .mv-icon-circle {
  box-shadow: 0 4px 12px rgba(47, 159, 184, 0.2) !important;
}

/* Botones y filtros */
.section-light .filter-btn:hover,
.section-light .filter-btn.active,
.section-light #toggleCards:hover {
  box-shadow: 0 2px 8px rgba(47, 159, 184, 0.25) !important;
}

/* Text shadows */
.section-light h1,
.section-light h2,
.section-light .services-title {
  text-shadow: none !important;
}


/* Section badge en secciones light */
.section.section-light .section-badge,
.contact-section.section-light .section-badge {
  background: rgba(47, 159, 184, 0.1) !important;
  color: #2f9fb8 !important;
}

/* Stats en secciones light */
.section.section-light .stat-number,
.section.section-light .stat-label,
.section.section-light .feature-text h4,
.section.section-light .feature-text p {
  color: #222 !important;
}

.section.section-light .stat-number {
  color: #2f9fb8 !important;
}

.section.section-light .stats-grid {
  background: #f8f9fa !important;
}

.section.section-light .feature-icon {
  background: rgba(47, 159, 184, 0.1) !important;
}


  /*************************/
/*     02. Preloader     */
/*************************/
.spinner-wrapper {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		135deg,
		#020c19,
		#0c1623
	);
}

.spinner {
	position: absolute;
	top: 50%; /* centers the loading animation vertically one the screen */
	left: 50%; /* centers the loading animation horizontally one the screen */
	width: 3.75rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */
	text-align: center;
}

.spinner > div {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	background: var(--accent-color);
	box-shadow: 0 0 10px rgba(47, 159, 184, 0.7);
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% {
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}