.btn-logo {
    display: block; /* Hace que el botón ocupe toda la línea disponible */
    margin: 0.5cm auto 0 auto; /* 2cm de margen superior, centrado horizontalmente */
    background: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de puntero al pasar sobre el botón */
    opacity: 0.2; /* Baja opacidad para efecto de marca de agua */
    transition: opacity 0.3s ease; /* Transición suave al cambiar opacidad */
    z-index: 2; /* Asegura que el botón esté por encima de otros elementos */
}

    /* Estilo de la imagen dentro del botón del logo */
    .btn-logo img {
        width: 150px; /* Ajusta el tamaño según tus necesidades */
        height: auto; /* Mantiene la proporción de la imagen */
    }

    /* Efecto al pasar el mouse sobre el botón del logo */
    .btn-logo:hover {
        opacity: 0.5; /* Aumenta la opacidad al pasar el mouse */
    }

@media (max-width: 768px) {
    .btn-logo {
        bottom: 0.5cm; /* Reduce la distancia del margen inferior en pantallas pequeñas */
    }

        .btn-logo img {
            width: 150px; /* Ajusta el tamaño del logo para pantallas pequeñas */
        }
}
.logo-container {
    position: relative;
    text-align: center;
    /* Puedes ajustar el padding o margins según sea necesario */
}
/* Posicionar los botones de navegación de categorías a la derecha */
.category-nav-container {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Botones de navegación de categorías con efecto 3D y hover */
.btn-category-nav {
    width: 40px; /* Tamaño fijo */
    height: 40px;
    background-color: #f2f2f2; /* Fondo claro */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 5%; /* Botón redondo */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Efecto 3D */
    font-size: 24px; /* Tamaño del icono */
    color: #007bff; /* Color del icono */
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-category-nav:hover {
        background-color: #e0e0e0; /* Fondo un poco más oscuro en hover */
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6); /* Sombreado más pronunciado */
        transform: translateY(-2px); /* Leve elevación */
    }