body {
    font-family: 'Roboto', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

.hero-bg {
    background-image: url('https://picsum.photos/1920/1080?grayscale&blur=2');
}

#main-header {
    background: linear-gradient(to right, #3a8202, #023134);
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}

/* --- Estilos del Menú Móvil --- */
#mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 80%; /* No ocupa toda la pantalla */
    max-width: 320px;
    background: linear-gradient(to bottom, #3a8202, #023134); /* Mismo gradiente que el header */
    z-index: 60; /* Aumentado para que esté por encima del header (z-50) */
    
    /* Posicionarlo fuera de la pantalla */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;

    /* Estilos para el contenido interior */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-shadow: -10px 0 20px rgba(0,0,0,0.2);
}

/* Clase para mostrar el menú */
#mobile-menu.open {
    transform: translateX(0);
}

/* Overlay para el fondo */
body.menu-active::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 59; /* Aumentado para estar justo debajo del menú */
    transition: background-color 0.3s ease-in-out;
}

/* Para evitar que el contenido de la página se desplace cuando el menú está abierto */
body.overflow-hidden {
    overflow: hidden;
}

/* Clase de utilidad para ocultar elementos, usada por JS */
.hidden {
    display: none;
}