html { box-sizing: border-box;}
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
h1{
    font-family: "righteous", cursive;
    font-size: xx-large;
  }
  h2{
    font-family: "lato", sans-serif;
    font-weight: 900;
    
}
h3{
    font-family: "lato", sans-serif;
    font-size: x-small;
    font-weight: 900;
    
}
.datos_academicos li{
font-size: xx-small
}
li{
    font-family: "lato",sans-serif;
    font-weight: 400;
    font-size: small;
}
footer{
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-size: xx-small;
}
samp{
    font-family: "lato", sans-serif;
    font-size: small;
    font-weight: 400;
  font-style: italic;
}
p{
    font-family: "lato",sans-serif;
    font-weight: 400;
    font-size: small;
}
.italica{
    font-family: "lato", sans-serif;
    font-weight: 600;
    font-style: italic;
}
.negrita{
    font-family: "lato", sans-serif;
    font-weight: 900;
    font-style: unset;
}
body { min-height: 100dvh;
display: grid; 
grid-template-rows: auto 1fr;
background-color: #f4e4bc;}
header { box-shadow: 0
    4px
    4px
    #7c94a4;
    position: sticky;
    top: 0;
    z-index: 8000;}
    header #logodgpc {
        width: 30%}

*{ box-sizing:border-box;
padding: 0;
margin: 0;}
main{
    display: block;
margin: 1rem;}
a {
    text-decoration: none;
    list-style: none;
    color: black;}
    a:hover {
        color: #bc1d1d;}
footer{ background-color: #bc1d1d;
    color: #f4e4bc ;
    margin:0 ;
    padding: 1em;}
    header img{
        width: 50%;
        align-items: center;
    }
h1{
    text-align:center;
    color: #bc1d1d;
}
header .navegacion {
    display: flex;
    justify-content: space-between;
    align-items: wrap;
    gap: 2rem;}
.navegacion {
    max-width: 65rem;
    margin-inline: auto;
    padding: 1rem;}
nav {
        display: block; } 
header .menu {
    display: flex;
    gap: 0.25rem; }
header nav ul li {
    margin-block: 0;
    background-color: #a4d4b4;
    padding: 1rem;
    border-radius: 20px;}
    li {
        display: list-item;
        text-align: -webkit-match-parent;}
ul { list-style: none;
padding: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;}

/*recorrido*/
.acumar img{
    width: 15%;
}
.parrafo h1{
border-bottom:.2rem solid #bc1d1d;
margin: 1rem;
}
.parrafo p{
    margin-bottom: 1rem;
    background: linear-gradient(30deg, #bc1d1d84,#7c94a48a);
    padding: 1rem;
}

/*alumnos*/
.contenedora{
    max-width: 300px;
    margin-inline:auto;
    padding: 1rem;
  background-color:#7c94a4;
  border-radius: 20px;


}
.contenedora h2{ 
    margin-bottom: 1rem;
    border-bottom:.2rem solid #bc1d1d;
color: #bc1d1d;
}
.contenedora samp{
    display: block;
}
 .galeria{
    display: flex;
}
.galeria-item{
    position:relative;
    isolation: isolate;
    display: flex;
    flex: 1;
    height: 300px;
    background-color: #f60909;
    padding: 2rem;
    opacity: 1;
    overflow: hidden;
    transition: flex 0.5s, opacity 0.25s;

}
.galeria-item :hover{
    opacity: 1;
    flex: 5;
}
.galeria-item:not(:hover){
    opacity: 0.75;
}
.item-image{
    position: absolute;
    top:0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.descripcion{
    align-self: flex-end;
    text-transform: uppercase;
}
.nombre{
    font-size: 1rem;
    background: linear-gradient(90deg,#a4d4b4,#bc1d1d);
    padding-inline: 1rem;
    transform: translateY(-1rem);
}
.rol{
    display: inline-block;
    background: linear-gradient( 90deg, #a4d4b4, #7c94a4);
    padding: .5rem;
    box-shadow: 0,0,0,0.2;
    transform: translateY(1rem);
}
.nombre
.rol{
    opacity: 0;
    transition: opacity 0.25s;
    transition-delay: 0.35s;
}
.galeria-item :hover .nombre,
.galeria-item :hover .rol {
    opacity: 1;
    transform: translateY(0);
}
.galeria-item:not(:hover) .nombre,
.galeria-item:not(:hover) .rol {
    transition-delay: 0s;
}
@media screen and (max-width: 768px){
    .galeria{
        flex-direction: column; 
        height: 100vh;
    }
.galeria-item :hover{
    flex-basis:  100%;
}
}
    
    #logo_acumar img{width:20%;
    text-align: left;}
   #logo_uba img{width: 20%;}
   #logo_fadu img{width: 20%;}
   #segundo_logo_dgpc img{width: 20%;}
   .datos_academicos li{
    list-style-type: none; }
   .datos1{
    text-align: left;
    margin: 1rem;
    padding: 1rem;
    border-left:.2rem solid #7c94a4}
    .datos2{
       text-align: left;
        margin: 1rem;
        padding: 1rem;
    border-left:.2rem solid #7c94a4;
    height:100%;
    left: 50%;

    }
    .datos3{text-align: left;
        margin: 1rem;
        padding: 1rem;
        border-left:.2rem solid #7c94a4;
        height:100%;
        left: 50%;}

    a:link { text-decoration: none}
  
    header, footer{    
        background-color:#bc1d1d;
        padding:0.5em;
        flex-grow: 0;
    }
    img{ min-width: 0%; 
        max-width: 100%;
    overflow-clip-margin: content-box ;
    overflow: clip;}
#logodgpc { width: 15%;}
.mockups-general{
    background-color: #a4d4b4;
    width: 100%; 

    padding: .1rem;
}
.mockups-general h2{
    border-bottom:.2rem solid #bc1d1d;
    color:#bc1d1d;
    margin: 1rem;
}

.mockups img{
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .6;
    transition: .5s ease;
}
.mockups img:hover{
    cursor: crosshair;
    width: 250px;
    opacity: 1;
filter: contrast(120%);}

.mockups{
    background-color: #a4d4b4;
    padding: 2rem;
    margin: 1rem;
    display: flex;
    width: 400px;
 align-items: center;
 margin-inline: auto ;
}