.hero-section {
            /* 1. Imagen de fondo */
            background-image: url('../../assets/img/Imagen-Producto.svg'); /* <-- REEMPLAZA ESTA URL CON TU IMAGEN */
            
            /* 2. Asegura que la imagen cubra toda la sección */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            /* 3. Ocupa toda la altura de la pantalla */
            height: 60vh; /* vh = viewport height */
            
            /* 4. Color de texto para que contraste con la imagen */
            color: white;

            /* 5. Sombra de texto para mejorar la legibilidad */
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        }

       /*
 * --- Estilos de la Página de Productos (NUEVO) ---
 */

/* 1. Barra de Filtro de Categorías (Tabs) */
.category-filter-nav {
    border-bottom: 2px solid #eee;
}
.category-filter-nav .nav-link {
    font-weight: 600;
    color: #6c757d; /* Gris secundario */
    text-transform: uppercase;
    font-size: 0.9rem;
    padding-left: 0;
    padding-right: 1.5rem;
}
/* El subrayado rojo para la categoría activa */
.category-filter-nav .nav-link.active {
    color: black; /* Tu color rojo */
    border-color: #771c1c !important;
    background-color: transparent;
}
.category-filter-nav .nav-link:hover {
    color: #333;
    border-color: transparent transparent #ccc transparent;
}


/* 2. Paginación Personalizada */
.custom-pagination .page-item {
    margin: 0 4px;
}
.custom-pagination .page-link {
    border-radius: 50% !important; /* Círculos */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: #333;
    border: none;
    background-color: #f0f0f0;
    font-size: 0.9rem;
}
.custom-pagination .page-link:hover {
    background-color: #e0e0e0;
}
/* Estilo para los links "Anterior/Siguiente" */
.custom-pagination .page-item.disabled .page-link {
    background-color: #f8f9fa;
    color: #636363;
}
.custom-pagination .page-item:first-child .page-link,
.custom-pagination .page-item:last-child .page-link {
    width: auto;
    padding: 0 1rem;
    background-color: transparent;
    color: var(--custom-red);
}
.custom-pagination .page-item:first-child .page-link:hover,
.custom-pagination .page-item:last-child .page-link:hover {
    background-color: transparent;
    text-decoration: underline;
}

/* El número de página activo */
.custom-pagination .page-item.active .page-link {
    background-color: #771c1c; /* Tu color rojo */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}/*
 * --- Estilos MEJORADOS de "Productos Destacados" ---
 */

.product-card-custom {
    border: none;
    background-color: #fff;
    border-radius: 0.5rem; /* Bordes un poco más suaves */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    
    /* Contenedor para el zoom de la imagen */
    overflow: hidden; 
}

/* Efecto de 'levantar' la tarjeta al pasar el mouse */
.product-card-custom:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

/* * Contenedor de la imagen. 
 * Lo separamos para que el 'overflow: hidden' funcione bien.
*/
.product-card-image {
    height: 200px; /* Altura fija para las imágenes */
    overflow: hidden; /* Asegura que el zoom no se salga */
}

.product-card-custom .card-img-top {
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease; /* Transición suave para el zoom */
}

/* Efecto de 'zoom' en la imagen al pasar el mouse */
.product-card-custom:hover .card-img-top {
    transform: scale(1.08);
}

.product-card-custom .card-body {
    padding: 1.25rem; /* Padding más ajustado */
}

.product-card-custom .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.75rem;
}

/* Estilo del precio (ya controlado por 'text-dark fw-bold' en el HTML) */
.product-card-custom .card-text {
    font-size: 1.1rem;
}

/* * --- ¡NUEVO! Estilo de botón rectangular y elegante ---
 * (Reemplaza el estilo de 'btn-sm rounded-pill')
*/
.product-card-custom .btn-custom-red {
    background-color: var(--custom-red);
    color: #fff;
    font-size: 0.8rem; /* Letra pequeña */
    font-weight: 700;
    text-transform: uppercase; /* MAYÚSCULAS */
    letter-spacing: 0.5px; /* Espaciado de letra */
    
    padding: 0.5rem 1rem; /* Padding personalizado (más elegante) */
    
    border: none;
    border-radius: 4px; /* Bordes rectangulares sutiles */
    
    transition: background-color 0.2s ease;
}

.product-card-custom .btn-custom-red:hover {
    background-color: var(--custom-red-hover);
    color: #fff;
}

/*
 * --- Vuelve "scrolleable" la barra de categorías ---
 */

.category-filter-nav {
    /* 1. Evita que los links salten a la línea de abajo */
    white-space: nowrap;
    
    /* 2. Muestra el scroll horizontal SÓLO si es necesario */
    overflow-x: auto;
    
    /* 3. (Opcional) Estilos para una barra de scroll más sutil */
    
    /* Para navegadores WebKit (Chrome, Safari, Edge) */
    &::-webkit-scrollbar {
        height: 6px; /* Altura de la barra (delgada) */
    }
    &::-webkit-scrollbar-track {
        background: #f1f1f1; /* Fondo del riel */
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb {
        background: #ccc; /* Color de la barra */
        border-radius: 10px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #999; /* Color al pasar el mouse */
    }
    
    /* Para Firefox */
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}