/* Eliminar márgenes y rellenos para toda la página */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;  /* Asegura que el body ocupe toda la altura */
    width: 100%;   /* Asegura que el body ocupe todo el ancho */
    font-family: 'Helvetica', sans-serif;  /* Aplicamos la fuente personalizada */
}

/* Definir la fuente Helvetica */
@font-face {
    font-family: 'Helvetica';  /* Nombre de la fuente que utilizaremos */
    src: url('../fonts/Helvetica.ttf') format('truetype');  /* Ruta al archivo TTF */
}

/* El mapa ocupará toda la pantalla y estará detrás del menú */
#map {
  position: absolute;  /* O también fixed, según necesites */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;          /* Z-index menor para que el menú lo cubra */
}

/* Estilo para el contenedor del logo */
#logo-container {
    position: absolute;
    bottom: 25px;  /* Coloca el logo 10px por encima de la esquina inferior */
    left: 10px;    /* Coloca el logo en la esquina izquierda */
    z-index: 1000; /* Asegura que el logo quede por encima del mapa u otros elementos */
}

/* Estilo para el logo */
#logo {
    width: 200px;  /* Ajusta el tamaño del logo según sea necesario */
    height: auto;  /* Mantén la proporción del logo */
}

/* Ajustes para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
	/* Estilo para el logo */
	#logo {
		width: 150px;  /* Ajusta el tamaño del logo según sea necesario */
		height: auto;  /* Mantén la proporción del logo */
	}
}