/* --- Variables de Diseño y Reseteo --- */
:root {
    --color-principal: #141414;
    --color-fondo: #04c6be;
    --color-tarjeta: #070707;
    --color-texto: #dfdfdf;
    --espacio-chico: 1rem;
    --espacio-medio: 1rem;
    --borde-redondeado: 1rem;
    --radio-chico: .5rem;
    --radio-medio: 1rem;
    --radio-grande: 1,5rem;
    --fuente-base:  Tahoma, sans-serif;}

*{
box-sizing: border-box;
margin: 10px;
padding: 0;
border: 0;
}


section {
padding-top: 5%;
}


/*Header*/

header{
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
background-color: 111111;
padding: 1.5rem;
box-shadow:  0 4px 8px rgba(0,0,0,0.5);
margin-bottom: 2rem;
text-align: center; 
position: sticky;
top: 0;
z-index: 100;
background-image: url('../imagenes/fondo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

.logos-principales {
margin-bottom: 0px;
}
.logoomar{
height: 100px; 
margin-bottom: 0px;
}

.dgpclogo {
height: 60px;
width: auto;
margin-bottom: 20px;
}

.botones {
display: flex;
gap: 10px; 
margin-bottom: 10px;  
}


.nav-boton {
text-decoration: none;
background-color: transparent;
color: #04c6be;
font-family: sans-serif; 
font-size: 16px;                 
font-weight: 600;                         
text-transform: uppercase;       
padding: 10px 20px;
border-radius: 50px;
margin: 0 5px;
display: inline-block;
transition: 0.25s ease, color 0.25s ease, transform 0.2s ease;
}


.nav-boton:hover {
    background-color: #04c6be;
    color: #292D32;                
    transform: translateY(-2px);    
}


.nav-boton.activo { 
    background-color: #FFA365;
    color: #292D32;
    font-weight: 700;               
    box-shadow: 0 4px 10px rgba(255, 163, 101, 0.3); 
}


/*Body*/

body{
font-family: var(--fuente-base) sans-serif;
background-color: var(--color-principal);
color: var(--color-texto);
letter-spacing: 0,3rem;
line-height: 1;
max-width: 600px;
margin: 0 auto;
padding-bottom: 40px;
}


/*Main*/

main {
text-align: center;
font-family: sans-serif;
font-weight: 150; 
letter-spacing: 0,3rem;
line-height: 1.3;
max-width: 600px;
margin: 0 auto;
}


h1 {
text-align: center;
font-family: Tahoma;
font-weight: 600;
color: #dfdfdf; 
letter-spacing: -0.01em; 
line-height: 2.5;
}


h2 {
text-align: center;
font-family: sans-serif;
font-weight: 450;
font-size: 20px;
color: #04c6be; 
text-transform: uppercase;
letter-spacing: 0,3rem;
line-height: 1;
}


/*Perfil*/

.perfil-contenedor {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0rem;
}

.foto-perfil {
display: block;
margin: 0 auto;
margin-top: 0px;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
width: 150px;
height: 150px;
}


/*Biografía*/

.tarjeta-biografia {
background-color: #111111;
border: 1px solid #1f1f1f;
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);   
background-image: url('../imagenes/fondoyo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

.redes-link {
border: 2px solid #04c6be;
border-radius: 50px;
margin: 2 10px;
display: inline-flex;
align-items: center;
}

.redes-link:hover {
background-color: #04c6be;
padding: 5px 5px;
border-radius: 50px;
margin: 0 5px;
}


/*Curiosidades*/

.curiosidades {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 
gap: 30px;
margin: 1rem auto;
padding: 0 1rem;
}

.icono {
height: 20px;
object-fit: cover;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.5); 
}

.curiosidad img {
width: 50px;
height: 50px;
}

.curiosidad {
background-color: #111111;
border: 1px solid #1f1f1f;
border-radius: 20px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
margin-top: 1em;
font-family: sans-serif;
font-size: 14px;
font-weight: 600;
color: #dfdfdf;
background-image: url('../imagenes/fondo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

.curiosidad:hover {
transform: translateX(6px);
box-shadow: 0 3px 9px #04c6be
}


/*Álbum de fotos*/

.galeria{
display: flex;
flex-direction: column;
align-items: center;  
}

.imagen {
border: 1px solid #000000;
border-radius: 20px;
}

.galeria-de-fotos {
display: flex;
overflow-x: auto;
gap: 15px;
padding: 10px 20px 20px 10px;
width: 100%;
scrollbar-width: none;  
}

.galería-de-fotos img {
height: 250px;
object-fit: cover;
border-radius: 100px;
scroll-snap-align: center;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.5);     
}

.galeria img:hover {
transform: scale(1.05);
transform: translateY(6px);
box-shadow: 0 3px 9px #04c6be
}


/*Recorrido por FADU*/

.historial-academico{
display: flex;
flex-direction: column;
gap: 5px;  
}

.materias-aprobadas {
display: flex;
overflow-x: scroll;
gap: 20px;
scrollbar-width: none;
padding: 15px 20px 25px 20px; 
margin: 0rem;
}

.carrera-año h3 {
color: #04c6be;
text-align: center;
margin-bottom: 1rem;  
}

.carrera-año li {
list-style: none;
font-size: 16px;
line-height: 1.5;
color: #dfdfdf;
padding: 8px 5px;
border-bottom: 1px solid #111111;
}

.carrera-año {
flex: 0 0 250px;
background-color: #111111;
border: 1px solid #1f1f1f;
border-radius: 20px;
padding: 20px 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);  
background-image: url('../imagenes/fondofadu.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: 0; 
}

.carrera-año:hover {
box-shadow: 0 3px 9px #04c6be
}


/*Series favoritas*/

.galerias-de-series {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center; 
align-items: flex-end;   
}

.galerias-de-series img {
width: 50;
height: 50%;
transition: transform 0.5s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);  
}

.galerias-de-series img:hover {
transform: scale(1.05);
transform: translateY(-8px);
box-shadow: 0 1px 20px #04c6be;
}


/*Nuestro proyecto*/

.tarjeta-nuestro-proyecto{
background-color: #111111;
border: 1px solid #1f1f1f;
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
background-image: url('../imagenes/fondonuestroproyecto.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: 0;  
}


/*Integrantes*/

.contenedor-equipo {
display: flex;       
flex-direction: column; 
justify-content: center;        
align-items: center;            
gap: 30px;                      
width: 96%;         
max-width: 96%;     
margin-top: 0rem; 
padding: 2rem; 
margin-bottom: 1rem;  
text-align: center;
}

.avatar-equipo img{
width:150px;
height:150px;
border-radius:50%;
margin-bottom:10px;
}

.tarjeta-link {
display: flex;
align-items: center;
justify-content: center;                            
background-color: #111111;
border: 1px solid #1f1f1f;
border-radius: 20px;                   
padding: 30px;                                          
text-decoration: none;
color: #dfdfdf;
font-size: 16px;                       
font-weight: 600;                      
margin: 0px auto;   
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 
background-image: url('../imagenes/fondo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;  
}

.tarjeta-link:hover {
background-color: #111111;
transform: translateX(6px);
box-shadow: 0 3px 9px #04c6be;
transform: translateY(-8px);
box-shadow: 0 1px 20px #04c6be;
}


/*Prototipos*/

.prototipos {
padding: 2rem;
margin-bottom: 2rem;
text-align: center;
}

.botones-prototipos {
display: flex;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
justify-content: center;
width: max-content;
padding: 0 1rem;
}

.boton-prototipo {
text-decoration: none;
color: #dfdfdf;
padding: 12px 12px;
border-radius: 50px;
font-family: sans-serif;
font-size: 17px;
font-weight: 550;
background-color: #111111;
border: 1px solid #1f1f1f;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 
}

.boton-prototipo img:hover {
background-color: #04c6be;
box-shadow: 0 6px 15px var(--color-cajas-bordes); 
}


/*Datos Académicos*/

.UBA{
display: flex;
flex-direction: column;
gap: 5px; 
}

.UBA p {
padding: 2rem;
text-align: center;
margin: var(--espacio-medio) auto;
max-width: 450px;
border-radius: var(--borde-redondeado);
display: grid;
place-items: center;
gap: 0.5rem;
background-color: #111111;
border: 1px solid #1f1f1f;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 
background-image: url('../imagenes/fondo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

.logouba {   
height: 20px;
object-fit: cover;
}

.logo {   
height: 35px;
object-fit: cover;
}

.boton {
display: inline-block;
background-color: #dfdfdf;
border: none;
outline: none;
border-radius: var(--borde-redondeado);
padding: 10px 20px;
margin-top: var(--espacio-chico);
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); 
font-family: sans-serif;
font-weight: 600;   
color: #111111;
text-decoration: none;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.5); 
}

.boton:hover {
background-color: #04c6be;
box-shadow: 0 6px 15px #04c6be; 
}


/*Footer*/

footer p {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #5a5a5a;
margin: 1rem;
padding: 1rem 1.5rem;
margin: var(--espacio-medio) auto;
max-width: 450px;
border-radius: var(--borde-redondeado);
display: grid;
place-items: center;
gap: 0.5rem;
font-family: sans-serif;
text-align: center; 
}

.footer-copyright {
font-family: sans-serif;
font-size: 1rem;
padding-bottom: 1rem;
justify-content: center;
color: #5a5a5a;
margin-top: 2rem;
}


/*prototipo.html*/

.prototipo-html {
background-color: #141414; 
}

/*Version mobile y version desktop*/

.prototipos1 h2{
text-align: center;
font-family: sans-serif;
font-weight: 580;
color: #04c6be; 
letter-spacing: -0.01em; 
line-height: 2.5;

}

.prototipos2 h2{
text-align: center;
font-family: sans-serif;
font-weight: 580;
color: #04c6be; 
letter-spacing: -0.01em; 
line-height: 2.5;
}

.prototipos-mobile {
display: flex;
overflow-x: auto;
gap: 15px;
padding: 10px 20px 20px 10px;
width: 100%;
scrollbar-width: none;  
background-color: #111111;
border: 2px solid #292929;
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
background-image: url('../imagenes/fondo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: 0;
}

.prototipos-mobile img {
height: 400px;
object-fit: cover;
border-radius: 10px;
scroll-snap-align: center;
box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);     
}

.prototipos-mobile img:hover {
transform: scale(1.05);
transform: translateY(6px);
box-shadow: 0 0px 35px #04c6be
}

.prototipos2{
display: grid;
flex-wrap: wrap;
gap: 20px;
justify-content: center; 
align-items: flex-end; 
 
}

.prototipo-desktop img {
height: 40px;
object-fit: cover;
border-radius: 10px;
scroll-snap-align: center;
box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5); 
}


.prototipos-desktop {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center; 
align-items: flex-end;   
display: flex;
overflow-x: auto;
gap: 15px;
padding: 10px 20px 20px 10px;
width: 100%;
scrollbar-width: none;  
background-color: #111111;
border: 2px solid #292929;
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
background-image: url('../imagenes/fondo.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
margin: 0;
}

.prototipos-desktop img {
height: 115px;
transition: transform 0.5s;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);  
}

.prototipos-desktop img:hover {
transform: scale(1.05);
transform: translateY(-8px);
box-shadow: 0 0px 35px #04c6be;
}

/*boton volver*/

.boton-volver{
    background-color:#04c6be;
    border-radius:50px;
    text-align:center;
    padding:0.5rem 2rem;
    width:fit-content;
    margin:auto;
    margin-top: 2rem;
    transition:0.5s;
    box-shadow: 0 0px 10px #04c6be;
}

.boton-volver-link{
    font-family: sans-serif;
    text-decoration:none;
    color:rgb(0, 0, 0);
    display:inline-block;
    font-weight: 700;

}

.boton-volver:hover .boton-volver-link{
    color:rgb(255, 255, 255);
}