:root {
     --primary: #002b5c;
     --primary-dark: #00152e;
     --accent: #c5a059;
     --white: #ffffff;
     --text-main: #1a202c;
     --text-gray: #4a5568;
     --bg-tech: #f1f5f9;
     --transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Montserrat', sans-serif;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     background-color: var(--white);
     color: var(--text-main);
     overflow-x: hidden;
 }

 /* =========================================
   BARRA DE NAVEGACIÓN PRINCIPAL (CONTRASTE BLANCO)
   ========================================= */
 .header-desktop {
     position: fixed;
     top: 48px;
     /* Espacio para la Top Bar */
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 15px 40px;
     z-index: 1000;

     /* FONDO BLANCO PURO para romper el exceso de azul */
     background: #ffffff;

     /* Línea dorada en la base para mantener el toque premium */
     border-bottom: 2px solid var(--accent);

     /* Sombra más suave para fondo blanco */
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

     transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .header-desktop.scrolled {
     top: 0;
     padding: 12px 40px;
     background: rgba(255, 255, 255, 0.98);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 /* =========================================
   ENLACES (Letra oscura sobre fondo blanco)
   ========================================= */
 .nav-menu {
     display: flex;
     list-style: none;
     gap: 35px;
     margin: 0;
     padding: 0;
 }

 .nav-menu a {
     text-decoration: none;
     /* Cambiamos la letra a azul oscuro corporativo */
     color: #041E3A;
     font-size: 0.85rem;
     font-weight: 800;
     /* Un poco más gruesa para que lea perfecto sobre blanco */
     text-transform: uppercase;
     letter-spacing: 1.5px;
     position: relative;
     padding: 5px 0;
     transition: all 0.3s ease;
 }

 /* Línea dorada animada debajo de cada botón */
 .nav-menu a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 3px;
     /* Línea un poquito más gruesa para que destaque más */
     bottom: -2px;
     left: 50%;
     background-color: var(--accent);
     transition: all 0.3s ease;
     transform: translateX(-50%);
 }

 .nav-menu a:hover {
     color: var(--accent);
 }

 .nav-menu a:hover::after {
     width: 100%;
 }
 
/* Estilo para el enlace de la página actual */
.nav-menu li a.active-link {
    color: #C5A059 !important; /* El color dorado de tu logo */
    border-bottom: 2px solid #C5A059; /* Una rayita abajo elegante */
    font-weight: 800; /* Un poco más negrita */
}

/* =========================================
   FORZADO DE DROPDOWN ULTRA-SUAVE (TRANSPARENTE / GLASS)
   ========================================= */
.nav-menu > li {
    position: relative !important;
    list-style: none !important;
}

/* Contenedor del submenú con efecto cristal semitransparente y suavizado premium */
.nav-menu > li .dropdown-menu {
    opacity: 0 !important;                  /* Invisible por defecto */
    visibility: hidden !important;          /* Desactivado para interacciones */
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    
    /* Animación fluida: empieza ligeramente más abajo (4px) */
    transform: translateX(-50%) translateY(4px) !important; 
    
    /* EFECTO CRISTAL PREMIUM (85% blanco y desenfoque sutil) */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08) !important;
    min-width: 220px !important;
    z-index: 9999 !important;
    border-radius: 4px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style-type: none !important;
    list-style: none !important;
    border-top: 3px solid #c5a059 !important;
    
    /* Transición ultra-suave y amortiguada (ease-out) */
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important;
    transition-delay: 0.35s !important;    /* Margen de espera idóneo para evitar cierres erráticos */
}

/* Puente invisible para mantener el cursor enlazado */
.nav-menu > li .dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    width: 100% !important;
    height: 20px !important;
    display: block !important;
}

/* Limpieza absoluta de viñetas en los elementos internos */
.dropdown-menu li {
    width: 100% !important;
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Enlaces internos del submenú */
.dropdown-menu li a {
    color: #041E3A !important;
    padding: 12px 20px !important;
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    transition: background 0.3s ease, color 0.3s ease !important;
    text-align: left !important;
}

/* Desactivar la línea dorada inferior animada dentro del submenú */
.dropdown-menu li a::after {
    display: none !important;
    content: none !important;
}

/* Comportamiento Hover en las opciones del cristal */
.dropdown-menu li a:hover {
    background-color: rgba(4, 30, 58, 0.05) !important; /* Capa azulada sutil y transparente */
    color: #c5a059 !important;
}

/* Entrada instantánea y limpia al posar el cursor */
.nav-menu > li:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important; /* Desplazamiento fluido hacia arriba */
    transition-delay: 0s !important;
}

/* Pequeño ajuste para el icono de flecha */
.nav-menu li a i {
    margin-left: 5px !important;
    font-size: 0.8em !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-block !important;
}

/* Rotación elegante de la flechita */
.nav-menu li:hover a i {
    transform: rotate(180deg) !important;
}

 /* =========================================
            BARRA MÓVIL (ESTILO RELLENO)
            ========================================= */
 .mobile-header-premium {
     display: none;
     width: 100%;
     background: white;
     z-index: 1100;
     position: relative;
 }

 .mobile-branding-top {
     display: flex;
     align-items: center;
     padding: 15px 20px;
     gap: 15px;
     border-bottom: 3px solid var(--accent);
 }

 .mobile-logo-img {
     height: 55px;
     width: auto;
 }

 .mobile-text-branding h1 {
     font-family: 'Cinzel', serif;
     font-size: 1.2rem;
     color: var(--primary);
     line-height: 1;
 }

 .mobile-text-branding p {
     font-size: 0.55rem;
     font-weight: 800;
     color: var(--text-gray);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .mobile-menu-bar {
     background: var(--primary);
     padding: 12px 20px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
 }

 /* Botón de las 3 rayitas corregido y más grande */
 .mobile-toggle-btn {
     background: none;
     border: none;
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
 }

 .mobile-toggle-btn i {
     font-size: 1.8rem;
     /* Aquí controlas el tamaño de las rayitas */
     transition: var(--transition);
 }

 .mobile-toggle-btn:active i {
     transform: scale(0.9);
     color: var(--accent);
 }
 
 /* =========================================
    AJUSTE TAMAÑO LOGO MÓVIL
    ========================================= */
.mobile-logo-img {
    height: 35px; /* Reducimos la altura (antes era 50px). Cambia este número si lo quieres más chico (ej. 30px) o más grande (ej. 40px) */
    width: auto;
    object-fit: contain; /* Protege la imagen para que no se deforme ni se aplaste */
}

/* Opcional: Si quieres centrar mejor el logo en el espacio ahora que es más pequeño */
.mobile-branding-top {
    display: flex;
    align-items: center;
    padding: 10px 20px; /* Reduje un poco el relleno superior e inferior para que no quede tanto espacio vacío */
    gap: 15px;
    border-bottom: 3px solid var(--accent);
}


 /* =========================================
   TOP BAR DESKTOP (LIMPIA Y ORDENADA)
   ========================================= */
 .top-bar-desktop {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     background: #041E3A;
     /* Azul corporativo profundo */
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 50px;
     /* Más espacio arriba y abajo para que respire */
     font-size: 0.75rem;
     font-weight: 500;
     z-index: 1001;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .top-bar-left {
     display: flex;
     align-items: center;
 }

 /* El logo con un fondito claro para que resalte sobre el azul */
 .top-bar-left img {
     background: rgba(255, 255, 255, 0.85);
     padding: 4px 10px;
     border-radius: 6px;
     height: 28px !important;
     width: auto;
     margin-right: 20px;
 }

 /* Agregamos una línea separadora entre la dirección y los servicios */
 .top-bar-left a {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #cbd5e1;
     text-decoration: none;
     border-right: 1px solid rgba(255, 255, 255, 0.2);
     /* La rayita divisoria */
     padding-right: 20px;
     /* Espacio antes de la rayita */
     margin-right: 20px;
     /* Espacio después de la rayita */
     transition: 0.3s;
     letter-spacing: 0.5px;
 }

 /* Al último elemento de la izquierda (los servicios) le quitamos la rayita */
 .top-bar-left a:last-child {
     border-right: none;
     padding-right: 0;
     margin-right: 0;
 }

 .top-bar-desktop a i {
     color: var(--accent);
     /* Iconos dorados */
     font-size: 0.95rem;
 }

 .top-bar-desktop a:hover {
     color: white;
     /* Brilla al pasar el mouse */
 }

 /* =========================================
   LADO DERECHO (WSP Y REDES)
   ========================================= */
 .top-bar-right {
     display: flex;
     align-items: center;
 }

 /* Botón de WhatsApp más limpio y encapsulado */
 .top-whatsapp {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 700;
     color: white !important;
     background: rgba(255, 255, 255, 0.1);
     padding: 6px 20px;
     border-radius: 20px;
     text-decoration: none;
     transition: 0.3s;
 }

 .top-whatsapp:hover {
     background: var(--accent) !important;
     color: #002347 !important;
 }

 .top-whatsapp:hover i {
     color: #002347 !important;
 }

 /* Separador entre Wsp e Instagram */
 .top-socials {
     display: flex;
     align-items: center;
     padding-left: 20px;
     margin-left: 20px;
     border-left: 1px solid rgba(255, 255, 255, 0.2);
 }

 .top-socials a {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #cbd5e1;
     text-decoration: none;
     transition: 0.3s;
 }

 .top-socials a:hover {
     color: white;
 }

 /* Ocultar en móviles */
 @media (max-width: 1024px) {
     .top-bar-desktop {
         display: none !important;
     }
 }

/* =========================================
   SIDEBAR DERECHA (DASHBOARD EFECTO CRISTAL)
   ========================================= */

 .sidebar-mobile {
     position: fixed;
     top: 0;
     right: 0; /* Posición base */
     width: 85%; /* Ocupa el 85% del ancho en móviles */
     max-width: 320px; /* Pero nunca más de 320px en tablets */
     height: 100vh;
     height: 100dvh; /* Altura dinámica para navegadores móviles */
     
     /* AJUSTE DE TRANSPARENCIA A 0.65 (Efecto Cristal) */
     background: rgba(0, 63, 122, 0.65); 
     
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border-left: 1px solid rgba(255, 255, 255, 0.1);
     z-index: 2100;
     
     /* Ocultar la barra fuera de la pantalla de forma limpia */
     transform: translateX(105%); 
     transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
     
     display: flex;
     flex-direction: column;
     box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
     box-sizing: border-box;
 }

 /* Activación de la barra */
 .sidebar-mobile.active {
     transform: translateX(0);
 }

 /* Fondo oscuro (Overlay) */
 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     z-index: 2000;
     display: none;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .overlay.active {
     display: block;
     opacity: 1;
 }

 /* Cabecera del Menú */
 .sidebar-header {
     padding: 40px 20px 20px;
     display: flex;
     justify-content: flex-end; /* Alinea la X a la derecha */
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .close-sidebar-btn {
     background: rgba(255, 255, 255, 0.1);
     border: none;
     color: white;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     cursor: pointer;
     transition: 0.3s;
 }

 .close-sidebar-btn:hover {
     background: var(--accent);
     color: var(--primary-dark);
     transform: rotate(90deg);
 }

 /* Contenido Principal */
 .sidebar-content {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
     /* Suaviza el scroll en iOS */
     -webkit-overflow-scrolling: touch; 
 }

 .side-cat {
     font-size: 0.7rem;
     font-weight: 800;
     color: var(--accent);
     margin: 20px 0 10px 5px;
     text-transform: uppercase;
     letter-spacing: 2px;
 }

 .side-item {
     display: flex;
     align-items: center;
     padding: 14px 15px;
     color: #ffffff;
     text-decoration: none;
     border-radius: 12px;
     margin-bottom: 5px;
     font-weight: 600;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     box-sizing: border-box;
 }

 .side-item i {
     width: 25px;
     margin-right: 12px;
     font-size: 1.1rem;
     color: var(--accent);
 }

 .side-item:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateX(5px);
 }

 /* Item Activo */
 .side-item.active {
     background: var(--accent);
     color: var(--primary-dark);
 }

 .side-item.active i {
     color: var(--primary-dark);
 }

 /* Botón Urgencias (Portal Clientes) */
 .side-item.portal-btn {
     margin-top: 20px;
     background: linear-gradient(135deg, var(--accent) 0%, #a6823e 100%);
     color: var(--primary-dark);
     justify-content: center;
     font-weight: 800;
     box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
 }

 /* Footer del Sidebar */
 .sidebar-footer {
     padding: 25px 20px;
     background: rgba(0, 0, 0, 0.3);
     text-align: center;
 }

 .sidebar-socials {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-bottom: 15px;
 }

 .sidebar-socials a {
     color: white;
     font-size: 1.2rem;
     transition: 0.3s;
 }

 .sidebar-socials a:hover {
     color: var(--accent);
     transform: translateY(-3px);
 }

 .sidebar-footer p {
     font-size: 0.65rem;
     color: rgba(255, 255, 255, 0.6);
     margin: 0;
     letter-spacing: 1px;
 }

 /* Evita que el fondo se mueva cuando el menú está abierto */
 body.no-scroll {
     overflow: hidden;
     position: fixed;
     width: 100%;
 }
 /* =========================================
           1. BANNER PRINCIPAL (CARRUSEL 4 SLIDES)
           ========================================= */
 /* =========================================
   1. BANNER PRINCIPAL (SPLIT LAYOUT - ASIMÉTRICO)
   ========================================= */
 .carousel {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     background: var(--primary-dark);
 }

 .slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity 1.5s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1;
 }

 .slide.active {
     opacity: 1;
     z-index: 2;
 }

 /* Fondo difuminado general */
 .slide-bg {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     z-index: -1;
     transform: scale(1.15);
     transition: transform 8s ease-out;
 }

 .slide.active .slide-bg {
     transform: scale(1);
 }

 /* Overlay degradado: Oscuro a la izquierda para leer bien, más transparente a la derecha */
 .slide-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(0, 21, 46, 0.95) 35%, rgba(0, 43, 92, 0.6) 100%);
     z-index: 1;
 }

 /* Contenedor dividido en 2 columnas */
 /* =========================================
   CONTENIDO DEL CARRUSEL (CORRECCIÓN DE BORDES)
   ========================================= */
 .slide-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     max-width: 1300px;
     width: 100%;
     margin: 0 auto;
     gap: 50px;
     z-index: 10;

     /* LA SOLUCIÓN: */
     box-sizing: border-box;
     /* Obliga al navegador a calcular bien los espacios */
     padding: 0 5%;
     /* Mantiene los márgenes a los lados */
     padding-top: 160px;
     /* Empuja desde arriba (lo bajé un pelín de 180 a 160 para equilibrar) */
     padding-bottom: 80px;
     /* Crea un muro invisible abajo para que la foto no choque con los puntitos */
 }

 /* Columna Izquierda: Texto */
 .slide-text-left {
     text-align: left;
     color: white;
 }

 .slide-text-left h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.8rem;
     font-weight: 900;
     margin-bottom: 20px;
     line-height: 1.1;
     text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
 }

 .slide-text-left span {
     color: var(--accent);
 }

 .slide-text-left p {
     font-size: 1.1rem;
     line-height: 1.6;
     color: #e2e8f0;
     margin-bottom: 35px;
     max-width: 90%;
 }

 /* Botón Llamado a la Acción */
 .btn-primary {
     display: inline-block;
     background: var(--accent);
     color: var(--primary-dark);
     padding: 15px 35px;
     font-size: 0.9rem;
     font-weight: 800;
     text-decoration: none;
     border-radius: 8px;
     text-transform: uppercase;
     transition: var(--transition);
     box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2);
 }

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 25px rgba(197, 160, 89, 0.4);
     background: #d4b271;
 }

 /* Columna Derecha: Imagen Destacada */
 .slide-image-right {
     display: flex;
     justify-content: flex-end;
 }

 .slide-image-right img {
     width: 100%;
     max-width: 600px;
     border-radius: 20px;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
     object-fit: cover;
     aspect-ratio: 16/10;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Puntos del carrusel */
 .carousel-dots {
     position: absolute;
     bottom: 40px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 12px;
     z-index: 100;
 }

 .dot {
     width: 12px;
     height: 12px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transition: 0.3s;
     cursor: pointer;
     border: none;
 }

 .dot.active {
     background: var(--accent);
     width: 35px;
     /* Estilo de pastilla (pill) para el punto activo, como en tu imagen */
     border-radius: 10px;
 }

 /* Adaptación para dispositivos móviles y tablets */
 @media (max-width: 991px) {
     .slide-content {
         grid-template-columns: 1fr;
         /* Apila el texto arriba y la imagen abajo */
         text-align: center;
         gap: 30px;
         padding-top: 100px;
         /* Un poco más de aire para que no choque con la barra de arriba */
     }

     .slide-text-left {
         text-align: center;
     }

     .slide-text-left p {
         margin: 0 auto 25px auto;
     }

     .slide-text-left h1 {
         font-size: 2.5rem;
         /* Letra un poco más controlada para móviles */
     }

     .slide-image-right {
         justify-content: center;
     }

     /* Quitamos el aspect-ratio para no deformar tus flyers verticales */
     .slide-image-right img {
         width: 90%;
         max-width: 350px;
         /* Evita que la foto se haga gigante en tablets */
         height: auto;
         margin: 0 auto;
         display: block;
     }
 }

 .btn-outline:hover {
     background-color: var(--accent);
     color: var(--primary-dark) !important;
 }
 
 
 
 
 /* =========================================
   ANIMACIÓN DE ENTRADA PREMIUM (PAGE LOAD)
   ========================================= */

/* 1. Efecto cinematográfico para el fondo del Slide Activo */
.slide.active .slide-bg {
    animation: heroBgEntrance 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 2. Entrada escalonada para los textos de la izquierda */
.slide.active .slide-text-left h1 {
    opacity: 0;
    animation: heroSlideLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.2s; /* Carga primero */
}

.slide.active .slide-text-left p {
    opacity: 0;
    animation: heroSlideLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.4s; /* Carga un instante después */
}

/* Captura tanto la caja de botones del slide 1 como botones sueltos de los otros slides */
.slide.active .hero-buttons,
.slide.active .slide-text-left .btn-primary,
.slide.active .slide-text-left .badge-promo {
    opacity: 0;
    animation: heroSlideLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.6s; /* Carga al final */
}

/* 3. Entrada fluida e impactante para la imagen de la derecha */
.slide.active .slide-image-right img {
    opacity: 0;
    animation: heroSlideRight 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.4s;
}


/* =========================================
   KEYFRAMES (LOS MOTORES DE LA ANIMACIÓN)
   ========================================= */

/* Animación del Fondo: Inicia un poco más grande y borroso, y se estabiliza suavemente */
@keyframes heroBgEntrance {
    from {
        transform: scale(1.08);
        filter: blur(8px) brightness(0.4);
    }
    to {
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

/* Animación del Texto: Desplazamiento limpio desde la izquierda con desvanecimiento */
@keyframes heroSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animación de la Imagen: Desplazamiento desde la derecha con un leve ajuste de escala */
@keyframes heroSlideRight {
    from {
        opacity: 0;
        transform: translateX(50px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

 /* =========================================
   ADAPTACIÓN MÓVIL Y TABLETS (CORREGIDO OVERFLOW)
   ========================================= */
 @media (max-width: 991px) {

     /* Forzamos al carrusel a tener una altura mínima decente en celular */
     .carousel {
         min-height: 800px;
     }

     .slide-content {
         grid-template-columns: 1fr;
         text-align: center;
         gap: 15px;
         /* Redujimos la separación de 30px a 15px para ganar espacio */
         padding-top: 40px;
         /* Subimos un poco el texto para que no quede tan abajo */
         padding-bottom: 60px;
         /* Dejamos un colchón de aire abajo para los puntitos */
     }

     .slide-text-left {
         text-align: center;
     }

     .slide-text-left h1 {
         font-size: 2.1rem;
         /* Achicamos un poco el título gigante solo en celular */
         margin-bottom: 10px;
         line-height: 1.1;
     }

     .slide-text-left p {
         font-size: 0.85rem;
         /* Texto descriptivo más compacto */
         margin: 0 auto 15px auto;
         padding: 0 10px;
     }

     .badge-promo {
         margin-bottom: 15px;
         /* Menos espacio inútil entre la etiqueta y el botón */
     }

     .slide-image-right {
         justify-content: center;
         align-items: center;
         display: flex;
     }

     /* ¡LA MAGIA AQUÍ! Control absoluto del tamaño del flyer en móvil */
     .slide-image-right img {
         width: auto;
         max-width: 95%;
         max-height: 220px;
         /* Obligamos a la imagen a no pasarse de este alto */
         object-fit: contain;
         /* Mantiene la proporción sin deformarse ni aplastarse */
         margin: 0 auto;
         display: block;
     }
 }

 /* =========================================
           2. RESUMEN CORPORATIVO (FULL PDF INFO)
           ========================================= */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     padding: 80px 10%;
     background: var(--bg-tech);
     gap: 30px;
     text-align: center;
     border-bottom: 2px solid var(--accent);
 }

 .stat-card h3 {
     font-size: 4rem;
     color: var(--primary);
     font-weight: 900;
 }

 .stat-card p {
     font-size: 0.85rem;
     font-weight: 800;
     text-transform: uppercase;
     color: var(--text-gray);
 }

 .identity-section {
     padding: 100px 10%;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
     background: white;
 }

 .identity-text h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 25px;
 }

 .identity-text p {
     font-size: 1rem;
     line-height: 1.8;
     color: var(--text-gray);
     margin-bottom: 20px;
 }

 /* --- CONTENEDORES 3D --- */
 .container-3d {
     width: 100%;
     height: 380px;
     overflow: hidden;
     border-radius: 25px;
     perspective: 1500px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .image-3d {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.1s ease-out;
     transform: rotateX(0deg) scale(1.1);
 }

 /* =========================================
   3. SERVICIOS DESTACADOS (GRID 2X2)
   ========================================= */

 .services-detail {
     padding: 100px 10%;
     background: var(--bg-tech);
 }

 .service-row {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
     margin-top: 40px;
 }

 .service-box {
     background: white;
     padding: 45px;
     border-radius: 25px;
     border: 1px solid #e2e8f0;
     transition: var(--transition);
 }

 .service-box:hover {
     border-color: var(--accent);
     transform: translateY(-10px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
 }

 .service-box i {
     font-size: 2.5rem;
     color: var(--accent);
     margin-bottom: 20px;
 }

 .service-box h4 {
     font-family: 'Cinzel', serif;
     color: var(--primary);
     margin-bottom: 20px;
     font-size: 1.6rem;
 }

 /* Regla nueva para los párrafos agregados */
 .service-box p {
     color: var(--text-gray);
     line-height: 1.6;
     margin-bottom: 20px;
     text-align: justify;
     /* Texto justificado */
 }

 .service-box ul {
     list-style: none;
     color: var(--text-gray);
     font-size: 0.85rem;
     line-height: 2.2;
     text-align: justify;
     /* Lista justificada */
 }

 .service-box li::before {
     content: "✓";
     color: var(--accent);
     font-weight: 900;
     margin-right: 10px;
 }

 /* =========================================
   4. METODOLOGÍA (5 EN LÍNEA)
   ========================================= */

 .method-section {
     padding: 100px 10%;
     background: white;
     text-align: center;
 }

 .method-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 15px;
     margin-top: 50px;
 }

 .method-card {
     background: var(--bg-tech);
     padding: 40px 20px;
     border-radius: 20px;
     border-top: 5px solid var(--accent);
     position: relative;
 }

 /* Regla corregida para centrar el texto y evitar el justificado forzado */
 .method-card p {
     color: var(--text-gray);
     line-height: 1.5;
     margin-top: 15px;
     text-align: center;
     /* ¡Esta es la corrección! Ahora el texto se centrará. */
 }

 .step-num {
     font-size: 2.5rem;
     font-weight: 900;
     color: #cbd5e0;
     position: absolute;
     top: 5px;
     right: 15px;
     opacity: 0.5;
 }

 /* =========================================
           SOPORTE, SEGURIDAD Y TRAZABILIDAD (MÁS INFO PDF)
           ========================================= */
 .safety-section {
     padding: 100px 10%;
     background: var(--primary-dark);
     color: white;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
 }

 .safety-text h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--accent);
     margin-bottom: 25px;
 }

 .safety-text ul {
     list-style: none;
 }

 .safety-text li {
     margin-bottom: 15px;
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: 0.95rem;
 }

 .safety-text i {
     color: var(--accent);
     font-size: 1.2rem;
 }

 /* =========================================
           5. LLAMADOS A LA ACCIÓN (CTAs)
           ========================================= */
 .quick-contact {
     padding: 100px 10%;
     background: var(--bg-tech);
     text-align: center;
 }

 .quick-contact h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 20px;
 }

 .qc-btns {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 40px;
     flex-wrap: wrap;
 }

 .btn-cta {
     text-decoration: none;
     padding: 18px 40px;
     border-radius: 50px;
     font-weight: 800;
     text-transform: uppercase;
     transition: 0.3s;
     font-size: 0.85rem;
     letter-spacing: 1px;
 }

 .btn-wa {
     background: #25d366;
     color: white;
 }

 .btn-mail {
     background: var(--accent);
     color: var(--primary-dark);
 }

/* =========================================
   ADAPTACIÓN PARA MÓVIL (NO BORRAR)
   ========================================= */

/* Ajuste del Video para que no se corte la cabeza */
.container-3d div {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    aspect-ratio: 9 / 16; /* Formato Instagram */
    margin: 0 auto;
}

.container-3d video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important; /* Mantiene la cabeza visible */
}

@media (max-width: 1024px) {
    .method-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablets */
    }
    .safety-section {
        grid-template-columns: 1fr; /* Una columna en tablets/móvil */
        text-align: center;
    }
    .safety-text li {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .method-section, .safety-section, .quick-contact {
        padding: 60px 5%; /* Menos espacio en las orillas para el celular */
    }
    
    .method-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil para que se lea bien */
    }

    .safety-text h2, .quick-contact h2 {
        font-size: 1.8rem;
    }

    .qc-btns {
        flex-direction: column; /* Botones uno arriba del otro */
    }

    .btn-cta {
        width: 100%;
        box-sizing: border-box;
    }
}
 /* =========================================
           FOOTER / FICHA CORPORATIVA (PARALLAX)
           ========================================= */
 .footer-elite {
     position: relative;
     /* Imagen de fondo corporativa */
     background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* ¡Esta es la magia! Hace que la imagen se quede fija al hacer scroll */
     color: white;
     padding: 100px 10% 40px;
     overflow: hidden;
     /* Evita que la capa oscura se salga del contenedor */
 }

 /* Capa superpuesta (Overlay) para oscurecer la imagen usando tus tonos azules */
 .footer-elite::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to bottom, rgba(0, 63, 122, 0.85), rgba(0, 21, 46, 0.95));
     z-index: 1;
 }

 /* Asegura que los textos queden por encima de la imagen y la capa oscura */
 .footer-content-wrapper {
     position: relative;
     z-index: 2;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 60px;
 }

 .footer-col h4 {
     color: var(--accent);
     font-family: 'Cinzel', serif;
     margin-bottom: 25px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     padding-bottom: 10px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     /* Sombra suave para que resalte más el dorado */
 }

 .footer-col p {
     color: #e2e8f0;
     line-height: 1.8;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
     /* Sombra para asegurar lectura perfecta sobre la imagen */
 }

 .footer-bottom {
     text-align: center;
     margin-top: 60px;
     padding-top: 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     font-size: 0.85rem;
     color: #cbd5e1;
 }

 @media (max-width: 1024px) {
     .header-desktop {
         display: none;
     }

     .mobile-header-premium {
         display: block;
     }

     .identity-section,
     .safety-section,
     .service-row,
     .method-grid,
     .stats-grid {
         grid-template-columns: 1fr;
     }

     .slide-text h1 {
         font-size: 2rem;
     }

     .carousel {
         height: 65vh;
     }
 }
/* =========================================
   5. SEGURIDAD ELECTRÓNICA Y CCTV (FONDO GRIS CLARO)
   ========================================= */

 .security-section {
     padding: 100px 10%;
     background: var(--bg-tech);
     color: var(--text-main);
     border-top: 2px solid #e2e8f0;
     overflow: hidden; /* Asegura que nada se salga de la sección */
 }

 .security-header {
     text-align: center;
     margin-bottom: 60px;
     padding: 0 20px;
 }

 .security-header h2 {
     font-size: 2.2rem;
     margin-bottom: 15px;
     text-transform: uppercase;
     color: var(--primary);
 }

 .security-header h4 {
     color: var(--accent);
     font-size: 1.2rem;
     font-weight: 600;
 }

 .security-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 50px;
     align-items: flex-start;
     max-width: 1300px;
     margin: 0 auto;
     width: 100%;
 }

 /* Caja de texto blanca */
 .security-text-box {
     background: var(--white);
     padding: 50px;
     border-radius: 20px;
     border-left: 6px solid var(--primary);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
     min-width: 0; /* Previene desbordamiento en Grid */
 }

 .security-text-box p {
     color: var(--text-gray);
     line-height: 1.7;
     margin-bottom: 20px;
     text-align: justify;
 }

 .security-list {
     list-style: none;
     margin-bottom: 30px;
     margin-top: 15px;
 }

 .security-list li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 15px;
     color: var(--text-gray);
     font-size: 0.95rem;
     line-height: 1.5;
     text-align: justify;
 }

 .security-list li::before {
     content: "■";
     color: var(--primary);
     font-size: 0.8rem;
     position: absolute;
     left: 0;
     top: 3px;
 }

 /* Galería de imágenes (Corregida para responsividad) */
 .security-gallery {
     display: flex;
     flex-direction: column;
     gap: 15px;
     width: 100%;
     min-width: 0; /* Clave para que Flexbox no se rompa */
 }

 .security-gallery img {
     max-width: 100%; /* Evita que la imagen sea más ancha que su contenedor */
     display: block;
 }

 .gallery-main img {
     width: 100%;
     height: 380px;
     object-fit: cover;
     border-radius: 15px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
 }

 .gallery-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
     width: 100%;
 }

 .gallery-row img {
     width: 100%;
     height: 180px;
     object-fit: cover;
     border-radius: 15px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
     transition: var(--transition);
 }

 .security-gallery img:hover {
     transform: scale(1.02);
 }

 /* Responsive para celulares y tablets */
 @media (max-width: 991px) {
     .security-section {
         padding: 80px 5%;
     }

     .security-header {
         margin-bottom: 40px;
     }

     .security-container {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .security-text-box {
         padding: 35px 25px;
     }

     .gallery-main img {
         height: 300px; /* Un poco más alto para tablets/celulares grandes */
     }

     .gallery-row img {
         height: 160px;
     }
 }

 /* Extra pequeño para evitar que la fila de dos fotos se aplaste demasiado */
 @media (max-width: 480px) {
     .gallery-main img {
         height: 220px;
     }
     
     .gallery-row {
         grid-template-columns: 1fr; /* Pasa a 1 columna en teléfonos pequeños */
     }

     .gallery-row img {
         height: 200px;
     }
 }
 
 
 /* =========================================
   RESPONSIVIDAD Y BLINDAJE DE LA SECCIÓN TI
   ========================================= */

/* 1. Ajuste General del Contenedor de la Grilla */
.service-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 5%;
    box-sizing: border-box;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
}

/* 2. Blindaje para evitar que los elementos colapsen o rompan el ancho */
.service-item, 
.gallery-item {
    min-width: 0;        /* Clave técnica: fuerza a los elementos grid a respetar los límites de la pantalla */
    width: 100%;
    box-sizing: border-box;
}

/* 3. Control estricto de las imágenes y el mini-carrusel */
.gallery-item img, 
.mini-carousel img, 
.m-slide img {
    max-width: 100% !important; /* Impide que la imagen sobrepase el tamaño de su contenedor */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* 4. Ajustes adaptativos según el tamaño del dispositivo */

/* Pantallas Medianas (Tablets y pantallas pequeñas - Hasta 1024px) */
@media (max-width: 1024px) {
    .service-container {
        padding: 60px 20px;
    }
    .service-header h2 {
        font-size: 1.8rem;
    }
    /* El mini-carrusel deja de ocupar doble columna y se integra de forma nativa en el flujo */
    .gallery-item {
        grid-column: span 1 !important; 
        min-height: 280px;
    }
}

/* Pantallas Pequeñas (Celulares - Hasta 480px) */
@media (max-width: 480px) {
    .service-grid {
        grid-template-columns: 1fr; /* Fuerza la grilla a una sola columna estricta */
        gap: 20px;
    }
    .service-item {
        padding: 30px 20px; /* Optimiza los espacios internos en celulares */
    }
    .gallery-item {
        min-height: 240px; /* Ajusta la altura del carrusel para pantallas táctiles verticales */
    }
}
 /* =========================================
   NUEVAS SECCIONES AÑADIDAS (STATS, ALIANZAS, FAQ)
   ========================================= */

 /* 1. BARRA DE INDICADORES (STATS) */
 .stats-section {
     background: var(--primary-dark);
     padding: 40px 10%;
     border-bottom: 3px solid var(--accent);
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     text-align: center;
     max-width: 1200px;
     margin: 0 auto;
 }

 .stat-card h3 {
     font-size: 3rem;
     color: var(--accent);
     font-family: 'Cinzel', serif;
     margin-bottom: 5px;
 }

 .stat-card p {
     color: white;
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.85rem;
     letter-spacing: 1px;
 }

 /* 2. ALIANZAS ESTRATÉGICAS */
 .partners-section {
     padding: 80px 10%;
     background: white;
     text-align: center;
     border-bottom: 2px solid var(--bg-tech);
 }

 .partners-section p {
     color: var(--text-gray);
     margin-bottom: 40px;
     font-size: 1.1rem;
 }

 .partners-grid {
     display: flex;
     justify-content: center;
     gap: 50px;
     flex-wrap: wrap;
     align-items: center;
     margin-top: 30px;
 }

 .partner-logo {
     font-family: 'Cinzel', serif;
     color: var(--text-gray);
     font-size: 1.5rem;
     opacity: 0.5;
     transition: var(--transition);
     cursor: default;
 }

 .partner-logo:hover {
     opacity: 1;
     color: var(--primary);
     transform: scale(1.05);
 }

 /* 3. PREGUNTAS FRECUENTES (FAQ) */
 .faq-section {
     padding: 100px 10%;
     background: var(--bg-tech);
     /* Alternamos a gris para no chocar con la sección anterior */
 }

 .faq-container {
     max-width: 800px;
     margin: 40px auto 0;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .faq-item {
     border: 1px solid #e2e8f0;
     border-radius: 15px;
     padding: 25px;
     transition: var(--transition);
     background: white;
 }

 .faq-item:hover {
     border-color: var(--accent);
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 .faq-item h4 {
     color: var(--primary);
     margin-bottom: 12px;
     font-size: 1.1rem;
     display: flex;
     align-items: center;
 }

 .faq-item h4 i {
     color: var(--accent);
     margin-right: 12px;
     font-size: 1.3rem;
 }

 .faq-item p {
     color: var(--text-gray);
     font-size: 0.95rem;
     line-height: 1.6;
     padding-left: 32px;
 }

 /* RESPONSIVE PARA NUEVAS SECCIONES */
 @media (max-width: 768px) {
     .stats-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .partners-grid {
         gap: 30px;
         flex-direction: column;
     }

     .faq-section {
         padding: 60px 5%;
     }

     .faq-item {
         padding: 20px;
     }
 }

 /* =========================================
   2. ALIANZAS ESTRATÉGICAS (FORMAL, LIMPIO Y SIN FONDOS DE COLOR)
   ========================================= */

 .partners-section {
     padding: 80px 10%;
     background: #ffffff;
     /* Fondo blanco puro, sin colores que desordenen */
     text-align: center;
 }

 .partners-section .title-cinzel {
     color: var(--primary);
     /* Azul corporativo para mantener la línea */
     margin-bottom: 15px;
 }

 .partners-section p {
     color: var(--text-gray);
     margin-bottom: 50px;
     font-size: 1.1rem;
 }

 .partners-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 30px;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
 }

 /* Tarjetas minimalistas, ordenadas y formales */
 .partner-logo {
     background: #ffffff;
     padding: 30px 20px;
     border: 1px solid #e2e8f0;
     /* Borde gris muy suave y elegante */
     border-radius: 8px;
     /* Bordes ligeramente redondeados, muy sutil */
     font-family: 'Cinzel', serif;
     color: var(--text-gray);
     font-size: 1.1rem;
     font-weight: 700;
     letter-spacing: 1px;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
     /* Sombra casi invisible para dar un poco de forma */
     cursor: default;
 }

 /* Efecto hover muy suave, nada exagerado */
 .partner-logo:hover {
     color: var(--primary);
     /* El texto cambia al azul de tu marca */
     border-color: var(--accent);
     /* El borde se pinta de dorado sutilmente */
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
     /* Sombra muy ligera */
     transform: translateY(-3px);
     /* Un movimiento mínimo hacia arriba */
 }

 /* =========================================
   RESPONSIVE (MÓVILES Y TABLETS)
   ========================================= */
 @media (max-width: 768px) {
     .partners-section {
         padding: 60px 5%;
     }

     .partners-grid {
         grid-template-columns: repeat(2, 1fr);
         /* Ordenado en 2 columnas en tablet */
         gap: 15px;
     }

     .partner-logo {
         font-size: 0.95rem;
         padding: 25px 10px;
     }
 }

 @media (max-width: 480px) {
     .partners-grid {
         grid-template-columns: 1fr;
         /* Ordenado en 1 sola columna en celular */
     }
 }



 /* =========================================
   NUEVO: CAMPAÑAS Y SERVICIOS DESTACADOS (FLYERS)
   ========================================= */
 .promos-section {
     padding: 80px 10%;
     background: var(--bg-tech);
     text-align: center;
     border-top: 1px solid #e2e8f0;
 }

 .promos-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 40px;
     max-width: 1000px;
     margin: 0 auto;
 }

 .promo-card {
     flex: 1;
     min-width: 300px;
     max-width: 450px;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .promo-card img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* Efecto que levanta el flyer al pasar el mouse */
 .promo-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }


 /* =========================================
   EFECTO PARA EL VIDEO DEL PERSONAJE 3D
   ========================================= */
 .video-promo {
     transition: transform 0.3s ease;
 }

 .video-promo:hover {
     transform: scale(1.03);
     /* Hace que la imagen del video crezca un poquito al señalarla */
 }


 /* =========================================
   NUEVO: PREGUNTAS FRECUENTES (FAQ)
   ========================================= */
 .faq-section {
     padding: 100px 10%;
     background: var(--white);
 }

 .faq-container {
     max-width: 800px;
     margin: 40px auto 0;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .faq-item {
     border: 1px solid #e2e8f0;
     border-radius: 15px;
     padding: 25px;
     transition: var(--transition);
     background: white;
 }

 .faq-item:hover {
     border-color: var(--accent);
     transform: translateY(-3px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 .faq-item h4 {
     color: var(--primary);
     margin-bottom: 12px;
     font-size: 1.1rem;
     display: flex;
     align-items: center;
 }

 .faq-item h4 i {
     color: var(--accent);
     margin-right: 12px;
     font-size: 1.3rem;
 }

 .faq-item p {
     color: var(--text-gray);
     font-size: 0.95rem;
     line-height: 1.6;
     padding-left: 32px;
 }



 /* 3. Estilo para la etiqueta "Destacado" (Ajustada para ir abajo) */
 .badge-promo {
     display: inline-block;
     background: var(--accent);
     /* Dorado */
     color: var(--primary-dark);
     /* Azul oscuro */
     padding: 6px 18px;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-top: 10px;
     /* Separación con el texto de arriba */
     margin-bottom: 25px;
     /* Separación con el botón de abajo */
     box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
     animation: pulseBadge 2s infinite;
 }



 /* =========================================
           CONTENIDO NOSOTROS
           ========================================= */

 /* HERO NOSOTROS (Ajustado el padding-top para el nuevo menú) */
 .hero-nosotros {
     height: 45vh;
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.85)), url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     padding-top: 120px;
     /* Evita que el título choque con la barra flotante */
 }

 .hero-nosotros h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.5rem;
     text-transform: uppercase;
     letter-spacing: 3px;
 }

 .section-padding {
     padding: 100px 10%;
 }

 .grid-nosotros {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
 }

 .text-block h2 {
     font-family: 'Cinzel', serif;
     font-size: 2rem;
     color: var(--primary);
     margin-bottom: 20px;
     border-left: 5px solid var(--accent);
     padding-left: 20px;
 }

 .text-block p {
     line-height: 1.8;
     margin-bottom: 20px;
     font-size: 1rem;
     color: var(--text-gray);
 }

 .alliance-section {
     background: var(--bg-tech);
     border-radius: 50px;
     margin: 0 5% 100px;
     padding: 80px 5%;
     display: flex;
     align-items: center;
     gap: 50px;
 }

 .alliance-card {
     background: white;
     padding: 40px;
     border-radius: 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
     flex: 1;
 }

 .alliance-card h3 {
     font-family: 'Cinzel', serif;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .capacity-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     margin-top: 50px;
 }

 .capacity-box {
     background: white;
     padding: 40px;
     border-radius: 20px;
     border: 1px solid #eee;
     transition: 0.3s;
 }

 .capacity-box:hover {
     border-color: var(--accent);
     transform: translateY(-10px);
 }

 .capacity-box i {
     font-size: 2.5rem;
     color: var(--accent);
     margin-bottom: 20px;
     display: block;
 }

 .capacity-box h5 {
     font-size: 1.1rem;
     color: var(--primary);
     margin-bottom: 10px;
     text-transform: uppercase;
 }

 .safety-block {
     background: var(--primary-dark);
     color: white;
     border-radius: 40px;
     padding: 80px;
     position: relative;
     overflow: hidden;
 }

 .safety-block h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--accent);
     margin-bottom: 30px;
 }

 .safety-list {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .safety-list li {
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: 0.95rem;
 }

 .safety-list i {
     color: var(--accent);
     font-size: 1.2rem;
 }

 .container-3d {
     width: 100%;
     height: 400px;
     overflow: hidden;
     border-radius: 25px;
     perspective: 1500px;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
 }

 .image-3d {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.1s ease-out;
     transform: rotateX(0deg) scale(1.1);
 }

 /* =========================================
   RESPONSIVE MÓVIL Y TABLETS (NOSOTROS)
   ========================================= */
 @media (max-width: 1024px) {

     /* Ajuste del Hero principal */
     .hero-nosotros {
         height: 35vh;
         padding-top: 80px;
     }

     .hero-nosotros h1 {
         font-size: 2.2rem;
         letter-spacing: 1px;
     }

     /* Reducir los espacios blancos gigantes a los lados */
     .section-padding {
         padding: 60px 5%;
     }

     /* Apilar las columnas (Texto arriba, Imagen 3D abajo) */
     .grid-nosotros {
         grid-template-columns: 1fr;
         gap: 40px;
         text-align: center;
         /* Centramos el texto en móviles para que se vea más ordenado */
     }

     .text-block h2 {
         font-size: 1.6rem;
     }

     /* Apilar la tarjeta de alianza y el texto */
     .alliance-section {
         flex-direction: column;
         margin: 0 5% 60px;
         padding: 40px 20px;
         border-radius: 30px;
         text-align: center;
     }

     /* Apilar las tarjetas de capacidad operativa */
     .capacity-grid {
         grid-template-columns: 1fr;
     }

     /* Ajustar el bloque azul oscuro de seguridad */
     .safety-block {
         padding: 40px 20px;
         border-radius: 30px;
     }

     .safety-block h2 {
         font-size: 1.8rem;
     }

     /* La lista de EPP y reglas en una sola columna */
     .safety-list {
         grid-template-columns: 1fr;
         gap: 15px;
     }

     /* Reducir el tamaño de la imagen con efecto 3D */
     .container-3d {
         height: 250px;
     }
 }




 /* =========================================
           HERO PROYECTOS (IDÉNTICO A NOSOTROS)
           ========================================= */
 .hero-proyectos {
     height: 45vh;

     /* AQUÍ ESTÁ LA IMAGEN: Cambia el enlace dentro de url() por tu foto real cuando quieras */
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.85)), url('imagenes/imagen.png');

     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     padding-top: 120px;
 }

 .hero-proyectos h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.5rem;
     text-transform: uppercase;
     letter-spacing: 3px;
 }

 /* =========================================
           GALERÍA DE PROYECTOS
           ========================================= */
 .portfolio-section {
     padding: 80px 5%;
     max-width: 1400px;
     margin: 0 auto;
 }

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 30px;
 }

 .gallery-item {
     position: relative;
     border-radius: 15px;
     overflow: hidden;
     aspect-ratio: 4/3;
     cursor: pointer;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     background: #fff;
 }

 .gallery-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
 }

 .gallery-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(4, 30, 58, 0.9) 0%, rgba(4, 30, 58, 0.2) 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 30px;
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .gallery-item:hover .gallery-img {
     transform: scale(1.1);
 }

 .gallery-item:hover .gallery-overlay {
     opacity: 1;
 }

 .gallery-info h3 {
     font-family: 'Cinzel', serif;
     color: var(--accent);
     font-size: 1.4rem;
     margin-bottom: 5px;
     transform: translateY(20px);
     transition: transform 0.4s ease;
 }

 .gallery-info p {
     color: white;
     font-size: 0.9rem;
     font-weight: 300;
     transform: translateY(20px);
     transition: transform 0.4s ease 0.1s;
 }

 .gallery-item:hover .gallery-info h3,
 .gallery-item:hover .gallery-info p {
     transform: translateY(0);
 }

 /* =========================================
           LIGHTBOX (FOTO PANTALLA COMPLETA)
           ========================================= */
 .lightbox {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.95);
     z-index: 3000;
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 .lightbox.active {
     opacity: 1;
     pointer-events: auto;
 }

 .lightbox-img {
     max-width: 90%;
     max-height: 85vh;
     border-radius: 10px;
     box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
     border: 2px solid var(--accent);
 }

 .lightbox-close {
     position: absolute;
     top: 30px;
     right: 40px;
     color: white;
     font-size: 2.5rem;
     cursor: pointer;
     transition: color 0.3s;
 }

 .lightbox-close:hover {
     color: var(--accent);
 }



 /* =========================================
           HERO ESPECIALIDADES 
           ========================================= */
 .hero-especialidades {
     height: 45vh;
     min-height: 380px;
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.95)), url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     box-sizing: border-box;
     padding-top: 120px;
 }

 .hero-especialidades h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.5rem;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: var(--white);
 }

 /* =========================================
           GRILLA DE SERVICIOS
           ========================================= */
 .services-wrapper {
     padding: 80px 5%;
     max-width: 1400px;
     margin: 0 auto;
 }

 .section-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .section-header h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .section-header p {
     color: var(--text-gray);
     font-size: 1.1rem;
     max-width: 700px;
     margin: 0 auto;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 40px;
 }

 .service-card {
     background: var(--white);
     border-radius: 20px;
     padding: 40px 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     transition: var(--transition);
     border: 1px solid rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
 }

 .service-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: var(--accent);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.4s ease;
 }

 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 .service-card:hover::before {
     transform: scaleX(1);
 }

 .service-icon {
     width: 70px;
     height: 70px;
     background: var(--bg-tech);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     color: var(--primary);
     margin-bottom: 25px;
     transition: var(--transition);
 }

 .service-card:hover .service-icon {
     background: var(--primary);
     color: var(--accent);
 }

 .service-card h3 {
     font-family: 'Cinzel', serif;
     font-size: 1.3rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .service-card p {
     color: var(--text-gray);
     font-size: 0.95rem;
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .service-list {
     list-style: none;
     margin-bottom: 25px;
 }

 .service-list li {
     position: relative;
     padding-left: 25px;
     margin-bottom: 10px;
     font-size: 0.9rem;
     color: var(--text-main);
     font-weight: 500;
 }

 .service-list li::before {
     content: '\f058';
     /* Check icon */
     font-family: 'FontAwesome';
     position: absolute;
     left: 0;
     top: 2px;
     color: var(--accent);
 }

 .service-btn {
     display: inline-block;
     text-decoration: none;
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--primary);
     text-transform: uppercase;
     letter-spacing: 1px;
     border-bottom: 2px solid var(--accent);
     padding-bottom: 5px;
     transition: var(--transition);
 }

 .service-btn:hover {
     color: var(--accent);
 }

 /* =========================================
   RESPONSIVE MÓVIL Y TABLETS (ESPECIALIDADES)
   ========================================= */
 @media (max-width: 1024px) {

     /* 1. Ajustes del Hero (Banner azul superior) */
     .hero-especialidades {
         height: 35vh;
         min-height: 300px;
         padding-top: 100px;
         /* Bajamos el espacio para que no choque con el menú móvil */
     }

     .hero-especialidades h1 {
         font-size: 2.2rem;
         /* Achicamos el título para que quepa en la pantalla */
         letter-spacing: 1px;
         padding: 0 15px;
     }

     /* 2. Ajustes del contenedor y título principal */
     .services-wrapper {
         padding: 50px 5%;
         /* Menos espacio en blanco a los lados y arriba */
     }

     .section-header {
         margin-bottom: 40px;
     }

     .section-header h2 {
         font-size: 1.8rem;
         /* Título más amigable para celular */
     }

     .section-header p {
         font-size: 1rem;
         padding: 0 10px;
     }

     /* 3. Ajuste de las Tarjetas (Grilla) */
     .services-grid {
         grid-template-columns: 1fr;
         /* Obliga a que las tarjetas se apilen una debajo de la otra */
         gap: 30px;
         /* Un poco menos de separación entre tarjetas */
     }

     .service-card {
         padding: 30px 20px;
         /* Reducimos el relleno interno para aprovechar el espacio */
     }

     .service-icon {
         width: 60px;
         height: 60px;
         font-size: 1.5rem;
         /* Ícono sutilmente más pequeño */
         margin-bottom: 20px;
     }

     .service-card h3 {
         font-size: 1.2rem;
     }
 }

 /* Ajuste extra para teléfonos muy pequeños (ej. iPhone SE) */
 @media (max-width: 380px) {
     .hero-especialidades h1 {
         font-size: 1.8rem;
     }
 }

 /* =========================================
           HERO METODOLOGÍA
           ========================================= */
 .hero-metodologia {
     height: 45vh;
     min-height: 380px;
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.95)), url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     box-sizing: border-box;
     padding-top: 120px;
 }

 .hero-metodologia h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.5rem;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: var(--white);
 }

 /* =========================================
           SECCIÓN PASO A PASO
           ========================================= */
 .methodology-wrapper {
     padding: 80px 5%;
     max-width: 1200px;
     margin: 0 auto;
 }

 .section-header {
     text-align: center;
     margin-bottom: 70px;
 }

 .section-header h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .section-header p {
     color: var(--text-gray);
     font-size: 1.1rem;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.6;
 }

 .step-container {
     display: flex;
     flex-direction: column;
     gap: 40px;
     position: relative;
 }

 /* Línea vertical conectora */
 .step-container::before {
     content: '';
     position: absolute;
     top: 20px;
     bottom: 20px;
     left: 50px;
     width: 3px;
     background: var(--accent);
     opacity: 0.3;
 }

 .step-card {
     display: flex;
     align-items: center;
     background: white;
     border-radius: 20px;
     padding: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     position: relative;
     transition: var(--transition);
     border: 1px solid rgba(0, 0, 0, 0.05);
     z-index: 2;
 }

 .step-card:hover {
     transform: translateX(10px);
     border-color: var(--accent);
     box-shadow: 0 15px 40px rgba(197, 160, 89, 0.15);
 }

 .step-number {
     min-width: 80px;
     height: 80px;
     background: var(--primary);
     color: var(--accent);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Cinzel', serif;
     font-size: 2.5rem;
     font-weight: 900;
     margin-right: 30px;
     border: 4px solid white;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .step-content h3 {
     font-family: 'Cinzel', serif;
     font-size: 1.5rem;
     color: var(--primary);
     margin-bottom: 10px;
 }

 .step-content p {
     color: var(--text-gray);
     font-size: 1rem;
     line-height: 1.6;
     margin-bottom: 0;
 }


/* =========================================
           HERO CONTACTO (MÁS COMPACTO)
           ========================================= */
 .hero-contacto {
     height: 40vh;
     min-height: 320px;
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.95)), url('https://images.unsplash.com/photo-1516387938699-a93567ec168e?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     box-sizing: border-box;
     padding-top: 100px;
 }

 .hero-contacto h1 {
     font-family: 'Cinzel', serif;
     font-size: 3rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--white);
     padding: 0 20px;
 }

 /* =========================================
           SECCIÓN DE CONTACTO (REFINADA)
           ========================================= */
 .contact-wrapper {
     padding: 0 5%;
     max-width: 1100px;
     margin: -60px auto 60px;
     position: relative;
     z-index: 10;
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1.3fr; /* Dos columnas en desktop */
     background: white;
     border-radius: 20px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
     overflow: hidden;
 }

 /* Columna Izquierda: Información de Contacto */
 .contact-info {
     background: var(--primary);
     color: white;
     padding: 40px 30px;
     position: relative;
 }

 .contact-info::before {
     content: '';
     position: absolute;
     bottom: -40px;
     right: -40px;
     width: 150px;
     height: 150px;
     background: var(--accent);
     border-radius: 50%;
     opacity: 0.1;
 }

 .contact-info h2 {
     font-family: 'Cinzel', serif;
     font-size: 1.5rem;
     color: var(--accent);
     margin-bottom: 15px;
 }

 .contact-info p {
     font-size: 0.85rem;
     line-height: 1.6;
     margin-bottom: 30px;
     color: #cbd5e1;
 }

 .info-card {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     margin-bottom: 25px;
 }

 .info-card i {
     font-size: 1.2rem;
     color: var(--accent);
     margin-top: 3px;
 }

 .info-card h4 {
     font-size: 0.95rem;
     margin-bottom: 3px;
     font-weight: 700;
 }

 .info-card span {
     font-size: 0.8rem;
     color: #cbd5e1;
     line-height: 1.5;
     display: block;
 }

 .social-row {
     display: flex;
     gap: 12px;
     margin-top: 30px;
 }

 .social-row a {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     text-decoration: none;
     font-size: 1.1rem;
     transition: var(--transition);
 }

 .social-row a:hover {
     background: var(--accent);
     color: var(--primary-dark);
     transform: translateY(-3px);
 }

 /* Columna Derecha: Formulario */
 .contact-form {
     padding: 40px 40px;
     background: white;
 }

 .contact-form h3 {
     font-size: 1.4rem;
     color: var(--primary);
     margin-bottom: 25px;
     font-family: 'Cinzel', serif;
 }

 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
 }

 .input-group {
     display: flex;
     flex-direction: column;
     gap: 6px;
     margin-bottom: 15px;
 }

 .input-group label {
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--text-gray);
     text-transform: uppercase;
 }

 .input-group input,
 .input-group select,
 .input-group textarea {
     width: 100%;
     padding: 12px;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     font-size: 0.9rem;
     font-family: 'Montserrat', sans-serif;
     background: #f8fafc;
     transition: var(--transition);
     box-sizing: border-box; /* Evita que el padding ensanche el input */
 }

 .input-group input:focus,
 .input-group select:focus,
 .input-group textarea:focus {
     outline: none;
     border-color: var(--accent);
     background: white;
     box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
 }

 .submit-btn {
     background: var(--wsp-green);
     color: white;
     border: none;
     padding: 14px 20px;
     font-size: 0.9rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 8px;
     cursor: pointer;
     transition: var(--transition);
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     margin-top: 10px;
 }

 .submit-btn:hover {
     background: #1ebe57;
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
 }

/* =========================================
   RESPONSIVO TOTAL (CORRECCIÓN FORMULARIO)
   ========================================= */

@media (max-width: 992px) {
    /* Forzamos a que el grid sea de UNA sola columna */
    .contact-grid {
        grid-template-columns: 1fr !important; 
        display: flex;
        flex-direction: column;
    }

    .contact-wrapper {
        margin-top: -30px; /* Reducimos el solapamiento */
        padding: 0 15px;
    }

    .contact-info {
        padding: 40px 25px;
    }

    .contact-form {
        padding: 40px 25px;
    }
}

@media (max-width: 768px) {
    .hero-contacto h1 {
        font-size: 2.2rem;
    }

    /* Forzamos que los campos Nombre/Email ocupen todo el ancho */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* Aseguramos que ningún input se salga */
    .input-group input, 
    .input-group select, 
    .input-group textarea {
        width: 100% !important;
        box-sizing: border-box; /* Fundamental para que el padding no los ensanche */
    }

    .contact-info h2 {
        font-size: 1.8rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-contacto {
        height: 30vh;
        min-height: 250px;
    }

    .hero-contacto h1 {
        font-size: 1.8rem;
    }

    /* Ajuste de iconos y textos para que no se vean apretados */
    .info-card {
        gap: 10px;
    }

    .info-card h4 {
        font-size: 0.9rem;
    }

    .info-card span {
        font-size: 0.75rem;
    }

    .social-row {
        justify-content: center;
    }
}
 /* =========================================
   MAPA DE GOOGLE (ESTILO PRESTIGIO / BKN)
   ========================================= */
.map-section {
    padding: 90px 10%;
    background: radial-gradient(circle at top right, #f8fafc, #f1f5f9); /* Fondo con un degradado suave que da profundidad */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border-top: 2px solid #e2e8f0;
}

/* Encabezado del Mapa */
.map-header {
    text-align: center;
    margin-bottom: 50px;
}

.map-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.6rem;
    color: var(--primary);
    margin-bottom: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.map-header h2 i {
    color: var(--accent); /* Icono dorado de Petra */
    margin-right: 10px;
    text-shadow: 0 4px 10px rgba(197, 160, 89, 0.2);
}

.map-header p {
    color: var(--text-gray);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* El Contenedor bkn con efecto de Cristal Elevado */
.map-container {
    width: 100%;
    max-width: 1200px;
    position: relative;
    border-radius: 24px; /* Esquinas bien redondeadas y modernas */
    overflow: hidden;
    background: var(--white);
    padding: 6px; /* Crea un marco interior elegante */
    box-shadow: 0 25px 60px -15px rgba(4, 30, 58, 0.15); /* Sombra pesada pero difuminada, estilo premium */
    border: 1px solid rgba(255, 255, 255, 0.8);
    outline: 2px solid var(--accent); /* Línea exterior dorada */
    outline-offset: -3px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.map-container:hover {
    transform: translateY(-5px); /* Pequeño levante interactivo al pasar el mouse */
    box-shadow: 0 30px 70px -10px rgba(4, 30, 58, 0.25);
}

/* El iFrame del mapa */
.map-iframe {
    width: 100%;
    height: 520px;
    display: block;
    border: none;
    border-radius: 18px; /* Redondeado interno */
    filter: grayscale(0.2) contrast(1.05) saturate(1.1); /* Tono ligeramente cinematográfico */
    transition: filter 0.4s ease;
}

.map-container:hover .map-iframe {
    filter: grayscale(0) contrast(1) saturate(1); /* Vuelve a color completo al interactuar */
}

/* Tarjeta Flotante Estilo Cristalizado (Glassmorphism) */
.map-floating-card {
    position: absolute;
    bottom: 35px;
    left: 35px;
    background: rgba(4, 30, 58, 0.85); /* Azul Petra transparente */
    color: white;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 6px solid var(--accent); /* Línea dorada de énfasis */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px); /* Efecto desenfoque de fondo ultra moderno */
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
    pointer-events: none; /* No molesta al arrastrar el mapa */
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.map-container:hover .map-floating-card {
    transform: translateY(-2px);
}

.map-floating-card h4 {
    font-family: 'Cinzel', serif;
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.map-floating-card p {
    margin: 10px 0;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
}

.map-floating-card p i {
    color: var(--accent);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* =========================================
   BLOQUE DE RESPONSIVIDAD (MANTIENE TU FORMULARIO PERFECTO)
   ========================================= */

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
    .contact-wrapper {
        margin-top: -30px;
        padding: 0 15px;
    }
    .hero-contacto h1, 
    .hero-service h1 {
        font-size: 2.8rem;
    }
    .map-section {
        padding: 60px 5%;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    .contact-form {
        padding: 30px 20px;
    }
    .hero-contacto h1, 
    .hero-service h1 {
        font-size: 2.2rem;
    }
    
    /* Adaptación del mapa en celulares */
    .map-header h2 { font-size: 2rem; }
    .map-iframe { height: 420px; }
    
    .map-floating-card {
        position: relative; /* En pantallas chicas se desmonta para no tapar el mapa */
        bottom: auto;
        left: auto;
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
        background: var(--primary); /* Fondo sólido para legibilidad */
        backdrop-filter: none;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
}

@media (max-width: 480px) {
    .hero-contacto h1, 
    .hero-service h1 {
        font-size: 1.8rem;
    }
    .hero-contacto p, 
    .hero-service p {
        font-size: 0.9rem;
    }
    .contact-info h2 {
        font-size: 1.3rem;
    }
    .submit-btn {
        padding: 16px;
    }
    .input-group input, 
    .input-group select, 
    .input-group textarea {
        font-size: 16px;
    }
}


 /* =========================================
           HERO DE SERVICIO (GASFITERÍA)
           ========================================= */
 .hero-service {
     height: 40vh;
     min-height: 350px;
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.95)), url('https://images.unsplash.com/photo-1585704032915-c3400ca199e7?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     box-sizing: border-box;
     padding-top: 80px;
 }

 .hero-service h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.5rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--accent);
     margin-bottom: 10px;
 }

 .hero-service p {
     font-size: 1.1rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: white;
 }

 /* =========================================
           CONTENIDO DEL SERVICIO
           ========================================= */
 .service-container {
     padding: 80px 5%;
     max-width: 1200px;
     margin: 0 auto;
 }

 .service-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .service-header h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .service-header p {
     font-size: 1.1rem;
     color: var(--text-gray);
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.8;
 }

 .service-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
 }

 .service-item {
     background: white;
     padding: 40px 30px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     text-align: center;
     border-bottom: 4px solid var(--accent);
     transition: var(--transition);
 }

 .service-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 .service-item i {
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 20px;
     transition: 0.3s;
 }

 .service-item:hover i {
     color: var(--accent);
     transform: scale(1.1);
 }

 .service-item h3 {
     font-family: 'Cinzel', serif;
     font-size: 1.3rem;
     margin-bottom: 15px;
     color: var(--primary);
 }

 .service-item p {
     font-size: 0.95rem;
     color: var(--text-gray);
     line-height: 1.6;
 }

 /* =========================================
           MINI-CARRUSEL (GALERÍA DE TRABAJOS)
           ========================================= */
 .gallery-item {
     padding: 0;
     overflow: hidden;
     position: relative;
     min-height: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 4px solid var(--accent);
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 /* Ocupa el espacio vacío (2 columnas) en pantallas grandes */
 @media (min-width: 1050px) {
     .gallery-item {
         grid-column: span 2;
     }
 }

 .mini-carousel {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .m-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease-in-out;
     background-color: #000;
 }

 .m-slide.active {
     opacity: 1;
     z-index: 2;
 }

 .m-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.85;
     transition: transform 5s ease;
 }

 .m-slide.active img {
     transform: scale(1.05);
 }

 .m-caption {
     position: absolute;
     bottom: 25px;
     left: 25px;
     background: rgba(4, 30, 58, 0.9);
     color: white;
     padding: 10px 20px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 0.9rem;
     z-index: 10;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-left: 4px solid var(--accent);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 /* =========================================
           CALL TO ACTION (CTA) DEL SERVICIO
           ========================================= */
 .cta-service {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
     padding: 60px 5%;
     text-align: center;
     margin: 40px auto 80px;
     max-width: 1200px;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .cta-service h3 {
     font-family: 'Cinzel', serif;
     font-size: 2rem;
     margin-bottom: 15px;
     color: var(--accent);
 }

 .cta-service p {
     font-size: 1.1rem;
     margin-bottom: 30px;
     color: #cbd5e1;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.6;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .btn-cta-primary {
     background: var(--accent);
     color: var(--primary-dark);
     padding: 15px 30px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 8px;
     text-decoration: none;
     transition: 0.3s;
     box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
 }

 .btn-cta-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(197, 160, 89, 0.5);
     background: white;
 }

 .btn-cta-outline {
     border: 2px solid var(--wsp-green);
     color: white;
     padding: 13px 25px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 700;
     transition: 0.3s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

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



 /* =========================================
           CONTENIDO DEL SERVICIO
           ========================================= */
 .service-container {
     padding: 80px 5%;
     max-width: 1200px;
     margin: 0 auto;
 }

 .service-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .service-header h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .service-header p {
     font-size: 1.1rem;
     color: var(--text-gray);
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.8;
 }

 .service-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
 }

 .service-item {
     background: white;
     padding: 40px 30px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     text-align: center;
     border-bottom: 4px solid var(--accent);
     transition: var(--transition);
 }

 .service-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 .service-item i {
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 20px;
     transition: 0.3s;
 }

 .service-item:hover i {
     color: var(--accent);
     transform: scale(1.1);
 }

 .service-item h3 {
     font-family: 'Cinzel', serif;
     font-size: 1.3rem;
     margin-bottom: 15px;
     color: var(--primary);
 }

 .service-item p {
     font-size: 0.95rem;
     color: var(--text-gray);
     line-height: 1.6;
 }

 /* =========================================
           MINI-CARRUSEL (GALERÍA DE TRABAJOS)
           ========================================= */
 .gallery-item {
     padding: 0;
     overflow: hidden;
     position: relative;
     min-height: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 4px solid var(--accent);
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 /* Ocupa el espacio vacío (2 columnas) en pantallas grandes */
 @media (min-width: 1050px) {
     .gallery-item {
         grid-column: span 2;
     }
 }

 .mini-carousel {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .m-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease-in-out;
     background-color: #000;
 }

 .m-slide.active {
     opacity: 1;
     z-index: 2;
 }

 .m-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.85;
     transition: transform 5s ease;
 }

 .m-slide.active img {
     transform: scale(1.05);
 }

 .m-caption {
     position: absolute;
     bottom: 25px;
     left: 25px;
     background: rgba(4, 30, 58, 0.9);
     color: white;
     padding: 10px 20px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 0.9rem;
     z-index: 10;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-left: 4px solid var(--accent);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 /* =========================================
           CALL TO ACTION (CTA) DEL SERVICIO
           ========================================= */
 .cta-service {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
     padding: 60px 5%;
     text-align: center;
     margin: 40px auto 80px;
     max-width: 1200px;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .cta-service h3 {
     font-family: 'Cinzel', serif;
     font-size: 2rem;
     margin-bottom: 15px;
     color: var(--accent);
 }

 .cta-service p {
     font-size: 1.1rem;
     margin-bottom: 30px;
     color: #cbd5e1;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.6;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .btn-cta-primary {
     background: var(--accent);
     color: var(--primary-dark);
     padding: 15px 30px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 8px;
     text-decoration: none;
     transition: 0.3s;
     box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
 }

 .btn-cta-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(197, 160, 89, 0.5);
     background: white;
 }

 .btn-cta-outline {
     border: 2px solid var(--wsp-green);
     color: white;
     padding: 13px 25px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 700;
     transition: 0.3s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

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

/* =========================================
           HERO DE SERVICIO (TERMINACIONES)
           ========================================= */
 .hero-service {
     height: 40vh;
     min-height: 350px;
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.95)), url('https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&w=1920');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     box-sizing: border-box;
     padding-top: 80px;
 }

 .hero-service h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.5rem;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--accent);
     margin-bottom: 10px;
 }

 .hero-service p {
     font-size: 1.1rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: white;
 }

 /* =========================================
           CONTENIDO DEL SERVICIO
           ========================================= */
 .service-container {
     padding: 80px 5%;
     max-width: 1200px;
     margin: 0 auto;
 }

 .service-header {
     text-align: center;
     margin-bottom: 60px;
 }

 .service-header h2 {
     font-family: 'Cinzel', serif;
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .service-header p {
     font-size: 1.1rem;
     color: var(--text-gray);
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.8;
 }

 .service-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
 }

 .service-item {
     background: white;
     padding: 40px 30px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     text-align: center;
     border-bottom: 4px solid var(--accent);
     transition: var(--transition);
 }

 .service-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }

 .service-item i {
     font-size: 2.5rem;
     color: var(--primary);
     margin-bottom: 20px;
     transition: 0.3s;
 }

 .service-item:hover i {
     color: var(--accent);
     transform: scale(1.1);
 }

 .service-item h3 {
     font-family: 'Cinzel', serif;
     font-size: 1.3rem;
     margin-bottom: 15px;
     color: var(--primary);
 }

 .service-item p {
     font-size: 0.95rem;
     color: var(--text-gray);
     line-height: 1.6;
 }

 /* =========================================
           MINI-CARRUSEL (GALERÍA DE TRABAJOS)
           ========================================= */
 .gallery-item {
     padding: 0;
     overflow: hidden;
     position: relative;
     min-height: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-bottom: 4px solid var(--accent);
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 /* Ocupa el espacio vacío (2 columnas) en pantallas grandes */
 @media (min-width: 1050px) {
     .gallery-item {
         grid-column: span 2;
     }
 }

 .mini-carousel {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 .m-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease-in-out;
     background-color: #000;
 }

 .m-slide.active {
     opacity: 1;
     z-index: 2;
 }

 .m-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0.85;
     transition: transform 5s ease;
 }

 .m-slide.active img {
     transform: scale(1.05);
 }

 .m-caption {
     position: absolute;
     bottom: 25px;
     left: 25px;
     background: rgba(4, 30, 58, 0.9);
     color: white;
     padding: 10px 20px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 0.9rem;
     z-index: 10;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-left: 4px solid var(--accent);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 /* =========================================
           CALL TO ACTION (CTA) DEL SERVICIO
           ========================================= */
 .cta-service {
     background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
     color: white;
     padding: 60px 5%;
     text-align: center;
     margin: 40px auto 80px;
     max-width: 1200px;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .cta-service h3 {
     font-family: 'Cinzel', serif;
     font-size: 2rem;
     margin-bottom: 15px;
     color: var(--accent);
 }

 .cta-service p {
     font-size: 1.1rem;
     margin-bottom: 30px;
     color: #cbd5e1;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.6;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .btn-cta-primary {
     background: var(--accent);
     color: var(--primary-dark);
     padding: 15px 30px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 8px;
     text-decoration: none;
     transition: 0.3s;
     box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
 }

 .btn-cta-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(197, 160, 89, 0.5);
     background: white;
 }

 .btn-cta-outline {
     border: 2px solid var(--wsp-green);
     color: white;
     padding: 13px 25px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: 700;
     transition: 0.3s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

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

/* =========================================
   AJUSTES RESPONSIVOS (MÓVIL Y TABLET)
   ========================================= */

@media (max-width: 992px) {
    .hero-service h1 {
        font-size: 2.8rem;
    }
    .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .hero-service {
        height: auto;
        padding: 120px 20px 60px;
    }
    .hero-service h1 {
        font-size: 2.2rem;
    }
    .service-container {
        padding: 50px 20px;
    }
    .service-header h2 {
        font-size: 1.8rem;
    }
    .cta-service {
        padding: 40px 20px;
        margin: 20px 15px 60px;
    }
}

@media (max-width: 480px) {
    .hero-service h1 {
        font-size: 1.8rem;
    }
    .hero-service p {
        font-size: 0.9rem;
    }
    .service-grid {
        grid-template-columns: 1fr; /* Una sola columna en celulares pequeños */
    }
    .cta-buttons {
        flex-direction: column; /* Botones uno arriba del otro */
        gap: 15px;
    }
    .btn-cta-primary, .btn-cta-outline {
        width: 100%;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }
    .m-caption {
        left: 15px;
        bottom: 15px;
        font-size: 0.75rem;
        padding: 8px 15px;
    }
}

 /* =========================================
           HERO DE PROYECTOS / GALERÍA
           ========================================= */
 .hero-gallery {
     height: 45vh;
     min-height: 380px;
     background: linear-gradient(rgba(4, 30, 58, 0.85), rgba(4, 30, 58, 0.95)), url('imagenes/enfierradura.jpeg');
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     box-sizing: border-box;
     padding-top: 80px;
 }

 .hero-gallery h1 {
     font-family: 'Cinzel', serif;
     font-size: 3.5rem;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: var(--white);
     margin-bottom: 10px;
 }

 .hero-gallery p {
     font-size: 1.2rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--accent);
 }

 /* =========================================
           GALERÍA DE TRABAJOS (MOSAICO)
           ========================================= */
 .gallery-wrapper {
     padding: 80px 5%;
     max-width: 1300px;
     margin: 0 auto;
 }

 .gallery-category-title {
     font-family: 'Cinzel', serif;
     font-size: 1.8rem;
     color: var(--primary);
     border-bottom: 2px solid var(--accent);
     padding-bottom: 10px;
     margin-bottom: 40px;
     margin-top: 60px;
 }

 .gallery-category-title:first-child {
     margin-top: 0;
 }

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 25px;
 }

 .gallery-card {
     position: relative;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     aspect-ratio: 4/3;
     cursor: pointer;
 }

 .gallery-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
 }

 .gallery-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(0deg, rgba(4, 30, 58, 0.95) 0%, rgba(4, 30, 58, 0.4) 100%);
     opacity: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 30px 20px;
     transition: opacity 0.4s ease;
 }

 .gallery-card:hover img {
     transform: scale(1.1);
 }

 .gallery-card:hover .gallery-overlay {
     opacity: 1;
 }

 .gallery-overlay h4 {
     color: var(--accent);
     font-family: 'Cinzel', serif;
     font-size: 1.2rem;
     margin-bottom: 5px;
     transform: translateY(20px);
     transition: transform 0.4s ease;
 }

 .gallery-overlay p {
     color: white;
     font-size: 0.85rem;
     margin: 0;
     transform: translateY(20px);
     transition: transform 0.4s ease 0.1s;
 }

 .gallery-card:hover .gallery-overlay h4,
 .gallery-card:hover .gallery-overlay p {
     transform: translateY(0);
 }

 /* =========================================
           CALL TO ACTION (CTA) PROYECTOS
           ========================================= */
 .cta-projects {
     background: var(--primary);
     color: white;
     padding: 60px 5%;
     text-align: center;
     margin: 40px auto 80px;
     max-width: 1200px;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 }

 .cta-projects h3 {
     font-family: 'Cinzel', serif;
     font-size: 2rem;
     margin-bottom: 15px;
     color: var(--accent);
 }

 .cta-projects p {
     font-size: 1.1rem;
     margin-bottom: 30px;
     color: #cbd5e1;
     line-height: 1.6;
 }

 .cta-buttons {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .btn-cta-primary {
     background: var(--accent);
     color: var(--primary-dark);
     padding: 15px 30px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 1px;
     border-radius: 8px;
     text-decoration: none;
     transition: 0.3s;
     box-shadow: 0 4px 15px rgba(197, 160, 89, 0.3);
 }

 .btn-cta-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(197, 160, 89, 0.5);
     background: white;
 }