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

.contacto-hero{

    margin-top:70px;

    padding:85px 20px;

    min-height:300px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    background:
        linear-gradient(rgba(15,139,131,.78),rgba(15,139,131,.78)),
        url("../img/herocontacto.jpg") center center/cover no-repeat;

    color:#fff;

}

.contacto-hero h1{

    font-family:"Playfair Display",serif;

    font-size:4rem;

    margin-bottom:20px;

}

.contacto-hero p{

    max-width:700px;

    margin:auto;

    font-size:1.15rem;

    line-height:1.8;

    opacity:.95;

}

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

.contacto{

    width:90%;

    max-width:1200px;

    margin:90px auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:45px;

    align-items:start;

}

/*====================================
    INFORMACIÓN
=====================================*/

.contacto-info{

    background:#fff;

    border-radius:25px;

    padding:40px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.contacto-info h2{

    font-family:"Playfair Display",serif;

    color:#1f2937;

    font-size:2rem;

    margin-bottom:20px;

}

.contacto-info > p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

}

.dato{

    display:flex;

    gap:18px;

    margin-bottom:28px;

    align-items:flex-start;

}

.dato i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(24,181,164,.12);

    color:#18B5A4;

    font-size:1.5rem;

}

.dato h4{

    color:#1f2937;

    margin-bottom:6px;

}

.dato span{

    color:#666;

    line-height:1.6;

}

/*====================================
    REDES SOCIALES
=====================================*/

.redes-contacto{

    display:flex;

    gap:15px;

    margin-top:30px;

}

.redes-contacto a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#18B5A4;

    color:#fff;

    font-size:1.2rem;

    transition:.3s;

}

.redes-contacto a:hover{

    transform:translateY(-5px);

    background:#0F8B83;

}

/*====================================
    FORMULARIO
=====================================*/

.formulario{

    background:#fff;

    padding:45px;

    border-radius:25px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.formulario h2{

    font-family:"Playfair Display",serif;

    font-size:2rem;

    color:#1f2937;

    margin-bottom:10px;

}

.formulario > p{

    color:#666;

    margin-bottom:35px;

    line-height:1.8;

}

.campo{

    margin-bottom:22px;

}

.campo label{

    display:block;

    margin-bottom:8px;

    color:#333;

    font-weight:600;

}

.campo input,
.campo textarea,
.campo select{

    width:100%;

    padding:15px 18px;

    border:1px solid #dcdcdc;

    border-radius:12px;

    outline:none;

    font-size:1rem;

    font-family:inherit;

    background:#fff;

    transition:.3s;

}

.campo input:focus,
.campo textarea:focus,
.campo select:focus{

    border-color:#18B5A4;

    box-shadow:0 0 0 4px rgba(24,181,164,.12);

}

.campo textarea{

    resize:none;

}

.formulario button{

    width:100%;

    border:none;

    cursor:pointer;

    padding:16px;

    border-radius:50px;

    background:linear-gradient(135deg,#0F8B83,#18B5A4);

    color:#fff;

    font-size:1rem;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    transition:.35s;

}

.formulario button:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(15,139,131,.30);

}

/*====================================
    MAPA
=====================================*/

.mapa{

    width:90%;

    max-width:1200px;

    margin:0 auto 100px;

    text-align:center;

}

.mapa h2{

    font-family:"Playfair Display",serif;

    font-size:2.8rem;

    color:#1f2937;

    margin-bottom:15px;

}

.mapa p{

    color:#666;

    margin-bottom:40px;

}

.mapa-box{

    overflow:hidden;

    border-radius:25px;

    box-shadow:0 15px 35px rgba(0,0,0,.10);

}

.mapa-box iframe{

    width:100%;

    height:450px;

    border:none;

}

/*====================================
    RESPONSIVE
=====================================*/

@media(max-width:900px){

    .contacto{

        grid-template-columns:1fr;

    }

    .contacto-info,
    .formulario{

        padding:30px;

    }

    .contacto-hero h1{

        font-size:3rem;

    }

}

@media(max-width:600px){

    .contacto-hero{

        padding:90px 20px;

    }

    .contacto-hero h1{

        font-size:2.4rem;

    }

    .mapa-box iframe{

        height:320px;

    }

}