/* assets/css/inicio.css */

.banner {
    width: 100%;
    max-height: 380px; /* Más chica que antes */
    overflow: hidden;
    position: relative;
    background-color: var(--color-crema);
}
.banner img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}
/* Efecto difuminado en el borde inferior */
.banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(247, 245, 239, 0.3) 40%, var(--color-crema) 100%);
    pointer-events: none;
    z-index: 2;
}
@media (max-width: 768px) {
    .banner {
        max-height: 220px;
    }
    .banner img {
        height: 220px;
    }
    .banner::after {
        height: 50px;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(247, 245, 239, 0.2) 30%, var(--color-crema) 100%);
    }
}
@media (max-width: 480px) {
    .banner {
        max-height: 140px;
    }
    .banner img {
        height: 140px;
    }
    .banner::after {
        height: 30px;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(247, 245, 239, 0.15) 25%, var(--color-crema) 100%);
    }
}