body {
    font-family: 'Inter', sans-serif;
}

/* Clase para la transición suave del carrusel */
.carousel-track {
    transition: transform 0.5s ease-in-out;
}

/* Estilo para que las imágenes del carrusel mantengan su proporción */
.carousel-img {
    height: 480px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
}

/*Estilos para el panel de filtros fijo (sticky) */
#filters-sidebar {
    position: -webkit-sticky; /* Para compatibilidad con Safari */
    position: sticky;
    /* Ajusta este valor según la altura de tu header */
    top: 100px; 
    /* Asegura que empiece desde arriba en su contenedor */
    align-self: start; 
}
/* NUEVO: Estilo para la imagen que sobrepasa */
/* Esta clase se aplica a la imagen del logo en el banner principal */
.image-overlap-effect {
    /* Ajusta este valor si la imagen tiene mucho espacio transparente arriba/abajo */
    margin-top: -110px; /* Sube la imagen 120px por encima de su posición normal */
    position: relative; /* Asegura que z-index funcione correctamente */
    z-index: 20; /* Asegura que la imagen esté por encima de la siguiente sección */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra suave */
    border-radius: 30px; /* Para que sea completamente redonda si es un logo circular */
    background-color: white; /* Asegura que el fondo del logo sea blanco */
    padding: 10px; /* Espacio alrededor del logo dentro del círculo blanco */
    border: 2px solid #e2e8f0; /* Borde sutil */
    transform: translateY(60%); /* Baja un poco la imagen para que 'encaje' mejor visualmente */
}

/* Ajustes responsivos para que no afecte tanto en móvil */
@media (max-width: 767px) {
    .image-overlap-effect {
        margin-top: 0; /* Quita el margen negativo en móvil */
        transform: translateY(50%);
        box-shadow: none;
        padding: 0;
        border: none;
        /* Puedes ocultarla completamente si lo deseas con display: none; */
    }
}