/* =========================================================
   SERVICIOS — HOST-N-WEB N2
   ========================================================= */


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

.hnw-services-hero {
    position:relative;
    padding:165px 0 92px;

    background:
        radial-gradient(
            circle at 72% 42%,
            #fff 0%,
            #f0f9ff 42%,
            #f0f9ff 100%
        );

    overflow:hidden;
}

.hnw-services-hero__inner {
    max-width:950px;
    margin:0 auto;

    text-align:center;
}

.hnw-services-hero__eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-bottom:22px;

    color:#20517b;

    font-family:'Poppins',sans-serif;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:1.1px;
    text-transform:uppercase;
}

.hnw-services-hero__eyebrow::before {
    content:"";

    width:6px;
    height:6px;
    flex:0 0 6px;

    border-radius:50%;
    background:#F25555;
}

.hnw-services-hero h1 {
    max-width:900px;
    margin:0 auto;

    color:#0F2738;

    font-family:'Poppins',sans-serif;
    font-size:clamp(42px,5vw,60px);
    line-height:1.04;
    font-weight:800;
    letter-spacing:-2px;
}

.hnw-services-hero h1 span {
    display:inline;
    margin-top:0;
    color:#20517b;
}

.hnw-services-hero__intro {
    max-width:710px;
    margin:28px auto 0;

    color:#607386;

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

.hnw-services-hero__nav {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:37px;

    color:#7b8b98;

    font-size:10px;
    line-height:1;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.hnw-services-hero__nav i {
    display:block;

    width:3px;
    height:3px;

    border-radius:50%;
    background:#F25555;
}


/* =========================================================
   LISTADO
   ========================================================= */

.hnw-services-list {
    background:#fff;
}

.hnw-service-row {
    position:relative;

    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
    gap:85px;
    align-items:center;

    min-height:610px;

    padding:95px 0;

    border-bottom:1px solid #e7edf2;
}

.hnw-service-row:last-child {
    border-bottom:0;
}


/* Alternancia */

.hnw-service-row--reverse .hnw-service-row__content {
    order:2;
}

.hnw-service-row--reverse .hnw-service-row__visual {
    order:1;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.hnw-service-row__content {
    position:relative;

    min-width:0;

    padding-left:40px;
}

.hnw-service-row__index {
    position:absolute;

    left:0;
    top:-6px;

    color:#d9e2e9;

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

.hnw-service-row__content .agency7-heading {
    margin-bottom:18px;
}

.hnw-service-row__content h2 {
    max-width:590px;

    margin:0 0 24px;

    color:#0F2738;

    font-family:'Poppins',sans-serif;
    font-size:38px;
    line-height:1.13;
    font-weight:700;
    letter-spacing:-1.1px;
}

.hnw-service-row__content p {
    max-width:620px;

    margin:0 0 19px;

    color:#64748b;

    font-size:14px;
    line-height:1.72;

    text-align:left;
}

.hnw-service-row__lead {
    margin-bottom:9px !important;

    color:#405466 !important;
}

.hnw-service-row__lead strong {
    color:#263f51;
    font-weight:700;
}


/* BULLETS */

.hnw-service-row__content .list_custom {
    max-width:620px;

    margin:27px 0 31px;

    padding:0;

    list-style:none;
}

.hnw-service-row__content .list_custom li {
    position:relative;

    margin:0 0 10px;

    color:#536576;

    font-size:13px;
    line-height:1.55;

    text-align:left;
}

.hnw-service-row__content .list_custom li:last-child {
    margin-bottom:0;
}

.hnw-service-row__content .list_custom i {
    margin-right:7px;
}


/* CTA */

.hnw-service-row__content .button {
    margin:0 !important;
}


/* =========================================================
   VISUAL
   ========================================================= */

.hnw-service-row__visual {
    position:relative;

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

    min-width:0;
}

.hnw-service-row__visual::before {
    content:"";

    position:absolute;

    width:82%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(240,249,255,.95) 0%,
            rgba(240,249,255,.45) 54%,
            rgba(240,249,255,0) 72%
        );
}

.hnw-service-row__visual img {
    position:relative;
    z-index:2;

    display:block;

    width:100%;
    max-width:500px;
    height:auto;

    margin:0 auto;

    -webkit-mask-image:
        radial-gradient(
            ellipse 50% 50% at 50% 50%,
            #000 80%,
            transparent 96%
        );

    mask-image:
        radial-gradient(
            ellipse 50% 50% at 50% 50%,
            #000 80%,
            transparent 96%
        );

    filter:
        drop-shadow(
            0 18px 32px rgba(15,39,56,.07)
        );
}


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

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

    .hnw-services-hero {
        padding:145px 0 75px;
    }

    .hnw-services-hero h1 {
        font-size:46px;
    }

    .hnw-service-row {
        grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);

        gap:45px;

        min-height:auto;

        padding:75px 0;
    }

    .hnw-service-row__content {
        padding-left:32px;
    }

    .hnw-service-row__content h2 {
        font-size:31px;
    }

    .hnw-service-row__visual img {
        max-width:380px;
    }

}


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

@media only screen and (max-width:766.98px) {

    .hnw-services-hero {
        padding:120px 0 58px;
    }

    .hnw-services-hero__inner {
        text-align:center;
    }

    .hnw-services-hero__eyebrow {
        margin-bottom:17px;
    }

    .hnw-services-hero h1 {
        font-size:36px;
        line-height:1.08;
        letter-spacing:-1.1px;
    }

    .hnw-services-hero h1 span {
        display:inline;
    }

    .hnw-services-hero__intro {
        margin-top:22px;

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

    .hnw-services-hero__nav {
        gap:8px;

        margin-top:28px;

        font-size:8px;
    }


    /* FILAS */

    .hnw-service-row,
    .hnw-service-row--reverse {
        display:flex;
        flex-direction:column;

        gap:27px;

        min-height:0;

        padding:62px 0;
    }

    .hnw-service-row .hnw-service-row__visual,
    .hnw-service-row--reverse .hnw-service-row__visual {
        order:-1 !important;
    }

    .hnw-service-row .hnw-service-row__content,
    .hnw-service-row--reverse .hnw-service-row__content {
        order:1 !important;
    }


    /* TEXTO */

    .hnw-service-row__content {
        width:100%;

        padding-left:0;

        text-align:center;
    }

    .hnw-service-row__index {
        position:static;

        display:block;

        margin:0 auto 15px;

        color:#b9c7d1;

        font-size:23px;
    }

    .hnw-service-row__content .agency7-heading {
        margin-bottom:17px;
    }

    .hnw-service-row__content h2 {
        margin:0 auto 21px;

        font-size:29px;
        line-height:1.16;
        letter-spacing:-.7px;
    }


    /* En móvil el visual aparece inmediatamente
       después del bloque principal */

    .hnw-service-row__visual {
        order:-1;

        width:100%;

        margin-bottom:4px;
    }

    .hnw-service-row__content {
        order:1;
    }

    .hnw-service-row__visual img {
        width:82%;
        max-width:330px;
    }


    /* TEXTO Y LISTAS */

    .hnw-service-row__content p {
        margin-left:auto;
        margin-right:auto;

        font-size:13px;
        line-height:1.65;

        text-align:left;
    }

    .hnw-service-row__lead {
        text-align:center !important;
    }

    .hnw-service-row__content .list_custom {
        margin:24px auto 28px;
    }

    .hnw-service-row__content .list_custom li {
        font-size:12px;
    }

}


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

@media only screen and (max-width:430px) {

    .hnw-services-hero {
        padding-top:110px;
    }

    .hnw-services-hero h1 {
        font-size:32px;
    }

    .hnw-services-hero__nav {
        max-width:300px;
        margin-left:auto;
        margin-right:auto;
    }

    .hnw-service-row {
        padding:54px 0;
    }

    .hnw-service-row__content h2 {
        font-size:27px;
    }

}

/* =========================================================
   SERVICIOS — CIERRE / ESTRATEGIA CONECTADA
   ========================================================= */

.hnw-services-close {
    position:relative;

    padding:105px 0;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(32,81,123,.28) 0%,
            rgba(32,81,123,0) 36%
        ),
        linear-gradient(
            180deg,
            #1a364d 0%,
            #030b11 100%
        );

    color:#fff;

    overflow:hidden;
}

.hnw-services-close__layout {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:100px;
    align-items:center;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.hnw-services-close__content {
    min-width:0;
}

.hnw-services-close__eyebrow {
    display:block;

    margin-bottom:18px;

    color:#F25555;

    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.hnw-services-close__content h2 {
    max-width:650px;

    margin:0;

    color:#fff;

    font-family:'Poppins',sans-serif;
    font-size:43px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-1.3px;
}

.hnw-services-close__content h2 span {
    display:block;

    color:#9bc6e4;

    font-weight:500;
}

.hnw-services-close__content > p {
    max-width:600px;

    margin:27px 0 0;

    color:rgba(255,255,255,.58);

    font-size:14px;
    line-height:1.75;
}


/* =========================================================
   BOTONES
   ========================================================= */

.hnw-services-close__actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:38px;
}

.hnw-services-close__btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:48px;

    padding:0 25px;

    border-radius:7px;

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

    text-decoration:none !important;

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

.hnw-services-close__btn--primary {
    border:1px solid #F25555;

    background:#F25555;

    color:#fff !important;
}

.hnw-services-close__btn--primary:hover {
    background:#df4747;
    border-color:#df4747;

    color:#fff !important;

    transform:translateY(-2px);
}

.hnw-services-close__btn--secondary {
    border:1px solid rgba(255,255,255,.25);

    background:transparent;

    color:#fff !important;
}

.hnw-services-close__btn--secondary:hover {
    border-color:#fff;

    background:#fff;

    color:#0F2738 !important;

    transform:translateY(-2px);
}


/* =========================================================
   SISTEMA
   ========================================================= */

.hnw-services-close__system {
    min-width:0;

    padding-left:42px;

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

.hnw-services-close__step {
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    gap:20px;
    align-items:center;
}

.hnw-services-close__step > span {
    display:flex;
    align-items:center;
    justify-content:center;

    width:52px;
    height:52px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;

    color:#F25555;

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

.hnw-services-close__step small {
    display:block;

    margin-bottom:5px;

    color:rgba(255,255,255,.35);

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

.hnw-services-close__step strong {
    display:block;

    color:#fff;

    font-family:'Poppins',sans-serif;
    font-size:22px;
    line-height:1.15;
    font-weight:700;
}

.hnw-services-close__step p {
    margin:6px 0 0;

    color:rgba(255,255,255,.50);

    font-size:12px;
    line-height:1.5;
}

.hnw-services-close__connector {
    width:52px;

    padding:10px 0;

    color:rgba(255,255,255,.22);

    font-size:18px;
    line-height:1;

    text-align:center;
}


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

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

    .hnw-services-close {
        padding:90px 0;
    }

    .hnw-services-close__layout {
        grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
        gap:55px;
    }

    .hnw-services-close__content h2 {
        font-size:36px;
    }

    .hnw-services-close__system {
        padding-left:30px;
    }

}


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

@media only screen and (max-width:766.98px) {

    .hnw-services-close {
        padding:75px 0 80px;
    }

    .hnw-services-close__layout {
        display:block;
    }

    .hnw-services-close__content {
        text-align:center;
    }

    .hnw-services-close__content h2 {
        margin-left:auto;
        margin-right:auto;

        font-size:31px;
        line-height:1.16;
        letter-spacing:-.8px;
    }

    .hnw-services-close__content h2 span {
        display:inline;
    }

    .hnw-services-close__content > p {
        margin-left:auto;
        margin-right:auto;

        font-size:13px;
    }

    .hnw-services-close__actions {
        flex-direction:column;

        margin-top:30px;
    }

    .hnw-services-close__btn {
        width:100%;
        max-width:320px;
    }

    .hnw-services-close__system {
        max-width:420px;

        margin:55px auto 0;
        padding:38px 0 0;

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

        text-align:left;
    }

    .hnw-services-close__step {
        grid-template-columns:48px minmax(0,1fr);
        gap:17px;
    }

    .hnw-services-close__step > span {
        width:48px;
        height:48px;
    }

    .hnw-services-close__connector {
        width:48px;
    }

    .hnw-services-close__step strong {
        font-size:20px;
    }

}