/* =========================================================
   CONTACTO DE SERVICIOS
========================================================= */

.services-contact-section{
    width:100%;
    padding:0 0 110px;

    background:#f5f7fa;
}

.services-contact{
    width:100%;

    display:grid;
    grid-template-columns:minmax(320px, .8fr) minmax(0, 1.45fr);

    border:1px solid #d8e0e8;
    background:#ffffff;
}

/* =========================================================
   INFORMACIÓN DE CONTACTO
========================================================= */

.services-contact__information{
    min-height:620px;
    padding:64px 54px;

    display:flex;
    flex-direction:column;

    background:#43566f;
    color:#ffffff;
}

.services-contact__eyebrow{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:24px;

    color:#ffffff;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.services-contact__eyebrow::before{
    content:"";

    width:32px;
    height:2px;

    display:block;

    background:#ffffff;
}

.services-contact__information h2{
    max-width:480px;
    margin:0;

    color:#ffffff;
    font-size:clamp(38px, 3.4vw, 56px);
    line-height:1.02;
    font-weight:800;
    letter-spacing:-.04em;
}

.services-contact__description{
    max-width:520px;
    margin:28px 0 0;

    color:rgba(255, 255, 255, .78);
    font-size:16px;
    line-height:1.75;
}

.services-contact__data{
    margin-top:auto;
    padding-top:54px;

    display:grid;
    gap:0;
}

.services-contact__item{
    padding:20px 0;

    border-top:1px solid rgba(255, 255, 255, .18);
}

.services-contact__item:last-child{
    border-bottom:1px solid rgba(255, 255, 255, .18);
}

.services-contact__item span{
    display:block;
    margin-bottom:8px;

    color:rgba(255, 255, 255, .62);
    font-size:11px;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.services-contact__item a,
.services-contact__item p{
    margin:0;

    color:#ffffff;
    font-size:16px;
    line-height:1.5;
    font-weight:700;
    text-decoration:none;
}

.services-contact__item a:hover{
    text-decoration:underline;
    text-underline-offset:4px;
}

/* =========================================================
   CONTENEDOR DEL FORMULARIO
========================================================= */

.services-contact__form-container{
    padding:64px 60px;

    background:#ffffff;
}

.services-contact__form-header{
    margin-bottom:38px;
}

.services-contact__form-header > span{
    display:block;
    margin-bottom:12px;

    color:#43566f;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.services-contact__form-header h3{
    margin:0;

    color:#071426;
    font-size:clamp(32px, 2.8vw, 36px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.035em;
}

.services-contact__form-header p{
    margin:16px 0 0;

    color:#6b7c91;
    font-size:15px;
    line-height:1.7;
}

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

.services-contact__form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:24px;
    row-gap:24px;
}

.services-contact__field{
    min-width:0;
}

.services-contact__field--full{
    grid-column:1 / -1;
}

.services-contact__field label{
    display:block;
    margin-bottom:10px;

    color:#17243a;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.services-contact__field input,
.services-contact__field select,
.services-contact__field textarea{
    width:100%;

    border:1px solid #d7dee7;
    border-radius:0;
    outline:none;

    background:#f8fafc;
    color:#071426;

    font:inherit;
    font-size:15px;

    transition:
        border-color .2s ease,
        background-color .2s ease;
}

.services-contact__field input,
.services-contact__field select{
    height:54px;
    padding:0 16px;
}

.services-contact__field textarea{
    min-height:150px;
    padding:16px;

    resize:vertical;
}

.services-contact__field input::placeholder,
.services-contact__field textarea::placeholder{
    color:#9aa7b7;
}

.services-contact__field input:focus,
.services-contact__field select:focus,
.services-contact__field textarea:focus{
    border-color:#43566f;
    background:#ffffff;
}

/* =========================================================
   ACCIONES DEL FORMULARIO
========================================================= */

.services-contact__actions{
    grid-column:1 / -1;

    padding-top:10px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.services-contact__actions p{
    max-width:340px;
    margin:0;

    color:#7b899a;
    font-size:12px;
    line-height:1.5;
}

.services-contact__submit{
    min-width:220px;
    height:56px;
    padding:0 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;

    border:1px solid #071426;
    border-radius:0;

    background:#071426;
    color:#ffffff;

    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;

    cursor:pointer;

    transition:
        background-color .2s ease,
        color .2s ease;
}

.services-contact__submit:hover{
    background:#ffffff;
    color:#071426;
}

.services-contact__submit span:last-child{
    font-size:22px;
    font-weight:400;
}

.services-contact__phones{
    display:grid;
    gap:10px;
}

.services-contact__phones a{
    display:block;
    color:#ffffff;
    text-decoration:none;
}

.services-contact__phones a:hover{
    text-decoration:underline;
    text-underline-offset:4px;
}




/* =========================================================
   NOTEBOOK
   1101px a 1500px
========================================================= */

@media (min-width:1024px) and (max-width:1799px){

    .services-contact-section{
        padding-bottom:90px;
    }

    .services-contact{
        grid-template-columns:
            minmax(340px, .78fr)
            minmax(0, 1.32fr);
    }

    /* PANEL IZQUIERDO */

    .services-contact__information{
        min-height:570px;
        padding:50px 42px;
    }

    .services-contact__eyebrow{
        margin-bottom:20px;
        font-size:11px;
    }

    .services-contact__information h2{
        max-width:410px;

        font-size:clamp(46px, 4.5vw, 50px);
        line-height:1.03;
    }

    .services-contact__description{
        max-width:440px;
        margin-top:22px;

        font-size:15px;
        line-height:1.65;
    }

    .services-contact__data{
        padding-top:40px;
    }

    .services-contact__item{
        padding:16px 0;
    }

    .services-contact__item a,
    .services-contact__item p{
        font-size:14px;
        line-height:1.45;
    }

    .services-contact__phones{
        gap:7px;
    }

    /* PANEL DEL FORMULARIO */

    .services-contact__form-container{
        padding:50px 46px;
    }

    .services-contact__form-header{
        margin-bottom:30px;
    }

    .services-contact__form-header h3{
        font-size:clamp(34px, 3vw, 33px);
    }

    .services-contact__form-header p{
        margin-top:12px;
        font-size:14px;
    }

    .services-contact__form{
        column-gap:18px;
        row-gap:20px;
    }

    .services-contact__field label{
        margin-bottom:8px;
        font-size:11px;
    }

    .services-contact__field input,
    .services-contact__field select{
        height:50px;
        padding:0 14px;
    }

    .services-contact__field textarea{
        min-height:135px;
        padding:14px;
    }

    .services-contact__field input,
    .services-contact__field select,
    .services-contact__field textarea{
        font-size:14px;
    }

    .services-contact__actions{
        gap:18px;
        padding-top:6px;
    }

    .services-contact__actions p{
        max-width:300px;
        font-size:11px;
    }

    .services-contact__submit{
        min-width:205px;
        height:52px;
        padding:0 19px;

        gap:20px;
        font-size:11px;
    }

}









/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .services-contact{
        grid-template-columns:1fr;
    }

    .services-contact__information{
        min-height:auto;
        padding:52px 44px;
    }

    .services-contact__description{
        max-width:720px;
    }

    .services-contact__data{
        margin-top:42px;

        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:24px;
    }

    .services-contact__item{
        border-bottom:1px solid rgba(255, 255, 255, .18);
    }

    .services-contact__form-container{
        padding:52px 44px;
    }

}

/* =========================================================
   MÓVIL
========================================================= */

@media (max-width:700px){

    .services-contact-section{
        padding-bottom:70px;
    }

    .services-contact__information{
        padding:42px 24px;
    }

    .services-contact__information h2{
        font-size:38px;
    }

    .services-contact__description{
        margin-top:22px;

        font-size:15px;
        line-height:1.7;
    }

    .services-contact__data{
        grid-template-columns:1fr;
        gap:0;

        margin-top:36px;
    }

    .services-contact__form-container{
        padding:42px 24px;
    }

    .services-contact__form{
        grid-template-columns:1fr;
        gap:20px;
    }

    .services-contact__field--full,
    .services-contact__actions{
        grid-column:auto;
    }

    .services-contact__actions{
        align-items:stretch;
        flex-direction:column;
    }

    .services-contact__submit{
        width:100%;
    }

}