body{
margin:0;
font-family:'Segoe UI',Arial;
background: radial-gradient(circle at top, #0f1c2e, #050a14);
color:white;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 40px;
background:rgba(5,10,20,0.8);
backdrop-filter: blur(12px);
border-bottom:1px solid rgba(0,229,255,0.3);
position:sticky;
top:0;
z-index:100;
}

.logo img{
height:65px;
transition:0.3s;
}

.logo img:hover{
transform:scale(1.08);
}

.menu{
display:flex;
gap:30px;
list-style:none;
}

.menu a{
text-decoration:none;
color:white;
font-weight:500;
position:relative;
}

.menu a::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0%;
height:2px;
background:#00e5ff;
transition:0.3s;
}

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

/* CONTACTO */

.contacto-container{
padding:100px 20px;
max-width:1100px;
margin:auto;
text-align:center;
}

.contacto-container h1{
font-size:42px;
margin-bottom:10px;
}

.contacto-container p{
color:#9fb3c8;
margin-bottom:50px;
}

/* GRID */

.contacto-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:stretch;
}

/* INFO (TARJETA IZQUIERDA) */

.contacto-info{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(12px);
padding:35px;
border-radius:15px;
text-align:left;
border:1px solid rgba(0,229,255,0.2);
transition:0.3s;
}

.contacto-info:hover{
transform:translateY(-5px);
box-shadow:0 0 20px rgba(0,229,255,0.2);
}

.contacto-info p{
margin:12px 0;
color:#c7d5e0;
}

/* FORMULARIO */

.contacto-form{
display:flex;
flex-direction:column;
gap:18px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(12px);
padding:35px;
border-radius:15px;
border:1px solid rgba(0,229,255,0.2);
}

/* INPUTS */

.contacto-form input,
.contacto-form textarea{
padding:14px;
border:none;
border-radius:10px;
background:#0f1c2e;
color:white;
outline:none;
transition:0.3s;
box-shadow:0 0 10px rgba(0,229,255,0.1);
}

.contacto-form input:focus,
.contacto-form textarea:focus{
box-shadow:0 0 15px rgba(0,229,255,0.5);
}

/* TEXTAREA */

.contacto-form textarea{
height:130px;
resize:none;
}

/* BOTÓN */

.contacto-form button{
background:linear-gradient(90deg,#00e5ff,#00bcd4);
border:none;
padding:14px;
border-radius:10px;
cursor:pointer;
font-weight:bold;
color:#02131f;
transition:0.3s;
}

.contacto-form button:hover{
transform:scale(1.05);
box-shadow:0 0 15px rgba(0,229,255,0.6);
}

/* RESPONSIVE */

@media(max-width:768px){

.contacto-grid{
grid-template-columns:1fr;
}

.contacto-form,
.contacto-info{
padding:25px;
}

}