/* ================= GLOBALES ================= */
        :root {
            --azul: #12181e;
            --naranjo: #c42f2f;
            --naranjo-claro: #cf4848;
            --gris-prod: #e2e2e2;
            --blanco: #ffffff;
            --fuente-titulos: 'Inter', sans-serif;
            --fuente-texto: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

        body {
            font-family: var(--fuente-texto);
            color: var(--azul);
            line-height: 1.5;
            overflow-x: hidden;
            padding-bottom: 120px;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: var(--fuente-titulos);
            text-transform: uppercase;
            line-height: 0.9;
            /* Interlineado reducido para apretar los textos */
            margin-bottom: 15px;
            font-weight: 700;
        }

        h1 {
            font-size: 4rem;
            font-weight: 900;
        }

        h2 {
            font-size: 3.85rem;
        }

        h3 {
            font-size: 2rem;
        }

        p {
            font-size: 1rem;
            font-weight: 400;
        }

        .text-naranjo {
            color: var(--naranjo);
        }

        .text-blanco {
            color: var(--blanco);
        }

        .text-azul {
            color: var(--azul);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--naranjo);
            color: var(--blanco);
            width: 150px;
            height: 45px;
            border-radius: 5px;
            text-decoration: none;
            font-family: var(--fuente-texto);
            font-weight: bold;
            text-transform: uppercase;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn:hover {
            background-color: #a02626;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px;
        }

        /* ================= BLOQUE 1: PRINCIPAL ================= */
        .bloque-1 {
            position: relative;
            background-color: var(--azul);
            color: var(--blanco);
            min-height: 75vh;
            /* ====== altura de 100 a 75===== */
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .bg-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-size: cover;
            background-position: center;
            /* Cambiamos el tiempo total a 35s para lograr 7s por imagen */
            animation: slideBg 30s infinite;
            opacity: 0.4;
        }

        @keyframes slideBg {

            /* Imagen 1: Bodega */
            0%,
            18% {
                background-image: url('../images/imagen_bodega.png');
            }

            /* Imagen 2: Hospital */
            20%,
            38% {
                background-image: url('../images/imagen_hospital.png');
            }

            /* Imagen 3: Universidad */
            40%,
            58% {
                background-image: url('../images/imagen_universidad.png');
            }

            /* Imagen 4: Datacenter (Nueva) */
            60%,
            78% {
                background-image: url('../images/imagen_datacenter.png');
            }

            /* Imagen 5: Minería (Nueva) */
            80%,
            100% {
                background-image: url('../images/imagen_mineria.png');
            }
        }

        .header-top {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .menu-top {
            display: flex;
            gap: 20px;
        }

        .menu-top a {
            color: var(--blanco);
            text-decoration: none;
            font-size: 14px;
            text-transform: uppercase;
            font-weight: bold;
        }

        .logo {
            height: auto;
            max-height: 110px;
            /* Al ser 2:1, 110px de alto te dará un logo de 220px de ancho. Un tamaño muy elegante. */
            max-width: 100%;
            object-fit: contain;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-grow: 1;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding: 0 20px;
            gap: 40px;
        }

        .hero-div1 {
            flex: 1;
        }

        .hero-div1 p {
            font-size: 1rem;
            max-width: 600px;
            margin-top: 20px;
        }

        .hero-div2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .hero-div2 a.email-link,
        .hero-div2 a.phone-link {
            color: var(--blanco);
            text-decoration: none;
            font-size: 14px;
        }



        /* ================= NUEVO BLOQUE DE PRODUCTOS ================= */
        .bloque-productos {
            background-color: var(--blanco);
            width: 100%;
        }

        .bloque-productos h2 {
            font-size: clamp(2rem, 3.5vw, 3rem);
            width: 100%;
            margin-bottom: 40px;
            /* Le di un poco más de aire para separar del nuevo logo */
        }

        .productos-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* Cambiado de 5 a 4 columnas */
            gap: 20px;
            width: 100%;
        }

        /* NUEVO: Envoltorio para mantener la columna unida */
        .producto-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        /* NUEVO: El logo 2:1 sobre la tarjeta */
        .logo-marca-card {
            width: 100%;
            height: 50px;
            /* Fija la altura para mantener la proporción sin deformar */
            object-fit: contain;
            margin-bottom: 15px;
            display: block;
        }

        .producto-card {
            border: 1px solid #e2e2e2;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background-color: var(--blanco);
            transition: box-shadow 0.3s ease;
            width: 100%;
            flex-grow: 1;
            /* MAGIA: Esto empuja la tarjeta para que todas midan lo mismo hacia abajo */
        }

        .prod-img {
            width: 100%;
            height: 140px;
            object-fit: contain;
            margin-bottom: 20px;
        }

        .prod-marca {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--azul);
            margin-bottom: 5px;
        }

        .prod-titulo {
            font-size: 1rem;
            font-weight: 700;
            color: var(--azul);
            line-height: 1.3;
            margin-bottom: 15px;
            flex-grow: 1;
        }

        .prod-id {
            font-size: 0.85rem;
            color: #999;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .btn-prod {
            width: 100%;
        }



        .producto-card {
            border: 1px solid #e2e2e2;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background-color: var(--blanco);
            transition: box-shadow 0.3s ease;
        }

        .producto-card:hover {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        }

        .prod-img {
            width: 100%;
            height: 140px;
            object-fit: contain;
            margin-bottom: 20px;
        }

        .prod-marca {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--azul);
            margin-bottom: 5px;
        }

        .prod-titulo {
            font-size: 1rem;
            font-weight: 700;
            color: var(--azul);
            line-height: 1.3;
            margin-bottom: 15px;
            flex-grow: 1;
            /* Empuja el ID y el botón hacia abajo */
        }

        .prod-id {
            font-size: 0.85rem;
            color: #999;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .btn-prod {
            width: 100%;
            /* Botón al 100% de la tarjeta */
        }

        /* ================= NUEVO BLOQUE 2: SERVICIOS (DISEÑO CLIENTE) - FONDO AZUL ================= */
        .bloque-2-mejorado {
            background-color: var(--azul);
            /* Color de respaldo */
            background-image: url('../images/bg_nuevo.png');
            /* Nueva imagen de fondo */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* Evita que la imagen se repita */
            color: var(--blanco);
            padding: 80px 20px;
        }

        .b2-mejorado-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .b2-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .b2-header h2 {
            font-size: clamp(2rem, 4vw, 3.5rem);
            color: var(--blanco);
            line-height: 1.1;
        }

        .b2-header .subtitulo {
            color: #d1d9e0;
            /* Gris muy claro para el subtítulo sobre fondo rojo */
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 15px;
        }

        .servicios-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 50px;
        }

        .servicio-card {
            background-color: rgba(255, 255, 255, 0.1);
            /* Fondo blanco semi-transparente sobre rojo */
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 40px 20px;
            text-align: center;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .servicio-card:hover {
            transform: translateY(-5px);
            background-color: rgba(255, 255, 255, 0.15);
            /* Se ilumina levemente al pasar el mouse */
        }

        .servicio-icono {
            font-size: 2.5rem;
            color: var(--naranjo);
            /* Ahora los íconos toman el color naranjo oficial */
            margin-bottom: 20px;
        }

        .servicio-card h3 {
            font-size: 1.2rem;
            color: var(--blanco);
            margin-bottom: 15px;
        }

        .servicio-card p {
            font-size: 0.85rem;
            color: #d1d9e0;
            /* Gris muy claro para el texto sobre rojo */
            line-height: 1.5;
            margin: 0;
            text-transform: none;
            /* Aseguramos que sea altas y bajas normal */
        }

        /* Footer del bloque (La caja más oscura inferior) */
        .b2-footer {
            background-color: #0e1217;
            /* Un tono de azul más oscuro para resaltar, derivado de #c42f2f */
            border-radius: 12px;
            padding: 30px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .b2-footer-texto h3 {
            font-size: 1.5rem;
            margin-bottom: 5px;
            color: var(--blanco);
            text-transform: none;
            /* Según la imagen no está en mayúsculas completas */
        }

        .b2-footer-texto p {
            color: #d1d9e0;
            /* Gris muy claro para el texto sobre rojo oscuro */
            font-size: 0.95rem;
            margin: 0;
        }

        /* Ajustes Responsive para este bloque específico */
        @media (max-width: 992px) {
            .servicios-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .servicios-grid {
                grid-template-columns: 1fr;
            }

            .b2-footer {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }
        }

        /* ================= NUEVAS FOTOS BLOQUE 2 (bx-fotos) ================= */
        .bx-fotos {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            width: 100%;
        }

        .foto-item {
            position: relative;
            flex: 1;
            /* Las 3 cajas ocupan el mismo ancho */
            border-radius: 5px;
            overflow: hidden;
            cursor: pointer;
            /* Ayuda a que los celulares reconozcan el toque */
        }

        .foto-item img {
            width: 100%;
            display: block;
            object-fit: cover;
            aspect-ratio: 4/3;
            /* Mantiene un formato parejo aunque las fotos varíen */
            transition: transform 0.3s ease;
        }

        /* Capa negra al 80% */
        .foto-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            /* Oculto por defecto */
            transition: opacity 0.3s ease;
        }

        .foto-overlay span {
            color: var(--blanco);
            font-family: var(--fuente-titulos);
            font-size: 1.2rem;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            padding: 10px;
        }

        /* Efecto al pasar el mouse (o tocar en móvil) */
        .foto-item:hover .foto-overlay {
            opacity: 1;
        }

        .foto-item:hover img {
            transform: scale(1.05);
        }



        /* NUEVO: Lista de servicios en Bloque 2 */
        .b2-lista {
            margin-left: 20px;
            /* Indentación clásica para que se vean bien las viñetas */
            margin-bottom: 30px;
            /* Aire antes de las fotos */
        }

        .b2-lista li {
            font-size: 1.15rem;
            /* Un 15% más grande que el texto promedio */
            font-weight: 700;
            /* Bold para mantener el peso visual de tu diseño */
            color: var(--azul);
            margin-bottom: 8px;
            /* Separación entre cada ítem */
        }

        /* Leve zoom a la foto de fondo */

        /* Responsive para las fotos del Bloque 2 */
        @media (max-width: 768px) {
            .bx-fotos {
                flex-wrap: wrap;
                /* Permite que caigan a la siguiente línea */
                justify-content: center;
            }

            .foto-item {
                flex: 0 0 calc(50% - 8px);
                /* 2 arriba */
            }

            .foto-item:last-child {
                flex: 0 0 calc(50% - 8px);
                /* 1 abajo centrada */
            }
        }

        @media (max-width: 480px) {

            /* En celulares muy pequeños, mejor 1 por línea */
            .foto-item,
            .foto-item:last-child {
                flex: 0 0 100%;
            }
        }



        /* ================= BLOQUE 2B: SUB BLOQUE ================= */
        .bloque-2b {
            background-color: var(--naranjo-claro);
            padding: 25px 20px;
        }

        .b2b-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .b2b-container h3 {
            color: var(--blanco);
            margin: 0;
        }

        /* ================= BLOQUE 3: MARCAS ================= */
        .bloque-3 {
            background-color: var(--blanco);
        }

        .b3-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 40px;
        }

        .b3-div1 {
            flex: 0 0 45%;
            /* Creció del 35% al 45% para darle oxígeno horizontal al texto */
        }

        /* NUEVO: Control exclusivo del tamaño del título en este bloque */
        .b3-div1 h2 {
            font-size: 3.2rem;
            /* Reducido un ~15% respecto al global para que quepan más palabras por línea */
        }

        .b3-div1 p {
            margin-bottom: 25px;
        }

        .b3-div2 {
            flex: 0 0 50%;
            /* Bajó del 60% al 50%. Al tener menos espacio, los logos se achican automáticamente un 10-15% */
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .b3-div2 img {
            width: 100%;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
        }

        /* ================= BLOQUE 4: CARRUSEL ================= */
        .bloque-4 {
            background-color: var(--azul);
            /* El azul domina el fondo de la sección entera */
            text-align: center;
            overflow: hidden;
            width: 100%;
        }

        /* La mitad superior (ahora en gris suave) */
        .b4-top {
            background-color: var(--azul);
            /* Color actualizado */
            padding: 60px 20px 40px 20px;
            width: 100%;
        }

        .b4-logos {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 50px;
            /* Separación entre ambos logos */
            margin-top: 30px;
        }

        .logo-marcas-horizontal {
            width: 100%;
            /* Para que se adapte en celulares */
            max-width: 800px;
            /* El ancho máximo solicitado */
            height: auto;
            /* Mantiene la proporción original */
            max-height: 140px;
            /* Limita el alto máximo entre los 100-140px que necesitamos */
            object-fit: contain;
            /* Evita que la imagen se deforme */
        }

        /* La mitad azul inferior */
        .b4-bottom {
            padding-top: 50px;
            padding-bottom: 70px;
        }

        .b4-texto-final {
            margin-top: 40px;
            font-size: 1.4rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .swiper {
            width: 100%;
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 320px;
            /* Un poco más ancho para que se luzcan las fotos como en tu imagen */
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Si la tarjeta blanca del nombre viene en la foto, se verá perfecta */
        }

        .b4-subtexto-final {
            color: var(--blanco);
            font-size: 1.1rem;
            /* Un poco más pequeña para que haya jerarquía visual */
            text-transform: none;
            /* Permite el uso de mayúsculas y minúsculas */
            font-weight: 400;
            margin-top: 5px;
            /* Espacio corto respecto a la frase de arriba */
            display: block;
        }

        /* ================= BLOQUE 7: CONTACTO ================= */
        .bloque-7 {
            background-color: var(--blanco);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }

        .contact-info h2 {
            margin-bottom: 30px;
        }

        .contact-details p {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .contact-details i {
            color: var(--naranjo);
            font-size: 1.2rem;
            width: 25px;
            text-align: center;
        }

        .mapa {
            width: 100%;
            height: 250px;
            border-radius: 5px;
            margin-top: 20px;
            border: 2px solid #eee;
        }

        .formulario {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .formulario label {
            font-weight: bold;
            font-size: 14px;
            margin-bottom: -5px;
        }

        .formulario input,
        .formulario select,
        .formulario textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: var(--fuente-texto);
        }

        .formulario textarea {
            resize: vertical;
            min-height: 100px;
        }

        /* ================= BANNER FIJO ================= */
        .bloque-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            padding: 15px 20px;
            pointer-events: none;
        }

        .banner-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.15);
            pointer-events: auto;
            transition: transform 0.3s ease;
            background: var(--blanco);
        }

        .banner-wrapper:hover {
            transform: translateY(-3px);
        }

        .banner-img {
            width: 100%;
            max-height: 120px;
            /* ====== altura banner de 100 a 120 ===== */
            object-fit: cover;
            display: block;
        }

        .banner-wrapper {
            position: relative;
            /* Permite posicionar elementos absolutos dentro */
        }

        .btn-cerrar-banner {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 26px;
            height: 26px;
            background-color: rgba(0, 0, 0, 0.5);
            /* Fondo semi-transparente */
            color: #ffffff;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            z-index: 10000;
            transition: background 0.3s, transform 0.2s;
        }

        .btn-cerrar-banner:hover {
            background-color: var(--naranjo);
            /* Cambia al color de la marca al pasar el mouse */
            transform: scale(1.1);
        }

        /* NUEVO ESTILO PARA EL LOGO NOTIFIER DEL HERO */
        .hero-notifier-logo {
            display: flex;
            justify-content: flex-start;
            /* MAGIA: Alineado a la izquierda junto al texto */
            margin-top: 30px;
            /* Separación del párrafo */
        }

        .hero-notifier-logo img {
            /* background-color: #ffffff;*/
            /* Mañana puedes comentar o borrar esta línea */
            padding: 10px 20px;
            border-radius: 5px;
            max-width: 250px;
            height: auto;
            object-fit: contain;
        }


        /* NUEVO: Logos debajo del formulario de contacto */
        .logos-contacto {
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 1;
            object-fit: contain;
            margin-top: 50px;
            /* Un poco más de margen para que al crecer no choque con el botón */
            display: block;
            transform: scale(1.2);
            /* LA MAGIA FINAL: Aumento exacto del 20% */
            transform-origin: center top;
            /* Asegura que crezca desde el centro hacia abajo y los lados */
        }


        /* NUEVO: Línea de contacto en el footer del Bloque 2 */
        .b2-info-extra {
            color: var(--blanco);
            font-size: 0.95rem;
            margin-top: 12px !important;
            font-weight: 700; /* Negrita para que resalte */
            letter-spacing: 0.5px;
        }

        .b2-info-extra span {
            color: var(--naranjo); /* Las barras separadoras en color naranjo corporativo */
            margin: 0 10px;
            font-weight: 400;
        }

        /* NUEVO: Ajuste para el horario multilínea en Contacto */
        .horario-multilinea {
            display: flex;
            align-items: flex-start !important; /* Alinea el ícono arriba, no al centro */
            gap: 10px;
            margin-bottom: 15px;
        }

        .horario-multilinea i {
            color: var(--naranjo);
            font-size: 1.2rem;
            width: 25px;
            text-align: center;
            margin-top: 4px; /* Empuja el ícono un poquito abajo para alinear con la primera línea */
        }

        .horario-textos {
            line-height: 1.6; /* Da un respiro entre los días */
        }


        /* ================= RESPONSIVE ================= */
        @media (max-width: 1024px) {
            .productos-grid {
                grid-template-columns: repeat(2, 1fr);
                /* Cambiado a 2 para simetría perfecta de 8 productos */
            }
        }

        @media (max-width: 768px) {
            h2 {
                font-size: 2.2rem;
            }

            h1 {
                font-size: 2.8rem;
            }

            .header-top {
                flex-direction: column;
                gap: 20px;
            }

            .hero-content {
                flex-direction: column;
                text-align: center;
            }

            .productos-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .b2-container {
                flex-direction: column;
                text-align: center;
            }

            .b2-div2 {
                width: 80%;
                justify-content: center;
            }

            .b2b-container {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .b3-container {
                flex-direction: column;
                text-align: center;
            }

            .b5-fotos {
                flex-direction: column;
                align-items: center;
            }

            .b5-fotos img {
                width: 100%;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .productos-grid {
                grid-template-columns: 1fr;
            }

            /* 1 producto por fila en celulares */
        }


        /* NUEVA CLASE PARA LOS PÁRRAFOS LARGOS */
        .prod-desc {
            font-size: 0.9rem;
            font-weight: 400;
            /* Texto normal, no negrita */
            color: var(--azul);
            line-height: 1.4;
            margin-bottom: 20px;
            flex-grow: 1;
            /* MAGIA: Esto sigue empujando el botón hacia abajo para igualar las tarjetas */
        }