/* =========================
   CONTACTO
========================= */

.contacto{
    padding:40px 8% 100px 8%;
    background:#f8f8f8;
}

.contacto-contenedor{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.contacto-info h2{
    font-size:48px;
    line-height:1.1;
    color:#1e1e1e;
    margin-top:15px;
    margin-bottom:20px;
}

.contacto-info p{
    font-size:18px;
    line-height:1.7;
    color:#666;
    margin-bottom:35px;
}

.contacto-tag{
    display:inline-block;
    background:#dff5e7;
    color:#2f7d57;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
}

.contacto-datos{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contacto-item{
    background:white;
    padding:18px 22px;
    border-radius:18px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.contacto-item strong{
    display:block;
    color:#222;
    margin-bottom:6px;
    font-size:15px;
}

.contacto-item span{
    color:#666;
    font-size:15px;
}

/* FORMULARIO */

.contacto-formulario{
    background:white;
    padding:40px;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);

    display:flex;
    flex-direction:column;
    gap:20px;
}

.grupo-input{
    display:flex;
    flex-direction:column;
}

.grupo-input label{
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#333;
}

.grupo-input input,
.grupo-input textarea{
    width:100%;
    border:none;
    background:#f3f3f3;
    border-radius:14px;
    padding:16px;
    font-size:15px;
    outline:none;
    transition:0.3s;
}

.grupo-input input:focus,
.grupo-input textarea:focus{
    background:white;
    box-shadow:0 0 0 3px rgba(82, 143, 92, 0.15);
}

.btn-contacto{
    border:none;
    background:#5d8f69;
    color:white;
    padding:16px;
    border-radius:14px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.btn-contacto:hover{
    transform:translateY(-2px);
    background:#4f7d5a;
}

/* RESPONSIVE */

@media(max-width:900px){

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

    .contacto-info h2{
        font-size:36px;
    }

}