.hero-section {
            /* 1. Imagen de fondo */
            background-image: url('../../assets/img/Imagen-Inicio.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 Sección "Productos Destacados" ---
 */

.product-card-custom {
    border: none;
    background-color: #fff; /* Fondo blanco */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra sutil */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Transición para hover */
}

.product-card-custom:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Sombra más fuerte al hover */
    transform: translateY(-5px); /* Efecto de "levantar" la tarjeta */
}

.product-card-custom .card-img-top {
    height: 200px; /* Altura fija para las imágenes */
    object-fit: cover; /* Las imágenes cubrirán el espacio sin distorsionarse */
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.product-card-custom .card-body {
    padding: 1.5rem;
}

.product-card-custom .card-title {
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
    color: #333; /* Un negro suave para el título */
}

.product-card-custom .card-text {
    font-size: 1.1rem;
    color: var(--custom-red); /* Usamos el rojo personalizado */
}

/*
 * --- Estilos de la Sección "Sobre Nosotros" ---
 */

.feature-icon-circle {
    /* Creación del círculo */
    width: 90px;
    height: 90px;
    border-radius: 50%;
    
    /* Borde negro sutil como en la maqueta */
    border: 2px solid #333; 
    
    /* Centrado del icono (flexbox) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Estilo del icono interno */
    color: #333; /* Color del icono */
    font-size: 2.5rem; /* Tamaño del icono */
    
    /* Sombra y transición sutil */
    transition: all 0.3s ease;
}

.feature-icon-circle:hover {
    /* Efecto al pasar el mouse */
    background-color: var(--custom-red); /* Fondo rojo (opcional) */
    border-color: var(--custom-red);     /* Borde rojo (opcional) */
    color: #771c1c;                         /* Icono blanco (opcional) */
    transform: scale(1.05);
}

.feature-icon-circle + h6 { /* El h6 que sigue al icono */
    font-size: 0.9rem;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}