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

body{

    font-family:'Inter',sans-serif;

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b,
        #312e81
    );

    background-attachment:fixed;

    color:white;

    min-height:100vh;
}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:60px 0;
}

.hero{

    display:flex;

    align-items:center;

    gap:40px;

    margin-bottom:80px;

    padding:50px;

    border-radius:30px;

    background:rgba(255,255,255,0.05);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,0.1);

    box-shadow:
    0 8px 32px rgba(0,0,0,.3);
}

.line{

    width:6px;

    height:250px;

    background:linear-gradient(
        #60a5fa,
        #818cf8
    );

    border-radius:10px;
}

.hero h1{

    font-size:5rem;

    line-height:.9;

    margin-bottom:20px;
}

.hero h2{

    color:#93c5fd;

    margin-bottom:15px;
}

.hero p{

    max-width:650px;

    color:#cbd5e1;

    margin-bottom:25px;
}

.status{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

.status span{

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

    border:1px solid rgba(255,255,255,.1);

    padding:10px 15px;

    border-radius:30px;
}

.buttons a{

    text-decoration:none;

    color:white;

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

    border:1px solid rgba(255,255,255,.1);

    padding:12px 25px;

    border-radius:12px;

    margin-right:10px;

    display:inline-block;

    transition:.3s;
}

.buttons a:hover{

    transform:translateY(-3px);

    background:#60a5fa;
}

.about{

    display:grid;

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

    gap:25px;

    margin-bottom:60px;
}

.card{

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

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.1);

    border-radius:25px;

    padding:30px;

    transition:.3s;
}

.card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 0 25px rgba(96,165,250,.3);
}

.card h3{

    color:#93c5fd;

    margin-bottom:15px;
}

.skills{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.skills span{

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

    border:1px solid rgba(255,255,255,.1);

    padding:10px 16px;

    border-radius:30px;
}

.title{

    font-size:2rem;

    margin-bottom:30px;

    color:#93c5fd;
}

.projects{

    display:grid;

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

    gap:25px;

    margin-bottom:60px;
}

.project{

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

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.1);

    border-radius:25px;

    padding:25px;

    transition:.3s;
}

.project:hover{

    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:
    0 0 30px rgba(96,165,250,.35);
}

.project h3{

    margin-bottom:12px;

    color:white;
}

.teacher-card,
.comp-card{

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

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.1);

    border-radius:25px;

    padding:30px;

    text-decoration:none;

    color:white;

    transition:.3s;
}

.teacher-card:hover,
.comp-card:hover{

    transform:
    translateY(-10px)
    scale(1.03);

    box-shadow:
    0 0 30px rgba(96,165,250,.4);
}

.teachers-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:60px;
}

.companeros-grid{

    display:grid;

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

    gap:25px;

    margin-bottom:60px;
}

.teacher-card h3,
.comp-card h3{

    margin-bottom:10px;
}

.teacher-card p,
.comp-card p{

    color:#cbd5e1;
}

footer{

    text-align:center;

    padding:30px;

    color:#cbd5e1;

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    margin-top:40px;
}

@media(max-width:768px){

    .hero{

        flex-direction:column;

        text-align:center;
    }

    .line{

        width:200px;

        height:5px;
    }

    .hero h1{

        font-size:3rem;
    }
}