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


.contact-hero{

    background:#054F4F;

    color:white;

    text-align:center;

    padding:150px 20px 70px;

}


.contact-hero h1{

    font-size:clamp(2.5rem,5vw,4rem);

    margin-bottom:20px;

}



.contact-hero p{

    font-size:1.2rem;

    line-height:1.6;

}




/* CONTENEDOR */


.contact-container{

    max-width:1100px;

    margin:70px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}





.contact-info,

.contact-form{


    background:white;

    padding:40px;

    border-radius:20px;


    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}




.contact-info h2,

.contact-form h2{

    color:#054F4F;

    margin-bottom:25px;

}





.contact-item{

    margin-top:30px;

}



.contact-item h3{

    color:#C9222F;

    margin-bottom:10px;

}



.contact-item a{

    color:#054F4F;

}





/* FORMULARIO */


.contact-form form{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.contact-form label{

    font-weight:bold;

}



.contact-form input,

.contact-form textarea{


    width:100%;

    padding:14px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:1rem;

}



.contact-form button{


    margin-top:20px;

    padding:15px;


    border:none;

    border-radius:30px;


    background:#C9222F;

    color:white;


    font-weight:bold;

    cursor:pointer;

}



.contact-form button:hover{

    background:#A61B26;

}





/* RESPONSIVE */


@media(max-width:800px){


.contact-container{

    grid-template-columns:1fr;

}


.contact-info,

.contact-form{

    padding:25px;

}


}