/* ===== HERO ===== */

.hero{
    max-width:1100px;
    margin:auto;
    padding:120px 20px 80px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:2rem;
}

.hero-text h5{
    font-size:14px;
    margin-bottom:25px;
}

.hero-text h4{
    font-size:18px;
    margin-bottom:10px;
}

.hero-text h1{
    font-size:50px;
    margin-bottom:20px;
}

.hero-text p{
    margin-bottom:30px;
    line-height:1.8;
}

/* BOTONES */

.hero-text a{
    display:inline-block;
    background:#4d4d4d;
    padding:14px 28px;
    border-radius:30px;
    margin-right:10px;
    transition:0.4s;
}

.hero-text a:hover{
    background:transparent;
    border:1px solid white;
}

.github-icon{
    background:transparent;
    border:1px solid white;
}

/* IMAGEN HERO */

.hero-img-mia{
    width:400px;
    height:400px;
    border-radius:50%;
    overflow:hidden;
    margin:auto;
}

.hero-img-mia img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.hero-img-mia img:hover{
    transform:scale(1.1);
}

/* ===== TECNOLOGIAS ===== */

.tecnologias-work{
    text-align:center;
    margin:60px 0 20px;
}

.tech-card{
    background:white;
    padding:20px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    flex:0 0 auto;
}

.tech-card img{
    width:80px;
}


/* CARRUSEL */

.tecnologias{
    padding:40px 0;
}

.carousel{
    width:100%;
    overflow:hidden;
    position: relative;
}

.carousel-track{
    display:flex;
    gap:40px;
    width:max-content;
    animation:scroll 20s linear infinite;
}

.carousel-track:hover{
animation-play-state:paused;
}

@keyframes scroll{
0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}
}


/* ===== RESPONSIVE ===== */

@media (max-width:768px){


.hero{
    grid-template-columns:1fr;
    text-align:center;
    
}


.hero-img-mia{
    width:200px;
    height:200px;
    order: 1;

}

/* texto después */
.hero-text{
    order:2;
}

}