/* ═══════════════════════════════════════════
   RECURSO — METODOLOGÍA / RECORRIDO
═══════════════════════════════════════════ */

.hnw-resource-methodology {
    padding:145px 0 150px;
    background:#fff;
}

.hnw-resource-methodology__head {
    margin-bottom:82px;
    align-items:flex-end;
}

.hnw-resource-methodology__heading {
    padding-right:55px;
}

.hnw-resource-methodology__badge {
    display:inline-block;
    margin-bottom:16px;
    padding:4px 12px;
    border-radius:50px;
    background:#f1f5f9;
    color:#475569;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.hnw-resource-methodology__heading h2 {
    margin:0;
    color:#0F2738;
    font-size:38px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.6px;
}

.hnw-resource-methodology__heading h2 span {
    color:#F25555;
}

.hnw-resource-methodology__intro {
    max-width:570px;
    margin:0 0 3px auto;
    color:#64748b;
    font-size:15px;
    line-height:1.75;
}

.hnw-resource-methodology__intro strong {
    color:#0F2738;
}

.hnw-resource-methodology__track {
    position:relative;
}

.hnw-resource-methodology__track::before {
    content:"";
    position:absolute;
    top:34px;
    left:16.666%;
    right:16.666%;
    height:1px;
    background:#dce4ea;
    z-index:0;
}

.hnw-resource-methodology__step {
    position:relative;
    height:100%;
    padding:0 14px;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    transform:none!important;
}

.hnw-resource-methodology__step:hover {
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    transform:none!important;
}

.hnw-resource-methodology__body {
    display:flex;
    flex-direction:column;
    min-height:325px;
    padding:30px 28px 28px;
    border:1px solid #edf1f4;
    border-radius:16px;
    background:rgba(251,253,255,.52);
    box-shadow:0 7px 24px rgba(15,39,56,.025);
    transition:
        box-shadow .28s ease,
        border-color .28s ease,
        transform .28s ease;
}

.hnw-resource-methodology__step:hover .hnw-resource-methodology__body {
    border-color:#e2e8f0;
    box-shadow:0 20px 44px rgba(15,39,56,.10);
    transform:translateY(-3px);
}

.hnw-resource-methodology__node {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    margin:0 auto 30px;
    border:1px solid #dbe4ea;
    border-radius:50%;
    background:#fff;
}

.hnw-resource-methodology__node::after {
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#F25555;
}

.hnw-resource-methodology__number {
    position:absolute;
    top:-10px;
    right:-7px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:27px;
    height:27px;
    border-radius:50%;
    background:#F25555;
    color:#fff;
    font-size:9px;
    line-height:1;
    font-weight:800;
}

.hnw-resource-methodology__type {
    display:block;
    margin-bottom:9px;
    color:#94a3b8;
    font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
    text-align:center;
    text-transform:uppercase;
}

.hnw-resource-methodology__step h3 {
    max-width:300px;
    margin:0 auto 17px;
    color:#0F2738;
    font-size:23px;
    line-height:1.25;
    font-weight:800;
    text-align:center;
}

.hnw-resource-methodology__step p {
    max-width:330px;
    margin:0 auto;
    color:#64748b;
    font-size:14px;
    line-height:1.72;
    text-align:center;
}

.hnw-resource-methodology__step p strong {
    color:#405466;
}

.hnw-resource-methodology__scope {
    width:100%;
    max-width:320px;
    margin:auto auto 0;
    padding-top:18px;
    border-top:1px solid #edf1f4;
    color:#536576;
    font-size:10px;
    line-height:1.5;
    font-weight:700;
    text-align:center;
}

.hnw-resource-methodology__result {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:72px;
}

.hnw-resource-methodology__result::before,
.hnw-resource-methodology__result::after {
    content:"";
    display:block;
    width:70px;
    height:1px;
    background:#dce4ea;
}

.hnw-resource-methodology__result span {
    color:#64748b;
    font-size:13px;
}

.hnw-resource-methodology__result strong {
    color:#0F2738;
}

@media only screen and (max-width:991px) and (min-width:767px) {
    .hnw-resource-methodology__heading {
        padding-right:30px;
    }

    .hnw-resource-methodology__heading h2 {
        font-size:34px;
    }

    .hnw-resource-methodology__step {
        padding:0 18px;
    }

    .hnw-resource-methodology__step h3 {
        font-size:20px;
    }

    .hnw-resource-methodology__step p {
        font-size:13px;
    }
}

@media only screen and (max-width:766.98px) {
    .hnw-resource-methodology {
        padding:78px 0 90px;
    }

    .hnw-resource-methodology__head {
        margin-bottom:32px;
    }

    .hnw-resource-methodology__heading {
        padding-right:0;
        text-align:center;
    }

    .hnw-resource-methodology__heading h2 {
        font-size:31px;
        line-height:1.18;
    }

    .hnw-resource-methodology__intro {
        display:none!important;
    }

    .hnw-resource-methodology__track::before {
        display:none;
    }

    .hnw-resource-methodology__step {
        height:100%;
        padding:25px 23px 22px;
        border:1px solid #e2e8f0;
        border-radius:18px;
    }

    .hnw-resource-methodology__step--01 {
        background:#fff;
    }

    .hnw-resource-methodology__step--02 {
        background:#f8fafc;
    }

    .hnw-resource-methodology__step--03 {
        background:#f6f7f8;
    }

    .hnw-resource-methodology__body {
        display:contents;
    }

    .hnw-resource-methodology__node {
        justify-content:flex-start;
        gap:8px;
        width:auto;
        height:auto;
        margin:0 0 18px;
        border:0;
        border-radius:0;
        background:transparent;
    }

    .hnw-resource-methodology__node::after {
        position:static;
        width:6px;
        height:6px;
        margin-left:0;
    }

    .hnw-resource-methodology__number {
        position:static;
        width:auto;
        height:auto;
        border-radius:0;
        background:transparent;
        color:#F25555;
        font-size:12px;
    }

    .hnw-resource-methodology__type {
        margin-bottom:8px;
        text-align:left;
    }

    .hnw-resource-methodology__step h3 {
        max-width:none;
        margin:0 0 12px;
        font-size:20px;
        line-height:1.3;
        text-align:left;
    }

    .hnw-resource-methodology__step p {
        max-width:none;
        margin:0;
        font-size:14px;
        line-height:1.65;
        text-align:left;
    }

    .hnw-resource-methodology__scope {
        max-width:none;
        margin:18px 0 0;
        padding-top:12px;
        font-size:10px;
        text-align:left;
    }

    .hnw-resource-methodology__result {
        display:none;
    }
}

/* =========================================================
   SEO — PUENTE EXACTO 767
   SOLO bloques que deben comportarse como 768
   ========================================================= */

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

    /* SISTEMA DE POSICIONAMIENTO — recuperar aire superior de tablet */
    #metodologia-seo {
        padding-top:145px !important;
    }

    /* SISTEMA DE POSICIONAMIENTO — cabecera 2 columnas */
    #metodologia-seo .hnw-resource-methodology__head > .col-md-6 {
        flex:0 0 50% !important;
        max-width:50% !important;
        width:50% !important;
    }

    /* SISTEMA DE POSICIONAMIENTO — 767–899 controlado por slider SEO */

    /* PLANES SEO — 3 columnas */
    #planes-seo .col-md-4 {
        flex:0 0 33.333333% !important;
        max-width:33.333333% !important;
        width:33.333333% !important;
    }

    /* CIERRE — "Lo que Google no entiende" */
    .hnw-landing-close .col-md-7 {
        flex:0 0 58.333333% !important;
        max-width:58.333333% !important;
        width:58.333333% !important;
    }

    .hnw-landing-close .col-md-5 {
        flex:0 0 41.666667% !important;
        max-width:41.666667% !important;
        width:41.666667% !important;
    }

}

/* =========================================================
   SEO — PRECIOS TABLET ESTRECHA
   ========================================================= */

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

    #planes-seo #price-basico,
    #planes-seo #price-corp,
    #planes-seo #price-ecomm {
        font-size:27px !important;
        line-height:1.05 !important;
        letter-spacing:-.02em !important;
    }

}

/* =========================================================
   SEO — SISTEMA DE POSICIONAMIENTO
   SLIDER TABLET 767–899
   ========================================================= */

.hnw-seo-tablet-dots {
    display:none;
}

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

    /* CABECERA — mostrar texto lateral desde 767 */
    #metodologia-seo .hnw-resource-methodology__head > .col-md-6.hide-mobile {
        display:block !important;
    }

    #metodologia-seo .hnw-resource-methodology__intro {
        display:block !important;
    }

    /* TRACK = SLIDER */
    #metodologia-seo .hnw-resource-methodology__track {
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:15px !important;

        width:80% !important;
        max-width:80% !important;

        margin-left:auto !important;
        margin-right:auto !important;
        padding:10px 0 12px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        scroll-snap-type:x mandatory !important;
        scroll-behavior:smooth;
        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }

    #metodologia-seo .hnw-resource-methodology__track::-webkit-scrollbar {
        display:none;
    }

    /* Sin línea horizontal desktop */
    #metodologia-seo .hnw-resource-methodology__track::before {
        display:none !important;
    }

    /* UNA TARJETA COMPLETA */
    #metodologia-seo .hnw-resource-methodology__track > .col-md-4 {
        flex:0 0 100% !important;
        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;

        padding-left:0 !important;
        padding-right:0 !important;
        margin:0 !important;

        scroll-snap-align:start !important;
        scroll-snap-stop:always;
    }

    /* TARJETA — formato compacto */
    #metodologia-seo .hnw-resource-methodology__step {
        height:100% !important;

        padding:25px 23px 22px !important;

        border:1px solid #e2e8f0 !important;
        border-radius:18px !important;

        background:#fff !important;
        box-shadow:none !important;
    }

    #metodologia-seo .hnw-resource-methodology__step--02 {
        background:#f8fafc !important;
    }

    #metodologia-seo .hnw-resource-methodology__step--03 {
        background:#f6f7f8 !important;
    }

    /*
       En tablet-slider usamos la composición compacta móvil.
       Así desaparece el nodo circular que se cortaba arriba.
    */
    #metodologia-seo .hnw-resource-methodology__body {
        display:contents !important;
    }

    #metodologia-seo .hnw-resource-methodology__node {
        position:relative !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;

        width:auto !important;
        height:auto !important;

        margin:0 0 18px !important;

        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
    }

    #metodologia-seo .hnw-resource-methodology__node::after {
        position:static !important;

        width:6px !important;
        height:6px !important;

        margin:0 !important;
    }

    #metodologia-seo .hnw-resource-methodology__number {
        position:static !important;

        display:block !important;

        width:auto !important;
        height:auto !important;

        border-radius:0 !important;
        background:transparent !important;

        color:#F25555 !important;

        font-size:12px !important;
        line-height:1 !important;
    }

    #metodologia-seo .hnw-resource-methodology__type {
        margin-bottom:8px !important;
        text-align:left !important;
    }

    #metodologia-seo .hnw-resource-methodology__step h3 {
        max-width:none !important;

        margin:0 0 12px !important;

        font-size:20px !important;
        line-height:1.3 !important;

        text-align:left !important;
    }

    #metodologia-seo .hnw-resource-methodology__step p {
        max-width:none !important;

        margin:0 !important;

        font-size:14px !important;
        line-height:1.65 !important;

        text-align:left !important;
    }

    #metodologia-seo .hnw-resource-methodology__scope {
        max-width:none !important;

        margin:18px 0 0 !important;
        padding-top:12px !important;

        font-size:10px !important;

        text-align:left !important;
    }

    /* PUNTOS */
    #metodologia-seo .hnw-seo-tablet-dots {
        display:flex !important;
        align-items:center;
        justify-content:center;

        gap:8px;

        width:100%;

        margin:12px 0 0;
        padding:0;
    }

    #metodologia-seo .hnw-seo-tablet-dots button {
        display:block;

        width:10px;
        height:10px;

        margin:0;
        padding:0;

        border:0;
        border-radius:50%;

        background:rgba(15,39,56,.15);

        cursor:pointer;

        transition:
            width .3s ease,
            background .3s ease,
            border-radius .3s ease;
    }

    #metodologia-seo .hnw-seo-tablet-dots button.is-active {
        width:25px;
        border-radius:5px;
        background:#0F2738;
    }

    /* Los puntos sustituyen este cierre en modo slider */
    #metodologia-seo .hnw-resource-methodology__result {
        display:none !important;
    }

}

/* =========================================================
   SEO — FAQ TABLET
   Igualar ancho con las demás landings
   ========================================================= */

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

    .col-md-10.offset-md-1 {
        flex:0 0 100% !important;
        max-width:100% !important;
        width:100% !important;
        margin-left:0 !important;
    }

}