html {
    scroll-behavior: smooth;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.mexican-pattern {
    background-image: radial-gradient(#a33818 0.5px, transparent 0.5px), radial-gradient(#a33818 0.5px, #fbf9f4 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.05;
}
header {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-hidden {
    transform: translateY(-100%);
}
#mobile-menu {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%);
}
#mobile-menu.menu-open {
    transform: translateX(0);
}
#menu-overlay {
    transition: opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
}
#menu-overlay.overlay-active {
    pointer-events: auto;
    opacity: 1;
}