<style>
        body {
        background-color: #f8f9fa;
    }

    .navbar {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* =========================
       CARRUSEL RESPONSIVO
    ========================== */

#carouselExampleIndicators {
     max-width: 1300px;   /* Limita el ancho */
     margin: 40px auto;  /* Centrado */
     border-radius: 20px;
     overflow: hidden;   /* Para que respete bordes redondeados */
     box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.carousel-item {
    height: 55vh; 
    min-height: 220px;
    max-height: 450px;
}

.carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.85); /* Oscurece un poco para texto */
}

/* Más pequeño en celular */
@media (max-width: 768px) {
    .carousel-item {
        height: 30vh;
    }
}


    /* =========================
       TARJETAS PRODUCTOS
    ========================== */
    .card {
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    position: relative;
}

/* Hover más elegante */
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

/* Imagen más moderna */
.card-img-top,
.product-img {
    height: 260px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Zoom suave al pasar mouse */
.card:hover .product-img {
    transform: scale(1.05);
}

/* Contenido interno */
.card-body {
    padding: 20px;
}

/* Título más limpio */
.card-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* Precio más llamativo */
.card-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #28a745;
}

/* Badge tipo oferta */
.badge-oferta {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff4d4d;
    color: white;
    padding: 6px 10px;
    font-size: 0.8rem;
    border-radius: 8px;
}

/* Botón más moderno */
.btn-primary {
    border-radius: 10px;
    font-weight: 500;
    padding: 8px 15px;
    transition: 0.3s;
}

.btn-primary:hover {
    background-color: #1e7e34;
    border-color: #1e7e34;
}
   
    </style>
