/* ==========================================================================
   SSA DURANGO - Servicios, Soluciones y Automatización
   Nueva Paleta de Colores Clara (Gris Cemento, Azul Oscuro, Azul Rey/Cielo y Naranja)
   ========================================================================== */

/* Variables del Sistema de Diseño Claro */
:root {
  /* Paleta Solicitada por el Usuario */
  --color-bg-cement: #EEF2F6;          /* Gris cemento claro de fondo general */
  --color-bg-cement-dark: #E2E8F0;     /* Gris cemento intermedio para contrastes */
  --color-card-white: #FFFFFF;         /* Blanco puro para tarjetas */
  --color-text-dark-blue: #0B2545;     /* Azul oscuro para títulos principales */
  --color-text-dark-gray: #475569;     /* Gris oscuro para subtítulos y párrafos */
  --color-text-muted: #64748B;         /* Gris slate para textos secundarios */
  
  --color-primary-blue: #0066FF;       /* Azul Rey vibrante */
  --color-royal-blue: #1D4ED8;         /* Azul Rey profundo */
  --color-sky-blue: #0284C7;           /* Azul Cielo para acentos y tarjetas */
  --color-sky-blue-light: #E0F2FE;     /* Azul Cielo suave de fondo */
  --color-sky-blue-subtle: #F0F7FF;    /* Azul Cielo ultraclaro */
  
  --color-accent-orange: #FF6600;      /* Anaranjado vibrante para botones y CTA */
  --color-accent-orange-hover: #E65C00;/* Anaranjado hover */
  --color-accent-yellow: #F59E0B;      /* Amarillo/Ámbar para iluminación */
  
  --color-border-light: #CBD5E1;       /* Bordes sutiles claros */
  --color-border-blue: #93C5FD;        /* Bordes azul cielo */

  /* Fuentes */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Fondos Reemplazables */
  --bg-hero-1: url('../images/backgrounds/bg-hero-slide-1.jpg');
  --bg-hero-2: url('../images/backgrounds/bg-hero-slide-2.jpg');
  --bg-hero-3: url('../images/backgrounds/bg-hero-slide-3.jpg');
  --bg-hero-4: url('../images/backgrounds/bg-hero-slide-4.jpg');
  --bg-hero-5: url('../images/backgrounds/bg-hero-slide-5.jpg');
  --bg-hero-6: url('../images/backgrounds/bg-hero-slide-6.jpg');
  --bg-services: url('../images/backgrounds/bg-servicios.jpg');
  --bg-premium-celosias: url('../images/backgrounds/bg-premium-celosias.jpg');
  --bg-smart-locks: url('../images/backgrounds/bg-smart-locks.jpg');
  --bg-gate-motors: url('../images/backgrounds/bg-gate-motors.jpg');
  --bg-fraccionamientos: url('../images/backgrounds/bg-fraccionamientos.jpg');
  --bg-climas: url('../images/backgrounds/bg-smart-locks.jpg');
  --bg-mantenimiento: url('../images/backgrounds/bg-mantenimiento.jpg');
  --bg-red-aliados: url('../images/backgrounds/bg-herrero.jpg');
  --bg-herrero: url('../images/backgrounds/bg-herrero.jpg');
  --bg-led-lighting: url('../images/backgrounds/bg-led-lighting.jpg');
  --bg-proceso: url('../images/backgrounds/bg-proceso.jpg');
  --bg-quote-cta: url('../images/backgrounds/bg-quote-cta.jpg');
  --bg-testimonios: url('../images/backgrounds/bg-testimonios.jpg');
  --bg-contacto: url('../images/backgrounds/bg-contacto.jpg');
  --bg-footer: url('../images/backgrounds/bg-footer.jpg');
}

/* Tipografía y Base */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Compensación de Scroll para la Barra Fija (Scroll-Margin-Top exacto bajo el navbar para encuadrar contenidos) */
#inicio,
#servicios,
#portones,
#premium-celosias,
#fraccionamientos,
#cerraduras,
#control-acceso,
#climas,
#mantenimiento,
#red-aliados,
#acerca-ssa,
#contacto,
.scroll-mt-header {
  scroll-margin-top: 104px;
}

#cotizador {
  scroll-margin-top: 75px;
}

@media (max-width: 639.98px) {
  #inicio,
  #servicios,
  #portones,
  #premium-celosias,
  #fraccionamientos,
  #cerraduras,
  #control-acceso,
  #climas,
  #mantenimiento,
  #red-aliados,
  #acerca-ssa,
  #contacto,
  .scroll-mt-header {
    scroll-margin-top: 88px;
  }

  #cotizador {
    scroll-margin-top: 65px;
  }
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-cement);
  color: var(--color-text-dark-gray);
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  color: var(--color-text-dark-blue);
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #E2E8F0;
}
::-webkit-scrollbar-thumb {
  background: #94A3B8;
  border-radius: 4px;
  border: 2px solid #E2E8F0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-blue);
}

/* ==========================================================================
   BARRIDO LENTO (LASER SWEEP BEAM)
   ========================================================================== */
#sweep-laser {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0066FF, #FF6600, #0284C7, #0066FF);
  background-size: 200% 100%;
  box-shadow: 0 0 16px rgba(0, 102, 255, 0.8), 0 0 8px rgba(255, 102, 0, 0.6);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: width 1.1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

#sweep-laser.active {
  opacity: 1;
  width: 100%;
  animation: laserGlow 1.1s linear infinite;
}

@keyframes laserGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Resplandor de sección al llegar por navegación */
.target-section-sweep {
  animation: sectionSweepPulse 1.2s ease-out;
}

@keyframes sectionSweepPulse {
  0% {
    box-shadow: inset 0 0 0 3px rgba(0, 102, 255, 0.5), 0 0 30px rgba(0, 102, 255, 0.2);
  }
  100% {
    box-shadow: inset 0 0 0 0px transparent, 0 0 0px transparent;
  }
}

/* ==========================================================================
   FONDOS INMÓVILES (PARALLAX & FIXED BACKGROUNDS CON DEGRADADOS CLAROS/AZULES)
   ========================================================================== */
.fixed-bg-section {
  position: relative;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* Carrusel Hero: Filtro con degradado azul al 30% de opacidad */
.bg-slide-1 {
  background-image: linear-gradient(to right, rgba(11, 37, 69, 0.68) 0%, rgba(11, 37, 69, 0.52) 50%, rgba(0, 70, 180, 0.32) 100%), var(--bg-hero-1);
}
.bg-slide-2 {
  background-image: linear-gradient(to right, rgba(11, 37, 69, 0.68) 0%, rgba(11, 37, 69, 0.52) 50%, rgba(0, 70, 180, 0.32) 100%), var(--bg-hero-2);
}
.bg-slide-3 {
  background-image: linear-gradient(to right, rgba(11, 37, 69, 0.68) 0%, rgba(11, 37, 69, 0.52) 50%, rgba(0, 70, 180, 0.32) 100%), var(--bg-hero-3);
}
.bg-slide-4 {
  background-image: linear-gradient(to right, rgba(11, 37, 69, 0.68) 0%, rgba(11, 37, 69, 0.52) 50%, rgba(0, 70, 180, 0.32) 100%), var(--bg-hero-4);
}
.bg-slide-5 {
  background-image: linear-gradient(to right, rgba(11, 37, 69, 0.70) 0%, rgba(11, 37, 69, 0.54) 50%, rgba(2, 100, 180, 0.35) 100%), var(--bg-hero-5);
}
.bg-slide-6 {
  background-image: linear-gradient(to right, rgba(11, 37, 69, 0.72) 0%, rgba(11, 37, 69, 0.56) 50%, rgba(0, 70, 180, 0.35) 100%), var(--bg-hero-6);
}


.hero-desc-shadow {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.85), 0 4px 18px rgba(0, 0, 0, 0.7) !important;
}

.services-dropdown-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Repliegue forzado e inmediato del dropdown de servicios tras hacer clic */
.dropdown-force-closed,
.group\/dropdown.dropdown-force-closed #services-dropdown-panel,
#services-dropdown-panel.dropdown-force-closed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease !important;
}

.group\/dropdown.dropdown-force-closed #services-menu-btn i[data-lucide="chevron-down"],
.group\/dropdown.dropdown-force-closed #services-menu-btn svg.lucide-chevron-down {
  transform: rotate(0deg) !important;
}
.hero-text-shadow {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 4px 28px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 1);
}

#inicio {
  position: relative;
  z-index: 10;
}

#servicios {
  overflow: visible !important;
  position: relative;
  z-index: 20;
}

/* Cuadro de Indicadores Superpuesto a Caballo (50% sobre el Slider, 50% sobre Servicios) */
.hero-trust-overlap-card {
  position: relative;
  z-index: 30;
  top: -55px; /* Mitad exacta de la tarjeta superpuesta sobre el fondo de la diapositiva del slider */
  margin-bottom: -35px; /* Compensa el flujo visual sin alterar el inicio de la sección de servicios */
}

@media (max-width: 639.98px) {
  .hero-trust-overlap-card {
    top: -65px;
    margin-bottom: -45px;
  }
}

@media (min-width: 1024px) {
  .hero-trust-overlap-card {
    top: -55px;
    margin-bottom: -35px;
  }
}

.bg-section-services {
  background-image: var(--bg-services);
  background-size: cover;
  background-position: center;
}

.bg-section-premium {
  background-image: var(--bg-premium-celosias);
  background-size: cover;
  background-position: center;
}

.bg-section-smart-locks,
.bg-section-climas {
  background-image: linear-gradient(135deg, rgba(11, 37, 69, 0.72) 0%, rgba(11, 37, 69, 0.68) 50%, rgba(11, 37, 69, 0.72) 100%), var(--bg-smart-locks);
  background-size: cover;
  background-position: center;
}

.bg-section-gate-motors {
  background-image: linear-gradient(135deg, rgba(11, 37, 69, 0.72) 0%, rgba(11, 37, 69, 0.68) 50%, rgba(11, 37, 69, 0.72) 100%), var(--bg-gate-motors);
  background-size: cover;
  background-position: center;
}

.bg-section-fraccionamientos {
  background-image: linear-gradient(135deg, rgba(11, 37, 69, 0.72) 0%, rgba(11, 37, 69, 0.68) 50%, rgba(2, 132, 199, 0.68) 100%), var(--bg-fraccionamientos);
  background-size: cover;
  background-position: center;
}

.bg-section-red-aliados {
  background-image: linear-gradient(135deg, rgba(11, 37, 69, 0.72) 0%, rgba(15, 23, 42, 0.68) 50%, rgba(11, 37, 69, 0.72) 100%), var(--bg-red-aliados);
  background-size: cover;
  background-position: center;
}

.bg-section-led-lighting {
  background-image: var(--bg-led-lighting);
}

.bg-section-proceso {
  background-image: var(--bg-proceso);
  background-size: cover;
  background-position: center;
}

.bg-section-quote-cta {
  background-image: var(--bg-quote-cta);
}

.bg-section-testimonios {
  background-image: var(--bg-testimonios);
  background-size: cover;
  background-position: center;
}

.bg-section-contacto {
  background-image: var(--bg-contacto);
  background-size: cover;
  background-position: center;
}

.bg-section-footer {
  background-color: #0B192C;
}

/* ==========================================================================
   TARJETAS Y PANELES MODERNOS (LIGHT TECH GLASS / SHADOWS)
   ========================================================================== */
.light-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 20px -2px rgba(15, 39, 68, 0.06), 0 2px 6px -1px rgba(15, 39, 68, 0.04);
}

.light-card-hover {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.light-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 35px -8px rgba(0, 102, 255, 0.16), 0 6px 15px -2px rgba(0, 102, 255, 0.08);
  border-color: #93C5FD;
}

.glass-nav-light {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(11, 37, 69, 0.08);
  border-bottom: 1px solid #E2E8F0;
  padding: 0 !important;
}

/* Indicador Visual de Estado Activo en Menú Superior (Scrollspy) */
.nav-link-item {
  position: relative;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}



/* Logo Oficial Limpio y Ampliado al Máximo en Header (Sin bloque de fondo) */
.header-logo-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}
.header-logo-container:hover {
  transform: scale(1.04) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-logo-img {
  height: 52px !important;
  max-height: 90% !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 1px 3px rgba(11, 37, 69, 0.12));
  transition: transform 0.3s ease;
}
@media (min-width: 640px) {
  .header-logo-img {
    height: 64px !important;
    max-width: 230px !important;
  }
}
@media (min-width: 1024px) {
  .header-logo-img {
    height: 72px !important;
    max-width: 260px !important;
  }
}

/* Resplandores */
.glow-blue {
  box-shadow: 0 0 25px rgba(0, 102, 255, 0.3);
}
.glow-orange {
  box-shadow: 0 0 25px rgba(255, 102, 0, 0.35);
}

.text-gradient-blue {
  background: linear-gradient(135deg, #0B2545 0%, #0066FF 60%, #0284C7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-orange {
  background: linear-gradient(135deg, #FF6600 0%, #FF8533 50%, #FFA834 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-yellow {
  background: linear-gradient(135deg, #FF6600 0%, #FF9900 50%, #FFB700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Botones de Alta Conversión */
.btn-primary-orange {
  background: linear-gradient(135deg, #FF6600 0%, #FF7A1A 100%);
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(255, 102, 0, 0.28);
  transition: all 0.3s ease;
}
.btn-primary-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 102, 0, 0.4);
  background: linear-gradient(135deg, #FF7A1A 0%, #FFA366 100%);
}

.btn-primary-blue {
  background: linear-gradient(135deg, #0066FF 0%, #1D4ED8 100%);
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.28);
  transition: all 0.3s ease;
}
.btn-primary-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 102, 255, 0.4);
  background: linear-gradient(135deg, #1A75FF 0%, #3B82F6 100%);
}

.btn-secondary-sky {
  background: #E0F2FE;
  color: #0284C7;
  border: 1px solid #BAE6FD;
  transition: all 0.3s ease;
}
.btn-secondary-sky:hover {
  background: #BAE6FD;
  color: #0369A1;
  transform: translateY(-2px);
}

/* Badges */
.tech-badge-light {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
}

.tech-badge-dark {
  background: rgba(0, 102, 255, 0.15);
  border: 1px solid rgba(0, 102, 255, 0.4);
  color: #93C5FD;
}

/* ==========================================================================
   BOTONES FLOTANTES: REPARACIÓN RÁPIDA (IZQ) & WHATSAPP (DER)
   Alineación exacta de altura, dimensiones y posición sincronizada
   ========================================================================== */
.floating-whatsapp,
.floating-repair-btn {
  position: fixed !important;
  bottom: 20px !important;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-whatsapp {
  right: 20px !important;
  left: auto !important;
}

.floating-repair-btn {
  left: 20px !important;
  right: auto !important;
}

@media (min-width: 640px) {
  .floating-whatsapp,
  .floating-repair-btn {
    bottom: 24px !important;
  }
  .floating-whatsapp {
    right: 24px !important;
  }
  .floating-repair-btn {
    left: 24px !important;
  }
}

.floating-whatsapp:hover {
  transform: scale(1.08) translateY(-3px);
}

.floating-repair-btn:hover {
  transform: scale(1.05) translateY(-3px);
}

/* WhatsApp: Botón Circular */
.whatsapp-btn-circle {
  width: 50px !important;
  height: 50px !important;
  border-radius: 9999px !important;
  background: #25D366 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.45), 0 4px 12px -1px rgba(37, 211, 102, 0.5) !important;
  position: relative;
  text-decoration: none;
}

.whatsapp-btn-circle .whatsapp-icon,
.whatsapp-btn-circle svg {
  width: 26px !important;
  height: 26px !important;
}

@media (min-width: 640px) {
  .whatsapp-btn-circle {
    width: 58px !important;
    height: 58px !important;
  }
  .whatsapp-btn-circle .whatsapp-icon,
  .whatsapp-btn-circle svg {
    width: 32px !important;
    height: 32px !important;
  }
}

.whatsapp-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.6;
  animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Reparación Rápida: Estilo Pastilla (Pill) */
.repair-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(135deg, #FF6600 0%, #E65C00 100%) !important;
  color: #FFFFFF !important;
  height: 50px !important;
  padding: 0 1.15rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.5), 0 4px 12px -1px rgba(255, 102, 0, 0.55);
  text-decoration: none;
  position: relative;
  overflow: visible;
  cursor: pointer;
  box-sizing: border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: width 0.35s cubic-bezier(0.34, 1.25, 0.64, 1), padding 0.35s ease, gap 0.35s ease, transform 0.25s ease, background 0.25s ease;
}

.repair-btn-pill .repair-icon,
.repair-btn-pill i {
  width: 20px !important;
  height: 20px !important;
  color: #FFFFFF !important;
}

@media (min-width: 640px) {
  .repair-btn-pill {
    height: 58px !important;
    padding: 0 1.25rem;
  }
  .repair-btn-pill .repair-icon,
  .repair-btn-pill i {
    width: 22px !important;
    height: 22px !important;
  }
}

.repair-btn-pill:hover {
  background: linear-gradient(135deg, #FF7A1A 0%, #FF6600 100%) !important;
  box-shadow: 0 14px 28px -3px rgba(0, 0, 0, 0.6), 0 6px 16px -1px rgba(255, 102, 0, 0.65);
}

.repair-text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
  transition: max-width 0.35s ease, opacity 0.25s ease;
  overflow: hidden;
}

.repair-btn-pill .repair-title {
  color: #FFFFFF !important;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.1;
}

.repair-btn-pill .repair-sub {
  color: #FFFFFF !important;
  font-size: 13.5px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  line-height: 1.15;
}

.repair-pulse {
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background: #FF6600;
  opacity: 0.45;
  animation: pulse-ring 2.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  pointer-events: none;
  z-index: -1;
}

/* Estado Colapsado a solo circulito con icono de llave al pasar de servicios */
.floating-repair-btn.is-collapsed .repair-btn-pill {
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  gap: 0 !important;
}

.floating-repair-btn.is-collapsed .repair-text-wrap {
  max-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.floating-repair-btn.is-collapsed .repair-pulse {
  border-radius: 50% !important;
}

.floating-repair-btn.is-collapsed .repair-btn-pill .repair-icon,
.floating-repair-btn.is-collapsed .repair-btn-pill i,
.floating-repair-btn.is-collapsed .repair-btn-pill svg {
  width: 22px !important;
  height: 22px !important;
  transition: transform 0.3s ease;
}

@media (min-width: 640px) {
  .floating-repair-btn.is-collapsed .repair-btn-pill {
    width: 58px !important;
    height: 58px !important;
  }
  .floating-repair-btn.is-collapsed .repair-btn-pill .repair-icon,
  .floating-repair-btn.is-collapsed .repair-btn-pill i,
  .floating-repair-btn.is-collapsed .repair-btn-pill svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Al acercar el cursor (hover) en desktop, se despliega suavemente */
@media (min-width: 640px) {
  .floating-repair-btn.is-collapsed:hover .repair-btn-pill {
    width: auto !important;
    height: 58px !important;
    padding: 0 1.25rem !important;
    gap: 0.65rem !important;
    justify-content: flex-start !important;
  }

  .floating-repair-btn.is-collapsed:hover .repair-text-wrap {
    max-width: 260px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .floating-repair-btn.is-collapsed:hover .repair-btn-pill .repair-icon,
  .floating-repair-btn.is-collapsed:hover .repair-btn-pill i {
    transform: rotate(-15deg) scale(1.1);
  }
}

/* En Celular (< 640px) */
@media (max-width: 639.98px) {
  .repair-btn-pill {
    padding: 0 0.85rem;
    gap: 0.45rem;
  }
  .repair-btn-pill .repair-desktop-text {
    display: none !important;
  }
  .repair-btn-pill .repair-mobile-text {
    display: inline-block !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
}
@media (min-width: 640px) {
  .repair-btn-pill .repair-mobile-text {
    display: none !important;
  }
  .repair-btn-pill .repair-desktop-text {
    display: block !important;
  }
}

/* ==========================================================================
   ANIMACIONES DE SCROLL Y REVELACIÓN
   ========================================================================== */
.reveal-init {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Swiper Personalización */
.swiper-button-next, .swiper-button-prev {
  color: #FFFFFF !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(11, 37, 69, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  box-shadow: 0 0 20px rgba(0, 102, 255, 0.5);
}
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 16px !important;
  font-weight: bold;
}
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}
.swiper-pagination-bullet-active {
  width: 28px !important;
  border-radius: 5px !important;
  background: var(--color-accent-orange) !important;
  box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
}

@media (max-height: 520px) {
  .hero-swiper .swiper-slide {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  #mobile-menu {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* ==========================================================================
   CARRUSEL DE SERVICIOS EN MÓVIL (< 768px) & GRID EN DESKTOP (>= 768px)
   ========================================================================== */
.services-swiper {
  width: 100%;
}

@media (max-width: 767.98px) {
  .services-swiper {
    overflow: hidden !important;
    padding-bottom: 0.5rem;
  }
  .services-swiper .swiper-slide {
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
  .services-swiper .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .services-swiper-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #0B2545 !important;
    opacity: 0.3 !important;
    border-radius: 9999px !important;
    margin: 0 4px !important;
    transition: all 0.3s ease !important;
  }
  .services-swiper-pagination .swiper-pagination-bullet-active {
    width: 24px !important;
    background: var(--color-accent-orange) !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.45) !important;
  }
}

@media (min-width: 768px) {
  .services-swiper {
    overflow: visible !important;
  }
  .services-swiper .swiper-wrapper.services-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  @media (min-width: 1024px) {
    .services-swiper .swiper-wrapper.services-grid-wrapper {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 1.25rem !important;
    }
  }
  .services-swiper .swiper-slide {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   CONTROLES Y BOTONES SELECTORES DE SLIDES DEL HERO (PESTAÑAS)
   Elevados sobre el banner hero, con panel semi-transparente oscuro,
   alto contraste sobre cualquier fotografía y alineación exacta al contenedor.
   ========================================================================== */
.hero-controls-bar {
  position: absolute;
  bottom: 104px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 35;
  pointer-events: none;
  padding: 0;
  margin: 0;
}

.hero-controls-bar > * {
  pointer-events: auto;
}

@media (max-width: 639.98px) {
  .hero-controls-bar {
    bottom: 78px;
    padding: 0;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

@media (min-width: 1024px) {
  .hero-controls-bar {
    bottom: 112px;
    padding: 0;
  }
}

/* Botones de navegación flotando directamente sobre el slide sin bloque/badge de fondo azul */
.hero-tabs-glass-panel,
.hero-nav-glass-panel {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.hero-tab-btn {
  background-color: rgba(11, 37, 69, 0.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  font-weight: 700;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0;
  padding: 0.35rem 0.5rem !important;
  font-size: 11px !important;
  line-height: 1.1;
}

@media (min-width: 1280px) {
  .hero-tab-btn {
    padding: 0.4rem 0.75rem !important;
    font-size: 12px !important;
  }
}

.hero-tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-1px);
}

.hero-tab-btn.active {
  background: linear-gradient(135deg, #FF6600 0%, #EA580C 100%) !important;
  border-color: #FFA366 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(255, 102, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.hero-tab-btn.active i,
.hero-tab-btn.active svg,
.hero-tab-btn.active span {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.hero-tab-btn.active svg path,
.hero-tab-btn.active svg circle,
.hero-tab-btn.active svg line,
.hero-tab-btn.active svg polyline,
.hero-tab-btn.active svg rect {
  stroke: #FFFFFF !important;
}

/* ==========================================================================
   CARRUSELES MÓVILES (< 768px) & GRIDS DESKTOP (>= 768px)
   (Fraccionamientos, Climas, Mantenimiento, Proceso SSA, Testimonios)
   ========================================================================== */
.fraccionamientos-swiper,
.climas-swiper,
.mantenimiento-swiper,
.proceso-swiper,
.testimonios-swiper {
  width: 100%;
}

@media (max-width: 767.98px) {
  .fraccionamientos-swiper,
  .climas-swiper,
  .mantenimiento-swiper,
  .proceso-swiper,
  .testimonios-swiper {
    overflow: hidden !important;
    padding-bottom: 0.5rem;
  }
  .fraccionamientos-swiper .swiper-slide,
  .climas-swiper .swiper-slide,
  .mantenimiento-swiper .swiper-slide,
  .proceso-swiper .swiper-slide,
  .testimonios-swiper .swiper-slide {
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
  .fraccionamientos-swiper .reveal-scale,
  .climas-swiper .reveal-scale,
  .mantenimiento-swiper .reveal-scale,
  .proceso-swiper .reveal-scale,
  .testimonios-swiper .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
  .fraccionamientos-swiper-pagination .swiper-pagination-bullet,
  .climas-swiper-pagination .swiper-pagination-bullet,
  .mantenimiento-swiper-pagination .swiper-pagination-bullet,
  .proceso-swiper-pagination .swiper-pagination-bullet,
  .testimonios-swiper-pagination .swiper-pagination-bullet,
  .checador-swiper-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #CBD5E1 !important;
    opacity: 0.5 !important;
    border-radius: 9999px !important;
    margin: 0 4px !important;
    transition: all 0.3s ease !important;
  }
  .fraccionamientos-swiper-pagination .swiper-pagination-bullet-active,
  .climas-swiper-pagination .swiper-pagination-bullet-active,
  .mantenimiento-swiper-pagination .swiper-pagination-bullet-active,
  .proceso-swiper-pagination .swiper-pagination-bullet-active,
  .testimonios-swiper-pagination .swiper-pagination-bullet-active,
  .checador-swiper-pagination .swiper-pagination-bullet-active {
    width: 24px !important;
    background: var(--color-accent-orange) !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.45) !important;
  }
}

@media (min-width: 768px) {
  .fraccionamientos-swiper,
  .climas-swiper,
  .mantenimiento-swiper,
  .proceso-swiper,
  .testimonios-swiper,
  .checador-swiper {
    overflow: visible !important;
  }
  .fraccionamientos-swiper .swiper-wrapper.fraccionamientos-grid-wrapper,
  .mantenimiento-swiper .swiper-wrapper.mantenimiento-grid-wrapper,
  .proceso-swiper .swiper-wrapper.proceso-grid-wrapper,
  .checador-swiper .swiper-wrapper.checador-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .climas-swiper .swiper-wrapper.climas-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .testimonios-swiper .swiper-wrapper.testimonios-grid-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  @media (min-width: 1024px) {
    .fraccionamientos-swiper .swiper-wrapper.fraccionamientos-grid-wrapper,
    .mantenimiento-swiper .swiper-wrapper.mantenimiento-grid-wrapper,
    .proceso-swiper .swiper-wrapper.proceso-grid-wrapper,
    .checador-swiper .swiper-wrapper.checador-grid-wrapper {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 1.5rem !important;
    }
    .climas-swiper .swiper-wrapper.climas-grid-wrapper {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 1rem !important;
    }
    .testimonios-swiper .swiper-wrapper.testimonios-grid-wrapper {
      gap: 2rem !important;
    }
  }
  .fraccionamientos-swiper .swiper-slide,
  .climas-swiper .swiper-slide,
  .mantenimiento-swiper .swiper-slide,
  .proceso-swiper .swiper-slide,
  .testimonios-swiper .swiper-slide,
  .checador-swiper .swiper-slide {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   COTIZADOR COMPACTO & CARGA MULTI-ARCHIVO (HASTA 4 FOTOS)
   ========================================================================== */
.quote-card-compact {
  padding: 1.5rem 1.25rem !important;
}
@media (min-width: 640px) {
  .quote-card-compact {
    padding: 2rem 2.5rem !important;
  }
}

.input-compact {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  font-size: 0.8125rem !important;
}
@media (min-width: 640px) {
  .input-compact {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    font-size: 0.875rem !important;
  }
}

/* ==========================================================================
   SUBSECCIÓN COMERCIAL EN CERRADURAS / CONTROL DE ACCESO
   ========================================================================== */
.commercial-access-block {
  background: linear-gradient(135deg, rgba(11, 37, 69, 0.95) 0%, rgba(15, 23, 42, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 36px -8px rgba(11, 37, 69, 0.35);
}





/* ==========================================================================
   ANIMACIÓN DEL MENÚ DE NAVEGACIÓN (SUBRAYADO ELEGANTE, SIN FONDO ENCENDIDO)
   ========================================================================== */
.nav-link-item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.25s ease;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
}

/* Subrayado animado centrado estrictamente dentro de cada botón individual */
.nav-link-item::after {
  content: '';
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  width: 0;
  height: 3px !important;
  background: linear-gradient(90deg, #FF6600 0%, #FFA366 100%) !important;
  border-radius: 9999px !important;
  transition: width 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) !important;
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.6) !important;
  pointer-events: none;
}

/* Hover: solo texto naranja y subrayado centrado, sin fondo */
.nav-link-item:hover {
  color: #FF6600 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-link-item:hover::after {
  width: 80% !important;
}

/* Active Nav por ScrollSpy: solo subrayado y texto naranja */
.nav-link-item.active-nav {
  color: #FF6600 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-link-item.active-nav::after {
  width: 85% !important;
}

/* Botón de Servicios Dropdown: solo texto y subrayado */
#services-menu-btn {
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#services-menu-btn:hover {
  color: #FF6600 !important;
  background: transparent !important;
  border-color: transparent !important;
}

#services-menu-btn.active-nav {
  color: #FF6600 !important;
  background: transparent !important;
  border-color: transparent !important;
}

#services-menu-btn.active-nav::after {
  width: 85% !important;
}

/* ==========================================================================
   CONTROL DE MENÚ MÓVIL (CERO DESPLAZAMIENTO / LAYOUT SHIFT DE PÁGINA)
   ========================================================================== */
body.mobile-menu-active {
  overflow: hidden !important;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

#mobile-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-height: calc(100vh - 85px) !important;
  max-height: calc(100dvh - 85px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain !important;
  box-shadow: 0 20px 30px -10px rgba(11, 37, 69, 0.25), 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}