@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Space Grotesk',sans-serif;

background:
linear-gradient(
135deg,
#f7f7ff,
#f5f8ff
);

color:#222;

overflow-x:hidden;

}


/* navegación */

nav{

display:flex;
justify-content:space-between;
align-items:center;

padding: 15px 8%;

position:fixed;
width:100%;
z-index:999;

backdrop-filter:blur(15px);

background:
rgba(255,255,255,.7);

border-bottom:

1px solid rgba(255,255,255,.5);

}

nav h2{

font-size:30px;

font-weight:700;

color:#4d3bf7;

}

nav ul{

display:flex;
list-style:none;
gap:30px;

}

nav a{

text-decoration:none;
color:#333;

font-weight:500;

position:relative;

}

nav a::after{

content:"";

position:absolute;

width:0;

height:2px;

background:#622ff0;

bottom:-6px;
left:0;

transition:.4s;

}

nav a:hover::after{

width:100%;

}


/* portada */

.hero{

min-height:100vh;

display:flex;
justify-content:center;
align-items:center;

gap:80px;

padding:90px;

position:relative;

}


.hero::before{

content:"";

position:absolute;

width:600px;
height:600px;

background:#d8d4ff;

border-radius:50%;

filter:blur(120px);

left:-200px;
top:-150px;

opacity:.5;

}

.hero::after{

content:"";

position:absolute;

width:500px;
height:500px;

background:#ffc8b5;

border-radius:50%;

filter:blur(130px);

right:-200px;
bottom:-100px;

opacity:.5;

}


.foto{

position:relative;

z-index:5;

}

.foto img{

width:330px;
height:330px;

object-fit:cover;

border-radius:40px;

transform:rotate(-3deg);

box-shadow:

20px 20px 50px rgba(0,0,0,.15);

transition:.5s;

}

.foto img:hover{

transform:
rotate(0deg)
scale(1.03);

}

.texto{

max-width:600px;

z-index:5;

}

.texto p:first-child{

font-size:20px;
color:#666;

}

.texto h1{

font-size:50px;

line-height:1;

margin:10px 0;

}

.texto h3{

font-size:25px;

margin-bottom:27px;

color:#613abb;

}

.texto p{

line-height:1.8;

font-size:18px;


}


section{

padding: 90px 10%;

}

h2{

font-size:50px;

margin-bottom:0px;

text-align:center;

position:relative;

}

h2::after{

content:"";

display:block;

width:100px;
height:6px;

background:
linear-gradient(
90deg,
#6C63FF,
#ff8f6b
);

margin:15px auto;

border-radius:20px;

}


/* materias */

.timeline{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.año{

background:white;

padding:35px;

border-radius:30px;

box-shadow:

0 10px 30px rgba(0,0,0,.06);

transition:.5s;

border:1px solid transparent;

}

.año:hover{

transform:
translateY(-10px);

border-color:#6C63FF;

}

.año h3{

font-size:40px;

color:#6C63FF;

}

.año h4{

margin:10px 0 20px;

}

.año p{

color:#666;

margin:10px 0;

}

.behance-card{
    display:flex;
    align-items:center;
    gap:40px;

    background:#efefef;
    border-radius:35px;

    padding:40px;
}

/* zona izquierda */
.contenido{
    width:35%;
}

/* imagen ocupa todo el espacio restante */
.imagen-derecha{
    flex:1;
    height:140px;

    overflow:hidden;
    border-radius:20px;
}

.imagen-derecha img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}
.texto-2{
    width: 100%;
    max-width: 1000px;
    text-align: justify;
    line-height:1.8;
font-size:18px;
}


.graduacion{

display:block;

width:180px;
height:180px;

margin:25px auto 0;

object-fit:cover;

border-radius:25px;

box-shadow:
0 10px 25px rgba(0,0,0,.12);

transition:.4s;

}

.graduacion:hover{

transform:
translateY(-5px)
scale(1.05);

}

/* grupo */

.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:30px;

}

.card{

background:white;

padding:40px;

border-radius:35px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.4s;

position:relative;

overflow:hidden;

}


.card:hover{

transform:
translateY(-12px);

}

.card span{

font-size:55px;

font-weight:bold;

color:#d0ccff;

}

.card h3{
  

margin:15px 0;

}

button{

padding:14px 25px;

border:none;

border-radius:30px;

background:#6C63FF;

color:white;

font-weight:bold;

cursor:pointer;

margin-top:20px;

transition:.4s;

}

button:hover{

transform:scale(1.06);

}


/* cátedra */

.datos{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.datos div{

background:white;

padding:35px;

border-radius:30px;

box-shadow:

0 10px 30px rgba(0,0,0,.06);

}

.datos h4{

margin-bottom:20px;

color:#4c44dd;

}


/* footer */

footer{

padding: 35px;

text-align:center;

margin-top:100px;

background:white;

border-top-left-radius:50px;
border-top-right-radius:50px;

}

.legal{

margin-top:20px;

max-width:800px;

margin-inline:auto;

color:#666;

font-size:14px;

line-height:1.7;

}


/* responsive */

@media(max-width:900px){

.hero{

flex-direction:column;
text-align:center;

}

.texto h1{

font-size:50px;

}

nav{

flex-direction:column;

gap:20px;

}

nav ul{

flex-wrap:wrap;
justify-content:center;

}

}