/* * == DEFINICIÓN DE VARIABLES CSS ==
         * Aquí definimos los colores de tu paleta y la tipografía 
         * para poder reutilizarlos fácilmente en toda la página.
        */
        :root {
            --color-fondo: #FAF9F8;
            --color-acento-claro: #BAD9DE;
            --color-primario: #EF5923;
            --color-texto: #1A181A;
            --fuente-principal: 'Instrument Sans', sans-serif;
            --navbar-height: 72px; /* valor por defecto, será actualizado en runtime */
        }

        /* * == ESTILOS GENERALES DEL BODY ==
         * Aplicamos la fuente y el color de fondo a toda la página.
        */
        body {
            font-family: var(--fuente-principal);
            background-color: var(--color-fondo);
            color: var(--color-texto);
            padding-top: var(--navbar-height); /* espacio para navbar fija */
        }

        /* * == CONTENEDOR PRINCIPAL ==
         * Esta clase limita el ancho del contenido a 1440px como pediste
         * y lo centra en la pantalla.
        */
        .main-container {
            max-width: 1440px; /* 1440px */
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.5rem; /* Espaciado interno para que el contenido no pegue a los bordes */
            padding-right: 1.5rem;
        }

        /* * == ESTILOS DE LA BARRA DE NAVEGACIÓN (NAVBAR) ==
        */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1050;
            background-color: var(--color-fondo);
            transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            backdrop-filter: none;
        }          
        .navbar.scrolled {
        background-color: rgba(250, 249, 248, 0.85);
        backdrop-filter: blur(4px);
        box-shadow: 0 4px 24px rgba(0,0,0,0.10);
        }

        .navbar {
            background-color: var(--color-fondo); /* Fondo de la barra de navegación */
            font-weight: 400; /* Peso de fuente regular para los enlaces */
        }
        
        /* Estilo para el logo */
        .navbar-brand {
            font-weight: 600; /* Semibold para el logo */
            color: var(--color-primario); /* Color naranja */
        }

        .navbar-brand:hover {
            color: var(--color-primario);
        }

        /* Estilos para los enlaces de navegación */
        .nav-link {
            color: var(--color-texto);
            margin: 0 1rem; /* Espacio entre los enlaces */
        }
        
        .nav-link:hover {
            color: var(--color-primario); /* Color naranja al pasar el mouse */
        }
        
        /* Estilo específico para el dropdown de Productos */
        .dropdown-toggle::after {
            vertical-align: 0.15em; /* Alinea un poco mejor la flecha del dropdown */
        }

        /* * == BOTÓN PERSONALIZADO ==
         * Creamos una clase para el botón principal de "Contacto"
         * usando los colores de tu paleta.
        */
        .btn-custom-primary {
            background-color: var(--color-primario);
            color: white;
            border-radius: 8px; /* Bordes redondeados */
            padding: 0.5rem 1.5rem; /* Espaciado interno del botón */
            font-weight: 600; /* Texto en semibold */
            transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
        }

        .btn-custom-primary:hover {
            background-color: #d84a15; /* Un tono de naranja un poco más oscuro para el hover */
            color: white;
        }

        .btn-custom-secondary{
             background-color: var(--color-fondo);
            color: black;
            border-radius: 8px; /* Bordes redondeados */
            padding: 0.5rem 1.5rem; /* Espaciado interno del botón */
            font-weight: 600; /* Texto en semibold */
            transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
        }

        .btn-custom-secondary:hover {
            background-color: #d84a15; /* Un tono de naranja un poco más oscuro para el hover */
            color: white;
        }
                /*
         * == MEGA MENÚ PARA "PRODUCTOS" ==
         * Estos son los estilos para el menú desplegable grande.
        */
        .dropdown .mega-menu {
            /* Ocultamos el menú por defecto y lo preparamos para la animación */
            visibility: hidden;
            opacity: 0;
            display: none;
            
            position: absolute;
            left: 50%; /* Lo centramos respecto al viewport */
            transform: translateX(-50%);
            top: 100%; /* Lo posicionamos justo debajo de la barra de navegación */
            width: 100%;
            max-width: 1440px; /* Ancho máximo igual al contenedor principal */
            background-color: var(--color-fondo);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Sombra sutil */
            border-radius: 0 0 12px 12px; /* Bordes redondeados solo abajo */
            padding: 2.5rem;
            transition: all 0.3s ease-in-out;
        }



        .mega-menu-title {
            color: var(--color-primario);
            font-weight: 600; /* Semibold */
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .mega-menu-list {
            list-style: none;
            padding: 0;
        }

        .mega-menu-list li {
            margin-bottom: 1rem;
        }

        .mega-menu-list a {
            text-decoration: none;
            color: var(--color-texto);
            display: flex;
            align-items: flex-start;
            transition: color 0.2s ease;
        }
        
        .mega-menu-list a:hover {
            color: var(--color-primario);
        }

        .mega-menu-list .product-info {
            display: flex;
            flex-direction: column;
        }

        .mega-menu-list .product-name {
            font-weight: 600; /* Semibold para el nombre del producto */
        }
        
        .mega-menu-list .product-desc {
            font-size: 0.85rem;
            color: #6c757d; /* Un gris sutil para la descripción */
        }

        .mega-menu-icon {
            margin-right: 0.75rem;
            color: var(--color-texto);
            margin-top: 4px;
        }
        /*
         * == HERO HEADER ==
        */
        .hero-section {
            /* =====================================================================
              ==> AQUÍ debes poner la ruta de tu imagen de fondo.                 <==
              ==> Ejemplo: background-image: url('./imagenes/mi-fondo-hero.jpg'); <==
              =====================================================================
            */
            background-image: url('../img/Hero.webp');
            background-color: rgba(26,24,26,0.7); /* Color de respaldo por si la imagen no carga */
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-blend-mode: multiply; /* combina con el color */
            padding: 10rem 0; /* Espaciado vertical grande */
            color: var(--color-fondo); /* Texto claro para contraste */
        }

        

        .hero-content {
            max-width: 650px; /* Limitamos el ancho del texto para mejor legibilidad */
        }

        .hero-section h1 {
            font-size: 3.5rem; /* Tamaño de fuente grande para el título */
            font-weight: 600; /* Semibold */
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

        .hero-section p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 2.5rem;
            max-width: 550px;
        }

        /*
         * == MEDIA QUERIES RESPONSIVE ==
        */
        @media (max-width: 768px) {
            .hero-section {
                padding: 6rem 0; /* Menos padding en pantallas pequeñas */
                text-align: center; /* Centramos el texto */
            }
            .hero-content {
                margin-left: auto;
                margin-right: auto;
            }
            .hero-section h1 {
                font-size: 2.5rem; /* Título más pequeño */
            }
            .hero-section p {
                font-size: 1rem;
            }

            .info-section {
                padding: 6rem 0;
                text-align: center;
            }
            .info-content {
                margin-left: auto;
                margin-right: auto;
            }
            .info-section h2 {
                font-size: 2.2rem;
            }
            
            .brands-logos {
                gap: 2rem; /* Menos espacio en móviles */
            }

            .brand-logo svg {
                max-height: 35px;
            }

             .footer-section {
                text-align: center;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .footer-bottom div:first-child {
                margin-bottom: 1rem;
            }

            .footer-bottom a {
                margin: 0 0.5rem;
            }
            
            .navbar-brand img {
                width: 120px; /* Ajusta este valor al tamaño que prefieras */
                height: auto; /* Mantiene la proporción del logo */
    }
        }

        /*
         * == SECCIÓN DE CATEGORÍAS ==
        */
  
        .categories-section {
            padding: 6rem 0;
        }

        .category-item .category-image-wrapper {
            overflow: hidden; /* Oculta el exceso de la imagen al hacer zoom */
            border-radius: 12px;
            display: block;
        }

        .category-item img {
            border-radius: 12px;
            transition: transform 0.4s ease;
            width: 100%;
        }

        .category-item a:hover img {
            transform: scale(1.05); /* Ligero zoom a la imagen en hover */
        }

        .category-item h3 {
            font-weight: 600; /* Semibold */
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            font-size: 1.25rem;
            text-transform: uppercase; /* Títulos en mayúscula como en el diseño */
        }

        .category-item p {
            color: #6c757d; /* Gris sutil */
            margin-bottom: 1.5rem;
        }
 /*
         * == SECCIÓN DE INFORMACIÓN ADICIONAL ==
        */
        .info-section {
            position: relative;
            /* =====================================================================
              ==> AQUÍ debes poner la ruta de tu imagen de fondo.                 <==
              ==> Ejemplo: background-image: url('./imagenes/aire-acondicionado.jpg'); <==
              =====================================================================
            */
            background-image: url('../img/Captura-de-pantalla-2025-09-17-180108.webp');
            background-color: rgba(26,24,26,0.6);
            background-size: cover;
            background-position: center center;
            padding: 8rem 0;
            background-blend-mode: multiply; /* combina con el color */
            color: var(--color-fondo);
            z-index: 1;
        }

        .info-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.3); /* Un overlay más sutil */
            z-index: 2;
        }

        .info-content {
            position: relative;
            z-index: 3;
            max-width: 600px;
        }

        .info-section h2 {
            font-size: 3rem;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

        .info-section p {
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 2.5rem;
            max-width: 500px;
        }
    /*
         * == SECCIÓN DE MARCAS ==
        */
        .brands-section {
            padding: 6rem 0;
        }

        .brands-section h2 {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .brands-section .subtitle {
            color: #6c757d;
            font-size: 1.1rem;
            margin-bottom: 4rem;
        }

        .brands-logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 4rem; /* Espacio entre logos */
        }

        .brand-logo img {
            
            width: auto;
          
            filter: grayscale(100%); /* Hacemos la imagen en escala de grises */
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        /* Al pasar el cursor sobre el contenedor del logo, la imagen recupera su color */
        .brand-logo:hover img {
            filter: grayscale(0%); /* Devolvemos el color original en hover */
            opacity: 1;
        }
            /*
         * == FOOTER ==
        */
        .footer-section {
            padding-top: 5rem;
            padding-bottom: 2rem;
        }

        .footer-logo {
            font-weight: 600;
            color: var(--color-primario);
            font-size: 1.75rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .footer-logo:hover {
            color: var(--color-primario);
        }

        .footer-title {
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .footer-section p, .footer-section a {
            color: #6c757d;
            text-decoration: none;
        }
        
        .footer-section a:hover {
            color: var(--color-primario);
        }
        
        .footer-section .footer-links-list {
            list-style: none;
            padding: 0;
        }
        
        .footer-section .footer-links-list li {
            margin-bottom: 0.75rem;
        }

        .footer-section .footer-links-list a.category-link {
            color: var(--color-primario);
            font-weight: 600;
        }
        
        .footer-section .footer-links-list a.category-link:hover {
             color: #d84a15;
        }

        .footer-social-icons a {
            display: inline-block;
            margin-right: 1rem;
            color: var(--color-primario);
            transition: transform 0.2s ease;
        }

        .footer-social-icons a:hover {
            transform: translateY(-2px);
        }

        .footer-bottom {
            padding-top: 2rem;
            margin-top: 4rem;
            border-top: 1px solid #dee2e6;
            font-size: 0.9rem;
            color: #6c757d;
        }

        .footer-bottom a {
            margin-left: 1.5rem;
        }

        /* Sidebar móvil estilos personalizados */

        .offcanvas-body ul.list-unstyled > li {
        font-size: 1.25rem;
         margin-bottom: 1.5rem;
        font-family: var(--fuente-principal);
        }
        .offcanvas-body .nav-link {
        padding: 0.75rem 0;
        font-family: var(--fuente-principal);
        }
        #subcatList .nav-link {
        color: var(--color-texto);
        font-size: 1rem;
        font-weight: 600;
        padding-left: 0.5rem;
        font-family: var(--fuente-principal);
        transition: color 0.2s;
        }
        #subcatList li {
        margin-bottom: 0.75rem;
        }
        #subcatList .nav-link.active {
        color: var(--color-primario);
        }
        .offcanvas-title {
        font-family: var(--fuente-principal);
        font-size: 1.3rem;
        font-weight: 600;
        }


        /* Ícono hamburguesa naranja y alineado a la derecha */
        .navbar-toggler {
        margin-left: auto;
        margin-right: 0.5rem;
        border: none;
        background: transparent;
        }       
        .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0     30 30'%3e%3cpath stroke='%23EF5923' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4       23h22'/%3e%3c/svg%3e");
        }
        .offcanvas {
        z-index: 2000 !important;
        }
        @media (max-width: 991px) {
        .navbar {
            z-index: 1050;
        }
        }
        

        /* * == ESTILOS DE LA BARRA DE NAVEGACIÓN (NAVBAR) ==
        */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  background-color: var(--color-fondo);
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  backdrop-filter: none;
}
.navbar.scrolled {
  background-color: rgba(250, 249, 248, 0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

        .navbar {
            background-color: var(--color-fondo); /* Fondo de la barra de navegación */
            font-weight: 400; /* Peso de fuente regular para los enlaces */
        }
        
        /* Estilo para el logo */
        .navbar-brand {
            font-weight: 600; /* Semibold para el logo */
            color: var(--color-primario); /* Color naranja */
        }

        .navbar-brand:hover {
            color: var(--color-primario);
        }

        /* Estilos para los enlaces de navegación */
        .nav-link {
            color: var(--color-texto);
            margin: 0 1rem; /* Espacio entre los enlaces */
        }
        
        .nav-link:hover {
            color: var(--color-primario); /* Color naranja al pasar el mouse */
        }
        
        /* Estilo específico para el dropdown de Productos */
        .dropdown-toggle::after {
            vertical-align: 0.15em; /* Alinea un poco mejor la flecha del dropdown */
        }

        /* * == BOTÓN PERSONALIZADO ==
         * Creamos una clase para el botón principal de "Contacto"
         * usando los colores de tu paleta.
        */
        .btn-custom-primary {
            background-color: var(--color-primario);
            color: white;
            border-radius: 8px; /* Bordes redondeados */
            padding: 0.5rem 1.5rem; /* Espaciado interno del botón */
            font-weight: 600; /* Texto en semibold */
            transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
        }

        .btn-custom-primary:hover {
            background-color: #d84a15; /* Un tono de naranja un poco más oscuro para el hover */
            color: white;
        }

        .btn-custom-secondary{
             background-color: var(--color-fondo);
            color: black;
            border-radius: 8px; /* Bordes redondeados */
            padding: 0.5rem 1.5rem; /* Espaciado interno del botón */
            font-weight: 600; /* Texto en semibold */
            transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
        }

        .btn-custom-secondary:hover {
            background-color: #d84a15; /* Un tono de naranja un poco más oscuro para el hover */
            color: white;
        }
                /*
         * == MEGA MENÚ PARA "PRODUCTOS" ==
         * Estos son los estilos para el menú desplegable grande.
        */
        .dropdown .mega-menu {
            /* Ocultamos el menú por defecto y lo preparamos para la animación */
            visibility: hidden;
            opacity: 0;
            display: none;
            
            position: absolute;
            left: 50%; /* Lo centramos respecto al viewport */
            transform: translateX(-50%);
            top: 100%; /* Lo posicionamos justo debajo de la barra de navegación */
            width: 100%;
            max-width: 1440px; /* Ancho máximo igual al contenedor principal */
            background-color: var(--color-fondo);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Sombra sutil */
            border-radius: 0 0 12px 12px; /* Bordes redondeados solo abajo */
            padding: 2.5rem;
            transition: all 0.3s ease-in-out;
        }



        .mega-menu-title {
            color: var(--color-primario);
            font-weight: 600; /* Semibold */
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .mega-menu-list {
            list-style: none;
            padding: 0;
        }

        .mega-menu-list li {
            margin-bottom: 1rem;
        }

        .mega-menu-list a {
            text-decoration: none;
            color: var(--color-texto);
            display: flex;
            align-items: flex-start;
            transition: color 0.2s ease;
        }
        
        .mega-menu-list a:hover {
            color: var(--color-primario);
        }

        .mega-menu-list .product-info {
            display: flex;
            flex-direction: column;
        }

        .mega-menu-list .product-name {
            font-weight: 600; /* Semibold para el nombre del producto */
        }
        
        .mega-menu-list .product-desc {
            font-size: 0.85rem;
            color: #6c757d; /* Un gris sutil para la descripción */
        }

        .mega-menu-icon {
            margin-right: 0.75rem;
            color: var(--color-texto);
            margin-top: 4px;
        }
       /* ================================================= */
        /* == INICIO: ESTILOS PARA EL NUEVO BANNER DE PÁGINA == */
        /* ================================================= */
        .page-hero-banner {
            position: relative; /* Necesario para el overlay */
            background-size: cover;
            background-position: center center;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 25vh; /* Altura del banner (ajusta según necesites) */
            color: white;
        }

        /* Capa oscura sobre la imagen para mejorar contraste del texto */
        .page-hero-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.0);
            z-index: 1;
        }

        .page-hero-banner h1 {
            position: relative;
            z-index: 2; /* Pone el texto por encima de la capa oscura */
            font-size: 4.5rem;
            font-weight: 600;
            text-align: center;
        }

        /* Ajuste para que el título sea más pequeño en móviles */
        @media (max-width: 768px) {
            .page-hero-banner h1 {
                font-size: 3rem;
            }
        }
        /* =============================================== */
        /* == FIN: ESTILOS PARA EL NUEVO BANNER DE PÁGINA == */
        /* =============================================== */


        /*
         * == MEDIA QUERIES RESPONSIVE ==
        */
        @media (max-width: 768px) {
            .hero-section {
                padding: 6rem 0; /* Menos padding en pantallas pequeñas */
                text-align: center; /* Centramos el texto */
            }
            .hero-content {
                margin-left: auto;
                margin-right: auto;
            }
            .hero-section h1 {
                font-size: 2.5rem; /* Título más pequeño */
            }
            .hero-section p {
                font-size: 1rem;
            }

            .info-section {
                padding: 6rem 0;
                text-align: center;
            }
            .info-content {
                margin-left: auto;
                margin-right: auto;
            }
            .info-section h2 {
                font-size: 2.2rem;
            }
            
            .brands-logos {
                gap: 2rem; /* Menos espacio en móviles */
            }

            .brand-logo svg {
                max-height: 35px;
            }

             .footer-section {
                text-align: center;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }

            .footer-bottom div:first-child {
                margin-bottom: 1rem;
            }

            .footer-bottom a {
                margin: 0 0.5rem;
            }
            
            .navbar-brand img {
                width: 120px; /* Ajusta este valor al tamaño que prefieras */
                height: auto; /* Mantiene la proporción del logo */
    }
}
  
        /* ================================================= */
        /* == INICIO: ESTILOS GRILLA DE PRODUCTOS (MODIFICADO) == */
        /* ================================================= */
        .product-grid-section {
            padding: 5rem 0;
        }
        .product-grid-header h2 {
            font-size: 2.8rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        .product-grid-header p {
            font-size: 1rem;
            color: #555;
            margin-bottom: 3rem;
        }
        .product-card {
            margin-bottom: 2.5rem;
            text-align: left;
        }
        /* ==> MODIFICADO: Estilos para la imagen del producto <== */
        .product-card img {
            width: 100%;
            height: auto; /* Mantiene la proporción */
            aspect-ratio: 4 / 4; /* Proporción de la imagen */
            object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
            margin-bottom: 1rem;
            border-radius: 8px;
            background-color: #e9e9e9; /* Color de fondo mientras carga la imagen */
        }
        .product-card .product-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.1rem;
        }
        .product-card .product-variant {
            color: #6c757d;
            font-size: 0.9rem;
        }
    /* Botón WhatsApp personalizado con color de la empresa */
    .btn-whatsapp {
      background-color: var(--color-primario);
      border-color: var(--color-primario);
      color: #fff;
    }
    .btn-whatsapp:hover, .btn-whatsapp:focus {
      background-color: #d84a15;
      border-color: #d84a15;
      color: #fff;
    }
        /* =============================================== */
        /* === FIN: ESTILOS GRILLA DE PRODUCTOS === */
        /* =============================================== */

        @media (max-width: 768px) {
            .page-hero-banner h1 { font-size: 3rem; }
            .product-grid-header h2 { font-size: 2.2rem; }
            .product-grid-section { padding: 3rem 0; }
        }
 /*
         * == FOOTER ==
        */
        .footer-section {
            padding-top: 5rem;
            padding-bottom: 2rem;
        }

        .footer-logo {
            font-weight: 600;
            color: var(--color-primario);
            font-size: 1.75rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            margin-bottom: 2rem;
        }
        
        .footer-logo:hover {
            color: var(--color-primario);
        }

        .footer-title {
            font-weight: 600;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .footer-section p, .footer-section a {
            color: #6c757d;
            text-decoration: none;
        }
        
        .footer-section a:hover {
            color: var(--color-primario);
        }
        
        .footer-section .footer-links-list {
            list-style: none;
            padding: 0;
        }
        
        .footer-section .footer-links-list li {
            margin-bottom: 0.75rem;
        }

        .footer-section .footer-links-list a.category-link {
            color: var(--color-primario);
            font-weight: 600;
        }
        
        .footer-section .footer-links-list a.category-link:hover {
             color: #d84a15;
        }

        .footer-social-icons a {
            display: inline-block;
            margin-right: 1rem;
            color: var(--color-primario);
            transition: transform 0.2s ease;
        }

        .footer-social-icons a:hover {
            transform: translateY(-2px);
        }

        .footer-bottom {
            padding-top: 2rem;
            margin-top: 4rem;
            border-top: 1px solid #dee2e6;
            font-size: 0.9rem;
            color: #6c757d;
        }

        .footer-bottom a {
            margin-left: 1.5rem;
        }

        /* Sidebar móvil estilos personalizados */
.offcanvas-body ul.list-unstyled > li {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--fuente-principal);
}
.offcanvas-body .nav-link {
  padding: 0.75rem 0;
  font-family: var(--fuente-principal);
}
#subcatList .nav-link {
  color: var(--color-texto);
  font-size: 1rem;
  font-weight: 600;
  padding-left: 0.5rem;
  font-family: var(--fuente-principal);
  transition: color 0.2s;
}
#subcatList li {
  margin-bottom: 0.75rem;
}
#subcatList .nav-link.active {
  color: var(--color-primario);
}
.offcanvas-title {
  font-family: var(--fuente-principal);
  font-size: 1.3rem;
  font-weight: 600;
}
/* Ícono hamburguesa naranja y alineado a la derecha */
.navbar-toggler {
  margin-left: auto;
  margin-right: 0.5rem;
  border: none;
  background: transparent;
}
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23EF5923' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.offcanvas {
  z-index: 2000 !important;
}
@media (max-width: 991px) {
  .navbar {
    z-index: 1050;
  }
}   
/* ================================================= */
        /* == INICIO: ESTILOS PARA LA PÁGINA DE PRODUCTO === */
        /* ================================================= */
        .product-detail-section {
            padding: 4rem 0;
        }

        /* Estilos para el Breadcrumb (ej: Productos > Categoría > ...) */
        .breadcrumb-nav {
            margin-bottom: 2rem;
        }
        .breadcrumb-nav a {
            text-decoration: none;
            color: #888;
            font-size: 0.9rem;
        }
        .breadcrumb-nav a:hover {
            color: var(--color-primario);
        }
        .breadcrumb-nav span {
            margin: 0 0.5rem;
            color: #aaa;
        }
        .breadcrumb-nav .current {
            color: var(--color-texto);
            font-weight: 500;
        }

        /* Estilos para la imagen del producto */
        .product-image-container img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            background-color: #f0f0f0;
        }
        
        /* Estilos para la información del producto */
        .product-info-container {
            padding-left: 3rem; /* Espacio entre imagen e info */
        }
        .product-info-container h1 {
            font-size: 2.8rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .product-info-container p {
            font-size: 1rem;
            color: #555;
            line-height: 1.7;
            margin-bottom: 2.5rem;
        }
        
        /* Estilos para los botones de cotización */
        .quote-buttons .btn {
            width: 100%;
            margin-bottom: 0.75rem;
            padding: 0.8rem 1.5rem;
            font-weight: 600;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        .quote-buttons .btn-email {
            background-color: #888;
            color: white;
            border: none;
        }
        .quote-buttons .btn-email:hover {
            background-color: #777;
        }

        /* Media query para móviles */
        @media (max-width: 991.98px) {
            .product-info-container {
                padding-left: 0;
                margin-top: 2rem;
            }
        }
        /* =============================================== */
        /* === FIN: ESTILOS PARA LA PÁGINA DE PRODUCTO === */
        /* =============================================== */

          
       /* ==> INICIO: ESTILOS CORREGIDOS PARA EL HERO DE "SOBRE NOSOTROS" <== */
        .hero-nosotros {
            /* 1. Fondo de gradiente */
            background-image: url('../img/Degradado.webp'); /* <-- CAMBIA ESTA RUTA */
            background-size: cover;
            background-position: center;
            
            /* 2. Usamos Flexbox para centrar el contenido */
            display: flex;
            justify-content: center; /* Centra horizontalmente */
            align-items: center;   /* Centra verticalmente */
            
            /* 3. Altura de la sección */
            min-height: 60vh; /* Ocupa el 60% de la altura de la pantalla */
            padding: 2rem;
        }

        .hero-nosotros img {
            /* 4. Estilo del logo para que sea responsive */
            max-width: 500px; /* Ancho máximo del logo */
            width: 80%;       /* Ocupa el 80% del ancho disponible, hasta un máximo de 500px */
            height: auto;     /* Mantiene la proporción */
        }
        /* ==> FIN: ESTILOS CORREGIDOS <== */
        /* ==> INICIO: ESTILOS PARA LA NUEVA SECCIÓN "QUIÉNES SOMOS" <== */
        .about-section {
            padding: 6rem 0;
        }
        
        .about-text .pre-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-texto);
            margin-bottom: 0.5rem;
            letter-spacing: 0.5px;
        }

        .about-text .title {
            font-size: 3rem;
            font-weight: 600;
            color: var(--color-texto);
            margin-bottom: 1.5rem;
        }

        .about-text .description {
            font-size: 1rem;
            line-height: 1.7;
            color: #555;
            max-width: 500px; /* Limita el ancho del párrafo para mejor lectura */
        }
        
        .about-gallery img {
            width: 100%;
            height: auto;
            border-radius: 12px; /* Bordes redondeados para la imagen */
        }
        
        /* Estilos responsivos para la sección */
        @media (max-width: 991.98px) {
            .about-section {
                padding: 4rem 0;
            }
            .about-text {
                margin-bottom: 3rem; /* Espacio entre el texto y la imagen en móvil */
                text-align: center;
            }
            .about-text .description {
                margin-left: auto;
                margin-right: auto;
            }
            .about-text .title {
                font-size: 2.5rem;
            }
        }
        /* ==> FIN: ESTILOS NUEVA SECCIÓN <== */
          
        /* ================================================= */
        /* == INICIO: ESTILOS PARA LA SECCIÓN UBICACIONES == */
        /* ================================================= */
        .locations-section {
            padding: 6rem 0;
            border-top: 1px solid #e0e0e0; /* Línea separadora superior */
        }
        .locations-header .tagline {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        .locations-header h2 {
            font-weight: 600;
            font-size: 3rem;
        }
        .locations-header .subtitle {
            font-size: 1rem;
            color: #555;
            max-width: 500px;
        }
        .locations-section hr {
            margin: 3rem 0;
            border-top: 1px solid #e0e0e0;
        }
        .location-item {
            margin-bottom: 2.5rem;
        }
        .location-item h4 {
            font-weight: 600;
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }
        .location-item p {
            color: #555;
            margin-bottom: 0.75rem;
        }
        .location-item a {
            font-weight: 600;
            color: var(--color-texto);
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .location-item a:hover {
            color: var(--color-primario);
        }
        .map-placeholder {
            background-color: #f0f0f0;
            border-radius: 12px;
            width: 100%;
            min-height: 450px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .map-placeholder svg {
            width: 60px;
            height: 60px;
            fill: #cccccc;
        }

       .meta-bold-orange{ color: var(--color-primario); font-weight: 700; }

        /* =============================================== */
        /* == FIN: ESTILOS PARA LA SECCIÓN UBICACIONES == */
        /* =============================================== */
       
/* Product card tweaks */
.product-card .product-name{
  margin: .5rem 0 .25rem;
  /* Evita títulos kilométricos que rompen el layout */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .product-variant{
  color: #6b6b6b;
  margin-bottom: .5rem;
}

/* Botones fluidos y con wrapping en móvil */
.product-card .card-actions .btn{
  white-space: normal;      /* Bootstrap pone nowrap por defecto */
  min-width: 0;             /* Permite encoger en flex */
  font-size: .95rem;        /* Un pelín más legibles en táctil */
  padding: .55rem .75rem;
}

/* Color WhatsApp versión marca (tu naranja) */
.product-card .btn-whatsapp{
  background: #EF5923;
  border-color: #EF5923;
  color: #fff;
}
.product-card .btn-whatsapp:hover{
  background: #d84a15;
  border-color: #d84a15;
  color: #fff;
}

/* En pantallas muy chicas: separá un toque botones del contenido */
@media (max-width: 575.98px){
  .product-card .card-actions{ margin-top: .25rem; }
}
.values-section {
        padding: 6rem 0;
        background-color: var(--color-fondo); /* Asegura el fondo claro */
    }

    /* Contenedor del título y párrafo principal */
    .values-header {
        text-align: left;
        max-width: 750px; /* Limita el ancho del párrafo */
        
        
        margin-bottom: 4rem; /* Espacio antes de la grilla */
    }

    /* Título principal (como .brands-section h2) */
    .values-header h2 {
        font-size: 2.8rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--color-texto);
    }

    /* Párrafo descriptivo (como .brands-section .subtitle) */
    .values-header p {
        font-size: 1.1rem;
        color: #6c757d; /* Tono gris estándar */
        line-height: 1.6;
    }

    /* Estilo para cada item de la grilla */
    .value-item {
        padding: 1rem;
    }

    /* Contenedor del ícono */
    .value-icon {
        margin-bottom: 1.5rem;
        height: 50px; /* Altura fija para alinear */
    }

    /* Estilo del ícono SVG */
    .value-icon svg {
        width: 50px;
        height: 50px;
        color: var(--color-primario); /* ¡Color naranja de tu marca! */
    }

    /* Título de cada valor (Ej: EXPERIENCIA) */
    .value-title {
        color: var(--color-primario); /* ¡Color naranja de tu marca! */
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.75rem;
    }

    /* Párrafo de cada valor */
    .value-item p {
        font-size: 1rem;
        color: #6c757d; /* Tono gris estándar */
        line-height: 1.6;
        max-width: 320px; /* Evita que el texto se estire demasiado */
        margin-left: auto;
        margin-right: auto;
    }