/* Menu Sandwich - Responsive */
.custom-menu-button {
    background-color: #000;
    color: #fff;
    padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1rem);
    border: 1px solid #fff;
    border-radius: clamp(0.25rem, 1vw, 0.375rem);
    cursor: pointer;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    margin-block-end: clamp(0.5rem, 2vw, 0.75rem);
    margin-inline: auto;
    display: none;
    width: auto;
    text-align: center;
    -webkit-transition: background-color 0.2s ease, transform 0.2s ease;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.custom-menu-button:hover {
    background-color: #222;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}

.close-sidebar-button {
    background: none;
    border: none;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    color: #000;
    position: absolute;
    top: clamp(0.5rem, 2vw, 0.75rem);
    right: clamp(0.5rem, 2vw, 0.75rem);
    cursor: pointer;
    display: none;
    width: clamp(2rem, 6vw, 2.5rem);
    height: clamp(2rem, 6vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: transform 0.2s ease;
    transition: transform 0.2s ease;
}

.close-sidebar-button:hover {
    -webkit-transform: rotate(90deg) scale(1.1);
    transform: rotate(90deg) scale(1.1);
}

.custom-filter-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.custom-filter-content {
    display: block;
    background-color: #ffffff;
    padding: clamp(0.75rem, 3vw, 1rem);
    padding-top: clamp(2rem, 5vw, 2.5rem);
    border-radius: clamp(0.375rem, 1.5vw, 0.5rem);
    margin-top: 0;
    position: relative;
}

.custom-filter-container.active .custom-filter-content {
    display: block;
}

@media (max-width: 768px) {
    .custom-menu-button {
        display: block;
    }

    .custom-filter-content {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: clamp(280px, 80%, 400px);
        height: 100%;
        background-color: #ffffff;
        padding: clamp(1rem, 4vw, 1.5rem);
        padding-top: clamp(2.5rem, 6vw, 3rem);
        z-index: 1000;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: 2px 0 clamp(0.5rem, 2vw, 1rem) rgba(0, 0, 0, 0.15);
    }

    .custom-filter-container.active .custom-filter-content {
        display: block;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    .custom-filter-container.active + .custom-filter-overlay {
        display: block;
    }

    .close-sidebar-button {
        display: flex;
    }
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .titulo-filtro {
        display: none;
    }

    .pila-filtros {
        background: rgba(0,0,0,0) !important;
    }
}

@media (min-width: 769px) {
    .custom-filter-content {
        padding: clamp(0.5rem, 2vw, 0.75rem) !important;
    }

    .custom-filter-content .titulo-filtro,
    .custom-filter-content h2,
    .custom-filter-content h3,
    .custom-filter-content h4 {
        margin-bottom: clamp(0.25rem, 1vw, 0.5rem) !important;
        margin-top: 0 !important;
        font-size: clamp(0.875rem, 2vw, 1.125rem) !important;
    }

    .custom-filter-content label,
    .custom-filter-content .filter-option {
        margin-bottom: clamp(0.25rem, 1vw, 0.5rem) !important;
        margin-top: 0 !important;
        font-size: clamp(0.8125rem, 1.8vw, 0.9375rem) !important;
    }

    .custom-filter-content .filter-option-group {
        padding: clamp(0.25rem, 1vw, 0.5rem) 0 !important;
    }
}