/* =========================================================
   CONTACTO — RECURSOS
   Host-n-Web N2
   ========================================================= */


/* =========================================================
   01 — QUÉ SUCEDE DESPUÉS DE CONTACTARNOS
   ========================================================= */

.hnw-contact-flow {
    padding:80px 0 85px;
    background:#fff;
}

.hnw-contact-flow__layout {
    display:grid;
    grid-template-columns:1fr;
    gap:48px;
}


/* CABECERA */

.hnw-contact-flow__head {
    max-width:620px;
}

.hnw-contact-flow__eyebrow {
    display:inline-block;
    margin-bottom:16px;
    padding:5px 12px;

    border-radius:50px;
    background:#f1f5f9;

    color:#475569;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.hnw-contact-flow__head h2 {
    margin:0;

    color:#0F2738;
    font-family:'Poppins',sans-serif;
    font-size:31px;
    line-height:1.16;
    font-weight:700;
    letter-spacing:-.8px;
}

.hnw-contact-flow__head h2 span {
    display:block;
    color:#F25555;
}

.hnw-contact-flow__intro {
    max-width:500px;
    margin:20px 0 0;

    color:#687b91;
    font-size:14px;
    line-height:1.7;
}


/* TIMELINE */

.hnw-contact-flow__timeline {
    position:relative;
}

.hnw-contact-flow__step {
    position:relative;

    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:20px;

    padding:0 0 35px;
}

.hnw-contact-flow__step:last-child {
    padding-bottom:0;
}


/* LÍNEA VERTICAL */

.hnw-contact-flow__step:not(:last-child)::before {
    content:"";

    position:absolute;
    left:22px;
    top:46px;
    bottom:0;

    width:1px;

    background:#dce4ea;
}


/* NÚMERO */

.hnw-contact-flow__marker {
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border:1px solid #dce4ea;
    border-radius:50%;

    background:#fff;

    color:#F25555;
    font-size:11px;
    line-height:1;
    font-weight:800;
}


/* CONTENIDO */

.hnw-contact-flow__copy {
    padding-top:2px;
}

.hnw-contact-flow__number {
    display:block;
    margin-bottom:8px;

    color:#94a3b8;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.8px;
}

.hnw-contact-flow__step h3 {
    margin:0 0 9px;

    color:#0F2738;
    font-family:'Poppins',sans-serif;
    font-size:19px;
    line-height:1.25;
    font-weight:700;
}

.hnw-contact-flow__step p {
    max-width:510px;
    margin:0;

    color:#687b91;
    font-size:13px;
    line-height:1.65;
}

.hnw-contact-flow__step strong {
    color:#405466;
}


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

@media only screen and (min-width:767px) {

    .hnw-contact-flow {
        padding:95px 0 100px;
    }

    .hnw-contact-flow__layout {
        grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
        gap:65px;
        align-items:start;
    }

    .hnw-contact-flow__head {
        position:sticky;
        top:130px;
    }

    .hnw-contact-flow__head h2 {
        font-size:34px;
    }

    .hnw-contact-flow__step {
        grid-template-columns:52px minmax(0,1fr);
        gap:23px;
        padding-bottom:42px;
    }

    .hnw-contact-flow__marker {
        width:52px;
        height:52px;
    }

    .hnw-contact-flow__step:not(:last-child)::before {
        left:25px;
        top:52px;
    }

    .hnw-contact-flow__step h3 {
        font-size:20px;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media only screen and (min-width:992px) {

    .hnw-contact-flow {
        padding:115px 0 120px;
    }

    .hnw-contact-flow__layout {
        grid-template-columns:minmax(350px,.8fr) minmax(0,1.2fr);
        gap:105px;
    }

    .hnw-contact-flow__head h2 {
        font-size:40px;
    }

    .hnw-contact-flow__intro {
        font-size:15px;
    }

    .hnw-contact-flow__step {
        grid-template-columns:58px minmax(0,1fr);
        gap:28px;
        padding-bottom:48px;
    }

    .hnw-contact-flow__marker {
        width:58px;
        height:58px;

        font-size:12px;
    }

    .hnw-contact-flow__step:not(:last-child)::before {
        left:28px;
        top:58px;
    }

    .hnw-contact-flow__step h3 {
        font-size:22px;
    }

    .hnw-contact-flow__step p {
        font-size:14px;
    }

}


/* =========================================================
   02 — EXPERIENCIA APLICADA
   ========================================================= */

.hnw-contact-proof {
    position:relative;

    padding:78px 0 82px;

    background:
        radial-gradient(
            circle at 18% 45%,
            rgba(32,81,123,.22) 0%,
            rgba(32,81,123,0) 34%
        ),
        linear-gradient(
            180deg,
            #1a364d 0%,
            #030b11 100%
        );

    color:#fff;

    overflow:hidden;
}


/* CABECERA */

.hnw-contact-proof__head {
    max-width:680px;
    margin:0 auto 48px;
    text-align:center;
}

.hnw-contact-proof__eyebrow {
    display:block;
    margin-bottom:15px;

    color:#F25555;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:1.1px;
    text-transform:uppercase;
}

.hnw-contact-proof__head h2 {
    margin:0;

    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:30px;
    line-height:1.18;
    font-weight:700;
    letter-spacing:-.8px;
}

.hnw-contact-proof__head h2 span {
    color:#9bc6e4;
}

.hnw-contact-proof__intro {
    max-width:570px;
    margin:18px auto 0;

    color:rgba(255,255,255,.58);
    font-size:13px;
    line-height:1.7;
}


/* EVIDENCIAS */

.hnw-contact-proof__evidence {
    max-width:980px;
    margin:0 auto;

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

.hnw-contact-proof__item {
    display:grid;
    grid-template-columns:78px minmax(0,1fr);
    gap:20px;
    align-items:center;

    padding:27px 0;

    border-bottom:1px solid rgba(255,255,255,.12);
}

.hnw-contact-proof__value {
    color:#F25555;

    font-family:'Poppins',sans-serif;
    font-size:25px;
    line-height:1;
    font-weight:700;
    letter-spacing:-.6px;
}

.hnw-contact-proof__copy strong {
    display:block;
    margin-bottom:5px;

    color:#fff;
    font-size:14px;
    line-height:1.3;
    font-weight:700;
}

.hnw-contact-proof__copy span {
    display:block;

    color:rgba(255,255,255,.52);
    font-size:12px;
    line-height:1.55;
}


/* CIERRE */

.hnw-contact-proof__close {
    max-width:720px;
    margin:42px auto 0;

    text-align:center;
}

.hnw-contact-proof__close p {
    margin:0;

    color:rgba(255,255,255,.65);
    font-size:13px;
    line-height:1.65;
}

.hnw-contact-proof__close strong {
    color:#fff;
}


/* =========================================================
   TABLET — EXPERIENCIA
   ========================================================= */

@media only screen and (min-width:767px) {

    .hnw-contact-proof {
        padding:95px 0 100px;
    }

    .hnw-contact-proof__head h2 {
        font-size:38px;
    }

    .hnw-contact-proof__evidence {
        display:grid;
        grid-template-columns:repeat(3,1fr);

        border-bottom:1px solid rgba(255,255,255,.12);
    }

    .hnw-contact-proof__item {
        display:block;

        min-width:0;
        padding:34px 30px 36px;

        border-bottom:0;

        text-align:center;
    }

    .hnw-contact-proof__item:not(:last-child) {
        border-right:1px solid rgba(255,255,255,.12);
    }

    .hnw-contact-proof__value {
        margin-bottom:17px;

        font-size:30px;
    }

    .hnw-contact-proof__copy strong {
        font-size:14px;
    }

}


/* =========================================================
   DESKTOP — EXPERIENCIA
   ========================================================= */

@media only screen and (min-width:992px) {

    .hnw-contact-proof {
        padding:110px 0 105px;
    }

    .hnw-contact-proof__head {
        margin-bottom:58px;
    }

    .hnw-contact-proof__head h2 {
        font-size:42px;
    }

    .hnw-contact-proof__item {
        padding:40px 38px;
    }

    .hnw-contact-proof__value {
        font-size:34px;
    }

    .hnw-contact-proof__copy strong {
        font-size:15px;
    }

    .hnw-contact-proof__copy span {
        font-size:13px;
    }

}