body{
    margin:0;
    background:#666666;
    color:#ffffff;
    font-family:'Segoe UI',Tahoma,sans-serif;
}

.container{
    display:flex;
    min-height:100vh;
}

.left{
    width:55%;
    padding:35px;
    box-sizing:border-box;
}

.right{
    width:45%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo{
    width:100%;
    max-width:200px;
    height:auto;
}

h1{
    font-size:2rem;
    font-weight:800;
    margin-top:40px;
    margin-bottom:20px;
}

.mensaje{
    font-size:1rem;
    line-height:1.6;
}

.contacto{
    margin-top:20px;
}

.contacto p{
    font-size:1rem;
    margin-bottom:8px;
	margin:6px 0;3
	line-height:1.3;
}

.contacto a{
    color:#8ec9ff;
    text-decoration:none;
    font-weight:600;
}

.contacto a:hover{
    text-decoration:underline;
}

.redes{
    margin-top:35px;
}

.sociales{
    display:flex;
    gap:18px;
    margin-top:10px;
}
.sociales a{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#ffffff;
    color:#666666;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
    transition:all .3s ease;
}

.sociales a:hover{
    transform:scale(1.1);
}

.sociales a:nth-child(1):hover{
    color:#1877F2;
}

.sociales a:nth-child(2):hover{
    color:#E4405F;
}

.sociales a:nth-child(3):hover{
    color:#000000;
}
.mantenimiento{
    width:100%;
    max-width:400px;
    height:auto;
}

@media (max-width:768px){

    .container{
        flex-direction:column;
    }

    .left,
    .right{
        width:100%;
    }

    .left{
        padding:25px;
        text-align:center;
    }

    .logo{
        max-width:200px;
        margin:auto;
    }

    h1{
        font-size:1.6rem;
    }

    .mensaje{
        font-size:1.1rem;
    }

    .sociales{
        justify-content:center;
    }

    .mantenimiento{
        max-width:380px;
        margin-bottom:20px;
    }
}