*{
    /*
    para que el ancho de los elementos html se calculen hasta los bordes y no solo por sus contenidos cambiando lo que viene predeterminado */
    box-sizing: border-box;
}

header{
    background-color:rgb(197, 249, 249);
    width: 100%;
    padding: 1em;
}


/* solo las imagenes que estan dentro de una etiqueta cuyo id es "logo" */
#logo img {
/* es transparente se le puede asignar color de fondo*/
background-color: ghostwhite;
/* el color de fondo se extiende mas alla de la imagen */
padding: .5em;
/* tiene borde, (tipo de borde -espesor - color)*/
border: 1em ghostwhite;
/* bordes redondeados*/
border-radius: .5em;
/*relacion de aspecto 2 a 1*/
aspect-ratio: 2/1;
width: 7em;
}

#mapa img{
    background-color: white;
    border: white;
    border-radius: .5em;
    aspect-ratio: auto;
    width: 100%;
}

#acumar img {
    /* es transparente se le puede asignar color de fondo*/
    background-color: rgb(255, 255, 255);
    /* el color de fondo se extiende mas alla de la imagen */
    padding: .5em;
    /* tiene borde, (tipo de borde -espesor - color)*/
    border: 1em rgb(255, 255, 255);
    /* bordes redondeados*/
    border-radius: .5em;
    /*relacion de aspecto 2 a 1*/
    aspect-ratio: auto;
    width: 7em;
    }

    #uba img {
        /* es transparente se le puede asignar color de fondo*/
        background-color: rgb(255, 255, 255);
        /* el color de fondo se extiende mas alla de la imagen */
        padding: .5em;
        /* tiene borde, (tipo de borde -espesor - color)*/
        border: 1em rgb(255, 255, 255);
        /* bordes redondeados*/
        border-radius: .5em;
        /*relacion de aspecto 2 a 1*/
        aspect-ratio: auto;
        width: 7em;
        }


ul,
ol {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 1px;
margin-inline-end: 1px;
/* retira el relleno izquierdo predeterminado*/
padding-inline: 0;
/* elimina bullets, numeros, etc.*/
list-style-type: none;

}

body{
 /*familia tipografica general del proyecto (sus elementos contenidos la heredan) */
 /* la definida en la "paleta de diseño" */
 font-family: sans-serif;   
 /* se retiran los 8 pixeles que vienen predeterminados para que sus elementos contenidos lleguen hasta los bordes de la ventana del navegador */
 margin: 0;
}

/* selector multiple: los titulos */
h1, h2, h3, h4{
    /* tipografia diferente a los otros elementos html */
    font-family:sans-serif;

}
/* todos los vinculos */
a{
    /* no estaran subrayados*/
    text-decoration: none ;
    color: rgb(25, 210, 185);
    /* diferente familia tipoografica*/
    font-family: Arial, Helvetica, sans-serif ;
    /* negrita*/
    font-weight: lighter;
}
/* caja contenedora centrada y con ancho maximo
selector de tipo de clase 
elementos html diferentes tendran caracteristicas en comun */
.contenedora{
/* ancho maximo */
width: min (100% 40rem);
/* centrado horizontal (si sobra espacio, lo distribuye a la izquierda y derecha) */
margin-inline: auto;
padding: .5rem;
}

/*componente superior y sus contenidos tanto header como footer */
footer {
background-color: rgb(197, 249, 249);
color: rgb(0, 48, 60);
padding-top: 1em;
padding-bottom: 1em;
}

h1{
    color: white;
    font-weight: bolder;
}
h2{
font-weight: bold;
}


/*a la lista del menu del encabezado*/
header nav ul{
    /*elimina los margenes arriba y abajo que vienen predeterminados*/
    margin-bottom: auto;
}
/*vinculos pero solo los del menu superior*/
header nav a{
color:white;
background-color:rgb(0, 48, 60);
/* para darle propiedades de caja (margen) */
display: block;
/* ancho igual a su contenido*/
width: max-content;
/*separa los botones 1/8 del tamaño del texto */
margin: .125em;
/* relleno arriba y abajo 1/4 del tamaño del texto */
padding-inline: 1em;
/* border redondeado 1/4 del tamaño del texto */
border-radius: 1em;
}
/*cuando se pasa el cursor por sobre los vinculos del menu (selector de pseudo clase */
header nav a:hover{
   
    /* para darle propiedades de caja (margen) */
    display: block;
    /* ancho igual a su contenido*/
    width: max-content;
    /*separa los botones 1/8 del tamaño del texto */
    margin: .125em;
    /* relleno arriba y abajo 1/4 del tamaño del texto */
    padding-inline: 1em;
    /* border redondeado 1/4 del tamaño del texto */
    border-radius: 1em;
    color:rgb(0, 48, 60);
    background-color: white;
}
.body{
    
    color: white;
    background-color:rgb(0, 48, 60);
    padding-top: 1em;
    padding-bottom: 4em;
}

.titulos{
    display: flex;
    color: white;
    justify-content: center;
}

header .contenedora{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.menu{
    display: flex;
    flex-direction: row;
    gap: .5em;
    flex-wrap: wrap;
    justify-content: center;
}

.logos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1em;
    align-items: center;
}

.titulo_datos{
    display: flex;
    justify-content: center;
}

.titulo_autoridades{
    display: flex;
    justify-content: center;
}

.texto{
    display: flex;
    justify-content: center;

}

.footer{
    padding-left: 1em;
    padding-right: 1em;
    padding-top: .5em;
    padding-bottom: .5em;
    background-color:rgb(197, 249, 249);
    color:rgb(0, 48, 60);
}



@media screen and (min-width:530px) {

header .contenedora{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
}