/* HERO.CSS - Sección Banner */

.section-hero {
    width: 100%;
    overflow: hidden;
    background-color: var(--bg-light);
}

.hero-image-container {
    width: 100%;
    height: 180px;
    /* Altura proporcionada para móvil */
    overflow: hidden;
}

.hero-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Media Query Desktop */
@media (min-width: 1024px) {
    .hero-image-container {
        height: 250px;
        /* Alto máximo solicitado */
    }
}