*{
    /*
    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;
}

#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);
}


footer div 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: 8em;   
}

#mjg img{
    background:rgb(255, 255, 255);
    border: none;
    border-radius: 1em;
    width: 12em;
    aspect-ratio: 1;
}

#agustina img{
background:rgb(255, 255, 255);
border: none;
border-radius: 1em;
width: 12em;
aspect-ratio: auto;
}

#abril img{
    background:rgb(255, 255, 255);
    border: none;
    border-radius: 1em;
    width: 12em;
    aspect-ratio: auto;
    }
/* componente (article) con todos los datos de cada integrante */
.equipo article {
    /* color de fondo */
    background-color:rgb(197, 249, 249);
    /* distancia vertical entre los integrantes (1/2 tamaño del texto) */
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) del tamaño del texto */
    padding: 1em;
    /* borde redondeado 1/4 del tamaño del texto */
    border-radius: .25em;
    color:rgb(0, 48, 60);
  }
  
/* TODAS las secciones */
section {
    /* relleno abajo: 2 líneas de texto */
    padding-bottom: 2rem;
  }

  
    
.rotulos 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 */
.rotulos 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;
}

#logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5em;

}

.titulo{
    padding-left: 1em;
    display: flex;
    justify-content: center;
    align-self: center;
}

.enfoque_texto{
    padding-left: 1em;
}

.datos{
    padding-left: 1em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.footer{
    padding-left: 1em;
}

.equipo{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;

}

.equipo article{
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items:center;
}

.rotulos{
    display: flex;
    align-self: center;
    
}

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

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

.enfoque{
    background-color:rgb(197, 249, 249);
    color:rgb(0, 48, 60);
    padding-top: 1em;
    padding-bottom: 3em;
}

.datos{
    background-color:rgb(197, 249, 249);
    color:rgb(0, 48, 60);
    padding-bottom: 1em;
    padding-top: 3em;
}


@media screen and (min-width:500px) {
    header .contenedora{
        display: flex;
        justify-content: center;
       
        
    }
 .menu{
     display: flex;
     justify-content:center;
     flex-direction: row;
     padding-left:  1em;
 }


 .comitente{
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;

 }

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

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

.equipo{
    display: flex;
    flex-wrap: wrap;
    gap: 1em;

}

.equipo article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(50% - .5em);
}

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

.equipo_textos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
 }
@media screen and (min-width:1024px){
    .equipo{
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
    
    }
    
    .equipo article{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items:flex-start;
        width: calc(50% - .5em);
    }

    .equipo_textos{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 1em;
        font-size: smaller;

    }
    .rotulos{
        display: flex;
        align-self: flex-end;
    }

    header .contenedora{
        display: flex;
        justify-content: space-between;
    }
    .menu{
        display: flex;
        gap: em;
    }

}