body{padding-top:120px; background:#f5f5f5; gap:20px;}

header{position:fixed; top:0; left:0; width:100%; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; padding:18px 35px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.05); z-index:9999;}
		
		.logo-btn img{ width:260px; height:auto;  cursor:pointer; transition:.3s; padding-left: 20px;}
		.logo-btn img:hover{ transform:scale(1.05);}

		#menu-toggle,
		.menu-icon{display:none;}
		
nav{margin-left:auto;}		
		
		nav ul{display:flex; gap:25px; list-style:none; align-items:center;}
		nav a{text-decoration:none; color:#004FDE; font-size:20px; transition:.3s; font-family:'Manrope', sans-serif; font-weight:600;}
		nav a:hover{font-weight:900; color:#36b34a;}
		
section{width: auto; height: auto;}
		
		

	.contacto{
    width:85%;
    max-width:1400px;
    margin:20px auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.contacto-info h1{
    font-family:"Manrope", sans-serif;
    font-size:70px;
    color:#004FDE;
    margin-bottom:20px;
}

.contacto-info p{
    font-family:"Outfit", sans-serif;
    font-size:34px;
    line-height:1.4;
    color:#333;
    margin-bottom:50px;
}

.redes{
    display:flex;
    gap:25px;
}

.redes a{
    transition:.3s;
}

.redes a:hover{
    transform:translateY(-5px);
}

.redes img{
    width:80px;
    height:80px;
}

.contacto-formulario{
    background:white;
    padding:40px;
    border-radius:25px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.contacto-formulario form{
    display:flex;
    flex-direction:column;
}

.contacto-formulario label{
    font-family:"Manrope", sans-serif;
    font-size:22px;
    color:#004FDE;
    margin-bottom:8px;
}

.contacto-formulario input,
.contacto-formulario textarea{

    border:2px solid #004FDE;
    border-radius:10px;

    padding:14px;

    margin-bottom:20px;

    font-size:18px;

    font-family:"Outfit", sans-serif;

    outline:none;
}

.contacto-formulario input:focus,
.contacto-formulario textarea:focus{

    border-color:#36B34A;
}

.contacto-formulario button{

    width:180px;

    align-self:flex-end;

    border:none;

    background:#004FDE;

    color:white;

    padding:15px 30px;

    border-radius:12px;

    font-family:"Manrope", sans-serif;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.contacto-formulario button:hover{

    background:#36B34A;

    transform:scale(1.05);
}
		


footer{ background:#004FDE; color:white; text-align:center; padding:30px; margin-top:300px; font-family:'Manrope', sans-serif; font-weight:600;position:relative;}
html{scroll-behavior:smooth;}

#menu-toggle,
.menu-icon{
    display:none;
}


@media screen and (max-width:768px){

    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        padding-top:90px;
    }

    header{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        padding:15px 20px;
    }

    .logo-btn img{
        width:170px;
        padding-left:0;
    }

    .menu-icon{
        display:block;
        font-size:32px;
        color:#004FDE;
        cursor:pointer;
        font-weight:800;
    }

    #menu-toggle{
        display:none;
    }

    nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:white;
        box-shadow:0 8px 18px rgba(0,0,0,.08);
        display:none;
        margin-left:0;
        z-index:9999;
    }

    nav ul{
        flex-direction:column;
        gap:15px;
        padding:20px 0;
        margin:0;
    }

    nav a{
        font-size:16px;
    }

    #menu-toggle:checked ~ nav{
        display:block;
    }

    .contacto{
        width:90%;
        grid-template-columns:1fr;
        gap:40px;
        margin:40px auto;
    }

    .contacto-info{
        text-align:center;
    }

    .contacto-info h1{
        font-size:42px;
    }

    .contacto-info p{
        font-size:22px;
    }

    .redes{
        justify-content:center;
        flex-wrap:wrap;
    }

    .redes img{
        width:60px;
        height:60px;
    }

    .contacto-formulario{
        padding:25px;
    }

    .contacto-formulario button{
        width:100%;
    }
}