*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

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

/* LADO IZQUIERDO */

.left{
width:50%;
background:url("https://amequipodigital.com/wp-content/uploads/2026/03/fondo-scaled.jpg") center/cover no-repeat;
color:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
position:relative;
padding:20px;
}

.left::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.45);
}

.left-content{
position:relative;
z-index:2;
}

.left h1{
font-size:48px;
margin-bottom:15px;
letter-spacing:2px;
}

.left p{
opacity:0.9;

}
.logo{
width:120px;
margin-bottom:30px;
filter:brightness(0) invert(2);
}
.contact-btn{

display:inline-block;
margin-top:25px;
padding:12px 28px;
border:1px solid white;
color:white;
text-decoration:none;
letter-spacing:2px;
font-size:13px;
transition:all .3s;
}

.contact-btn:hover{

background:white;
color:#333;

}

/* MENU */

.menu{
position:absolute;
top:40px;
right:40px;
z-index:3;
}

.menu a{
margin-left:25px;
cursor:pointer;
text-decoration:none;
color:white;
font-size:14px;
letter-spacing:2px;
position:relative;
padding-bottom:6px;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:2px;
background:white;
transition:0.3s;
}

.menu a.active::after{
width:100%;
}

.menu a:hover::after{
width:100%;
}

/* LADO DERECHO */

.right{
width:50%;
display:flex;
align-items:center;
justify-content:center;
background:#f1f1f1;
padding:20px;
}

/* PANEL */

.panel{
max-width:550px;
width:100%;
}

/* ABOUT */

.about h2{
margin-bottom:20px;
text-align: center;
position: relative;
}

.about h2::before{
content:"";
display:block;
width:40px;
height:1px;
background:#d9d9d9;
margin-bottom:15px;
}

.about p{
line-height:1.6;
color:#555;
}

/* FORM */

form{
display:flex;
flex-direction:column;
gap:15px;
margin-top:20px;
}

input, textarea{
padding:12px;
border:1px solid #ddd;
border-radius:4px;
font-size:14px;
}

textarea{
height:120px;
resize:none;
}

button{
padding:12px;
background:#7a55ff;
border:none;
color:white;
border-radius:4px;
cursor:pointer;
}

button:hover{
background:#6948e6;
}

/* RESPONSIVE */

@media (max-width:900px){

.container{
flex-direction:column;
}

.left,
.right{
width:100%;
height:50vh;
}

}