/*=====================================
        EDITAR PERFIL
======================================*/

.editar-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:40px;

}


.editar-card{

    width:100%;

    max-width:700px;

    margin:0 auto;

    background:var(--bg-card);

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

    border-radius:18px;

    padding:35px;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}


.editar-card h2{

    text-align:center;

    color:var(--text);

    margin-bottom:30px;

}


.foto{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-bottom:30px;

}


.foto img{

    width:150px;

    height:150px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid var(--primary);

    margin-bottom:15px;

}


.foto input{

    color:var(--text);

}


.input-group{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;

}


.input-group label{

    color:var(--primary);

    margin-bottom:8px;

    font-weight:600;

}


.input-group input{

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

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

    color:var(--text);

    padding:14px;

    border-radius:10px;

    outline:none;

    transition:.3s;

}


.input-group input:focus{

    border-color:var(--primary);

    box-shadow:0 0 12px rgba(0,242,254,.3);

}


.btn-publicar{

    width:100%;

    margin-top:20px;

    padding:15px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    transition:.3s;

}


.btn-publicar:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(0,242,254,.35);

}



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


@media(max-width:768px){


    .editar-container{

        padding:20px;

    }


    .editar-card{

        padding:25px;

    }


    .foto img{

        width:120px;

        height:120px;

    }


}