body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f0f0f0; /* Color de fondo general para la página */
}

/* Botón de hamburguesa */
.menu-toggle {
    display: none; /* Oculto por defecto en escritorio */
    position: fixed; /* Fijo en la pantalla */
    top: 20px;
    right: 20px;
    background-color: #0d47a1; /* Fondo azul para que combine */
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001; /* Por encima del menú cuando está cerrado, y otros contenidos */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#0d47a1
.menu-toggle:hover {
    background-color:  #0d47a1;
}

/* Panel del menú hamburguesa */
.menu-hamburguesa {
    display: flex; /* Usamos flex y controlamos la visibilidad con transform/left */
    flex-direction: column;
    align-items: center; /* Centra los elementos del menú */
    position: fixed;
    top: 0;
    left: -300px; /* Inicia fuera de la pantalla (ancho + un poco más) */
    width: 280px; /* Ancho del menú */
    height: 100%;
    background-color:  #0d47a1; /* Fondo azul */
    color: white; /* Texto blanco */
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    transition: left 0.3s ease-in-out; /* Transición para el deslizamiento */
    box-sizing: border-box;
}

.menu-hamburguesa.active {
    left: 0; /* Se desliza a la vista */
}

.menu-header {
    margin-bottom: 30px;
    text-align: center;
}

.logo { /* Logo dentro del menú hamburguesa */
    max-width: 150px;
    height: auto;
    margin-bottom: 20px; /* Espacio debajo del logo del menú */
}

.menu-items {
    list-style: none;
    padding: 0;
    width: 100%;
    text-align: center; /* Centra el texto de los items */
}

.menu-items li {
    margin-bottom: 15px;
}

.menu-items li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    display: block;
    padding: 10px;
    border-radius: 4px;
}

.menu-items li a:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

.social-media { /* Redes sociales dentro del menú hamburguesa */
    margin-top: auto; /* Empuja las redes sociales hacia abajo */
    margin-bottom: 25px;
    padding-top: 20px; /* Espacio antes de las redes sociales */
    width: 100%;
    display: flex;
    justify-content: space-around; /* Distribuye los iconos */
    align-items: center;
    border-top: 1px solid whitesmoke; /* Línea divisoria opcional */
}

/* Estilo para los placeholders de imágenes de redes sociales */
.social-media a {
    display: inline-flex; /* Para que el fondo se aplique correctamente y centrar img */
    justify-content: center;
    align-items: center;
    width: 32px; /* Tamaño del contenedor del icono */
    height: 32px;
    background-color: rgba(255, 255, 255, 0.2); /* Un fondo para el placeholder */
    border-radius: 50%; /* Para que parezcan iconos redondos */
    margin: 0 5px;
    color: white; /* Para SVGs que usen currentColor */
}

.social-media a:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.social-media a img { /* Si se usan <img> para iconos */
    width: 20px; 
    height: 20px;
    display: block;
}

/* Ajuste para el contenido principal de la página */
main {
    padding: 20px;
    /* padding-top para main se maneja en BaseLayout.astro o es afectado por HeaderPrincipal */
    /* Considerar el efecto de HeaderPrincipal y el botón de menú fijo */
}

/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .menu-toggle {
        display: block; /* Mostrar el botón de hamburguesa en móviles */
    }
}