:root {
            --brand-navy: #0C336E;
            --brand-navy-dark: #092656;
            --brand-cyan: #007EBA;
            --brand-cyan-dark: #006398;
            --brand-red: #D70E1B;
            --brand-red-dark: #B00C16;
            --brand-white: #FFFFFF;
            --brand-bg: #F4F6F8;
            --brand-border: #D0D7E0;
            --brand-text: #1A2433;
            --brand-muted: #5A6B7D;
            --brand-whatsapp: #25D366;
            --primary-red: #D70E1B;
            --primary-blue: #0C336E;
            --dark-gray: #1A2433;
            --light-gray: #F4F6F8;
            --white: #FFFFFF;
            --bs-primary: #0C336E;
            --bs-primary-rgb: 12, 51, 110;
            --bs-danger: #D70E1B;
            --bs-danger-rgb: 215, 14, 27;
            --bs-info: #007EBA;
            --bs-info-rgb: 0, 126, 186;
            --bs-secondary: #5A6B7D;
            --bs-success: #007EBA;
            --bs-link-color: #007EBA;
            --bs-link-hover-color: #006398;
            --bs-body-color: #1A2433;
            --bs-body-bg: #FFFFFF;
            --bs-border-color: #D0D7E0;
            --bs-heading-color: #0C336E;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
            line-height: 1.6;
        }

        /* Header Superior */
        .top-header {
            background-color: var(--light-gray);
            padding: 8px 0;
            font-size: 16px;
            font-weight: 600;
        }

        .top-header .contact-info {
            color: var(--dark-gray);
            display: flex;
            align-items: center;
            gap: 30px;
            flex-wrap: wrap;
        }

        .phone-group {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 8px 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            border-left: 4px solid var(--primary-red);
        }

        .phone-group-label {
            font-size: 11px;
            color: var(--primary-red);
            font-weight: 600;
            margin-right: 8px;
            text-transform: uppercase;
        }

        .contact-divider {
            width: 1px;
            height: 25px;
            background: linear-gradient(to bottom, transparent, var(--primary-red), transparent);
            margin: 0 10px;
        }

        .top-header .contact-info i {
            font-size: 14px;
            margin-right: 6px;
            color: var(--primary-red);
            opacity: 0.8;
        }

        .top-header .contact-info a {
            color: var(--dark-gray);
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .top-header .contact-info a:hover {
            color: var(--primary-red);
            transform: translateY(-3px) scale(1.1);
            text-shadow: 0 2px 8px rgba(215, 14, 27, 0.3);
            font-weight: 700;
        }

        .phone-group:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 25px rgba(215, 14, 27, 0.2);
            border-left-width: 6px;
        }

        .phone-group a:hover i {
            animation: phoneRing 0.5s ease-in-out;
            color: var(--primary-red);
            transform: scale(1.3);
        }

        .email-contact {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            background: rgba(12, 51, 110, 0.1);
            border-radius: 25px;
            border-left: 4px solid var(--primary-blue);
        }

        .social-icons {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            margin-left: 20px;
            padding-left: 20px;
            border-left: 1px solid rgba(0, 0, 0, 0.1);
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: var(--dark-gray);
            background: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
            text-decoration: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .social-link:hover {
            transform: translateY(-2px);
            color: white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .social-link i {
            font-size: 16px;
        }

        .social-link:hover .fa-facebook {
            color: #1877f2;
            text-shadow: 0 2px 4px rgba(24, 119, 242, 0.3);
        }

        .social-link:hover .fa-tiktok {
            color: #000000;
            text-shadow: 2px 2px #ff0050;
        }

        .social-link:hover .fa-instagram {
            background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .social-link:hover .fa-youtube {
            color: #ff0000;
            text-shadow: 0 2px 4px rgba(255, 0, 0, 0.3);
        }

        /* Header Superior Uniforme */
        .top-header-uniform {
            background: linear-gradient(135deg, #f4f6f8 0%, #d0d7e0 100%);
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .top-header-uniform::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-red), var(--primary-blue));
        }

        .contact-info-uniform {
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: nowrap;
        }

        .contact-info-right {
            display: flex;
            align-items: center;
            gap: 20px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .contact-group {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 16px;
            background: white;
            border-radius: 50px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
            min-height: 70px;
        }

        .contact-group:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .group-icon {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
            flex-shrink: 0;
        }

        .sales-group .group-icon {
            background: linear-gradient(135deg, #d70e1b, #b00c16);
        }

        .support-group .group-icon {
            background: linear-gradient(135deg, #007eba, #006398);
        }

        .email-group .group-icon {
            background: linear-gradient(135deg, #0c336e, #092656);
        }

        .email-group {
            flex-shrink: 0;
            max-width: 250px;
        }

        .social-group {
            flex-shrink: 0;
            min-width: 180px;
        }

        .social-icon {
            background: linear-gradient(135deg, #0c336e, #092656) !important;
        }

        .social-group .group-label {
            color: #0c336e;
        }

        .whatsapp-group {
            flex-shrink: 0;
            min-width: 200px;
            min-height: 70px;
            display: flex;
            align-items: center;
        }

        .whatsapp-icon {
            background: linear-gradient(135deg, #25d366, #006398) !important;
        }

        .email-icon {
            background: linear-gradient(135deg, #0c336e, #092656) !important;
        }

        .location-icon {
            background: linear-gradient(135deg, #5a6b7d, #5a6b7d) !important;
        }

        /* Contenedor combinado WhatsApp + Email */
        .whatsapp-email-group {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            background: white;
            border-radius: 50px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
            flex-wrap: nowrap;
        }

        .whatsapp-email-group:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .internal-separator {
            width: 1px;
            height: 35px;
            background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent);
            margin: 0 8px;
            flex-shrink: 0;
        }

        .group-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .group-label {
            font-size: 10px;
            font-weight: 700;
            color: var(--primary-red);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1;
        }

        .group-links {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .contact-link {
            font-size: 13px;
            font-weight: 600;
            color: #5a6b7d;
            text-decoration: none;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .contact-link:hover {
            color: var(--primary-red);
            transform: scale(1.05);
        }

        .email-link {
            font-size: 14px !important;
            color: var(--primary-blue) !important;
        }

        .email-link:hover {
            color: #092656 !important;
        }

        .whatsapp-link {
            font-size: 14px !important;
            color: #25d366 !important;
            font-weight: 700 !important;
        }

        .whatsapp-link:hover {
            color: #006398 !important;
        }

        .whatsapp-group .group-label {
            color: #25d366;
        }

        .spacer-line {
            height: 20px;
            opacity: 0;
        }

        .location-text {
            font-size: 13px;
            font-weight: 600;
            color: #5a6b7d;
        }

        .uniform-divider {
            width: 2px;
            height: 30px;
            background: linear-gradient(to bottom, transparent, rgba(215, 14, 27, 0.3), transparent);
            border-radius: 1px;
        }

        .social-icons-uniform {
            display: flex;
            gap: 8px;
            margin-top: 4px;
        }

        .social-link-uniform {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 11px;
            color: white;
        }

        .social-link-uniform.facebook {
            background: linear-gradient(135deg, #1877f2, #166fe5);
        }

        .social-link-uniform.tiktok {
            background: linear-gradient(135deg, #ff0050, #e6004a);
        }

        .social-link-uniform.instagram {
            background: linear-gradient(135deg, #e4405f, #d13456);
        }

        .social-link-uniform.youtube {
            background: linear-gradient(135deg, #ff0000, #cc0000);
        }

        .social-link-uniform:hover {
            transform: scale(1.1) translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        /* Responsive para Header Uniforme */
        @media (max-width: 768px) {
            .top-header-uniform {
                padding: 10px 0;
            }

            .contact-info-uniform,
            .contact-info-right {
                justify-content: flex-start; /* Alinear a la izquierda */
                align-items: flex-start;
                gap: 15px;
                flex-wrap: wrap;
            }

            .contact-group {
                padding: 8px 12px;
                flex: 1;
                min-width: auto;
            }

            .whatsapp-email-group {
                padding: 8px 15px;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: flex-start; /* Alinear a la izquierda */
                align-items: center;
            }

            .group-icon {
                width: 30px;
                height: 30px;
                font-size: 12px;
            }

            .contact-link {
                font-size: 11px;
            }

            .email-link,
            .whatsapp-link {
                font-size: 12px !important;
            }

            .uniform-divider {
                display: none;
            }

            .internal-separator {
                height: 25px;
            }

            .social-icons-uniform {
                gap: 6px;
            }

            .social-link-uniform {
                width: 20px;
                height: 20px;
                font-size: 10px;
            }
        }

        @media (max-width: 576px) {
            .contact-info-uniform,
            .contact-info-right {
                flex-direction: column;
                gap: 10px;
                width: 100%;
                align-items: flex-start; /* Alinear a la izquierda */
            }

            .contact-group {
                width: 100%;
                justify-content: flex-start; /* Alinear a la izquierda */
            }

            .whatsapp-email-group {
                width: 100%;
                justify-content: flex-start; /* Alinear a la izquierda */
                align-items: flex-start;
                flex-direction: column;
                gap: 15px;
                padding: 15px;
            }

            .internal-separator {
                display: none;
            }

            .group-links {
                justify-content: flex-start; /* Alinear a la izquierda */
            }
        }

        /* Cookie Banner */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.95);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 1000;
            transform: translateY(100%);
            transition: transform 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .cookie-banner.show {
            transform: translateY(0);
        }

        .cookie-content {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }

        .cookie-icon {
            font-size: 24px;
            color: #007eba;
        }

        .cookie-text {
            font-size: 14px;
            line-height: 1.4;
        }

        .cookie-text a {
            color: #0c336e;
            text-decoration: none;
        }

        .cookie-text a:hover {
            text-decoration: underline;
        }

        .cookie-buttons {
            display: flex;
            gap: 10px;
        }

        .cookie-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .cookie-btn-accept {
            background: #007eba;
            color: white;
        }

        .cookie-btn-accept:hover {
            background: #006398;
            transform: translateY(-1px);
        }

        .cookie-btn-decline {
            background: transparent;
            color: #d70e1b;
            border: 1px solid #d70e1b;
        }

        .cookie-btn-decline:hover {
            background: #d70e1b;
            color: white;
        }

        @media (max-width: 768px) {
            .social-icons {
                margin-left: 0;
                margin-top: 10px;
                padding-left: 0;
                border-left: none;
                justify-content: center;
                width: 100%;
            }

            .cookie-banner {
                flex-direction: column;
                gap: 15px;
                text-align: center;
                padding: 20px;
            }

            .cookie-content {
                flex-direction: column;
                gap: 10px;
            }

            .cookie-buttons {
                width: 100%;
                justify-content: center;
            }

                    .cookie-btn {
            flex: 1;
            max-width: 120px;
        }

        /* Cookie Policy Modal */
        .cookie-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

        .cookie-modal.show {
            display: flex;
        }

        .cookie-modal-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.8) translateY(-50px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .cookie-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f4f6f8;
        }

        .cookie-modal-title {
            font-size: 24px;
            font-weight: 700;
            color: #1a2433;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cookie-modal-close {
            background: none;
            border: none;
            font-size: 28px;
            color: #5a6b7d;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .cookie-modal-close:hover {
            background: #f4f6f8;
            color: #1a2433;
            transform: rotate(90deg);
        }

        .cookie-modal-body {
            color: #5a6b7d;
            line-height: 1.6;
        }

        .cookie-section {
            margin-bottom: 20px;
        }

        .cookie-section h4 {
            color: #1a2433;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cookie-list {
            list-style: none;
            padding: 0;
        }

        .cookie-list li {
            padding: 8px 0;
            border-bottom: 1px solid #d0d7e0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cookie-list li:last-child {
            border-bottom: none;
        }

        .cookie-list li i {
            color: #007eba;
            font-size: 16px;
        }

        @media (max-width: 768px) {
            .cookie-modal-content {
                padding: 20px;
                margin: 20px;
            }

            .cookie-modal-title {
                font-size: 20px;
            }
        }
        }

        /* Fix global: Modal de Cookies siempre como overlay y oculto por defecto */
        .cookie-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10000;
            display: none;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

        .cookie-modal.show {
            display: flex;
        }

        .cookie-modal-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease;
        }

        .whatsapp-contact {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            background: rgba(37, 211, 102, 0.1);
            border-radius: 25px;
            border-left: 4px solid #25d366;
        }

        .whatsapp-contact i {
            color: #25d366 !important;
        }

        /* Botón Flotante de Teléfono */
        .floating-phone {
            position: fixed;
            bottom: 120px;
            right: 30px;
            background: linear-gradient(135deg, var(--primary-red), #b00c16);
            border: none;
            width: 65px;
            height: 65px;
            color: var(--white);
            border-radius: 50%;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(215, 14, 27, 0.4);
            z-index: 1000;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            animation: phonePulse 3s infinite;
        }

        .floating-phone:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 15px 35px rgba(215, 14, 27, 0.6);
            color: var(--white);
            animation: phoneRing 0.5s ease-in-out;
        }

        .floating-phone i {
            font-size: 28px;
        }

        /* Modal de Contactos */
        .contact-modal {
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
        }

        .contact-modal-content {
            background: linear-gradient(135deg, #ffffff 0%, #f4f6f8 100%);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            border: none;
            overflow: hidden;
        }

        .contact-modal-header {
            background: linear-gradient(135deg, var(--primary-red) 0%, #b00c16 100%);
            color: white;
            padding: 25px;
            text-align: center;
            border: none;
        }

        .contact-modal-body {
            padding: 30px;
        }

        .contact-option {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            margin: 10px 0;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-decoration: none;
            color: var(--dark-gray);
            transition: all 0.3s ease;
            border-left: 5px solid var(--primary-red);
        }

        .contact-option:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 10px 25px rgba(215, 14, 27, 0.2);
            color: var(--primary-red);
            border-left-width: 8px;
        }

        .contact-option i {
            font-size: 24px;
            margin-right: 15px;
            color: var(--primary-red);
            width: 40px;
            text-align: center;
        }

        .contact-option.whatsapp {
            border-left-color: #25d366;
        }

        .contact-option.whatsapp i {
            color: #25d366;
        }

        .contact-option.whatsapp:hover {
            color: #25d366;
            box-shadow: 0 10px 25px rgba(37, 211, 102, 0.2);
        }

        .contact-option.email {
            border-left-color: var(--primary-blue);
        }

        .contact-option.email i {
            color: var(--primary-blue);
        }

        .contact-option.email:hover {
            color: var(--primary-blue);
            box-shadow: 0 10px 25px rgba(12, 51, 110, 0.2);
        }

        .top-header .social-media i {
            color: var(--dark-gray);
            margin-left: 15px;
            transition: color 0.3s ease;
        }

        .top-header .social-media i:hover {
            color: var(--primary-blue);
        }

        .top-header .contact-info a {
            transition: color 0.3s ease;
        }

        .top-header .contact-info a:hover {
            color: var(--primary-blue) !important;
        }

        .top-header .social-media a {
            transition: color 0.3s ease;
        }

        .top-header .social-media a:hover i {
            color: var(--primary-blue);
        }

        /* Navegación Principal */
        .main-nav {
            background-color: var(--white);
            padding: 1px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .logo-container {
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
            height: 50px;
        }

        .rotating-text {
            margin-left: 15px;
            height: 20px;
            overflow: hidden;
            position: relative;
        }

        .text-slide {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease;
            color: var(--dark-gray);
            font-weight: 500;
            font-size: 14px;
            white-space: nowrap;
        }

        .text-slide.active {
            opacity: 1;
            transform: translateY(0);
        }

        .logo-container a {
            transition: transform 0.3s ease;
        }

        .logo-container a:hover {
            transform: scale(1.02);
        }

        .logo-img {
            width: 60px;
            height: 50px;
            object-fit: contain;
            margin-right: 8px;
        }

        .nav-menu {
            background-color: var(--primary-red);
            padding: 0;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
            display: flex;
            justify-content: flex-end;
        }

        .nav-menu .container-fluid {
            max-width: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu .navbar-nav {
            flex-direction: row;
            justify-content: flex-end;
            width: auto;
            margin: 0;
            padding: 0;
        }

        .nav-menu .nav-item {
            margin: 0 2px;
        }

        .nav-menu .nav-link {
            color: var(--white) !important;
            font-weight: 500;
            text-transform: uppercase;
            padding: 6px 8px !important;
            position: relative;
            transition: all 0.3s ease;
            font-size: 13px;
            white-space: nowrap;
        }

        .nav-menu .nav-link:hover {
            background-color: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }

        

        .nav-menu .nav-link.active {
            border-bottom: 3px solid var(--dark-gray);
        }

         .nav-menu .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background-color: var(--dark-gray);
        }
 
         /* Correcciones de alineación para móvil (bloques de contacto, en especial EMAIL) */
         @media (max-width: 768px) {
             .contact-group,
             .whatsapp-email-group {
                 align-items: center;
                 min-height: 64px;
             }
             /* Forzar que el bloque de EMAIL se comporte igual que los demás en móvil */
             .email-group {
                 width: 100%;
                 max-width: none;
                 display: flex !important;
                 align-items: center !important;
             }
             .email-group .group-icon {
                 align-self: center;
                 width: 35px;
                 height: 35px;
             }
             .contact-group .group-content,
             .email-group .group-content,
             .whatsapp-email-group .group-content {
                 display: flex !important;
                 flex-direction: column;
                 justify-content: center !important; /* vertical */
                 align-items: flex-start !important; /* horizontal a la izquierda */
                 line-height: 1.15;
                 gap: 2px;
             }
             .email-group .group-label { margin: 0 !important; line-height: 1 !important; }
             .email-group .email-link { margin: 0 !important; line-height: 1.15 !important; }
             /* Reglas defensivas si el bloque usa otras clases */
             [class*="email"] {
                 align-items: center !important;
             }
             [class*="email"] .group-content,
             [class*="email"] .texts,
             [class*="email"] .content,
             [class*="email"] .text {
                 display: flex !important;
                 flex-direction: column;
                 justify-content: center !important;
                 align-items: flex-start !important;
             }
             .contact-group .group-label,
             .contact-group .contact-link,
             .email-group .group-label,
             .email-group .email-link,
             [class*="email"] .group-label,
             [class*="email"] a {
                 line-height: 1.15 !important;
             }
             .group-label,
             .contact-link,
             .email-link,
             .whatsapp-link {
                 margin: 0 !important;
                 line-height: 1.15 !important;
             }
             .group-links {
                 align-items: flex-start !important;
                 justify-content: flex-start !important;
             }
             /* Redes sociales: alinear a la izquierda como los demás */
             .social-group .group-content { align-items: flex-start !important; }
             .social-icons-uniform { justify-content: flex-start !important; }
         }
        
         /* Navegación responsiva: hamburguesa visible en móvil y menú expandido en escritorio */
         @media (min-width: 992px) {
             .navbar-toggler {
                 display: none;
             }
             .navbar-collapse {
                 display: flex !important;
             }
         }

        /* Hero — navy y cian del logo + rojo de acento */
        .hero-section {
            --hero-navy: #0C336E;
            --hero-navy-2: #092656;
            --hero-steel: #C5D0E0;
            --hero-red: #D70E1B;
            background: var(--hero-navy);
            color: var(--white);
            padding: 56px 0;
            position: relative;
            overflow: hidden;
            margin-top: 0;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 14% 88%, rgba(215, 14, 27, 0.26), transparent 52%);
            pointer-events: none;
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--white);
            letter-spacing: -0.02em;
            animation: fadeInUp 1s ease;
        }

        .hero-accent {
            display: block;
            width: 52px;
            height: 4px;
            background: var(--hero-red);
            margin: 0 0 18px;
            border-radius: 1px;
        }

        .hero-subtitle {
            font-size: 1.1rem;
            margin-bottom: 22px;
            color: var(--hero-steel);
            opacity: 1;
            animation: fadeInUp 1s ease 0.2s both;
        }

        .hero-btn {
            background-color: var(--hero-red);
            border: none;
            padding: 15px 30px;
            color: var(--white);
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            transition: background-color 0.2s ease, transform 0.2s ease;
            animation: fadeInUp 1s ease 0.4s both;
        }

        .hero-btn:hover {
            background-color: #b00c16;
            transform: translateY(-2px);
            color: var(--white);
        }

        /* Hero Slider Styles */
        .hero-slider-container {
            position: relative;
            z-index: 2;
            border-radius: 12px;
            overflow: hidden;
            background: var(--hero-navy);
            border: 1px solid rgba(154, 171, 196, 0.18);
            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
        }

        .hero-slider-img {
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            object-position: center;
            border-radius: 12px;
            width: 100%;
            max-width: 100%;
        }

        #heroCarousel,
        #heroCarousel .carousel-inner,
        #heroCarousel .carousel-item {
            background: var(--hero-navy, #0c336e);
        }

        .carousel-indicators {
            bottom: 20px;
        }

        .carousel-indicators button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            border: 2px solid rgba(255,255,255,0.8);
            margin: 0 5px;
            transition: all 0.3s ease;
        }

        .carousel-indicators button.active {
            background-color: var(--hero-red, #d70e1b);
            border-color: var(--hero-red, #d70e1b);
            transform: scale(1.2);
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 50px;
            height: 50px;
            background-color: rgba(215, 14, 27, 0.82);
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            margin: 0 20px;
            transition: all 0.3s ease;
        }

        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            background-color: var(--hero-red, #d70e1b);
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 20px;
            height: 20px;
        }

        /* Secciones de Productos */
        .product-section {
            padding: 60px 0;
            background-color: var(--white);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 40px;
            color: var(--dark-gray);
        }

        .product-card {
            background: var(--white);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin-bottom: 25px;
            border: 1px solid #d0d7e0;
        }

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

        .product-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-blue), #092656);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: var(--white);
            font-size: 32px;
        }

        .product-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark-gray);
        }

        .product-description {
            color: #5a6b7d;
            margin-bottom: 20px;
        }

        /* Sección de Contacto Moderna */
        .contact-section-modern {
            background: linear-gradient(135deg, #f4f6f8 0%, #d0d7e0 100%);
            padding: 80px 0;
            position: relative;
        }

        .contact-section-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23ffffff" opacity="0.1"><polygon points="0,100 1000,0 1000,100"/></svg>');
            background-size: cover;
            pointer-events: none;
        }

        .section-title-modern {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--dark-gray);
            margin-bottom: 1rem;
            position: relative;
        }

        .section-title-modern i {
            color: var(--primary-red);
        }

        .section-subtitle-modern {
            font-size: 1.1rem;
            color: #5a6b7d;
            margin-bottom: 0;
            font-weight: 400;
        }

        .contact-card-modern {
            background: var(--white);
            border-radius: 20px;
            padding: 35px 25px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            height: 100%;
            border: 1px solid rgba(0,0,0,0.05);
            position: relative;
            overflow: hidden;
        }

        .contact-card-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-red), var(--primary-blue));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

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

        .contact-card-modern:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        }

        .contact-icon-modern {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 28px;
            color: var(--white);
            position: relative;
            transition: all 0.3s ease;
        }

        .phone-card .contact-icon-modern {
            background: linear-gradient(135deg, #d70e1b, #b00c16);
        }

        .whatsapp-card .contact-icon-modern {
            background: linear-gradient(135deg, #25d366, #006398);
        }

        .email-card .contact-icon-modern {
            background: linear-gradient(135deg, #0c336e, #092656);
        }

        .location-card .contact-icon-modern {
            background: linear-gradient(135deg, #5a6b7d, #5a6b7d);
        }

        .contact-card-modern:hover .contact-icon-modern {
            transform: scale(1.1) rotate(5deg);
        }

        .contact-title-modern {
            font-size: 1.4rem;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
            color: var(--dark-gray);
        }

        .contact-details {
            text-align: center;
            margin-bottom: 25px;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .phone-group-modern {
            margin-bottom: 15px;
        }

        .phone-label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary-red);
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .phone-number {
            display: block;
            font-size: 0.9rem;
            color: #5a6b7d;
            text-decoration: none;
            margin-bottom: 3px;
            transition: all 0.2s ease;
        }

        .phone-number:hover {
            color: var(--primary-red);
            font-weight: 500;
        }

        .contact-number, .contact-email, .contact-location {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark-gray);
            margin-bottom: 8px;
        }

        .contact-description {
            font-size: 0.9rem;
            color: #5a6b7d;
            margin-bottom: 10px;
        }

        .whatsapp-status {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: #25d366;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .status-text {
            font-size: 0.85rem;
            color: #25d366;
            font-weight: 500;
        }

        .email-response, .location-hours {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 0.85rem;
            color: #5a6b7d;
        }

        .contact-action {
            text-align: center;
        }

        .btn-contact-modern {
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 150px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-phone {
            background: linear-gradient(135deg, #d70e1b, #b00c16);
            color: white;
        }

        .btn-phone:hover {
            background: linear-gradient(135deg, #b00c16, #b00c16);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(215, 14, 27, 0.3);
            color: white;
        }

        .btn-whatsapp {
            background: linear-gradient(135deg, #25d366, #006398);
            color: white;
        }

        .btn-whatsapp:hover {
            background: linear-gradient(135deg, #006398, #006398);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
            color: white;
        }

        .btn-email {
            background: linear-gradient(135deg, #0c336e, #092656);
            color: white;
        }

        .btn-email:hover {
            background: linear-gradient(135deg, #092656, #092656);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(12, 51, 110, 0.3);
            color: white;
        }

        .btn-location {
            background: linear-gradient(135deg, #5a6b7d, #5a6b7d);
            color: white;
        }

        .btn-location:hover {
            background: linear-gradient(135deg, #5a6b7d, #1a2433);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(108, 117, 125, 0.3);
            color: white;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .contact-section-modern {
                padding: 60px 0;
            }
            
            .section-title-modern {
                font-size: 2rem;
            }
            
            .contact-card-modern {
                padding: 30px 20px;
                margin-bottom: 30px;
            }
            
            .contact-details {
                min-height: 100px;
            }
            
            .btn-contact-modern {
                min-width: 140px;
                padding: 10px 20px;
            }
        }

        /* Sección de Contacto Original (mantener para compatibilidad) */
        .contact-section {
            background-color: var(--light-gray);
            padding: 60px 0;
        }

        .contact-card {
            background: var(--white);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
        }

        .contact-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        .contact-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-blue), #092656);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: var(--white);
            font-size: 24px;
        }

        .contact-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--dark-gray);
        }

        .contact-info {
            color: #5a6b7d;
            margin-bottom: 15px;
        }

        .whatsapp-btn {
            background: linear-gradient(135deg, #25d366, #006398);
            border: none;
            padding: 12px 25px;
            color: var(--white);
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .whatsapp-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
            color: var(--white);
        }

        .whatsapp-btn i {
            margin-right: 8px;
        }

        /* Sección de Mapa */
        .map-section {
            background-color: var(--white);
            padding: 60px 0;
        }

        .map-container {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .map-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .map-container iframe {
            border-radius: 15px;
        }

        .map-info {
            background: var(--light-gray);
            border-radius: 15px;
            padding: 30px;
            margin-top: 30px;
        }

        .map-info h4 {
            color: var(--dark-gray);
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .map-info p {
            color: #5a6b7d;
            margin-bottom: 0;
            line-height: 1.6;
        }

        .map-info i {
            color: var(--primary-red);
        }

        /* Modal del Mapa */
        .map-modal-container {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .map-modal-info {
            padding: 20px;
            background: var(--light-gray);
            border-radius: 10px;
            height: 100%;
        }

        .map-modal-info h6 {
            color: var(--dark-gray);
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
            margin-top: 20px;
        }

        .map-modal-info h6:first-child {
            margin-top: 0;
        }

        .map-modal-info p {
            color: #5a6b7d;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .map-modal-info i {
            color: var(--primary-red);
        }

        .modal-xl {
            max-width: 1200px;
        }

        /* Mejoras de visibilidad para teléfonos y WhatsApp */
        .contact-highlight {
            background: linear-gradient(135deg, #007eba, #007eba);
            color: #000;
            padding: 15px;
            border-radius: 10px;
            margin: 10px 0;
            font-weight: 700;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 126, 186, 0.3);
            animation: pulseYellow 3s infinite;
        }

        @keyframes pulseYellow {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(0, 126, 186, 0.7);
            }
            50% {
                transform: scale(1.02);
                box-shadow: 0 0 0 10px rgba(0, 126, 186, 0);
            }
        }

        @keyframes phoneRing {
            0%, 100% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(-15deg) scale(1.2); }
            75% { transform: rotate(15deg) scale(1.2); }
        }

        @keyframes phoneEntrance {
            0% {
                opacity: 0;
                transform: translateX(-30px) scale(0.8);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes phonePulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(215, 14, 27, 0.4);
            }
            50% {
                box-shadow: 0 0 0 8px rgba(215, 14, 27, 0);
            }
        }

        .phone-group {
            animation: phoneEntrance 0.8s ease-out, phonePulse 3s infinite 2s;
        }

        .phone-group:nth-child(1) { animation-delay: 0.2s, 2.2s; }
        .phone-group:nth-child(3) { animation-delay: 0.4s, 2.4s; }

        /* Responsive para header armonioso */
        @media (max-width: 768px) {
            .top-header {
                padding: 15px 0;
            }

            .contact-info {
                flex-direction: column;
                gap: 15px !important;
                align-items: center;
            }

            .phone-group {
                flex-direction: column;
                gap: 8px;
                text-align: center;
                width: 100%;
            }

            .phone-group-label {
                margin-right: 0;
                margin-bottom: 5px;
            }

            .contact-divider {
                width: 80%;
                height: 1px;
                background: linear-gradient(to right, transparent, var(--primary-red), transparent);
                margin: 10px 0;
            }

            .email-contact,
            .whatsapp-contact {
                justify-content: center;
                width: 100%;
            }
        }

        /* Responsive styles for map modal */
        @media (max-width: 768px) {
            .modal-xl {
                max-width: 95%;
                margin: 1rem auto;
            }
            
            .map-modal-info {
                margin-top: 20px;
                height: auto;
            }
            
            .map-modal-container iframe {
                height: 300px;
            }
            
            
        }

        @media (max-width: 576px) {
            .modal-xl {
                max-width: 100%;
                margin: 0.5rem auto;
            }
            
            .map-modal-container iframe {
                height: 250px;
            }
            
            .map-modal-info {
                padding: 15px;
            }
            
            .map-modal-info h6 {
                font-size: 0.9rem;
                margin-top: 15px;
            }
            
            .map-modal-info p {
                font-size: 0.8rem;
            }
        }

        /* Footer */
        .footer {
            background-color: var(--dark-gray);
            color: var(--white);
            padding: 40px 0 20px;
        }

        .footer h5 {
            color: var(--white);
            margin-bottom: 20px;
        }

        .footer p, .footer a {
            color: #c5d0e0;
            text-decoration: none;
        }

        .footer a:hover {
            color: var(--white);
        }

        .footer-focus {
            margin-bottom: 28px;
        }

        .footer-focus__title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.15rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .footer a.footer-focus-card {
            display: block;
            height: 100%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            overflow: hidden;
            text-decoration: none;
            color: var(--white);
        }

        .footer a.footer-focus-card:hover,
        .footer a.footer-focus-card:focus {
            color: var(--white);
            background: rgba(255, 255, 255, 0.1);
            outline: none;
        }

        .footer-focus-card:focus-visible {
            box-shadow: 0 0 0 3px rgba(12, 51, 110, 0.55);
        }

        .footer-focus-card img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            object-position: center;
        }

        .footer-focus-card span {
            display: block;
            padding: 12px 10px;
            text-align: center;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--white);
        }

        /* Animaciones */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            opacity: 1;
            animation: none;
        }

                 /* Botón Flotante */
         .floating-btn {
             position: fixed;
             bottom: 30px;
             right: 30px;
             background: linear-gradient(135deg, var(--primary-blue), #092656);
             border: none;
             padding: 20px 25px;
             color: var(--white);
             border-radius: 50px;
             font-weight: 600;
             text-transform: uppercase;
             transition: all 0.3s ease;
             box-shadow: 0 8px 25px rgba(12, 51, 110, 0.4);
             z-index: 1000;
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 10px;
         }

         .floating-btn:hover {
             transform: translateY(-5px);
             box-shadow: 0 12px 35px rgba(12, 51, 110, 0.6);
             color: var(--white);
         }

         .floating-btn i {
             font-size: 20px;
         }

         .floating-btn .btn-text {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
         }

         .floating-btn .btn-text small {
             font-size: 10px;
             opacity: 0.9;
             line-height: 1;
         }

         .floating-btn .btn-text strong {
             font-size: 12px;
             line-height: 1;
         }

         /* Botón Flotante de Calculadora */
         .floating-calculator {
             position: fixed;
             bottom: 30px;
             right: 580px;
             background: linear-gradient(135deg, #d70e1b, #b00c16);
             border: none;
             padding: 20px 25px;
             color: var(--white);
             border-radius: 50px;
             font-weight: 600;
             text-transform: uppercase;
             transition: all 0.3s ease;
             box-shadow: 0 8px 25px rgba(215, 14, 27, 0.4);
             z-index: 1000;
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 10px;
             text-decoration: none;
         }

         .floating-calculator:hover {
             transform: translateY(-5px);
             box-shadow: 0 12px 35px rgba(215, 14, 27, 0.6);
             color: var(--white);
         }

         .floating-calculator i {
             font-size: 24px;
         }

         .floating-calculator .btn-text {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
         }

         .floating-calculator .btn-text small {
             font-size: 10px;
             opacity: 0.9;
             line-height: 1;
         }

         .floating-calculator .btn-text strong {
             font-size: 12px;
             line-height: 1;
         }

         /* Botón Flotante de WhatsApp */
                 .floating-whatsapp:not(.cs-fab-wa) {
            position: fixed;
            bottom: 30px;
            right: 250px;
            background: linear-gradient(135deg, #0c336e, #092656);
            border: none;
            padding: 20px 25px;
            color: var(--white);
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(12, 51, 110, 0.4);
            z-index: 1000;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .floating-whatsapp:not(.cs-fab-wa):hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(12, 51, 110, 0.6);
            color: var(--white);
        }

        .floating-whatsapp i {
            font-size: 24px;
        }

        .floating-whatsapp .btn-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .floating-whatsapp .btn-text small {
            font-size: 10px;
            opacity: 0.9;
            line-height: 1;
        }

        .floating-whatsapp .btn-text strong {
            font-size: 12px;
            line-height: 1;
        }

         /* Botón Flotante de Compartir */
         .floating-share {
             position: fixed;
             bottom: 30px;
             right: 420px;
             background: linear-gradient(135deg, #5a6b7d, #5a6b7d);
             border: none;
             padding: 20px 25px;
             color: var(--white);
             border-radius: 50px;
             font-weight: 600;
             text-transform: uppercase;
             transition: all 0.3s ease;
             box-shadow: 0 8px 25px rgba(108, 117, 125, 0.4);
             z-index: 1000;
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 10px;
             text-decoration: none;
         }

         .floating-share:hover {
             transform: translateY(-5px);
             box-shadow: 0 12px 35px rgba(108, 117, 125, 0.6);
             color: var(--white);
         }

         .floating-share i {
             font-size: 24px;
         }

         .floating-share .btn-text {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
         }

         .floating-share .btn-text small {
             font-size: 10px;
             opacity: 0.9;
             line-height: 1;
         }

         .floating-share .btn-text strong {
             font-size: 12px;
             line-height: 1;
         }

         /* Botón Flotante de Tienda */
         .floating-store-btn {
             position: fixed;
             top: 20px;
             right: 20px;
             background: linear-gradient(135deg, #d70e1b, #b00c16);
             border: none;
             padding: 15px 20px;
             color: white;
             border-radius: 50px;
             font-weight: 600;
             text-transform: uppercase;
             transition: all 0.3s ease;
             box-shadow: 0 8px 25px rgba(215, 14, 27, 0.4);
             z-index: 1001;
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 10px;
             text-decoration: none;
             font-size: 14px;
         }

         .floating-store-btn:hover {
             transform: translateY(-3px);
             box-shadow: 0 12px 35px rgba(215, 14, 27, 0.6);
             color: white;
             text-decoration: none;
         }

         .floating-store-btn i {
             font-size: 20px;
         }

         .floating-store-btn .btn-text {
             display: flex;
             flex-direction: column;
             align-items: flex-start;
         }

         .floating-store-btn .btn-text small {
             font-size: 9px;
             opacity: 0.9;
             line-height: 1;
         }

         .floating-store-btn .btn-text strong {
             font-size: 11px;
             line-height: 1;
         }

         .scroll-to-top {
             position: fixed;
             left: 20px;
             bottom: 20px;
             width: 44px;
             height: 44px;
             min-width: 44px;
             min-height: 44px;
             padding: 0;
             border: 1px solid rgba(255, 255, 255, 0.22);
             border-radius: 50%;
             background: var(--brand-navy);
             color: #fff;
             box-shadow: 0 6px 16px rgba(12, 51, 110, 0.28);
             z-index: 1040;
             cursor: pointer;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             opacity: 0;
             visibility: hidden;
             pointer-events: none;
             transform: translateY(8px);
             transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
         }

         .scroll-to-top.is-visible {
             opacity: 1;
             visibility: visible;
             pointer-events: auto;
             transform: translateY(0);
         }

         .scroll-to-top:hover {
             background: var(--brand-navy-dark, #092656);
             color: #fff;
         }

         .scroll-to-top:focus-visible {
             outline: 2px solid var(--brand-cyan);
             outline-offset: 3px;
         }

         .scroll-to-top i {
             font-size: 16px;
             line-height: 1;
         }

         @media (prefers-reduced-motion: reduce) {
             .scroll-to-top {
                 transition: none;
             }
         }

        /* Efectos de hover adicionales */
        .product-card .product-icon {
            transition: all 0.3s ease;
        }

        .product-card:hover .product-icon {
            transform: scale(1.1);
        }

        .contact-card .contact-icon {
            transition: all 0.3s ease;
        }

                 .contact-card:hover .contact-icon {
             transform: scale(1.1);
         }

         /* Sección de Servicios */
         .services-section {
             padding: 60px 0;
             background-color: var(--light-gray);
         }

         .service-card {
             background: var(--white);
             border-radius: 15px;
             padding: 30px;
             text-align: left;
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
             transition: all 0.3s ease;
             margin-bottom: 25px;
             border: 1px solid #d0d7e0;
             height: 100%;
         }

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

         .service-icon {
             width: 70px;
             height: 70px;
             background: linear-gradient(135deg, var(--primary-red), #b00c16);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-bottom: 20px;
             color: var(--white);
             font-size: 28px;
         }

         .service-title {
             font-size: 1.4rem;
             font-weight: 600;
             margin-bottom: 15px;
             color: var(--dark-gray);
         }

         .service-description {
             color: #5a6b7d;
             margin-bottom: 20px;
             line-height: 1.6;
         }

         .service-list {
             list-style: none;
             padding: 0;
             margin: 0;
         }

         .service-list li {
             color: #5a6b7d;
             margin-bottom: 8px;
             padding-left: 20px;
             position: relative;
         }

         .service-list li:before {
             content: '✓';
             position: absolute;
             left: 0;
             color: var(--primary-red);
             font-weight: bold;
         }

         .service-card .service-icon {
             transition: all 0.3s ease;
         }

                  .service-card:hover .service-icon {
             transform: scale(1.1);
         }

         /* Secciones de Marcas */
         .brand-section {
             padding: 80px 0;
             background-color: var(--white);
         }

         .keltec-section {
             background-color: var(--light-gray);
         }

         .milwaukee-section {
             background-color: var(--white);
         }

         .brand-content {
             padding: 20px;
         }

         .brand-title {
             font-size: 2.5rem;
             font-weight: 700;
             margin-bottom: 20px;
             color: var(--dark-gray);
         }

         .brand-subtitle {
             font-size: 1.2rem;
             color: #5a6b7d;
             margin-bottom: 30px;
             line-height: 1.6;
         }

         .brand-features {
             margin-bottom: 30px;
         }

         .feature-item {
             display: flex;
             align-items: center;
             margin-bottom: 15px;
             font-size: 1.1rem;
             color: var(--dark-gray);
         }

         .feature-item i {
             color: var(--primary-red);
             margin-right: 15px;
             font-size: 1.2rem;
             min-width: 20px;
         }

         .brand-btn {
             background: linear-gradient(135deg, var(--primary-red), #b00c16);
             border: none;
             padding: 15px 30px;
             color: var(--white);
             border-radius: 50px;
             font-weight: 600;
             text-transform: uppercase;
             transition: all 0.3s ease;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
             gap: 10px;
         }

         .brand-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(215, 14, 27, 0.4);
             color: var(--white);
         }

         .brand-image {
             text-align: center;
             padding: 20px;
         }

         .brand-image img {
             border-radius: 15px;
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
             transition: all 0.3s ease;
         }

         .brand-image img:hover {
             transform: scale(1.02);
             box-shadow: 0 15px 40px rgba(0,0,0,0.15);
         }

         /* RESPONSIVE DESIGN - Mejorado */
        
        /* Tablets y pantallas medianas */
        @media (max-width: 991px) {
            .hero-title {
                font-size: 3rem;
            }
            
            .hero-subtitle {
                font-size: 1.2rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .logo-img {
                width: 120px;
                height: 100px;
            }
            
                         .nav-menu .nav-link {
                 padding: 15px 20px !important;
                 font-size: 14px;
             }
             
             .brand-content {
                 margin-bottom: 20px;
             }
             
             .hero-content {
                 margin-bottom: 20px;
             }
        }

                 /* Móviles grandes */
         @media (max-width: 768px) {
             .hero-title {
                 font-size: 2.5rem;
             }
             
             .hero-subtitle {
                 font-size: 1.1rem;
                 margin-bottom: 20px;
             }
             
             .section-title {
                 font-size: 2rem;
                 margin-bottom: 30px;
             }
             
             .hero-section {
                 padding: 40px 0;
             }
             
             .product-section, .contact-section, .brand-section, .map-section {
                 padding: 40px 0;
             }
             
             .brand-title {
                 font-size: 2rem;
             }
             
             .brand-subtitle {
                 font-size: 1.1rem;
             }
             
             .feature-item {
                 font-size: 1rem;
             }
             
             /* Nuevo layout para navegación */
             .main-nav .d-flex {
                 flex-direction: column;
                 align-items: center;
             }
             
             .logo-container {
                 margin-bottom: 15px;
                 justify-content: center;
             }
             
             .nav-menu {
                 justify-content: center;
                 width: 100%;
             }
             
             .nav-menu .navbar-nav {
                 flex-direction: row;
                 justify-content: center;
                 flex-wrap: wrap;
             }
             
             .nav-menu .nav-link {
                 padding: 8px 10px !important;
                 font-size: 12px;
             }
             
             .logo-img {
                 width: 80px;
                 height: 60px;
                 margin-right: 10px;
             }
             
             .rotating-text {
                 display: none;
             }
             
             .top-header .contact-info {
                 font-size: 12px;
             }
             
             .top-header .contact-info a {
                 margin-right: 10px !important;
             }
             
             .floating-btn, .floating-whatsapp:not(.cs-fab-wa), .floating-share, .floating-calculator {
                 bottom: 20px;
                 right: 20px;
                 padding: 15px 20px;
             }
             
             .floating-btn {
                 right: 20px;
             }
             
             .floating-whatsapp {
             }

             /* Estilos para el menú hamburguesa */
             .navbar-toggler {
                 display: block !important;
                 border: 2px solid var(--white);
                 padding: 8px 12px;
                 background-color: transparent;
                 transition: all 0.3s ease;
             }
             
             .navbar-toggler:focus {
                 box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
                 outline: none;
             }
             
             .navbar-toggler-icon {
                 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
                 width: 1.5em;
                 height: 1.5em;
             }
             
             .navbar-collapse {
                 display: none !important;
                 background-color: var(--dark-gray);
                 border-radius: 8px;
                 margin-top: 10px;
                 padding: 15px;
                 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
             }
             
             .navbar-collapse.show {
                 display: block !important;
             }
             
             .navbar-nav {
                 flex-direction: column !important;
                 width: 100%;
             }
             
             .nav-item {
                 margin: 5px 0 !important;
                 width: 100%;
             }
             
             .nav-link {
                 padding: 12px 15px !important;
                 font-size: 14px !important;
                 border-radius: 6px;
                 transition: all 0.3s ease;
                 text-align: center;
             }
             
             .nav-link:hover {
                 background-color: rgba(255, 255, 255, 0.1);
                 transform: none;
             }
             
             .nav-link.active {
                 background-color: var(--primary-blue);
                 border-bottom: none;
             }
             
             .nav-link.active::after {
                 display: none;
             }
                 right: 100px;
             }
             
             .floating-share {
                 right: 250px;
             }
             
             .floating-calculator {
                 right: 400px;
             }
             
             .floating-store-btn {
                 top: 10px;
                 right: 10px;
                 padding: 12px 15px;
             }
             
             .floating-btn .btn-text, .floating-whatsapp:not(.cs-fab-wa) .btn-text, .floating-share .btn-text, .floating-store-btn .btn-text {
                 display: none;
             }
             
             .floating-btn i, .floating-whatsapp:not(.cs-fab-wa) i, .floating-share i, .floating-store-btn i {
                 font-size: 24px;
             }

             .scroll-to-top {
                 left: 20px;
                 bottom: 20px;
                 width: 44px;
                 height: 44px;
             }

             /* Hero Slider Responsive */

             .carousel-control-prev,
             .carousel-control-next {
                 width: 40px;
                 height: 40px;
                 margin: 0 10px;
             }

             .carousel-control-prev-icon,
             .carousel-control-next-icon {
                 width: 16px;
                 height: 16px;
             }
         }

                 /* Móviles pequeños */
         @media (max-width: 576px) {
             .hero-title {
                 font-size: 2rem;
             }
             
             .hero-subtitle {
                 font-size: 1rem;
             }
             
             .section-title {
                 font-size: 1.8rem;
             }
             
             .product-card {
                 padding: 20px;
             }
             
             .contact-card {
                 padding: 25px;
             }
             
             .map-container iframe {
                 height: 300px;
             }
             
             .map-info {
                 padding: 20px;
                 margin-top: 20px;
             }
             
             .map-info h4 {
                 font-size: 1.1rem;
                 margin-bottom: 10px;
             }
             
             /* Estilos adicionales para menú hamburguesa en pantallas muy pequeñas */
             .navbar-toggler {
                 padding: 6px 10px;
                 border-width: 1px;
             }
             
             .navbar-toggler-icon {
                 width: 1.2em;
                 height: 1.2em;
             }
             
             .navbar-collapse {
                 margin-top: 8px;
                 padding: 10px;
             }
             
             .nav-link {
                 padding: 10px 12px !important;
                 font-size: 13px !important;
             }
             
             .nav-item {
                 margin: 3px 0 !important;
             }
             
             .brand-content {
                 margin-bottom: 30px;
             }
             
             .brand-image {
                 margin-bottom: 20px;
             }
             
             .hero-content {
                 margin-bottom: 30px;
                 text-align: center;
             }

             .hero-accent {
                 margin-left: auto;
                 margin-right: auto;
             }
             
             .hero-slider-container {
                 margin-bottom: 20px;
             }
             
             .logo-img {
                 width: 70px;
                 height: 50px;
                 margin-right: 8px;
             }
             
             .top-header {
                 padding: 5px 0;
                 font-size: 12px;
             }
             
             .top-header .contact-info a {
                 display: block;
                 margin-bottom: 5px;
             }
             
             .top-header .col-md-4.text-end {
                 text-align: left !important;
             }
             
             /* Navegación para móviles pequeños */
             .main-nav .d-flex {
                 flex-direction: column;
                 align-items: center;
             }
             
             .logo-container {
                 margin-bottom: 10px;
                 justify-content: center;
             }
             
             .nav-menu {
                 justify-content: center;
                 width: 100%;
             }
             
             .nav-menu .navbar-nav {
                 flex-direction: row;
                 justify-content: center;
                 flex-wrap: wrap;
                 gap: 5px;
             }
             
             .nav-menu .nav-link {
                 padding: 6px 8px !important;
                 font-size: 11px;
             }
             
             .floating-btn, .floating-whatsapp:not(.cs-fab-wa), .floating-calculator {
                 bottom: 15px;
                 padding: 12px 15px;
             }
             
             .floating-btn {
                 right: 15px;
             }
             
             .floating-whatsapp {
                 right: 90px;
             }
             
             .floating-calculator {
                 right: 165px;
             }

             .scroll-to-top {
                 left: 16px;
                 bottom: 20px;
                 width: 44px;
                 height: 44px;
             }

             /* Hero Slider Responsive para móviles pequeños */

             .carousel-control-prev,
             .carousel-control-next {
                 width: 35px;
                 height: 35px;
                 margin: 0 5px;
             }

             .carousel-control-prev-icon,
             .carousel-control-next-icon {
                 width: 14px;
                 height: 14px;
             }

             .carousel-indicators button {
                 width: 10px;
                 height: 10px;
                 margin: 0 3px;
             }
         }

        /* Móviles muy pequeños */
        @media (max-width: 375px) {
            .hero-title {
                font-size: 1.8rem;
            }
            
            .hero-subtitle {
                font-size: 0.9rem;
            }
            
            .section-title {
                font-size: 1.6rem;
            }
            
            .logo-img {
                width: 70px;
                height: 50px;
            }
            
            .product-card, .contact-card {
                padding: 15px;
            }
            
            .brand-title {
                font-size: 1.6rem;
            }
            
            .brand-subtitle {
                font-size: 0.9rem;
            }
            
            .feature-item {
                font-size: 0.9rem;
            }
            
            .nav-menu .nav-link {
                padding: 4px 6px !important;
                font-size: 10px;
            }
            
                         .floating-btn, .floating-whatsapp:not(.cs-fab-wa), .floating-share, .floating-calculator {
                 bottom: 10px;
                 padding: 10px 12px;
             }
             
             .floating-btn {
                 right: 10px;
             }
             
             .floating-whatsapp {
                 right: 80px;
             }
             
             .floating-share {
                 right: 220px;
             }
             
             .floating-calculator {
                 right: 360px;
             }
             
             .floating-store-btn {
                 top: 5px;
                 right: 5px;
                 padding: 10px 12px;
             }
        }

        /* Orientación landscape en móviles */
        @media (max-width: 768px) and (orientation: landscape) {
            .hero-section {
                padding: 30px 0;
            }
            
            .hero-title {
                font-size: 2.2rem;
            }
            
            .nav-menu .nav-link {
                padding: 8px 12px !important;
            }
        }

                 /* Pantallas muy grandes */
         @media (min-width: 1200px) {
             .hero-title {
                 font-size: 4rem;
             }
             
             .hero-subtitle {
                 font-size: 1.4rem;
             }
             
             .section-title {
                 font-size: 3rem;
             }
             
             .logo-img {
                 width: 180px;
                 height: 140px;
             }
         }
 
         /* Estilos para el modal de cotización */
         .modal-dialog {
             margin: 1.75rem auto;
         }
         
         @media (max-width: 576px) {
             .modal-dialog {
                 margin: 0.5rem auto;
             }
             
             .modal-body {
                 padding: 1rem;
             }
             
             .modal-header {
                 padding: 1rem;
             }
         }
         
         .contact-info-modal .d-flex {
             padding: 10px;
             border-radius: 8px;
             transition: all 0.3s ease;
         }
 
         .contact-info-modal .d-flex:hover {
             background-color: #f4f6f8;
             transform: translateX(5px);
         }
 
         .contact-info-modal a {
             color: var(--primary-blue);
         }
 
         .contact-info-modal a:hover {
             color: #092656;
         }
 
         #cotizacionForm .form-control,
         #cotizacionForm .form-select {
             border-radius: 8px;
             border: 1px solid #d0d7e0;
             transition: all 0.3s ease;
         }
 
         #cotizacionForm .form-control:focus,
         #cotizacionForm .form-select:focus {
             border-color: var(--primary-blue);
             box-shadow: 0 0 0 0.2rem rgba(12, 51, 110, 0.25);
         }

         #cotizacionForm .cs-turnstile-holder {
             min-height: 72px;
         }

         #cotizacionForm .cs-turnstile-loading {
             display: flex;
             align-items: center;
             padding: 0.75rem 1rem;
             background: #f4f6f8;
             border: 1px dashed #d0d7e0;
             border-radius: 8px;
             color: #5a6b7d;
             font-size: 0.875rem;
         }

         #cotizacionForm .cs-turnstile-holder.cs-turnstile-ready .cs-turnstile-loading {
             display: none;
         }
 
         .modal-content {
             border-radius: 15px;
             border: none;
             box-shadow: 0 10px 30px rgba(0,0,0,0.2);
         }
 
         .modal-header {
             background: linear-gradient(135deg, var(--primary-blue), #092656);
             color: white;
             border-radius: 15px 15px 0 0;
         }
 
         .modal-header .btn-close {
             filter: invert(1);
         }

         /* Estilos para botones de marca */
         .brand-buttons {
             display: flex;
             gap: 10px;
             flex-wrap: wrap;
         }

         .brand-buttons .btn {
             flex: 1;
             min-width: 200px;
         }

         @media (max-width: 768px) {
             .brand-buttons {
                 flex-direction: column;
             }
             
             .brand-buttons .btn {
                 min-width: auto;
             }
         }

         /* Estilos para el modal de productos */
         #productosModal.modal.show,
         #productoDetalleModal.modal.show {
             display: flex !important;
             align-items: center;
             justify-content: center;
             padding: 1rem;
         }

         #productosModal .product-modal,
         #productoDetalleModal .product-detail-modal {
             margin: 0 auto;
             max-width: min(1140px, calc(100vw - 2rem));
             width: 100%;
             max-height: calc(100vh - 2rem);
         }

         #productoDetalleModal .product-detail-modal {
             max-width: min(900px, calc(100vw - 2rem));
         }

         #productosModal .modal-content,
         #productoDetalleModal .modal-content {
             max-height: calc(100vh - 2rem);
             display: flex;
             flex-direction: column;
             border-radius: 8px;
             overflow: hidden;
         }

         #productosModal .modal-body,
         #productoDetalleModal .modal-body {
             overflow-y: auto;
         }

         #productosModal .modal-header,
         #productoDetalleModal .modal-header {
             background: var(--brand-navy, #0C336E);
             color: #fff;
             border-radius: 8px 8px 0 0;
             flex-shrink: 0;
         }

         #productosModal .modal-title,
         #productoDetalleModal .modal-title {
             color: #fff;
             font-weight: 700;
             letter-spacing: 0.02em;
         }

         .product-modal {
             max-width: 1140px;
         }

         .product-categories {
             display: none !important;
         }

         .product-card {
             border-radius: 8px;
         }

         .category-tab {
             background: none;
             border: none;
             padding: 10px 20px;
             color: #5a6b7d;
             border-bottom: 3px solid transparent;
             transition: all 0.3s ease;
             font-weight: 500;
         }

         .category-tab.active {
             color: var(--primary-blue);
             border-bottom-color: var(--primary-blue);
         }

         .category-tab:hover {
             color: var(--primary-blue);
         }

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

         .product-card {
             border: 1px solid #d0d7e0;
             border-radius: 12px;
             overflow: hidden;
             transition: all 0.3s ease;
             background: white;
         }

         .product-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0,0,0,0.15);
         }

         .product-image {
             height: 200px;
             overflow: hidden;
             position: relative;
         }

         .product-image img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             transition: transform 0.3s ease;
         }

         .product-icon {
             width: 100%;
             height: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
             background: linear-gradient(135deg, #0c336e 0%, #0c336e 100%);
             color: white;
             font-size: 3rem;
             transition: all 0.3s ease;
         }

         .product-card:hover .product-icon {
             transform: scale(1.05);
             box-shadow: 0 5px 15px rgba(12, 51, 110, 0.3);
         }

         .product-card:hover .product-image img {
             transform: scale(1.05);
         }

         .product-info {
             padding: 15px;
         }

         .product-title {
             font-size: 16px;
             font-weight: 600;
             margin-bottom: 8px;
             color: var(--dark-gray);
         }

         .product-description {
             font-size: 14px;
             color: #5a6b7d;
             margin-bottom: 10px;
             line-height: 1.4;
         }

         .product-specs {
             font-size: 12px;
             color: #5a6b7d;
             margin-bottom: 15px;
         }

         .product-actions {
             display: flex;
             gap: 8px;
             flex-wrap: wrap;
         }

         .product-actions .btn {
             font-size: 12px;
             padding: 6px 12px;
             pointer-events: auto;
             position: relative;
             z-index: 2;
         }

         #csShareToast {
             position: fixed;
             left: 50%;
             bottom: 1.5rem;
             transform: translateX(-50%) translateY(12px);
             z-index: 20000;
             background: var(--brand-navy, #0C336E);
             color: #fff;
             padding: 0.7rem 1.15rem;
             border-radius: 8px;
             font-size: 0.95rem;
             font-weight: 600;
             box-shadow: 0 8px 24px rgba(12, 51, 110, 0.28);
             opacity: 0;
             pointer-events: none;
             transition: opacity 0.2s ease, transform 0.2s ease;
         }
         #csShareToast.is-on {
             opacity: 1;
             transform: translateX(-50%) translateY(0);
         }

         /* Keltec Information Section Styles */
         .keltec-info-section {
             margin-bottom: 20px;
             border-bottom: 1px solid #d0d7e0;
             padding-bottom: 15px;
         }

         .keltec-info-section .accordion-item {
             border: 1px solid #d0d7e0;
             border-radius: 8px;
             margin-bottom: 0;
         }

         .keltec-info-section .accordion-button {
             background: linear-gradient(135deg, #0c336e 0%, #0c336e 100%);
             border: none;
             color: #ffffff;
             font-weight: 700;
             padding: 15px 20px;
             text-shadow: 0 1px 2px rgba(0,0,0,0.3);
         }

         .keltec-info-section .accordion-button:not(.collapsed) {
             background: linear-gradient(135deg, #0c336e 0%, #0c336e 100%);
             color: #ffffff;
             box-shadow: 0 2px 8px rgba(12, 51, 110, 0.3);
         }

         .keltec-info-section .accordion-button:hover {
             background: linear-gradient(135deg, #092656 0%, #092656 100%);
             color: #ffffff;
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(12, 51, 110, 0.4);
         }

         .keltec-info-section .accordion-button:focus {
             box-shadow: 0 0 0 0.25rem rgba(12, 51, 110, 0.25);
         }

         .keltec-company-info p {
             margin-bottom: 15px;
             line-height: 1.6;
             color: #5a6b7d;
         }

         .keltec-product-types {
             list-style: none;
             padding-left: 0;
             margin: 15px 0;
         }

         .keltec-product-types li {
             padding: 8px 0;
             border-bottom: 1px solid #d0d7e0;
             color: #5a6b7d;
         }

         .keltec-product-types li:last-child {
             border-bottom: none;
         }

         .keltec-product-types i {
             color: #0c336e;
             width: 20px;
         }

         .keltec-water-separator-info {
             background-color: #f4f6f8;
             padding: 15px;
             border-radius: 6px;
             border-left: 4px solid #0c336e;
         }

         .keltec-water-separator-info h6 {
             color: #0c336e;
             margin-bottom: 10px;
         }

         .product-detail-modal .modal-body {
             padding: 0;
         }

         .product-detail-image {
             height: 300px;
             overflow: hidden;
         }

         .product-detail-image img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: 8px;
         }

         .product-detail-icon {
             width: 100%;
             height: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
             background: linear-gradient(135deg, #0c336e 0%, #0c336e 100%);
             color: white;
             font-size: 4rem;
             border-radius: 8px;
         }

         .product-detail-info {
             padding: 20px;
         }

         .product-detail-title {
             font-size: 24px;
             font-weight: 700;
             margin-bottom: 10px;
             color: var(--dark-gray);
         }

         .product-detail-description {
             font-size: 16px;
             line-height: 1.6;
             color: #5a6b7d;
             margin-bottom: 20px;
         }

         .product-detail-specs {
             background: #f4f6f8;
             padding: 15px;
             border-radius: 8px;
             margin-bottom: 20px;
         }

         .product-detail-specs h6 {
             color: var(--primary-blue);
             margin-bottom: 10px;
         }

         .product-detail-specs ul {
             margin: 0;
             padding-left: 20px;
         }

         .product-detail-specs li {
             margin-bottom: 5px;
             color: #5a6b7d;
         }

         /* Estilos para la sección de compartir */
         .share-section {
             background-color: #f4f6f8;
             padding: 15px;
             border-radius: 8px;
             margin-top: 15px;
         }

         .share-section h6 {
             color: var(--dark-gray);
             font-weight: 600;
         }

         .share-section .btn {
             transition: all 0.3s ease;
         }

         .share-section .btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         }

         @media (max-width: 768px) {
             .product-grid {
                 grid-template-columns: 1fr;
             }
             
             .product-modal {
                 max-width: min(1140px, calc(100vw - 1rem));
             }
         }

         /* Estilos para la sección Misión y Visión */
         .mission-vision-section {
             padding: 80px 0;
             background: linear-gradient(135deg, #f4f6f8 0%, #d0d7e0 100%);
         }

         .mission-card, .vision-card {
             background: white;
             border-radius: 20px;
             padding: 40px 30px;
             box-shadow: 0 15px 35px rgba(0,0,0,0.1);
             transition: all 0.3s ease;
             height: 100%;
             position: relative;
             overflow: hidden;
         }

         .mission-card::before, .vision-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 5px;
             background: linear-gradient(90deg, var(--primary-blue), #092656);
         }

         .mission-card::before {
             background: linear-gradient(90deg, var(--primary-red), #b00c16);
         }

         .vision-card::before {
             background: linear-gradient(90deg, var(--primary-blue), #092656);
         }

         .mission-card:hover, .vision-card:hover {
             transform: translateY(-10px);
             box-shadow: 0 25px 50px rgba(0,0,0,0.15);
         }

         .card-icon {
             width: 80px;
             height: 80px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-bottom: 25px;
             font-size: 32px;
             color: white;
         }

         .mission-card .card-icon {
             background: linear-gradient(135deg, var(--primary-red), #b00c16);
         }

         .vision-card .card-icon {
             background: linear-gradient(135deg, var(--primary-blue), #092656);
         }

         .objectives-card {
             background: white;
             border-radius: 20px;
             padding: 40px 30px;
             box-shadow: 0 15px 35px rgba(0,0,0,0.1);
             transition: all 0.3s ease;
             position: relative;
             overflow: hidden;
         }

         .objectives-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 5px;
             background: linear-gradient(90deg, var(--dark-gray), #5a6b7d);
         }

         .objectives-card:hover {
             transform: translateY(-10px);
             box-shadow: 0 25px 50px rgba(0,0,0,0.15);
         }

         .objectives-card .card-icon {
             background: linear-gradient(135deg, var(--dark-gray), #5a6b7d);
         }

         .objectives-content {
             margin: 25px 0;
         }

         .objectives-section {
             margin-bottom: 20px;
             padding: 15px;
             background: linear-gradient(135deg, #f4f6f8, #d0d7e0);
             border-radius: 12px;
             border-left: 4px solid var(--dark-gray);
         }

         .objectives-section h5 {
             font-size: 18px;
             font-weight: 600;
             margin-bottom: 10px;
             color: var(--dark-gray);
         }

         .objectives-section p {
             font-size: 14px;
             line-height: 1.6;
             color: #5a6b7d;
             margin: 0;
         }

         .objectives-features {
             margin-top: 20px;
         }

         .objectives-features .feature-item {
             display: flex;
             align-items: center;
             margin-bottom: 12px;
             font-size: 14px;
             color: #5a6b7d;
         }

         .objectives-features .feature-item i {
             color: var(--primary-red);
             margin-right: 10px;
             font-size: 16px;
         }

         .card-title {
             font-size: 28px;
             font-weight: 700;
             margin-bottom: 20px;
             color: var(--dark-gray);
         }

         .card-text {
             font-size: 16px;
             line-height: 1.8;
             color: #5a6b7d;
             margin-bottom: 25px;
         }

         .mission-features, .vision-features {
             margin-top: 20px;
         }

         .mission-features .feature-item, .vision-features .feature-item {
             display: flex;
             align-items: center;
             margin-bottom: 12px;
             font-size: 14px;
             color: #5a6b7d;
         }

         .mission-features .feature-item i {
             color: var(--primary-red);
             margin-right: 10px;
             font-size: 16px;
         }

         .vision-features .feature-item i {
             color: var(--primary-blue);
             margin-right: 10px;
             font-size: 16px;
         }

         .services-overview {
             background: white;
             border-radius: 20px;
             padding: 40px;
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
             margin-top: 40px;
         }

         .overview-title {
             font-size: 24px;
             font-weight: 600;
             margin-bottom: 30px;
             color: var(--dark-gray);
             text-align: center;
         }

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

         .service-item {
             display: flex;
             align-items: center;
             padding: 15px 20px;
             background: linear-gradient(135deg, #f4f6f8, #d0d7e0);
             border-radius: 12px;
             transition: all 0.3s ease;
             border-left: 4px solid var(--primary-red);
         }

         .service-item:hover {
             transform: translateX(5px);
             background: linear-gradient(135deg, #f4f6f8, #f4f6f8);
             box-shadow: 0 5px 15px rgba(215, 14, 27, 0.1);
         }

         .service-item i {
             font-size: 24px;
             color: var(--primary-red);
             margin-right: 15px;
             min-width: 30px;
         }

         .service-item span {
             font-weight: 500;
             color: var(--dark-gray);
             font-size: 14px;
         }

         @media (max-width: 768px) {
             .mission-vision-section {
                 padding: 60px 0;
             }
             
             .mission-card, .vision-card {
                 padding: 30px 20px;
                 margin-bottom: 30px;
             }
             
             .card-title {
                 font-size: 24px;
             }
             
             .services-overview {
                 padding: 30px 20px;
             }
             
             .services-grid {
                 grid-template-columns: 1fr;
             }
             
             .overview-title {
                 font-size: 20px;
             }
             
             .objectives-card {
                 padding: 30px 20px;
             }
             
             .objectives-section {
                 padding: 12px;
             }
             
             .objectives-section h5 {
                 font-size: 16px;
             }
         }

        /* Animaciones */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Nuevas animaciones mejoradas */
        @keyframes slideInFromLeft {
            from { 
                transform: translateX(-100px); 
                opacity: 0; 
            }
            to { 
                transform: translateX(0); 
                opacity: 1; 
            }
        }

        @keyframes slideInFromRight {
            from { 
                transform: translateX(100px); 
                opacity: 0; 
            }
            to { 
                transform: translateX(0); 
                opacity: 1; 
            }
        }

        @keyframes zoomIn {
            from { 
                transform: scale(0.8); 
                opacity: 0; 
            }
            to { 
                transform: scale(1); 
                opacity: 1; 
            }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }

        /* Clases de animación */
        .fade-in {
            opacity: 1;
            animation: none;
        }

        .slide-in-left {
            animation: slideInFromLeft 0.8s ease;
        }

        .slide-in-right {
            animation: slideInFromRight 0.8s ease;
        }

        .zoom-in {
            animation: zoomIn 0.6s ease;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        .float {
            animation: float 3s ease-in-out infinite;
        }

        /* Efecto de brillo en hover */
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
            z-index: 1;
        }

        .service-card:hover::before {
            left: 100%;
        }

        .service-card {
            position: relative;
            overflow: hidden;
        }

        /* Efectos de hover mejorados */
        .service-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .service-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

        .product-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .product-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

        /* Efecto parallax */
        .parallax-section {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }

        .parallax-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            z-index: 1;
        }

        .parallax-content {
            position: relative;
            z-index: 2;
        }

                 /* Sección de Testimonios */
         .testimonials-section {
             padding: 80px 0;
             background: linear-gradient(135deg, #f4f6f8 0%, #d0d7e0 100%);
             color: var(--dark-gray);
         }

                 .testimonial-card {
             background: #fff;
             border-radius: 20px;
             padding: 30px;
             margin: 20px 0;
             box-shadow: 0 4px 24px rgba(0,0,0,0.08);
             border: 1px solid #d0d7e0;
             transition: all 0.3s ease;
         }

         .testimonial-card:hover {
             transform: translateY(-10px);
             box-shadow: 0 8px 32px rgba(0,0,0,0.12);
         }

         .testimonial-avatar {
             width: 80px;
             height: 80px;
             border-radius: 50%;
             margin: 0 auto 20px;
             background: linear-gradient(135deg, var(--primary-blue), #092656);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 32px;
             color: var(--white);
         }

        .testimonial-text {
            font-style: italic;
            margin-bottom: 20px;
            line-height: 1.8;
        }

        .testimonial-author {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .testimonial-company {
            font-size: 0.9rem;
            opacity: 0.8;
        }

                 /* Sección de Estadísticas */
         .stats-section {
             padding: 80px 0;
             background: linear-gradient(135deg, #f4f6f8 0%, #d0d7e0 100%);
             color: var(--dark-gray);
         }

        .stat-card {
            text-align: center;
            padding: 30px 20px;
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-10px);
        }

                 .stat-number {
             font-size: 3rem;
             font-weight: 700;
             margin-bottom: 10px;
             color: var(--primary-red);
             background: none;
             -webkit-background-clip: initial;
             -webkit-text-fill-color: initial;
             background-clip: initial;
         }

        .stat-label {
            font-size: 1.1rem;
            font-weight: 500;
            opacity: 0.9;
            color: var(--dark-gray);
        }

        /* Sección de Noticias/Blog */
        .news-section {
            padding: 80px 0;
            background-color: var(--light-gray);
        }

        .news-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
        }

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

        .news-image {
            height: 200px;
            overflow: hidden;
        }

        .news-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

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

        .news-content {
            padding: 25px;
        }

        .news-date {
            color: var(--primary-blue);
            font-size: 0.9rem;
            margin-bottom: 10px;
        }

        .news-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--dark-gray);
        }

        .news-excerpt {
            color: #5a6b7d;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .news-archive {
            margin-top: 12px;
            background: var(--white);
            border: 1px solid #d0d7e0;
            border-radius: 12px;
            padding: 8px 20px 4px;
        }

        .news-archive summary {
            cursor: pointer;
            font-weight: 600;
            color: var(--dark-gray);
            padding: 12px 0;
        }

        .news-archive-list {
            list-style: none;
            margin: 0 0 12px;
            padding: 0;
            border-top: 1px solid #d0d7e0;
        }

        .news-archive-list li {
            display: grid;
            grid-template-columns: 9.5rem 1fr;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #d0d7e0;
            font-size: 0.95rem;
        }

        .news-archive-list time {
            color: var(--primary-red);
            font-size: 0.85rem;
        }

        @media (max-width: 576px) {
            .news-archive-list li {
                grid-template-columns: 1fr;
                gap: 2px;
            }
        }

        /* Calculadora de Compresores */
        .calculator-modal {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
        }

        .calculator-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 30px;
            color: var(--dark-gray);
            text-align: center;
        }

        .calculator-form {
            max-width: 500px;
            margin: 0 auto;
        }

        .calculator-result {
            background: linear-gradient(135deg, var(--primary-blue), #092656);
            color: white;
            border-radius: 15px;
            padding: 25px;
            margin-top: 30px;
            text-align: center;
        }

        .result-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        /* Indicador de Progreso */
        .progress-indicator {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(255,255,255,0.1);
            z-index: 9999;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-blue), var(--primary-red));
            width: 0%;
            transition: width 0.3s ease;
        }

        /* Modo Oscuro */
        [data-theme="dark"] {
            --primary-bg: #0c336e;
            --secondary-bg: #092656;
            --text-color: #ffffff;
            --card-bg: #1a2433;
        }

        [data-theme="dark"] body {
            background-color: var(--primary-bg);
            color: var(--text-color);
        }

        [data-theme="dark"] .service-card,
        [data-theme="dark"] .product-card,
        [data-theme="dark"] .contact-card {
            background: var(--card-bg);
            color: var(--text-color);
        }

        /* Botón de Cambio de Tema */
        .theme-toggle {
            position: fixed;
            top: 20px;
            left: 20px;
            background: linear-gradient(135deg, var(--primary-blue), #092656);
            border: none;
            padding: 15px;
            border-radius: 50%;
            color: white;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            transform: scale(1.1);
        }

                /* Sección FAQ */
        .faq-section {
            background: linear-gradient(135deg, #f4f6f8 0%, #d0d7e0 100%);
            padding: 80px 0;
        }

        .accordion-item {
            border: none;
            margin-bottom: 15px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }

        .accordion-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }

        .accordion-button {
            background: linear-gradient(135deg, #0c336e 0%, #007eba 100%);
            color: white;
            border: none;
            padding: 20px 25px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .accordion-button:not(.collapsed) {
            background: linear-gradient(135deg, #092656 0%, #092656 100%);
            color: white;
            box-shadow: none;
        }

        .accordion-button:focus {
            box-shadow: 0 0 0 0.25rem rgba(12, 51, 110, 0.25);
        }

        .accordion-button:hover {
            background: linear-gradient(135deg, #092656 0%, #092656 100%);
        }

        .accordion-body {
            padding: 25px;
            background: white;
            color: #5a6b7d;
            line-height: 1.7;
        }

        /* Mejoras de accesibilidad */
        .accordion-button::after {
            filter: brightness(0) invert(1);
        }

        /* Focus visible para mejor accesibilidad */
        .btn:focus,
        .form-control:focus,
        .form-select:focus {
            box-shadow: 0 0 0 0.25rem rgba(12, 51, 110, 0.25);
        }

        /* Buscador interno */
        .search-container {
            margin-left: 20px;
        }

        .search-input {
            border-radius: 25px 0 0 25px;
            border: 2px solid #d0d7e0;
            padding: 8px 15px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 0.2rem rgba(12, 51, 110, 0.25);
        }

        .search-btn {
            border-radius: 0 25px 25px 0;
            border: 2px solid var(--primary-blue);
            border-left: none;
            padding: 8px 15px;
            background: var(--primary-blue);
            color: white;
            transition: all 0.3s ease;
        }

        .search-btn:hover {
            background: #092656;
            border-color: #092656;
            color: white;
        }

        /* Skip to content link para accesibilidad */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: #000;
            color: white;
            padding: 8px;
            text-decoration: none;
            z-index: 10000;
        }

        .skip-link:focus {
            top: 6px;
        }

        /* Responsive para nuevas secciones */
        @media (max-width: 768px) {
            .testimonial-card {
                padding: 20px;
            }

            .stat-number {
                font-size: 2.5rem;
            }

            .news-content {
                padding: 20px;
            }

            .calculator-modal {
                padding: 30px 20px;
            }

            .theme-toggle {
                top: 10px;
                left: 10px;
                padding: 12px;
            }

            .accordion-button {
                padding: 15px 20px;
                font-size: 1rem;
            }

            .accordion-body {
                padding: 20px;
            }
            
            .search-container {
                margin-left: 0;
                margin-top: 15px;
            }
            
            .search-input {
                font-size: 16px; /* Evita zoom en iOS */
            }
        }


        /* Paleta de marca — 8 colores (logo + rojo + neutros + WhatsApp) */
        body {
            color: var(--brand-text);
            background: var(--brand-white);
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6 {
            color: var(--brand-navy);
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        a {
            color: var(--brand-cyan);
        }

        a.btn-primary,
        a.btn-danger,
        a.hero-btn {
            color: #fff;
        }

        .nav-menu .nav-link {
            color: var(--brand-white) !important;
        }

        .footer a {
            color: #C5D0E0;
        }

        .contact-link {
            color: var(--brand-text);
        }

        .top-header-uniform {
            background: var(--brand-white);
            border-bottom: 1px solid var(--brand-border);
        }

        .top-header-uniform::before {
            height: 2px;
            background: var(--brand-red);
        }

        .sales-group .group-icon {
            background: var(--brand-red);
        }

        .support-group .group-icon {
            background: var(--brand-cyan);
        }

        .email-group .group-icon,
        .email-icon {
            background: var(--brand-navy) !important;
        }

        .social-icon {
            background: var(--brand-navy) !important;
        }

        .social-group .group-label {
            color: var(--brand-navy);
        }

        .location-icon {
            background: var(--brand-muted) !important;
        }

        .whatsapp-icon {
            background: var(--brand-whatsapp) !important;
        }

        .nav-menu {
            background-color: var(--brand-navy);
        }

        .nav-menu .nav-link.active {
            border-bottom: 2px solid var(--brand-red);
        }

        .nav-menu .nav-link.active::after {
            background-color: var(--brand-red);
            height: 2px;
        }

        .hero-section {
            background-color: var(--brand-navy);
            background-image: linear-gradient(165deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
        }

        .hero-section .hero-title,
        .hero-section .hero-btn {
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff;
            animation: none;
        }

        .hero-section .hero-subtitle {
            color: #d5deea !important;
            -webkit-text-fill-color: #d5deea;
            opacity: 1;
            animation: none;
        }

        .hero-title,
        .footer h5,
        .footer-focus__title,
        .footer-focus-card span {
            color: var(--brand-white);
        }

        .footer {
            background-color: var(--brand-navy);
        }

        .footer p, .footer a {
            color: #C5D0E0;
        }

        .footer a:hover {
            color: var(--brand-white);
        }

        .section-title,
        .section-title-modern,
        .calculator-title {
            color: var(--brand-navy);
        }

        .accordion-button,
        .accordion-button:not(.collapsed),
        .accordion-button:hover {
            background: var(--brand-navy);
            color: var(--brand-white);
        }

        .accordion-button:focus {
            box-shadow: 0 0 0 0.2rem rgba(12, 51, 110, 0.25);
        }

        .faq-section,
        .contact-section-modern {
            background: var(--brand-bg);
        }

        .btn-primary {
            --bs-btn-bg: #0C336E;
            --bs-btn-border-color: #0C336E;
            --bs-btn-hover-bg: #092656;
            --bs-btn-hover-border-color: #092656;
            --bs-btn-active-bg: #092656;
            --bs-btn-color: #fff;
        }

        .btn-danger,
        .hero-btn {
            background-color: var(--brand-red);
            border-color: var(--brand-red);
            color: #fff;
        }

        .hero-btn:hover,
        .btn-danger:hover {
            background-color: var(--brand-red-dark);
            border-color: var(--brand-red-dark);
            color: #fff;
        }

        .btn-outline-primary {
            --bs-btn-color: #0C336E;
            --bs-btn-border-color: #0C336E;
            --bs-btn-hover-bg: #0C336E;
            --bs-btn-hover-color: #fff;
        }

        .text-primary {
            color: var(--brand-navy) !important;
        }

        .theme-toggle {
            background: var(--brand-navy);
        }

        .product-card,
        .contact-card,
        .news-card,
        .accordion-item {
            box-shadow: 0 8px 24px rgba(12, 51, 110, 0.08);
        }

        .product-card:hover,
        .contact-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(12, 51, 110, 0.12);
        }

        .product-icon,
        .search-btn,
        .calculator-result {
            background: var(--brand-navy);
        }

        .search-btn:hover {
            background: var(--brand-navy-dark);
            border-color: var(--brand-navy-dark);
        }

        .progress-bar {
            background: linear-gradient(90deg, var(--brand-navy), var(--brand-red));
        }

        .contact-group,
        .whatsapp-email-group {
            box-shadow: 0 1px 3px rgba(12, 51, 110, 0.08);
            border: 1px solid var(--brand-border);
        }

        .contact-group:hover,
        .whatsapp-email-group:hover {
            transform: none;
            box-shadow: 0 4px 14px rgba(12, 51, 110, 0.10);
        }

        /* Segundo pase UX — distribuidor industrial B2B */
        .progress-indicator,
        .theme-toggle,
        .floating-phone,
        .floating-store-btn,
        .floating-share,
        .floating-calculator,
        .floating-btn,
        .rotating-text,
        .search-container {
            display: none !important;
        }

        .cs-utility {
            background: var(--brand-navy);
            color: #d5deea;
            font-size: 0.82rem;
            letter-spacing: 0.02em;
        }

        .cs-utility__row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 6px 18px;
            padding: 6px 16px;
            min-height: 48px;
        }

        .cs-utility__place {
            margin: 0;
            color: #c5d0e0;
        }

        .cs-utility__links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 18px;
        }

        .cs-utility__links a {
            color: #ffffff;
            text-decoration: none;
            font-weight: 600;
        }

        .cs-utility__links a:hover,
        .cs-utility__links a:focus {
            color: #ffffff;
            text-decoration: underline;
        }

        .cs-utility__tel {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            min-height: 44px;
            line-height: 1.12;
            color: #ffffff;
        }

        .cs-utility__lbl {
            display: block;
            font-size: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #9ec8e8;
        }

        .cs-utility__num {
            display: block;
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: 0.03em;
            line-height: 1.05;
            color: #ffffff;
            font-variant-numeric: tabular-nums;
        }

        .cs-utility__wa {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 0;
            background: transparent;
            color: #ffffff;
            padding: 0;
            border-radius: 0;
            min-height: 44px;
            line-height: 1.12;
            text-decoration: none !important;
        }

        .cs-utility__wa .cs-utility__num {
            display: inline-flex;
            align-items: center;
            gap: 0.32em;
        }

        .cs-utility__wa i {
            font-size: 1.05em;
            color: var(--brand-whatsapp);
            line-height: 1;
        }

        .cs-utility__wa:hover,
        .cs-utility__wa:focus {
            text-decoration: none !important;
            filter: none;
        }

        .logo-container {
            height: auto;
            min-height: 58px;
        }

        .logo-img {
            width: auto;
            height: 52px;
            max-width: min(280px, 58vw);
            margin-right: 0;
        }

        .logo-container a:hover {
            transform: none;
        }

        .main-nav {
            padding: 6px 0;
            box-shadow: 0 1px 0 var(--brand-border);
        }

        .nav-menu {
            background: transparent;
        }

        .nav-menu .nav-link {
            color: var(--brand-navy) !important;
            text-transform: none;
            letter-spacing: 0.01em;
            font-weight: 600;
            font-size: 0.92rem;
            padding: 10px 12px !important;
        }

        .nav-menu .nav-link:hover {
            background: transparent;
            transform: none;
            color: var(--brand-cyan) !important;
        }

        .nav-menu .nav-link.active {
            border-bottom: 2px solid var(--brand-red);
        }

        .nav-menu .nav-link.active::after {
            display: none;
        }

        .cs-nav-cta {
            background: var(--brand-red) !important;
            color: #ffffff !important;
            border-radius: 4px;
            margin-left: 8px;
            white-space: nowrap;
        }

        .cs-nav-cta:hover,
        .cs-nav-cta:focus {
            background: var(--brand-red-dark) !important;
            color: #ffffff !important;
        }

        .cs-kicker {
            display: inline-block;
            margin: 0 0 12px;
            padding: 4px 0;
            color: #c5d0e0;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .cs-hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 8px;
        }

        .hero-btn,
        .hero-section .hero-btn {
            border-radius: 4px;
            text-transform: none;
            letter-spacing: 0.02em;
            padding: 12px 20px;
            font-weight: 600;
        }

        .hero-btn-ghost {
            background: transparent;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.55);
            border-radius: 4px;
            padding: 12px 20px;
            font-weight: 600;
        }

        .hero-btn-ghost:hover,
        .hero-btn-ghost:focus {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff !important;
        }

        .hero-btn--wa {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            line-height: 1.15;
        }

        .hero-btn__main {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .hero-btn__num {
            font-size: 0.82em;
            font-weight: 800;
            letter-spacing: 0.04em;
            opacity: 0.95;
        }

        .cs-trust {
            background: var(--brand-white);
            border-bottom: 1px solid var(--brand-border);
            padding: 18px 0;
        }

        .cs-trust ul {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            align-items: center;
            justify-items: center;
            gap: 16px;
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        @media (max-width: 991px) and (min-width: 768px) {
            .cs-trust ul {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .cs-trust li {
            color: var(--brand-navy);
            font-size: 0.88rem;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        .cs-paths {
            background: var(--brand-bg);
            padding: 48px 0 28px;
        }

        .cs-paths h2 {
            text-align: center;
            margin-bottom: 8px;
        }

        .cs-paths__lead {
            text-align: center;
            color: var(--brand-muted);
            margin-bottom: 28px;
        }

        a.cs-path {
            display: block;
            height: 100%;
            background: var(--brand-white);
            border: 1px solid var(--brand-border);
            border-radius: 8px;
            overflow: hidden;
            text-decoration: none;
            color: var(--brand-text);
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
        }

        a.cs-path:hover,
        a.cs-path:focus {
            color: var(--brand-text);
            border-color: var(--brand-navy);
            box-shadow: 0 10px 24px rgba(12, 51, 110, 0.1);
        }

        a.cs-path img {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: block;
        }

        a.cs-path h3 {
            font-size: 1.15rem;
            margin: 16px 16px 6px;
        }

        a.cs-path p {
            margin: 0 16px 18px;
            color: var(--brand-muted);
            font-size: 0.95rem;
        }

        .mission-vision-section {
            background: var(--brand-white);
            padding: 48px 0;
        }

        .mission-card,
        .vision-card,
        .objectives-card {
            border-radius: 8px;
            box-shadow: none;
            border: 1px solid var(--brand-border);
        }

        .mission-card:hover,
        .vision-card:hover {
            transform: none;
        }

        .floating-whatsapp {
            border-radius: 50%;
        }

        .navbar-toggler {
            border: 1px solid var(--brand-navy);
        }

        .navbar-toggler-icon {
            filter: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230C336E' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        @media (max-width: 767px) {
            .cs-utility__row {
                flex-direction: column;
                align-items: stretch;
            }

            .cs-utility__links {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 12px;
                row-gap: 4px;
                width: 100%;
            }

            .cs-utility__num {
                font-size: 1.25rem;
            }

            .cs-utility__wa {
                grid-column: 1 / -1;
            }

            .hero-title {
                font-size: clamp(1.75rem, 7vw, 2.4rem);
            }

            .cs-hero-actions .btn {
                width: 100%;
                text-align: center;
            }

            .logo-img {
                height: 44px;
            }

            .navbar-collapse {
                background: var(--brand-white);
                border: 1px solid var(--brand-border);
                margin-top: 8px;
                padding: 8px;
                border-radius: 8px;
            }

            .cs-nav-cta {
                margin-left: 0;
                text-align: center;
            }
        }

        .cs-about {
            background: var(--brand-white);
            padding: 36px 0 8px;
        }

        .cs-about__inner {
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
        }

        .cs-about__kicker {
            color: var(--brand-cyan);
            margin-bottom: 8px;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .cs-about h2 {
            font-size: clamp(1.35rem, 3vw, 1.75rem);
            margin-bottom: 12px;
        }

        .cs-about p {
            color: var(--brand-muted);
            margin: 0;
        }

        .testimonials-section,
        footer .btn-outline-light {
            display: none !important;
        }

        .scroll-to-top {
            display: inline-flex !important;
            left: 20px;
            right: auto;
            bottom: 20px;
            width: 44px;
            height: 44px;
            min-width: 44px;
            min-height: 44px;
            z-index: 1040;
        }

        @media (max-width: 767px) {
            .scroll-to-top {
                left: 16px;
                right: auto;
                bottom: 20px;
            }
        }

        .scroll-to-top:not(.is-visible) {
            pointer-events: none;
        }

        .cookie-icon {
            display: none;
        }

        .cookie-banner {
            border-radius: 0;
            box-shadow: 0 -4px 24px rgba(12, 51, 110, 0.12);
        }

        .service-card .service-icon {
            background: var(--brand-navy);
        }

        /* Detalle fino — movimiento industrial (corto, sin rebote) */
        :root {
            --cs-ease: cubic-bezier(0.22, 1, 0.36, 1);
            --cs-duration: 220ms;
            --cs-radius: 8px;
        }

        html {
            scroll-behavior: smooth;
        }

        .main-nav {
            position: sticky;
            top: 0;
            z-index: 1040;
            background: var(--brand-white);
            transition: box-shadow 0.28s var(--cs-ease);
        }

        .main-nav.cs-nav-stuck {
            box-shadow: 0 10px 28px rgba(12, 51, 110, 0.1);
        }

        .cs-utility__links a {
            text-decoration: none !important;
            background-image: linear-gradient(#ffffff, #ffffff);
            background-size: 0 1px;
            background-position: 0 100%;
            background-repeat: no-repeat;
            transition: background-size var(--cs-duration) var(--cs-ease);
        }

        .cs-utility__links a:hover,
        .cs-utility__links a:focus {
            background-size: 100% 1px;
        }

        .cs-utility__tel:hover .cs-utility__num,
        .cs-utility__tel:focus .cs-utility__num,
        .cs-utility__wa:hover .cs-utility__num,
        .cs-utility__wa:focus .cs-utility__num {
            color: #ffffff;
        }

        .hero-accent {
            transform-origin: left center;
            animation: csAccent 0.65s var(--cs-ease) 0.12s both;
        }

        @keyframes csAccent {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        a.cs-path {
            transition: box-shadow 0.28s var(--cs-ease), border-color 0.28s var(--cs-ease), transform 0.28s var(--cs-ease);
        }

        a.cs-path img {
            transition: transform 0.55s var(--cs-ease);
        }

        a.cs-path:hover,
        a.cs-path:focus-visible {
            transform: translateY(-2px);
        }

        a.cs-path:hover img,
        a.cs-path:focus-visible img {
            transform: scale(1.04);
        }

        .news-card,
        .service-card,
        .contact-card-modern,
        .accordion-item,
        .footer-focus-card {
            border-radius: var(--cs-radius) !important;
            transition: box-shadow 0.28s var(--cs-ease), transform 0.28s var(--cs-ease), border-color 0.28s var(--cs-ease) !important;
        }

        .news-card:hover,
        .service-card:hover,
        .contact-card-modern:hover,
        .product-card:hover {
            transform: translateY(-2px) !important;
        }

        .news-card img,
        .footer-focus-card img,
        .hero-slider-img {
            transition: transform 0.6s var(--cs-ease);
        }

        .news-card:hover img,
        .footer a.footer-focus-card:hover img {
            transform: scale(1.03);
        }

        .news-card,
        .footer-focus-card {
            overflow: hidden;
        }

        .nav-menu .nav-link {
            transition: color var(--cs-duration) var(--cs-ease), border-color var(--cs-duration) var(--cs-ease), background-color var(--cs-duration) var(--cs-ease) !important;
        }

        .hero-btn,
        .hero-btn-ghost,
        .btn {
            transition: background-color var(--cs-duration) var(--cs-ease), border-color var(--cs-duration) var(--cs-ease), color var(--cs-duration) var(--cs-ease), box-shadow var(--cs-duration) var(--cs-ease), transform var(--cs-duration) var(--cs-ease);
        }

        .hero-btn:hover:not(.cs-wa) {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(215, 14, 27, 0.28);
        }

        .carousel-indicators button {
            width: 8px;
            height: 8px;
            border-radius: 99px;
            transition: width 0.28s var(--cs-ease), background-color 0.28s var(--cs-ease), transform 0.28s var(--cs-ease) !important;
        }

        .carousel-indicators button.active {
            width: 22px;
            transform: none !important;
        }

        .carousel-control-prev,
        .carousel-control-next {
            opacity: 0.55;
            transition: opacity 0.22s var(--cs-ease), background-color 0.22s var(--cs-ease) !important;
        }

        .hero-slider-container:hover .carousel-control-prev,
        .hero-slider-container:hover .carousel-control-next,
        .carousel-control-prev:focus,
        .carousel-control-next:focus {
            opacity: 1;
        }

        .floating-whatsapp .btn-text {
            display: none !important;
        }

        .form-control,
        .form-select {
            transition: border-color var(--cs-duration) var(--cs-ease), box-shadow var(--cs-duration) var(--cs-ease);
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--brand-cyan) !important;
            box-shadow: 0 0 0 3px rgba(0, 126, 186, 0.18) !important;
        }

        :focus-visible {
            outline: 2px solid var(--brand-cyan);
            outline-offset: 3px;
        }

        .cs-reveal,
        .cs-reveal.is-in {
            opacity: 1;
            transform: none;
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation: none !important;
                transition: none !important;
            }
            .cs-reveal {
                opacity: 1;
                transform: none;
            }
        }

        /* WhatsApp: icono verde + número, sin pastilla. FAB circular aparte. */
        a.cs-wa:not(.floating-whatsapp):not(.cs-utility-phone),
        a.cs-wa:not(.floating-whatsapp):not(.cs-utility-phone):visited,
        .nav-menu a.nav-link.cs-wa,
        .hero-section a.cs-wa,
        a.btn-whatsapp,
        button.cs-wa,
        #cotizacionWhatsAppBtn {
            background: transparent !important;
            background-image: none !important;
            box-shadow: none !important;
            border: 0 !important;
            border-radius: 0 !important;
            padding: 0 !important;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 800;
            letter-spacing: 0.04em;
            font-variant-numeric: tabular-nums;
            text-decoration: none !important;
            line-height: 1.05;
            white-space: nowrap;
            -webkit-text-fill-color: unset;
        }

        a.cs-wa:not(.floating-whatsapp) i,
        .cs-utility__wa i,
        a.btn-whatsapp i,
        button.cs-wa i,
        #cotizacionWhatsAppBtn i,
        a.contact-option.cs-wa i {
            color: #25D366 !important;
            -webkit-text-fill-color: #25D366 !important;
            font-size: 1.25em;
            background: none !important;
            width: auto;
        }

        .cs-utility a.cs-wa,
        .hero-section a.cs-wa,
        .footer a.cs-wa {
            color: #ffffff !important;
        }

        .nav-menu a.nav-link.cs-wa,
        .service-card a.cs-wa,
        .contact-card-modern a.cs-wa,
        a.btn-whatsapp,
        a.contact-option.cs-wa,
        button.cs-wa,
        #cotizacionWhatsAppBtn {
            color: var(--brand-navy) !important;
        }

        a.cs-wa:not(.floating-whatsapp):not(.cs-utility-phone):hover,
        a.cs-wa:not(.floating-whatsapp):not(.cs-utility-phone):focus,
        .nav-menu a.nav-link.cs-wa:hover,
        .nav-menu a.nav-link.cs-wa:focus,
        .hero-section a.cs-wa:hover,
        .hero-section a.cs-wa:focus,
        a.btn-whatsapp:hover,
        a.btn-whatsapp:focus,
        #cotizacionWhatsAppBtn:hover,
        #cotizacionWhatsAppBtn:focus {
            background: transparent !important;
            box-shadow: none !important;
            transform: none;
            filter: none;
            opacity: 0.88;
            text-decoration: underline !important;
            text-underline-offset: 3px;
            color: inherit;
        }

        a.contact-option.cs-wa {
            border-left: 0 !important;
            width: auto;
            max-width: 100%;
        }

        a.floating-whatsapp span.btn-text,
        a.floating-whatsapp .btn-text {
            display: none !important;
        }

        .hero-btn,
        .hero-btn-ghost,
        a.cs-path,
        .service-card,
        .news-card,
        .contact-card-modern {
            border-radius: 8px !important;
        }

        .whatsapp-card .contact-icon-modern,
        .whatsapp-icon {
            background: #25D366 !important;
            background-image: none !important;
        }

        .hero-section a.cs-wa { display: none !important; }

        .cs-utility a.cs-utility__wa,
        .cs-utility a.cs-utility__wa.cs-wa,
        .cs-utility a.cs-utility-phone.cs-wa {
            display: inline-flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: center !important;
            gap: 0 !important;
            padding: 0 !important;
            min-height: 44px;
            background-color: transparent !important;
            box-shadow: none !important;
            border: 0 !important;
            border-radius: 0 !important;
            white-space: nowrap;
            font-weight: 600;
            -webkit-text-fill-color: unset;
        }

        .cs-utility a.cs-utility__wa .cs-utility__num {
            display: inline-flex;
            align-items: center;
            gap: 0.32em;
            color: #ffffff !important;
            font-size: 1.5rem;
            font-weight: 800;
        }

        .cs-utility a.cs-utility__wa .cs-utility__lbl {
            color: #9ec8e8;
            font-weight: 600;
        }

        .cs-utility a.cs-utility__wa i {
            font-size: 1.05em !important;
            color: #25D366 !important;
            -webkit-text-fill-color: #25D366 !important;
            line-height: 1;
        }

        .cs-utility a.cs-utility__wa:hover,
        .cs-utility a.cs-utility__wa:focus,
        .cs-utility a.cs-utility-phone:hover,
        .cs-utility a.cs-utility-phone:focus {
            background-color: transparent !important;
            opacity: 1;
            text-decoration: none !important;
            transform: none;
        }

        .nav-menu a.nav-link.cs-wa:hover,
        .nav-menu a.nav-link.cs-wa:focus {
            color: var(--brand-navy) !important;
        }

        a.floating-whatsapp {
            z-index: 1060 !important;
        }

        @media (max-width: 767px) {
            a.floating-whatsapp,
            a.floating-whatsapp.cs-wa {
                bottom: 76px !important;
                right: 14px !important;
            }

            .cookie-banner {
                padding-right: 76px;
            }

            .cs-utility__num {
                font-size: 1.25rem;
            }

            .cs-utility a.cs-utility__wa .cs-utility__num {
                font-size: 1.25rem;
            }

            .hero-section a.cs-wa {
                display: none !important;
            }
        }

        @media (max-width: 359.98px) {
            .cs-utility__num,
            .cs-utility a.cs-utility__wa .cs-utility__num {
                font-size: 1.125rem;
                letter-spacing: 0.02em;
            }

            .cs-utility__place {
                font-size: 0.75rem;
            }
        }

        @media (min-width: 1024px) {
            .cs-utility__num,
            .cs-utility a.cs-utility__wa .cs-utility__num {
                font-size: 1.5rem;
            }
        }

        .service-card,
        .news-card,
        a.cs-path,
        .contact-card-modern {
            box-shadow: 0 8px 24px rgba(12, 51, 110, 0.06);
        }

        /* Hover único: Ventas, Soporte y WhatsApp (subrayado que crece) */
        .cs-utility__links a,
        a.cs-utility-phone {
            background-color: transparent !important;
            background-image: linear-gradient(#ffffff, #ffffff) !important;
            background-size: 0 1px !important;
            background-position: 0 100% !important;
            background-repeat: no-repeat !important;
            transition: background-size 220ms var(--cs-ease);
            text-decoration: none !important;
            opacity: 1 !important;
            box-shadow: none !important;
        }

        .cs-utility__links a:hover,
        .cs-utility__links a:focus,
        .cs-utility__links a:focus-visible,
        a.cs-utility-phone:hover,
        a.cs-utility-phone:focus,
        a.cs-utility-phone:focus-visible {
            background-color: transparent !important;
            background-image: linear-gradient(#ffffff, #ffffff) !important;
            background-size: 100% 1px !important;
            text-decoration: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }

        /* FAB WhatsApp: volumen tipo producto (no círculo plano) */
        a.floating-whatsapp,
        a.floating-whatsapp.cs-wa {
            --cs-fab-ease: cubic-bezier(0.22, 1, 0.36, 1);
            position: fixed !important;
            right: 20px !important;
            bottom: 20px !important;
            width: 60px !important;
            height: 60px !important;
            min-width: 60px !important;
            min-height: 60px !important;
            padding: 0 !important;
            margin: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0 !important;
            border-radius: 50% !important;
            border: 1px solid rgba(255, 255, 255, 0.28) !important;
            background-color: #25D366 !important;
            background-image:
                radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 52%),
                linear-gradient(165deg, #4ae080 0%, #25D366 48%, #128C7E 100%) !important;
            color: #ffffff !important;
            box-shadow:
                inset 0 2px 3px rgba(255, 255, 255, 0.45),
                inset 0 -3px 6px rgba(7, 94, 84, 0.28),
                0 1px 2px rgba(12, 51, 110, 0.22),
                0 8px 16px rgba(18, 140, 126, 0.28),
                0 18px 36px rgba(37, 211, 102, 0.22) !important;
            z-index: 1100 !important;
            text-decoration: none !important;
            text-transform: none !important;
            overflow: visible !important;
            isolation: isolate;
            filter: none;
            animation: none !important;
            transform: translateY(0);
            transition:
                transform 220ms var(--cs-fab-ease),
                box-shadow 220ms var(--cs-fab-ease),
                filter 220ms var(--cs-fab-ease),
                background-image 220ms var(--cs-fab-ease) !important;
        }

        a.floating-whatsapp::before {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1.5px solid rgba(37, 211, 102, 0.22);
            pointer-events: none;
            z-index: -1;
            animation: csFabPing 2s var(--cs-fab-ease) infinite;
        }

        a.floating-whatsapp::after {
            content: "";
            position: absolute;
            top: 7px;
            left: 11px;
            width: 22px;
            height: 11px;
            border-radius: 50%;
            background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 72%);
            pointer-events: none;
            z-index: 2;
            animation: none !important;
        }

        @keyframes csFabPing {
            0% { transform: scale(1); opacity: 0.22; }
            70% { transform: scale(1.32); opacity: 0; }
            100% { transform: scale(1.32); opacity: 0; }
        }

        a.floating-whatsapp .btn-text,
        a.floating-whatsapp i {
            display: none !important;
        }

        a.floating-whatsapp .floating-whatsapp__icon {
            width: 32px;
            height: 32px;
            display: block;
            color: #ffffff;
            transform: translateY(0.5px);
            position: relative;
            z-index: 3;
            filter: drop-shadow(0 1px 1px rgba(7, 94, 84, 0.28));
        }

        a.floating-whatsapp:hover,
        a.floating-whatsapp:focus {
            background-color: #1DA851 !important;
            background-image:
                radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 54%),
                linear-gradient(165deg, #3fd873 0%, #1DA851 52%, #0E7A6C 100%) !important;
            color: #ffffff !important;
            opacity: 1 !important;
            text-decoration: none !important;
            filter: saturate(1.12);
            transform: translateY(-3px) !important;
            box-shadow:
                inset 0 2px 3px rgba(255, 255, 255, 0.4),
                inset 0 -3px 6px rgba(7, 94, 84, 0.32),
                0 2px 4px rgba(12, 51, 110, 0.2),
                0 12px 22px rgba(18, 140, 126, 0.32),
                0 24px 44px rgba(29, 168, 81, 0.28) !important;
        }

        a.floating-whatsapp:active {
            filter: saturate(1.05);
            transform: translateY(0) !important;
            box-shadow:
                inset 0 3px 8px rgba(7, 94, 84, 0.35),
                0 1px 2px rgba(12, 51, 110, 0.18),
                0 6px 12px rgba(18, 140, 126, 0.2) !important;
        }

        a.floating-whatsapp:focus-visible {
            outline: 2px solid #ffffff;
            outline-offset: 4px;
            box-shadow:
                inset 0 2px 3px rgba(255, 255, 255, 0.45),
                0 0 0 2px rgba(255, 255, 255, 0.95),
                0 0 0 5px #25D366,
                0 12px 28px rgba(37, 211, 102, 0.28) !important;
        }

        @media (max-width: 767px) {
            a.floating-whatsapp,
            a.floating-whatsapp.cs-wa {
                width: 56px !important;
                height: 56px !important;
                min-width: 56px !important;
                min-height: 56px !important;
                bottom: 84px !important;
                right: 16px !important;
            }

            a.floating-whatsapp .floating-whatsapp__icon {
                width: 30px;
                height: 30px;
            }

            a.floating-whatsapp::after {
                top: 6px;
                left: 10px;
                width: 20px;
                height: 10px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            a.floating-whatsapp::before {
                animation: none !important;
                opacity: 0 !important;
            }
            a.floating-whatsapp:hover,
            a.floating-whatsapp:focus,
            a.floating-whatsapp:active {
                transform: none !important;
                filter: none;
            }
        }

        /* Sistema único de botones (no aplica a .cs-utility ni al FAB) */
        .btn,
        .hero-btn,
        .brand-btn,
        .cs-nav-cta,
        .cookie-btn,
        .btn-contact-modern,
        .btn-primary,
        .btn-secondary,
        .btn-danger,
        .btn-success,
        .btn-outline-primary,
        .btn-outline-secondary,
        .btn-outline-info,
        .btn-outline-success,
        .btn-outline-light {
            border-radius: 8px !important;
            font-weight: 650;
            letter-spacing: 0.03em;
            min-height: 44px;
            padding: 11px 20px;
            text-transform: none;
            box-shadow: none;
            transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
        }

        .btn-sm {
            min-height: 40px;
            padding: 8px 14px;
            font-size: 0.875rem;
            letter-spacing: 0.02em;
        }

        .hero-btn,
        .brand-btn,
        .cs-nav-cta,
        .btn-danger,
        .btn-primary,
        .btn-success {
            background: #D70E1B !important;
            background-image: linear-gradient(180deg, #e41624 0%, #D70E1B 55%, #c40c18 100%) !important;
            border: 1px solid #c40c18 !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(12, 51, 110, 0.08);
        }

        .hero-btn:hover,
        .hero-btn:focus,
        .brand-btn:hover,
        .brand-btn:focus,
        .cs-nav-cta:hover,
        .cs-nav-cta:focus,
        .btn-danger:hover,
        .btn-danger:focus,
        .btn-primary:hover,
        .btn-primary:focus,
        .btn-success:hover,
        .btn-success:focus {
            background: #b00c16 !important;
            background-image: linear-gradient(180deg, #d70e1b 0%, #b00c16 100%) !important;
            border-color: #9a0a14 !important;
            color: #ffffff !important;
            transform: translateY(-1px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px rgba(215, 14, 27, 0.22);
        }

        .hero-btn:active,
        .brand-btn:active,
        .btn-primary:active {
            transform: translateY(0);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16);
        }

        .btn-secondary,
        .cookie-btn-accept,
        .btn-contact-modern.btn-email,
        .btn-contact-modern.btn-location {
            background: #0C336E !important;
            background-image: linear-gradient(180deg, #14458a 0%, #0C336E 100%) !important;
            border: 1px solid #0a2a5a !important;
            color: #ffffff !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        }

        .btn-secondary:hover,
        .btn-secondary:focus,
        .cookie-btn-accept:hover,
        .cookie-btn-accept:focus,
        .btn-contact-modern.btn-email:hover,
        .btn-contact-modern.btn-location:hover {
            background: #092656 !important;
            background-image: none !important;
            border-color: #092656 !important;
            color: #ffffff !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(12, 51, 110, 0.2);
        }

        .btn-outline-primary,
        .btn-outline-secondary,
        .btn-outline-info,
        .btn-outline-success,
        .btn-outline-light,
        .cookie-btn-decline {
            background: transparent !important;
            background-image: none !important;
            border: 1px solid #0C336E !important;
            color: #0C336E !important;
            -webkit-text-fill-color: #0C336E;
            box-shadow: none;
        }

        .btn-outline-light {
            border-color: rgba(255, 255, 255, 0.65) !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff;
        }

        .btn-outline-primary:hover,
        .btn-outline-primary:focus,
        .btn-outline-secondary:hover,
        .btn-outline-info:hover,
        .btn-outline-success:hover,
        .cookie-btn-decline:hover,
        .cookie-btn-decline:focus {
            background: #0C336E !important;
            border-color: #0C336E !important;
            color: #ffffff !important;
            -webkit-text-fill-color: #ffffff;
            transform: translateY(-1px);
        }

        .btn-outline-light:hover,
        .btn-outline-light:focus {
            background: #ffffff !important;
            color: #0C336E !important;
            -webkit-text-fill-color: #0C336E;
            border-color: #ffffff !important;
        }

        .btn-contact-modern.btn-phone {
            background: #0C336E !important;
            background-image: linear-gradient(180deg, #14458a 0%, #0C336E 100%) !important;
            border: 1px solid #0a2a5a !important;
            color: #ffffff !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        }

        .btn-contact-modern.btn-phone:hover,
        .btn-contact-modern.btn-phone:focus {
            background: #092656 !important;
            background-image: none !important;
            border-color: #092656 !important;
            color: #ffffff !important;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(12, 51, 110, 0.2);
        }

        .btn:focus-visible,
        .hero-btn:focus-visible,
        .brand-btn:focus-visible,
        .cookie-btn:focus-visible,
        .btn-contact-modern:focus-visible {
            outline: 2px solid #007EBA;
            outline-offset: 3px;
        }

        .btn:disabled,
        .btn.disabled {
            opacity: 0.55;
            pointer-events: none;
            transform: none !important;
            box-shadow: none !important;
        }

        @media (prefers-reduced-motion: reduce) {
            .btn:hover,
            .hero-btn:hover,
            .brand-btn:hover,
            .cookie-btn:hover,
            .btn-contact-modern:hover {
                transform: none !important;
            }
        }

        /* Tooltip FAB: visible solo en desktop al hover (el número no vive en el botón) */
        a.cs-fab-wa .cs-fab-wa__tip {
            position: absolute;
            right: calc(100% + 14px);
            top: 50%;
            transform: translateY(-50%);
            background: #0C336E;
            color: #ffffff;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            padding: 8px 12px;
            border-radius: 8px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            box-shadow: 0 8px 20px rgba(12, 51, 110, 0.18);
            transition: opacity 220ms var(--cs-ease);
        }

        a.cs-fab-wa .cs-fab-wa__tip::after {
            content: "";
            position: absolute;
            right: -6px;
            top: 50%;
            margin-top: -6px;
            border: 6px solid transparent;
            border-left-color: #0C336E;
        }

        a.cs-fab-wa:hover .cs-fab-wa__tip,
        a.cs-fab-wa:focus-visible .cs-fab-wa__tip {
            opacity: 1;
        }

        @media (max-width: 767px) {
            a.cs-fab-wa .cs-fab-wa__tip {
                display: none !important;
            }
        }

        /* Pasada global: ritmo industrial B2B */
        .hero-title {
            font-weight: 650;
            letter-spacing: -0.028em;
            line-height: 1.15;
        }

        .hero-accent {
            width: 40px;
            height: 3px;
            background: var(--brand-cyan);
            border-radius: 8px;
        }

        .hero-subtitle {
            font-size: 1.05rem;
            line-height: 1.55;
            letter-spacing: 0.01em;
            max-width: 36em;
        }

        .cs-kicker {
            letter-spacing: 0.14em;
        }

        .nav-menu .nav-link.active {
            border-bottom: 2px solid var(--brand-cyan) !important;
        }

        .nav-menu .nav-link.active::after {
            display: none !important;
        }

        .section-title,
        .section-title-modern,
        .cs-paths h2,
        .cs-about h2,
        .brand-title,
        .calculator-title {
            font-weight: 650 !important;
            letter-spacing: -0.025em;
            line-height: 1.2;
            font-size: clamp(1.45rem, 2.6vw, 2rem) !important;
            margin-bottom: 0.6em;
            text-transform: none;
        }

        .section-title-modern i,
        .feature-item i {
            color: var(--brand-cyan) !important;
        }

        .brand-subtitle {
            font-size: 1.02rem;
            letter-spacing: 0.01em;
            line-height: 1.55;
        }

        .cs-trust {
            padding: 22px 0;
        }

        .cs-trust li {
            font-weight: 600;
            font-size: 0.86rem;
            letter-spacing: 0.03em;
        }

        .cs-paths,
        .cs-about,
        .mission-vision-section,
        .services-section,
        .product-section,
        .news-section,
        .contact-section-modern,
        .faq-section,
        .brand-section,
        .map-section {
            padding-top: 56px;
            padding-bottom: 48px;
        }

        .contact-section-modern {
            background: var(--brand-bg) !important;
        }

        .contact-section-modern::before {
            display: none !important;
        }

        .stats-section {
            display: none !important;
        }

        .phone-card .contact-icon-modern {
            background: var(--brand-navy) !important;
            background-image: none !important;
        }

        a.cs-path,
        .news-card,
        .service-card,
        .contact-card-modern,
        .product-card,
        .mission-card,
        .vision-card,
        .accordion-item {
            border-radius: 8px !important;
            border: 1px solid var(--brand-border) !important;
            box-shadow: 0 8px 24px rgba(12, 51, 110, 0.06) !important;
        }

        a.cs-path,
        .news-card,
        .service-card,
        .product-card {
            overflow: hidden;
        }

        a.cs-path h3,
        .news-card h3,
        .news-title,
        .service-card h3,
        .service-title,
        .contact-title-modern {
            font-weight: 650 !important;
            letter-spacing: -0.02em;
            color: var(--brand-navy) !important;
        }

        a.cs-path p,
        .news-card p,
        .news-excerpt,
        .service-card p,
        .service-description,
        .cs-paths__lead {
            color: var(--brand-muted);
            line-height: 1.55;
        }

        .news-date,
        .phone-label,
        .cs-about__kicker {
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-weight: 650;
            font-size: 0.72rem;
            color: var(--brand-cyan) !important;
        }

        .service-list li:before {
            color: var(--brand-cyan) !important;
        }

        .service-card::before {
            display: none !important;
        }

        .service-card:hover .service-icon,
        .contact-card-modern:hover .contact-icon-modern {
            transform: none !important;
        }

        .contact-card-modern {
            padding: 28px 22px;
            transition: transform 220ms var(--cs-ease), box-shadow 220ms var(--cs-ease) !important;
        }

        .contact-card-modern::before,
        .contact-card-modern:hover::before {
            height: 3px;
            background: var(--brand-navy) !important;
            transform: none !important;
        }

        .contact-card-modern:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 28px rgba(12, 51, 110, 0.1) !important;
        }

        .product-card,
        .service-card {
            border-radius: 8px !important;
            transition: transform 220ms var(--cs-ease), box-shadow 220ms var(--cs-ease) !important;
        }

        .product-card:hover,
        .service-card:hover,
        .news-card:hover,
        a.cs-path:hover,
        a.cs-path:focus-visible {
            transform: translateY(-2px) !important;
            box-shadow: 0 12px 28px rgba(12, 51, 110, 0.1) !important;
        }

        .brand-image {
            overflow: hidden;
            border-radius: 8px;
        }

        a.cs-path img,
        .news-card img,
        .news-image img,
        .service-card img,
        .brand-image img,
        .hero-slider-img,
        .footer-focus-card img {
            transition: transform 220ms var(--cs-ease);
        }

        a.cs-path:hover img,
        .news-card:hover img,
        .news-card:hover .news-image img,
        .brand-image:hover img,
        .footer a.footer-focus-card:hover img {
            transform: scale(1.03) !important;
        }

        .hero-slider-container {
            border-radius: 8px;
            overflow: hidden;
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 44px !important;
            height: 44px !important;
            border-radius: 8px !important;
            background-color: rgba(12, 51, 110, 0.72) !important;
        }

        .carousel-control-prev:hover,
        .carousel-control-next:hover {
            background-color: rgba(12, 51, 110, 0.9) !important;
            transform: translateY(-50%) !important;
        }

        .carousel-indicators button {
            background-color: rgba(255, 255, 255, 0.45) !important;
            border: 0 !important;
        }

        .carousel-indicators button.active {
            background-color: var(--brand-cyan) !important;
            border-color: var(--brand-cyan) !important;
        }

        .brand-content {
            border-radius: 8px;
            padding: 8px 4px;
        }

        .brand-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .brand-buttons .ms-2 {
            margin-left: 0 !important;
        }

        .form-control,
        .form-select,
        .modal-content,
        .map-container,
        .category-tab {
            border-radius: 8px !important;
        }

        .form-label,
        label,
        .modal-body h6 {
            letter-spacing: 0.03em;
            font-weight: 650;
            color: var(--brand-navy);
        }

        .form-control,
        .form-select {
            min-height: 44px;
            border-color: var(--brand-border);
            transition: border-color 220ms var(--cs-ease), box-shadow 220ms var(--cs-ease);
        }

        .form-control:focus,
        .form-select:focus,
        #cotizacionForm .form-control:focus,
        #cotizacionForm .form-select:focus {
            border-color: var(--brand-cyan) !important;
            box-shadow: 0 0 0 3px rgba(0, 126, 186, 0.18) !important;
        }

        .category-tab {
            border: 1px solid var(--brand-border);
            background: #fff;
            color: var(--brand-navy);
            font-weight: 650;
            letter-spacing: 0.02em;
            min-height: 40px;
            padding: 8px 14px;
            transition: background-color 220ms var(--cs-ease), color 220ms var(--cs-ease), border-color 220ms var(--cs-ease);
        }

        .category-tab.active,
        .category-tab:hover {
            background: var(--brand-navy);
            border-color: var(--brand-navy);
            color: #fff;
        }

        .footer {
            padding-top: 40px;
            padding-bottom: 28px;
        }

        .footer h5 {
            font-size: 0.92rem;
            font-weight: 650;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .footer .list-unstyled li {
            margin-bottom: 6px;
        }

        .footer a.footer-focus-card {
            border-radius: 8px;
        }

        .footer-focus {
            margin-bottom: 22px;
        }

        .footer-focus__title {
            letter-spacing: 0.08em;
            font-weight: 650;
            font-size: 0.92rem;
        }

        .footer-focus-card span {
            letter-spacing: 0.08em;
            font-weight: 650;
            font-size: 0.82rem;
        }

        .footer hr {
            opacity: 0.2;
            margin: 22px 0 16px;
        }

        .accordion-button {
            font-weight: 600;
            letter-spacing: 0.01em;
            border-radius: 8px !important;
        }

        .modal-header,
        .modal-footer {
            border-color: var(--brand-border);
        }

        .modal-content {
            box-shadow: 0 16px 40px rgba(12, 51, 110, 0.14);
        }

        .contact-option {
            border-radius: 8px;
            transition: background-color 220ms var(--cs-ease), transform 220ms var(--cs-ease);
        }

        .service-card a.cs-wa,
        .contact-card-modern a.cs-wa,
        #cotizacionWhatsAppBtn {
            display: inline-flex;
            align-items: center;
            gap: 0.4em;
            margin-top: 4px;
            font-weight: 650;
            letter-spacing: 0.02em;
        }

        .map-container iframe {
            border-radius: 8px;
        }

        @media (max-width: 767px) {
            .cs-paths,
            .cs-about,
            .mission-vision-section,
            .services-section,
            .product-section,
            .news-section,
            .contact-section-modern,
            .faq-section,
            .brand-section,
            .map-section {
                padding-top: 40px;
                padding-bottom: 36px;
            }

            .hero-title {
                letter-spacing: -0.02em;
            }

            .cs-utility__num {
                font-size: 1.15rem;
            }

            .brand-buttons .btn {
                width: 100%;
            }
        }

        @media (min-width: 768px) and (max-width: 1023px) {
            .nav-menu .nav-link {
                padding: 10px 8px !important;
                font-size: 0.84rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            a.cs-path:hover,
            .news-card:hover,
            .service-card:hover,
            .product-card:hover,
            .contact-card-modern:hover,
            a.cs-path:hover img,
            .news-card:hover img,
            .news-card:hover .news-image img,
            .brand-image:hover img,
            .footer a.footer-focus-card:hover img,
            .carousel-control-prev:hover,
            .carousel-control-next:hover {
                transform: none !important;
            }
        }

        /* Pasada de secciones: ritmo, acento cian, shell, bandas */
        :root {
            --cs-shell-max: 1140px;
            --cs-section-y: 64px;
            --cs-section-y-sm: 44px;
        }

        .cs-utility .container,
        .main-nav .container,
        .hero-section .container,
        .cs-trust .container,
        .cs-paths .container,
        .cs-about .container,
        .brand-section .container,
        .services-section .container,
        .news-section .container,
        .contact-section-modern .container,
        .faq-section .container,
        .map-section .container,
        .footer .container {
            max-width: var(--cs-shell-max);
            padding-left: 20px;
            padding-right: 20px;
        }

        .cs-about .container {
            max-width: var(--cs-shell-max);
        }

        .cs-about__inner {
            max-width: 680px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding: 0;
            text-align: center;
        }

        .cs-about__inner > * {
            max-width: none;
            margin-left: 0;
            margin-right: 0;
        }

        .cs-about__kicker {
            letter-spacing: 0.14em;
            margin-bottom: 10px;
        }

        .cs-about h2 {
            line-height: 1.25;
            margin-bottom: 16px !important;
        }

        .cs-about__inner > p:not(.cs-about__kicker) {
            line-height: 1.65;
            font-size: 1.05rem;
            color: var(--brand-muted);
            margin: 0;
        }

        @media (max-width: 767px) {
            .cs-about .container {
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        .hero-section {
            padding-top: 56px !important;
            padding-bottom: 56px !important;
        }

        .cs-trust {
            padding: 24px 0 !important;
            border-top: 0;
            border-bottom: 1px solid rgba(12, 51, 110, 0.08);
        }

        .cs-paths,
        .cs-about,
        .brand-section,
        .services-section,
        .news-section,
        .contact-section-modern,
        .faq-section,
        .map-section {
            padding-top: var(--cs-section-y) !important;
            padding-bottom: var(--cs-section-y) !important;
        }

        .footer {
            padding-top: var(--cs-section-y) !important;
            padding-bottom: 36px !important;
        }

        .cs-trust,
        .cs-about,
        .brand-section:not(.keltec-section),
        .contact-section-modern,
        .faq-section {
            background: var(--brand-white) !important;
        }

        .cs-paths,
        .keltec-section,
        .services-section,
        .news-section {
            background: var(--brand-bg) !important;
        }

        .map-section,
        .contact-section-modern {
            background: var(--brand-white) !important;
        }

        .cs-paths,
        .cs-about,
        .brand-section,
        .services-section,
        .contact-section-modern,
        .map-section,
        .news-section,
        .faq-section {
            border-top: 1px solid rgba(12, 51, 110, 0.08);
        }

        .section-title,
        .section-title-modern,
        .cs-paths h2,
        .cs-about h2,
        .brand-title,
        .faq-section .section-title {
            color: var(--brand-navy) !important;
            font-weight: 650 !important;
            letter-spacing: -0.025em;
            font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
            margin-bottom: 0.35em !important;
        }

        .section-title.mb-5,
        .section-title.text-center.mb-5,
        .contact-section-modern .row.mb-5 {
            margin-bottom: 0.5rem !important;
        }

        .section-title-modern i {
            display: none;
        }

        .cs-paths h2,
        .cs-about h2,
        .section-title,
        .section-title-modern {
            text-align: center;
        }

        .cs-paths h2::after,
        .cs-about h2::after,
        .section-title::after,
        .section-title-modern::after,
        .brand-title::after {
            content: "";
            display: block;
            width: 40px;
            height: 3px;
            margin: 12px auto 0;
            background: var(--brand-cyan);
            border-radius: 8px;
        }

        .brand-title {
            text-align: left;
        }

        .brand-title::after {
            margin-left: 0;
            margin-right: auto;
        }

        .cs-paths__lead,
        .section-subtitle-modern {
            text-align: center;
            max-width: 36em;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 28px;
            color: var(--brand-muted);
        }

        a.cs-path h3,
        a.cs-path p,
        .news-content {
            padding-left: 20px;
            padding-right: 20px;
        }

        a.cs-path h3 {
            margin: 16px 20px 6px !important;
        }

        a.cs-path p {
            margin: 0 20px 20px !important;
        }

        .news-content {
            padding: 18px 20px 20px;
        }

        .cs-card-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 16px;
            margin-top: 16px;
        }

        .service-card {
            padding: 28px 24px !important;
        }

        @media (max-width: 767px) {
            .hero-section {
                padding-top: 40px !important;
                padding-bottom: 40px !important;
            }

            .cs-paths,
            .cs-about,
            .brand-section,
            .services-section,
            .news-section,
            .contact-section-modern,
            .faq-section,
            .map-section,
            .footer {
                padding-top: var(--cs-section-y-sm) !important;
                padding-bottom: var(--cs-section-y-sm) !important;
            }
        }

        /* Anclas del menú: secciones separadas, no fusionadas */
        #home,
        #soluciones,
        #bauer,
        #keltec,
        #milwaukee,
        #servicios,
        #contacto,
        #mision-vision,
        #refacciones,
        #ubicacion {
            scroll-margin-top: 76px;
        }
        .cs-brand {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 40px 56px;
            align-items: center;
        }

        .cs-brand--flip .cs-brand__media {
            order: 2;
        }

        .cs-brand__media {
            overflow: hidden;
            border-radius: 8px;
            background: #fff;
            border: 1px solid var(--brand-border);
        }

        .cs-brand__media img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            object-fit: contain;
            object-position: center;
            padding: 24px;
            transition: transform 220ms var(--cs-ease);
        }

        .cs-brand__media:hover img {
            transform: scale(1.03);
        }

        .cs-brand__copy {
            max-width: 34rem;
        }

        .cs-brand__kicker {
            margin: 0 0 8px;
            color: var(--brand-cyan);
            font-size: 0.72rem;
            font-weight: 650;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .cs-brand .brand-title {
            text-align: left;
            font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
            margin-bottom: 12px !important;
        }

        .cs-brand .brand-title::after {
            margin: 12px 0 0;
        }

        .cs-brand__lead {
            margin: 0 0 18px;
            color: var(--brand-muted);
            line-height: 1.6;
            font-size: 1.02rem;
        }

        .cs-brand__list {
            list-style: none;
            margin: 0 0 22px;
            padding: 0;
        }

        .cs-brand__list li {
            position: relative;
            padding: 6px 0 6px 22px;
            color: var(--brand-navy);
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.45;
        }

        .cs-brand__list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.72em;
            width: 8px;
            height: 8px;
            border-radius: 2px;
            background: var(--brand-cyan);
        }

        .cs-brand__more {
            margin: 0 0 18px;
            font-size: 0.92rem;
            color: var(--brand-muted);
            line-height: 1.55;
        }

        .cs-brand__more summary {
            cursor: pointer;
            color: var(--brand-navy);
            font-weight: 650;
            letter-spacing: 0.02em;
            list-style: none;
        }

        .cs-brand__more summary::-webkit-details-marker {
            display: none;
        }

        .cs-brand__more p {
            margin: 8px 0 0;
        }

        .cs-brand__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .services-section .row {
            --bs-gutter-x: 1.5rem;
            --bs-gutter-y: 1.5rem;
        }

        .service-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 28px 24px !important;
            background: #fff;
        }

        .service-icon {
            width: 44px !important;
            height: 44px !important;
            border-radius: 8px !important;
            background: var(--brand-navy) !important;
            font-size: 1.05rem !important;
            margin-bottom: 16px !important;
        }

        .service-title {
            font-size: 1.15rem !important;
            margin-bottom: 8px;
        }

        .service-description {
            font-size: 0.95rem;
            margin-bottom: 14px;
            line-height: 1.55;
        }

        .service-list {
            flex: 1;
            margin-bottom: 8px;
        }

        .service-list li {
            padding-left: 18px;
            margin-bottom: 6px;
            font-size: 0.92rem;
        }

        .cs-card-actions {
            margin-top: auto;
            padding-top: 8px;
        }

        .cs-card-actions .cs-wa {
            font-size: 0.95rem;
            font-weight: 650;
            color: var(--brand-navy) !important;
            text-decoration: none;
        }

        .cs-card-actions .cs-wa i {
            color: #25D366;
        }

        .contact-card-modern {
            display: flex;
            flex-direction: column;
            height: 100%;
            text-align: left !important;
            padding: 24px 22px !important;
            background: #fff;
        }

        .contact-icon-modern {
            display: none !important;
        }

        .contact-title-modern {
            text-align: left !important;
            font-size: 1.12rem !important;
            margin-bottom: 12px !important;
            color: var(--brand-navy) !important;
        }

        .contact-details {
            text-align: left !important;
            align-items: flex-start !important;
            min-height: 0 !important;
            flex: 1;
            margin-bottom: 16px !important;
        }

        .phone-label {
            color: var(--brand-cyan) !important;
            font-size: 0.7rem !important;
            letter-spacing: 0.1em;
        }

        .phone-number,
        .contact-number,
        .contact-email,
        .contact-location {
            color: var(--brand-navy) !important;
            font-weight: 650;
            font-size: 0.95rem !important;
            text-decoration: none;
        }

        .phone-number:hover,
        .contact-card-modern a.phone-number:hover {
            color: var(--brand-cyan) !important;
        }

        .whatsapp-status,
        .email-response,
        .location-hours {
            display: none !important;
        }

        .contact-description {
            margin-bottom: 0;
            line-height: 1.5;
        }

        .contact-action {
            margin-top: auto;
        }

        .contact-action .cs-wa {
            font-weight: 650;
            color: var(--brand-navy) !important;
            text-decoration: none;
        }

        .contact-action .cs-wa i {
            color: #25D366;
        }

        .map-container,
        .map-container iframe,
        .map-info {
            border-radius: 8px !important;
            box-shadow: none !important;
            transform: none !important;
        }

        .map-info {
            background: var(--brand-bg) !important;
            padding: 22px 24px !important;
            border: 1px solid var(--brand-border);
        }

        .map-container:hover {
            transform: none !important;
        }

        .contact-section-modern {
            background: var(--brand-bg) !important;
        }

        .contact-card-modern {
            overflow: visible;
        }

        .cs-location {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.7fr);
            gap: 24px;
            align-items: stretch;
        }

        .cs-location__map {
            overflow: visible;
            min-height: 300px;
            background: transparent;
            border: 0;
        }

        .cs-location__map iframe {
            display: block;
            width: 100%;
            max-width: 100%;
            height: 380px;
            min-height: 300px;
            border: 0;
            border-radius: 8px;
            background: var(--brand-bg);
        }

        .cs-location__map-fallback {
            margin: 12px 0 0;
        }

        .cs-location__card {
            border-radius: 8px;
            border: 1px solid var(--brand-border);
            box-shadow: 0 8px 24px rgba(12, 51, 110, 0.06);
            background: #fff;
            padding: 28px 24px;
        }

        .cs-location__card .phone-label {
            margin: 16px 0 6px;
        }

        .cs-location__card .phone-label:first-child {
            margin-top: 0;
        }

        .cs-location__value {
            margin: 0 0 4px;
            color: var(--brand-navy);
            font-weight: 600;
            line-height: 1.55;
        }

        a.cs-location__maps {
            display: inline-block;
            margin-top: 18px;
            color: var(--brand-cyan);
            font-size: 0.88rem;
            font-weight: 650;
            letter-spacing: 0.04em;
            text-decoration: none;
        }

        a.cs-location__maps:hover,
        a.cs-location__maps:focus {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .contact-card-modern a.cs-location__maps {
            margin-top: 12px;
        }

        @media (max-width: 991px) {
            .cs-location {
                grid-template-columns: 1fr;
            }

            .cs-location__map,
            .cs-location__map iframe {
                display: block;
                width: 100%;
                max-width: 100%;
                min-height: 300px;
                overflow: visible;
            }

            .cs-location__map iframe {
                height: 320px;
            }
        }

        @media (max-width: 991px) {
            .cs-brand,
            .cs-brand--flip {
                grid-template-columns: 1fr;
            }

            .cs-brand--flip .cs-brand__media {
                order: 0;
            }

            .cs-brand__copy {
                max-width: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .cs-brand__media:hover img {
                transform: none !important;
            }
        }

        .cs-news-archive-wrap {
            margin-top: 4px;
            max-width: 100%;
        }

        .news-section .news-archive {
            background: transparent !important;
            border: none !important;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
        }

        .news-section .news-archive summary {
            display: inline-block;
            cursor: pointer;
            color: var(--brand-navy);
            font-size: 0.78rem;
            font-weight: 650;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 10px 0 4px;
            list-style: none;
        }

        .news-section .news-archive summary::-webkit-details-marker {
            display: none;
        }

        .news-section .news-archive summary::after {
            content: " +";
            color: var(--brand-cyan);
            letter-spacing: 0;
            font-weight: 700;
        }

        .news-section .news-archive[open] summary::after {
            content: " −";
        }

        .news-section .news-archive[open] {
            background: #fff !important;
            border: 1px solid var(--brand-border) !important;
            border-radius: 8px;
            padding: 8px 20px 4px;
            margin-top: 8px;
        }

        .news-section .news-archive-list {
            border-top-color: var(--brand-border);
        }

        .news-section .news-archive-list li {
            border-bottom-color: var(--brand-border);
        }

        .news-section .news-archive-list time {
            color: var(--brand-navy);
            letter-spacing: 0.04em;
        }

        .cs-faq {
            max-width: 760px;
            width: 100%;
            margin: 28px auto 0;
        }

        .faq-section .accordion {
            --bs-accordion-border-width: 0;
            --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(0, 126, 186, 0.22);
            --bs-accordion-transition: height var(--cs-duration) var(--cs-ease), background-color var(--cs-duration) var(--cs-ease);
        }

        .faq-section .accordion-item {
            background: #fff !important;
            border: 1px solid var(--brand-border) !important;
            border-radius: 8px !important;
            box-shadow: none !important;
            margin-bottom: 10px;
            overflow: hidden;
            transform: none !important;
            transition: border-color var(--cs-duration) var(--cs-ease), box-shadow var(--cs-duration) var(--cs-ease) !important;
        }

        .faq-section .accordion-item:hover,
        .faq-section .accordion-item:last-of-type {
            transform: none !important;
            margin-bottom: 10px;
        }

        .faq-section .accordion-item:hover {
            border-color: rgba(12, 51, 110, 0.22) !important;
        }

        .faq-section .accordion-item:has(.accordion-button:not(.collapsed)) {
            border-color: var(--brand-cyan) !important;
            box-shadow: 0 8px 24px rgba(0, 126, 186, 0.08) !important;
        }

        .faq-section .accordion-header {
            margin: 0;
        }

        .faq-section .accordion-button,
        .faq-section .accordion-button:not(.collapsed),
        .faq-section .accordion-button:hover,
        .faq-section .accordion-button:focus {
            background: #fff !important;
            color: var(--brand-navy) !important;
            box-shadow: none !important;
            font-size: 1.02rem;
            font-weight: 650;
            letter-spacing: -0.015em;
            padding: 16px 18px;
            border-radius: 8px !important;
            transition: background-color var(--cs-duration) var(--cs-ease), color var(--cs-duration) var(--cs-ease) !important;
        }

        .faq-section .accordion-button:hover {
            background: rgba(12, 51, 110, 0.03) !important;
        }

        .faq-section .accordion-button:not(.collapsed) {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .faq-section .accordion-button:focus-visible {
            outline: 2px solid var(--brand-cyan);
            outline-offset: 2px;
        }

        .faq-section .accordion-button::after {
            filter: none !important;
            width: 1rem;
            height: 1rem;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007EBA'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
            transition: transform var(--cs-duration) var(--cs-ease);
        }

        .faq-section .accordion-button:not(.collapsed)::after {
            transform: rotate(-180deg);
        }

        .faq-section .accordion-collapse.collapsing {
            transition: height var(--cs-duration) var(--cs-ease);
        }

        .faq-section .accordion-body {
            padding: 0 18px 18px;
            background: #fff;
            color: var(--brand-muted);
            line-height: 1.6;
            font-size: 0.98rem;
        }

        .cs-ico {
            width: 46px;
            height: 46px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: rgba(0, 126, 186, 0.08);
            color: var(--brand-navy);
            margin: 0 0 14px;
            transition: background-color var(--cs-duration) var(--cs-ease);
        }

        .cs-ico i {
            font-size: 1.05rem !important;
            line-height: 1;
            color: var(--brand-navy) !important;
            -webkit-text-fill-color: var(--brand-navy) !important;
            transition: transform var(--cs-duration) var(--cs-ease), color var(--cs-duration) var(--cs-ease);
        }

        .cs-trust ul {
            align-items: center;
            justify-items: center;
        }

        .cs-trust li {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-align: left;
        }

        .cs-trust .cs-ico {
            margin: 0;
            flex: 0 0 1.25rem;
            width: 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        @media (max-width: 767px) {
            .cs-trust ul {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 14px;
            }

            .cs-trust li {
                width: min(280px, 100%);
                justify-content: flex-start;
                align-items: center;
                gap: 12px;
            }
        }

        .service-icon.cs-ico,
        .service-card .service-icon {
            width: 46px !important;
            height: 46px !important;
            border-radius: 8px !important;
            background: rgba(0, 126, 186, 0.08) !important;
            color: var(--brand-navy) !important;
            font-size: 1.05rem !important;
            margin-bottom: 16px !important;
        }

        .service-card .service-icon i {
            font-size: 1.05rem;
            color: var(--brand-navy);
            transition: transform var(--cs-duration) var(--cs-ease);
        }

        .service-card:hover .cs-ico,
        .contact-card-modern:hover .cs-ico,
        .cs-trust li:hover .cs-ico {
            background: rgba(0, 126, 186, 0.16);
        }

        .service-card:hover .cs-ico i,
        .service-card:hover .service-icon i,
        .contact-card-modern:hover .cs-ico i,
        .cs-trust li:hover .cs-ico i {
            transform: translateY(-1px);
            color: var(--brand-cyan) !important;
            -webkit-text-fill-color: var(--brand-cyan) !important;
        }

        .cs-brand__list li {
            padding-left: 30px;
        }

        .cs-brand__list li::before {
            width: 18px;
            height: 18px;
            border-radius: 6px;
            top: 0.45em;
            background-color: rgba(0, 126, 186, 0.08);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007EBA'%3e%3cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 11px;
            transition: background-color var(--cs-duration) var(--cs-ease), transform var(--cs-duration) var(--cs-ease);
        }

        .cs-brand__list li:hover::before {
            background-color: rgba(0, 126, 186, 0.16);
            transform: translateY(-1px);
        }

        .cs-reveal {
            opacity: 1;
            transform: none;
        }

        .cs-contact-dir {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            max-width: 960px;
            margin: 28px auto 0;
            background: #fff;
            border: 1px solid var(--brand-border);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(12, 51, 110, 0.06);
            overflow: hidden;
        }

        .cs-contact-dir__item {
            padding: 24px 22px;
            border-right: 1px solid var(--brand-border);
            border-bottom: 1px solid var(--brand-border);
        }

        .cs-contact-dir__item:nth-child(2n) {
            border-right: 0;
        }

        .cs-contact-dir__item .phone-number {
            display: block;
        }

        .cs-contact-dir__item .cs-contact-dir__quote {
            margin-top: 14px;
            min-height: 44px;
        }

        .cs-contact-dir__item:hover .cs-ico {
            background: rgba(0, 126, 186, 0.16);
        }

        .cs-contact-dir__item:hover .cs-ico i {
            transform: translateY(-1px);
            color: var(--brand-cyan) !important;
            -webkit-text-fill-color: var(--brand-cyan) !important;
        }

        @media (max-width: 767px) {
            .cs-contact-dir {
                grid-template-columns: 1fr;
            }

            .cs-contact-dir__item,
            .cs-contact-dir__item:nth-child(2n) {
                border-right: 0;
            }
        }

        #cotizacionForm .cs-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        #cotizacionForm .form-label {
            font-size: 0.78rem;
            font-weight: 650;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--brand-navy);
            margin-bottom: 6px;
        }

        #cotizacionForm button[type="submit"].hero-btn {
            min-height: 44px;
            background: var(--brand-red);
            border-color: var(--brand-red);
            color: #fff;
        }

        #cotizacionForm button[type="submit"].hero-btn:hover,
        #cotizacionForm button[type="submit"].hero-btn:focus {
            background: var(--brand-red-dark);
            border-color: var(--brand-red-dark);
            color: #fff;
        }

        @media (max-width: 575px) {
            #cotizacionForm .cs-form-row {
                grid-template-columns: 1fr;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .cs-ico i,
            .service-card:hover .cs-ico i,
            .contact-card-modern:hover .cs-ico i,
            .cs-contact-dir__item:hover .cs-ico i,
            .cs-trust li:hover .cs-ico i,
            .cs-brand__list li::before,
            .faq-section .accordion-button::after,
            .faq-section .accordion-button:not(.collapsed)::after {
                transform: none !important;
                transition: none !important;
            }
        }

.cs-map,
.cs-location__map,
.cs-location__map iframe {
    display: block;
}

/* Hard refresh: las fotos del home no deben quedar en blanco */
.hero-slider-img,
.cs-path img,
.cs-brand__media img,
.logo-img,
.cs-reveal,
.cs-reveal.is-in,
.fade-in {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
}