:root {

    --blue:
        #4d4eab;

    --blue-dark:
        #30377d;

    --blue-soft:
        #747cc5;

    --cyan:
        #71ccea;

    --wine:
        #9b3945;

    --wine-dark:
        #7e2d38;

    --green:
        #4ca362;

    --text:
        #24242a;

    --muted:
        #686872;

    --line:
        #e9e9ed;

    --soft:
        #f7f7f8;

    --white:
        #ffffff;

}

* {

    box-sizing:
        border-box;

}

html {

    scroll-behavior:
        smooth;

}

body {

    margin:
        0;

    color:
        var(--text);

    background:
        #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

}

img {

    max-width:
        100%;

}

a {

    color:
        inherit;

}

.ws-container {

    width:
        min(
            1180px,
            calc(100% - 36px)
        );

    margin:
        0 auto;

}

/* =========================================================================
   TOPO
   ========================================================================= */

.ws-top {

    background:
        white;

    border-bottom:
        1px solid
        #eeeeef;

}

.ws-top-inner {

    min-height:
        104px;

    display:
        grid;

    grid-template-columns:
        110px
        1fr
        auto;

    gap:
        30px;

    align-items:
        center;

}

.ws-logo {

    display:
        block;

    width:
        92px;

}

.ws-logo img {

    display:
        block;

    width:
        92px;

}

.ws-brand-copy {

    color:
        #555660;

    font-size:
        21px;

}

.ws-brand-copy strong {

    color:
        var(--blue);

}

.ws-contact-top {

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

}

.ws-contact-item {

    text-decoration:
        none;

}

.ws-contact-item small {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #888a92;

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

}

.ws-contact-item strong {

    color:
        var(--blue-dark);

    font-size:
        17px;

}

/* =========================================================================
   MENU
   ========================================================================= */

.ws-menu {

    position:
        sticky;

    z-index:
        1000;

    top:
        0;

    background:

        linear-gradient(
            90deg,
            #3d4396 0%,
            #5151a6 60%,
            #8d394c 100%
        );

    box-shadow:
        0 4px 12px
        rgba(35,35,65,.14);

}

.ws-menu-inner {

    min-height:
        52px;

    display:
        flex;

    align-items:
        stretch;

}

.ws-menu a {

    min-height:
        52px;

    padding:
        0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    color:
        white;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}

.ws-menu a:hover {

    background:
        rgba(255,255,255,.13);

}

.ws-mobile-button {

    display:
        none;

}

/* =========================================================================
   HERO ORIGINAL RECONSTRUIDO
   ========================================================================= */

.ws-hero {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    background:
        #f8f7f9;

}

.ws-hero-stage {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1909 / 440;

    min-height:
        330px;

    max-height:
        520px;

    overflow:
        hidden;

}

.ws-hero-wave {

    position:
        absolute;

    z-index:
        1;

    left:
        0;

    right:
        0;

    bottom:
        0;

    width:
        100%;

    height:
        58%;

}

.ws-hero-art {

    position:
        absolute;

    z-index:
        3;

    top:
        5%;

    left:
        43%;

    width:
        min(
            34vw,
            650px
        );

    height:
        auto;

}

.ws-hero-cta {

    position:
        absolute;

    z-index:
        4;

    top:
        15%;

    left:
        26%;

    display:
        block;

    width:
        min(
            14vw,
            263px
        );

    min-width:
        190px;

    transition:
        transform .16s ease;

}

.ws-hero-cta:hover {

    transform:
        translateY(-3px);

}

.ws-hero-cta img {

    display:
        block;

    width:
        100%;

}

.ws-hero-hit {

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

}

/* =========================================================================
   UTILIDADES
   ========================================================================= */

.ws-utilities {

    padding:
        38px 0;

    background:
        white;

}

.ws-utility-title {

    margin-bottom:
        20px;

    color:
        #75767f;

    text-align:
        center;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}

.ws-utility-grid {

    display:
        grid;

    grid-template-columns:
        repeat(6,1fr);

    border:
        1px solid
        var(--line);

}

.ws-utility {

    min-height:
        116px;

    padding:
        20px 12px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border-right:
        1px solid
        var(--line);

    color:
        #4d4e56;

    text-align:
        center;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

}

.ws-utility:last-child {

    border-right:
        0;

}

.ws-utility-icon {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid
        var(--blue);

    border-radius:
        50%;

    color:
        var(--blue);

    font-size:
        19px;

}

.ws-utility:hover {

    color:
        var(--blue);

    background:
        #fafafd;

}

/* =========================================================================
   CARROSSEL
   ========================================================================= */

.ws-coverage {

    padding:
        34px 0;

    overflow:
        hidden;

    background:

        linear-gradient(
            105deg,
            #3f48a0,
            #5260b1 53%,
            #8c394c
        );

}

.ws-coverage-shell {

    width:
        min(
            1614px,
            calc(100vw - 12px)
        );

    margin:
        auto;

}

.ws-coverage-viewport {

    width:
        100%;

    overflow:
        hidden;

}

.ws-coverage-frame {

    display:
        block;

    width:
        1614px;

    height:
        300px;

    border:
        0;

    transform-origin:
        left top;

}

/* =========================================================================
   SECOES
   ========================================================================= */

.ws-section {

    padding:
        68px 0;

}

.ws-section.white {

    background:
        white;

}

.ws-section.soft {

    background:
        var(--soft);

}

.ws-heading {

    margin-bottom:
        38px;

    text-align:
        center;

}

.ws-heading .over {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--wine);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}

.ws-heading h2 {

    margin:
        0;

    color:
        var(--blue);

    font-size:
        clamp(
            29px,
            3vw,
            41px
        );

    font-weight:
        500;

}

.ws-heading p {

    max-width:
        780px;

    margin:
        15px auto 0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;

}

/* =========================================================================
   PLANOS - VISUAL DO ANTIGO, DADOS MODERNOS
   ========================================================================= */

.ws-plans {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        24px;

    align-items:
        stretch;

}

.ws-plans.business {

    grid-template-columns:
        repeat(5,1fr);

    gap:
        16px;

}

.ws-plan {

    position:
        relative;

    min-width:
        0;

    padding-left:
        58px;

}

.ws-plan-rail {

    position:
        absolute;

    z-index:
        0;

    top:
        105px;

    bottom:
        75px;

    left:
        0;

    width:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        24px 0 0 24px;

    color:
        white;

    background:
        var(--blue-soft);

}

.ws-plan:nth-child(1)
.ws-plan-rail {

    background:
        #70cce9;

}

.ws-plan:nth-child(2)
.ws-plan-rail {

    background:
        #777fc2;

}

.ws-plan:nth-child(3)
.ws-plan-rail {

    background:
        #4d57ad;

}

.ws-plan:nth-child(4)
.ws-plan-rail,
.ws-plan:nth-child(5)
.ws-plan-rail {

    background:
        var(--wine);

}

.ws-plan-price {

    transform:
        rotate(-90deg);

    white-space:
        nowrap;

    font-size:
        23px;

    font-weight:
        800;

}

.ws-plan-card {

    position:
        relative;

    z-index:
        1;

    height:
        100%;

    min-height:
        515px;

    padding:
        34px 26px 24px;

    display:
        flex;

    flex-direction:
        column;

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        0 16px 46px
        rgba(48,48,70,.11);

}

.ws-plan-title {

    margin:
        0;

    color:
        var(--blue-soft);

    text-align:
        center;

    font-size:
        25px;

    font-weight:
        400;

}

.ws-plan:nth-child(4)
.ws-plan-title,
.ws-plan:nth-child(5)
.ws-plan-title {

    color:
        var(--wine);

}

.ws-plan-speed {

    margin:
        7px 0 29px;

    color:
        var(--blue);

    text-align:
        center;

    font-size:
        37px;

    font-weight:
        800;

}

.ws-plan:nth-child(4)
.ws-plan-speed,
.ws-plan:nth-child(5)
.ws-plan-speed {

    color:
        var(--wine);

}

.ws-plan-badge {

    width:
        fit-content;

    margin:
        -17px auto 18px;

    padding:
        5px 10px;

    border-radius:
        20px;

    color:
        white;

    background:
        var(--wine);

    font-size:
        10px;

    font-weight:
        700;

    text-transform:
        uppercase;

}

.ws-plan-benefits {

    margin:
        0 0 25px;

    padding:
        0;

    flex:
        1;

    list-style:
        none;

}

.ws-plan-benefits li {

    padding:
        9px 0;

    display:
        flex;

    gap:
        9px;

    align-items:
        flex-start;

    color:
        #222329;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.35;

}

.ws-check {

    color:
        var(--green);

    font-size:
        17px;

    font-weight:
        900;

}

.ws-plan-cta {

    min-height:
        46px;

    padding:
        0 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        6px;

    color:
        white;

    background:
        var(--blue);

    text-align:
        center;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        800;

}

.ws-plan:nth-child(4)
.ws-plan-cta,
.ws-plan:nth-child(5)
.ws-plan-cta {

    background:
        var(--wine);

}

/* =========================================================================
   PAINEIS VISUAIS
   ========================================================================= */

.ws-feature {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    overflow:
        hidden;

    min-height:
        390px;

    background:
        white;

    border:
        1px solid
        var(--line);

}

.ws-feature-copy {

    padding:
        48px 52px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

}

.ws-feature-copy .tag {

    margin-bottom:
        8px;

    color:
        var(--wine);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}

.ws-feature-copy h2 {

    margin:
        0 0 16px;

    color:
        var(--blue);

    font-size:
        33px;

    font-weight:
        500;

}

.ws-feature-copy p {

    margin:
        0 0 13px;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.75;

}

.ws-feature-button {

    width:
        fit-content;

    min-height:
        43px;

    margin-top:
        8px;

    padding:
        0 21px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        white;

    background:
        var(--blue);

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    text-transform:
        uppercase;

}

.ws-feature-media {

    min-height:
        390px;

    overflow:
        hidden;

    background:
        #ececef;

}

.ws-feature-media img {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

}

.ws-feature.wifi
.ws-feature-media {

    padding:
        30px;

    display:
        grid;

    place-items:
        center;

    background:

        linear-gradient(
            130deg,
            #334390,
            #4d53a5
        );

}

.ws-feature.wifi
.ws-feature-media img {

    width:
        100%;

    height:
        auto;

    object-fit:
        contain;

}

/* =========================================================================
   SUPORTE - MANTIDO
   ========================================================================= */

.ws-support {

    padding:
        67px 0;

    color:
        white;

    background:

        linear-gradient(
            110deg,
            #3d4396,
            #5050a1 55%,
            #8e394b
        );

}

.ws-support-heading {

    margin-bottom:
        32px;

    text-align:
        center;

}

.ws-support-heading h2 {

    margin:
        0 0 10px;

    font-size:
        36px;

    font-weight:
        500;

}

.ws-support-heading p {

    margin:
        0;

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

}

.ws-support-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        16px;

}

.ws-support-card {

    padding:
        27px;

    border:
        1px solid
        rgba(255,255,255,.20);

    background:
        rgba(255,255,255,.09);

}

.ws-support-number {

    width:
        37px;

    height:
        37px;

    margin-bottom:
        16px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--blue);

    background:
        white;

    font-weight:
        900;

}

.ws-support-card h3 {

    margin:
        0 0 9px;

    font-size:
        16px;

}

.ws-support-card p {

    margin:
        0;

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

    font-size:
        13px;

    line-height:
        1.65;

}

.ws-warning {

    margin:
        22px 0 0;

    padding:
        15px 18px;

    border-left:
        4px solid
        white;

    color:
        white;

    background:
        rgba(0,0,0,.12);

    font-size:
        13px;

}

.ws-support-action {

    margin-top:
        26px;

    text-align:
        center;

}

.ws-support-action a {

    min-height:
        44px;

    padding:
        0 24px;

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--blue);

    background:
        white;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

}

/* =========================================================================
   CLIENTE
   ========================================================================= */

.ws-client-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        18px;

}

.ws-client {

    padding:
        29px;

    border:
        1px solid
        var(--line);

    text-decoration:
        none;

    background:
        white;

}

.ws-client strong {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--blue);

    font-size:
        16px;

    text-transform:
        uppercase;

}

.ws-client span {

    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.6;

}

/* =========================================================================
   RODAPE
   ========================================================================= */

.ws-footer {

    padding:
        46px 0 30px;

    color:
        #575861;

    background:
        #eeeeef;

    border-top:
        1px solid
        #dddde1;

}

.ws-footer-grid {

    display:
        grid;

    grid-template-columns:
        160px
        1fr
        1fr
        1fr;

    gap:
        35px;

}

.ws-footer img {

    width:
        90px;

}

.ws-footer h4 {

    margin:
        0 0 12px;

    color:
        var(--blue);

    font-size:
        12px;

    text-transform:
        uppercase;

}

.ws-footer p,
.ws-footer a {

    color:
        #676871;

    font-size:
        12px;

    line-height:
        1.8;

    text-decoration:
        none;

}

.ws-copy {

    margin-top:
        34px;

    padding-top:
        20px;

    border-top:
        1px solid
        #d9d9dd;

    color:
        #878890;

    font-size:
        11px;

}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */

@media(max-width:1100px) {

    .ws-plans.business {

        grid-template-columns:
            repeat(3,1fr);

    }

}

@media(max-width:900px) {

    .ws-top-inner {

        grid-template-columns:
            85px 1fr;

    }

    .ws-contact-top {

        grid-column:
            1 / -1;

        padding-bottom:
            18px;

    }

    .ws-menu-inner {

        overflow-x:
            auto;

    }

    .ws-plans {

        grid-template-columns:
            repeat(2,1fr);

    }

    .ws-plans.business {

        grid-template-columns:
            repeat(2,1fr);

    }

    .ws-utility-grid {

        grid-template-columns:
            repeat(3,1fr);

    }

    .ws-feature {

        grid-template-columns:
            1fr;

    }

    .ws-support-grid {

        grid-template-columns:
            1fr;

    }

    .ws-footer-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

}

@media(max-width:700px) {

    .ws-container {

        width:
            calc(100% - 22px);

    }

    .ws-brand-copy {

        font-size:
            15px;

    }

    .ws-contact-top {

        gap:
            14px;

        flex-wrap:
            wrap;

    }

    .ws-menu a {

        padding:
            0 13px;

        font-size:
            11px;

    }

    .ws-hero-stage {

        aspect-ratio:
            auto;

        min-height:
            440px;

    }

    .ws-hero-wave {

        height:
            47%;

    }

    .ws-hero-art {

        top:
            76px;

        left:
            50%;

        width:
            min(
                94vw,
                610px
            );

        transform:
            translateX(-50%);

    }

    .ws-hero-cta {

        top:
            18px;

        left:
            50%;

        width:
            230px;

        min-width:
            0;

        transform:
            translateX(-50%);

    }

    .ws-hero-cta:hover {

        transform:
            translateX(-50%)
            translateY(-2px);

    }

    .ws-utility-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

    .ws-plans,
    .ws-plans.business {

        grid-template-columns:
            1fr;

    }

    .ws-plan {

        max-width:
            390px;

        width:
            100%;

        margin:
            auto;

    }

    .ws-feature-copy {

        padding:
            32px 25px;

    }

    .ws-feature-media {

        min-height:
            280px;

    }

    .ws-client-grid {

        grid-template-columns:
            1fr;

    }

    .ws-footer-grid {

        grid-template-columns:
            1fr;

    }

}


/* WSNET-TELEFONIA-2X-START */

/* ========================================================================
   TELEFONIA WSNET
   Fonte original @2x: 920x390
   ======================================================================== */

#telefonia .ws-feature-media {

    position: relative;

    min-height:
        390px;

    height:
        390px;

    padding:
        0 !important;

    overflow:
        hidden;

    background:
        #f8c945;

}

/*
 * A imagem @2x possui exatamente 390px de altura.
 *
 * Portanto:
 * - nao deformamos
 * - nao ampliamos verticalmente
 * - usamos object-fit cover apenas para recorte lateral
 * - mantemos boa nitidez
 */

#telefonia .ws-feature-media > img {

    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

}

/*
 * Remove qualquer selo/logo sobre a foto
 * de tentativas anteriores.
 */

#telefonia .ws-phone-logo,
#telefonia .ws-phone-brand-stamp {

    display:
        none !important;

}

@media(max-width:700px) {

    #telefonia .ws-feature-media {

        min-height:
            280px;

        height:
            280px;

    }

}

/* WSNET-TELEFONIA-2X-END */


/* WSNET-PLAN-GRID-V2-START */

/* ========================================================================
   TODOS OS PLANOS CABEM NA MESMA FILEIRA NO DESKTOP
   ======================================================================== */

@media(min-width:901px) {

    .ws-plans,
    .ws-plans.business {

        display:
            grid;

        grid-template-columns:
            repeat(
                var(--plan-count, 4),
                minmax(0, 1fr)
            ) !important;

        gap:
            clamp(
                7px,
                .9vw,
                18px
            ) !important;

        width:
            100%;

    }

    .ws-plans .ws-plan {

        min-width:
            0;

        width:
            auto;

        padding-left:
            clamp(
                34px,
                3.6vw,
                56px
            );

    }

    .ws-plans .ws-plan-rail {

        width:
            clamp(
                50px,
                4.6vw,
                76px
            );

    }

    .ws-plans .ws-plan-price {

        font-size:
            clamp(
                13px,
                1.15vw,
                21px
            );

    }

    .ws-plans .ws-plan-card {

        min-width:
            0;

        min-height:
            500px;

        padding:

            clamp(
                21px,
                1.7vw,
                32px
            )

            clamp(
                10px,
                1.25vw,
                22px
            )

            21px;

        border-radius:
            clamp(
                16px,
                1.5vw,
                24px
            );

    }

    .ws-plans .ws-plan-title {

        font-size:
            clamp(
                15px,
                1.3vw,
                24px
            );

    }

    .ws-plans .ws-plan-speed {

        margin-bottom:
            24px;

        font-size:
            clamp(
                21px,
                1.9vw,
                36px
            );

        white-space:
            nowrap;

    }

    .ws-plans .ws-plan-benefits li {

        gap:
            6px;

        font-size:
            clamp(
                10px,
                .82vw,
                13px
            );

    }

    .ws-plans .ws-plan-cta {

        padding:
            0 8px;

        font-size:
            clamp(
                10px,
                .8vw,
                13px
            );

    }

}

/* Tablet */

@media(max-width:900px) {

    .ws-plans,
    .ws-plans.business {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

    }

}

/* Celular */

@media(max-width:650px) {

    .ws-plans,
    .ws-plans.business {

        grid-template-columns:
            1fr !important;

    }

}


/* ========================================================================
   WIRE SPEED / 1 GIGA - MEGA DESTAQUE HOLOGRAFICO
   ======================================================================== */

.ws-plan.mega-highlight {

    position:
        relative;

    isolation:
        isolate;

}

/* Glow externo */

.ws-plan.mega-highlight::before {

    content:
        "";

    position:
        absolute;

    z-index:
        0;

    top:
        96px;

    right:
        -7px;

    bottom:
        66px;

    left:
        45px;

    border-radius:
        30px;

    opacity:
        .72;

    filter:
        blur(13px);

    background:

        linear-gradient(
            120deg,
            #18dfff,
            #5652ff,
            #d73fff,
            #ff396f,
            #ffd83d,
            #25ecc2,
            #18dfff
        );

    background-size:
        400% 400%;

    animation:
        wsMegaGlow
        5s
        linear
        infinite;

}

/* Borda holografica */

.ws-plan.mega-highlight
.ws-plan-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        3px solid transparent;

    background:

        linear-gradient(
            #ffffff,
            #ffffff
        )
        padding-box,

        linear-gradient(
            120deg,
            #21dfff,
            #5c55ff,
            #df42ff,
            #ff416d,
            #ffd938,
            #27e9c0,
            #21dfff
        )
        border-box;

    background-size:
        100% 100%,
        400% 400%;

    box-shadow:

        0 18px 50px
        rgba(72,65,165,.25),

        0 0 22px
        rgba(26,215,255,.25),

        0 0 36px
        rgba(217,64,255,.17);

    animation:
        wsMegaBorder
        5s
        linear
        infinite;

}

/* Reflexo passando */

.ws-plan.mega-highlight
.ws-plan-card::after {

    content:
        "";

    position:
        absolute;

    z-index:
        4;

    top:
        -35%;

    bottom:
        -35%;

    left:
        -75%;

    width:
        38%;

    pointer-events:
        none;

    transform:
        skewX(-18deg);

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            rgba(255,255,255,.82),
            rgba(255,255,255,.12),
            transparent
        );

    animation:
        wsMegaShine
        3.8s
        ease-in-out
        infinite;

}

/* Preco lateral */

.ws-plan.mega-highlight
.ws-plan-rail {

    background:

        linear-gradient(
            160deg,
            #323b9c,
            #6558d8,
            #ab418e,
            #983748
        )
        !important;

    box-shadow:

        0 0 22px
        rgba(96,82,215,.42);

}

/* Nome */

.ws-plan.mega-highlight
.ws-plan-title {

    position:
        relative;

    z-index:
        8;

    color:
        #343a97
        !important;

    font-weight:
        900;

}

/* 1 Giga holografico */

.ws-plan.mega-highlight
.ws-plan-speed {

    position:
        relative;

    z-index:
        8;

    color:
        transparent
        !important;

    font-weight:
        900;

    background:

        linear-gradient(
            90deg,
            #3d43aa,
            #6759db,
            #bd3db0,
            #9b3547,
            #3d43aa
        );

    background-size:
        300% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    animation:
        wsMegaText
        4s
        linear
        infinite;

}

/* Badge */

.ws-mega-badge {

    position:
        relative;

    z-index:
        9;

    width:
        fit-content;

    max-width:
        100%;

    margin:
        -15px auto
        13px;

    padding:
        7px 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    overflow:
        hidden;

    border-radius:
        999px;

    color:
        white;

    white-space:
        nowrap;

    font-size:
        clamp(
            8px,
            .7vw,
            10px
        );

    font-weight:
        900;

    letter-spacing:
        .05em;

    background:

        linear-gradient(
            110deg,
            #3840a4,
            #6856d4,
            #cf42c7,
            #a03955,
            #3840a4
        );

    background-size:
        300% 300%;

    box-shadow:
        0 7px 20px
        rgba(95,72,188,.32);

    animation:
        wsMegaBadge
        4s
        linear
        infinite;

}

/* Botao */

.ws-plan.mega-highlight
.ws-plan-cta {

    position:
        relative;

    z-index:
        9;

    color:
        white;

    background:

        linear-gradient(
            105deg,
            #3842a8,
            #6756d2,
            #a5418d,
            #963747
        )
        !important;

    background-size:
        250% 250%
        !important;

    box-shadow:
        0 8px 22px
        rgba(74,65,166,.30);

    animation:
        wsMegaBadge
        4s
        linear
        infinite;

}


/* ========================================================================
   ANIMACOES
   ======================================================================== */

@keyframes wsMegaGlow {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }

}

@keyframes wsMegaBorder {

    0% {
        background-position:
            0 0,
            0% 50%;
    }

    50% {
        background-position:
            0 0,
            100% 50%;
    }

    100% {
        background-position:
            0 0,
            0% 50%;
    }

}

@keyframes wsMegaShine {

    0%,
    42% {

        left:
            -75%;

    }

    72% {

        left:
            145%;

    }

    100% {

        left:
            145%;

    }

}

@keyframes wsMegaText {

    from {
        background-position:
            0% center;
    }

    to {
        background-position:
            300% center;
    }

}

@keyframes wsMegaBadge {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }

}

@media(prefers-reduced-motion:reduce) {

    .ws-plan.mega-highlight::before,
    .ws-plan.mega-highlight .ws-plan-card,
    .ws-plan.mega-highlight .ws-plan-card::after,
    .ws-plan.mega-highlight .ws-plan-speed,
    .ws-plan.mega-highlight .ws-plan-cta,
    .ws-mega-badge {

        animation:
            none !important;

    }

}

/* WSNET-PLAN-GRID-V2-END */


/* WSNET-CARD-FIT-V3-START */

/* ========================================================================
   CONTAINER DOS PLANOS
   ======================================================================== */

/*
 * Aproveitamos melhor a largura disponível.
 */
#residencial > .ws-container,
#planos-empresa > .ws-container {

    width:
        min(
            1280px,
            calc(100% - 24px)
        );

}

/* ========================================================================
   SEGURANCA GERAL CONTRA TEXTO SAINDO DO CARD
   ======================================================================== */

.ws-plan {

    min-width:
        0 !important;

}

.ws-plan-card {

    min-width:
        0 !important;

    overflow:
        hidden !important;

}

.ws-plan-title,
.ws-plan-speed,
.ws-plan-benefits,
.ws-plan-benefits li,
.ws-plan-cta,
.ws-mega-badge {

    max-width:
        100%;

    box-sizing:
        border-box;

}

.ws-plan-title {

    overflow-wrap:
        anywhere;

    word-break:
        normal;

    line-height:
        1.12;

}

.ws-plan-speed {

    overflow:
        hidden;

    text-overflow:
        clip;

    white-space:
        normal !important;

    line-height:
        1.05;

}

.ws-plan-benefits li {

    min-width:
        0;

    overflow-wrap:
        anywhere;

}

.ws-plan-benefits li > span:last-child {

    min-width:
        0;

}

.ws-plan-cta {

    white-space:
        normal;

    line-height:
        1.15;

    text-align:
        center;

}


/* ========================================================================
   5 PLANOS NA MESMA FILEIRA
   ======================================================================== */

@media(min-width:901px) {

    .ws-plans:has(> .ws-plan:nth-child(5)) {

        gap:
            11px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan {

        padding-left:
            43px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan-rail {

        width:
            59px !important;

        border-radius:
            18px 0 0 18px;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan-price {

        font-size:
            17px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan-card {

        padding:
            26px 15px 20px
            !important;

        border-radius:
            19px;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan-title {

        font-size:
            20px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan-speed {

        margin-top:
            8px;

        margin-bottom:
            24px;

        font-size:
            31px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan-benefits li {

        padding:
            8px 0;

        font-size:
            12px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan-cta {

        min-height:
            45px;

        padding:
            7px 8px;

        font-size:
            12px !important;

    }

}


/* ========================================================================
   6 OU MAIS PLANOS
   ======================================================================== */

@media(min-width:1101px) {

    .ws-plans:has(> .ws-plan:nth-child(6)) {

        gap:
            7px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(6))
    .ws-plan {

        padding-left:
            35px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(6))
    .ws-plan-rail {

        width:
            49px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(6))
    .ws-plan-price {

        font-size:
            14px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(6))
    .ws-plan-card {

        padding:
            23px 10px 18px
            !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(6))
    .ws-plan-title {

        font-size:
            17px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(6))
    .ws-plan-speed {

        font-size:
            25px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(6))
    .ws-plan-benefits li {

        font-size:
            10.5px !important;

    }

}


/* ========================================================================
   WIRE SPEED / 1 GIGA
   Mantemos o mega destaque, mas sem sair do card.
   ======================================================================== */

.ws-plan.mega-highlight
.ws-plan-card {

    overflow:
        hidden !important;

}

.ws-plan.mega-highlight
.ws-plan-title {

    width:
        100%;

    max-width:
        100%;

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;

    overflow-wrap:
        anywhere;

}

.ws-plan.mega-highlight
.ws-plan-speed {

    width:
        100%;

    max-width:
        100%;

    padding:
        0 2px;

    text-align:
        center;

    white-space:
        normal !important;

    overflow:
        visible !important;

    font-size:
        clamp(
            24px,
            2.05vw,
            34px
        )
        !important;

}

.ws-mega-badge {

    max-width:
        calc(100% - 4px);

    padding:
        6px 8px;

    font-size:
        clamp(
            7px,
            .65vw,
            9px
        )
        !important;

    letter-spacing:
        .02em;

    white-space:
        nowrap;

}


/* ========================================================================
   5 PLANOS + WIRE SPEED
   ======================================================================== */

@media(min-width:901px) {

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan.mega-highlight
    .ws-plan-title {

        font-size:
            19px !important;

    }

    .ws-plans:has(> .ws-plan:nth-child(5))
    .ws-plan.mega-highlight
    .ws-plan-speed {

        font-size:
            30px !important;

    }

}


/* ========================================================================
   TELAS MENORES
   Antes de ficar ilegível, permitimos quebrar linha.
   ======================================================================== */

@media(min-width:701px) and (max-width:1100px) {

    .ws-plans,
    .ws-plans.business {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;

    }

}


/* WSNET-CARD-FIT-V3-END */


/* WSNET-GIGA-DESCENDER-FIX-START */

/* ========================================================================
   CORRECAO TIPOGRAFICA
   Letras com descendente, como "g", precisam de espaco abaixo da baseline.
   ======================================================================== */

.ws-plan-speed {

    line-height:
        1.18
        !important;

    overflow:
        visible
        !important;

    padding-top:
        2px;

    padding-bottom:
        5px;

}

/*
 * Wire Speed holografico.
 */

.ws-plan.mega-highlight
.ws-plan-speed {

    line-height:
        1.20
        !important;

    overflow:
        visible
        !important;

    padding-top:
        2px;

    padding-bottom:
        6px;

}

/*
 * Garante que o container do card nao corte a tipografia
 * na regiao do titulo/velocidade.
 */

.ws-plan-card {

    overflow-x:
        hidden
        !important;

    overflow-y:
        visible;

}

/*
 * Porem o efeito de brilho do destaque continua contido.
 */

.ws-plan.mega-highlight
.ws-plan-card {

    overflow:
        hidden
        !important;

}

/*
 * Dentro do mega destaque damos espaco fisico adicional
 * ao bloco da velocidade para a letra "g".
 */

.ws-plan.mega-highlight
.ws-plan-speed {

    margin-bottom:
        23px
        !important;

}

/* WSNET-GIGA-DESCENDER-FIX-END */


/* WSNET-COLOR-BORDERS-START */

/* ========================================================================
   TODOS OS CARDS GANHAM BORDA DA SUA COR
   O 1 Giga continua usando o destaque especial dele.
   ======================================================================== */

/*
 * Paleta por posicao do card.
 * Repete automaticamente se um dia existirem mais planos.
 */

.ws-plans > .ws-plan:nth-child(5n+1) {
    --ws-plan-accent: #65cfee;
}

.ws-plans > .ws-plan:nth-child(5n+2) {
    --ws-plan-accent: #6a6fd9;
}

.ws-plans > .ws-plan:nth-child(5n+3) {
    --ws-plan-accent: #4f58cf;
}

.ws-plans > .ws-plan:nth-child(5n+4) {
    --ws-plan-accent: #ad3f4a;
}

.ws-plans > .ws-plan:nth-child(5n+5) {
    --ws-plan-accent: #6b4ff1;
}

/*
 * Card comum = borda colorida.
 */

.ws-plan:not(.mega-highlight) .ws-plan-card {

    border: 2px solid var(--ws-plan-accent) !important;

    box-shadow:
        0 10px 26px rgba(0,0,0,.05),
        0 0 0 1px rgba(255,255,255,.6) inset !important;

}

/*
 * Pequeno brilho leve da cor, sem exagerar.
 */

.ws-plan:not(.mega-highlight)::before {

    content: "";

    position: absolute;

    z-index: 0;

    top: 98px;

    right: -4px;

    bottom: 68px;

    left: 42px;

    border-radius: 26px;

    pointer-events: none;

    opacity: .16;

    filter: blur(10px);

    background: var(--ws-plan-accent);

}

/*
 * Garante que o card fique acima do glow.
 */

.ws-plan:not(.mega-highlight) .ws-plan-card {
    position: relative;
    z-index: 1;
}

/*
 * O card PRO pode ter borda um pouco mais evidente.
 */

.ws-plans > .ws-plan:nth-child(5n+4):not(.mega-highlight) .ws-plan-card {
    border-width: 2px !important;
}

/*
 * O Wire Speed / 1 Giga mantém o destaque especial existente.
 */

.ws-plan.mega-highlight .ws-plan-card {
    border-width: 3px !important;
}

/* WSNET-COLOR-BORDERS-END */


/* WSNET-FOOTER-GRADIENT-FONTS-START */

/* ========================================================================
   RODAPE WSNET - MESMA LINHA VISUAL DA TRANSICAO DE CORES
   Fundo com gradiente leve, mantendo legibilidade.
   ======================================================================== */

footer,
.ws-footer,
.site-footer,
.ws-site-footer,
.footer {

    position:
        relative;

    background:
        linear-gradient(
            90deg,
            rgba(101, 207, 238, 0.22) 0%,
            rgba(106, 111, 217, 0.20) 45%,
            rgba(173, 63, 74, 0.18) 100%
        )
        !important;

}

/*
 * Camada branca suave por cima para nao ficar pesado.
 */

footer::before,
.ws-footer::before,
.site-footer::before,
.ws-site-footer::before,
.footer::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        rgba(255,255,255,.72);

    pointer-events:
        none;

}

/*
 * Conteudo do rodape acima da camada de fundo.
 */

footer > *,
.ws-footer > *,
.site-footer > *,
.ws-site-footer > *,
.footer > * {

    position:
        relative;

    z-index:
        1;

}

/* ========================================================================
   AUMENTO DE 20% NAS FONTES PEQUENAS
   Titulos grandes ficam como estao.
   ======================================================================== */

/*
 * Rodape
 */

footer p,
footer a,
footer li,
footer span,
footer small,
.ws-footer p,
.ws-footer a,
.ws-footer li,
.ws-footer span,
.ws-footer small,
.site-footer p,
.site-footer a,
.site-footer li,
.site-footer span,
.site-footer small,
.ws-site-footer p,
.ws-site-footer a,
.ws-site-footer li,
.ws-site-footer span,
.ws-site-footer small,
.footer p,
.footer a,
.footer li,
.footer span,
.footer small {

    font-size:
        calc(1em * 1.2)
        !important;

    line-height:
        1.55
        !important;

}

/*
 * Ajuste fino em textos pequenos comuns do site
 * sem mexer em titulos grandes.
 */

small,
.text-sm,
.text-xs,
.ws-mini,
.ws-small,
.ws-muted,
.ws-legal,
.ws-caption,
.ws-feature-copy,
.ws-feature-text,
.ws-contact-item small,
.ws-support-card p,
.ws-support-card li,
.ws-help-card p,
.ws-help-card li,
.ws-problem-card p,
.ws-problem-card li,
.ws-tip-card p,
.ws-tip-card li,
.ws-section-copy,
.ws-section-text,
.ws-info-text,
.ws-inline-note,
.ws-coverage-copy,
.ws-coverage-text {

    font-size:
        calc(1em * 1.2)
        !important;

    line-height:
        1.55
        !important;

}

/*
 * Vendedor online - aumentar somente os textos menores,
 * sem mexer no titulo principal.
 */

.ws-sales-badge,
.ws-sales-text,
.ws-sales-link {

    font-size:
        calc(1em * 1.2)
        !important;

    line-height:
        1.45
        !important;

}

/*
 * Mantemos titulos como estao.
 */

footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.ws-footer h1,
.ws-footer h2,
.ws-footer h3,
.ws-footer h4,
.ws-footer h5,
.ws-footer h6,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.ws-site-footer h1,
.ws-site-footer h2,
.ws-site-footer h3,
.ws-site-footer h4,
.ws-site-footer h5,
.ws-site-footer h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {

    font-size:
        inherit
        !important;

}

/*
 * Linha divisoria do rodape mais suave.
 */

footer hr,
.ws-footer hr,
.site-footer hr,
.ws-site-footer hr,
.footer hr {

    border-color:
        rgba(67, 76, 156, 0.14)
        !important;

}

/* WSNET-FOOTER-GRADIENT-FONTS-END */


/* WSNET-FOOTER-FINAL-V2-START */

/* ========================================================================
   RODAPE
   MESMO GRADIENTE DA SECAO "ESTOU SEM INTERNET"
   ======================================================================== */

html body footer.ws-footer,
html body .ws-footer {

    position:
        relative;

    color:
        #ffffff !important;

    background:

        linear-gradient(
            110deg,
            #3d4396 0%,
            #5050a1 55%,
            #8e394b 100%
        )
        !important;

    border-top:
        0 !important;

}

/*
 * O patch anterior criou uma camada branca por cima.
 * Ela e o motivo do rodape parecer cinza.
 *
 * Agora removemos completamente.
 */

html body footer.ws-footer::before,
html body .ws-footer::before {

    content:
        none !important;

    display:
        none !important;

    background:
        none !important;

    opacity:
        0 !important;

}

/* ------------------------------------------------------------------------
   TEXTOS DO RODAPE
   ------------------------------------------------------------------------ */

html body .ws-footer h4 {

    color:
        #ffffff !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .04em;

}

html body .ws-footer p,
html body .ws-footer a,
html body .ws-footer span,
html body .ws-footer li {

    color:
        rgba(
            255,
            255,
            255,
            .91
        )
        !important;

    font-size:
        14px !important;

    line-height:
        1.7 !important;

}

html body .ws-footer a:hover {

    color:
        #ffffff !important;

    text-decoration:
        underline;

}

/* ------------------------------------------------------------------------
   COPYRIGHT
   ------------------------------------------------------------------------ */

html body .ws-footer .ws-copy {

    color:
        rgba(
            255,
            255,
            255,
            .76
        )
        !important;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .20
        )
        !important;

    font-size:
        13px !important;

}

/* ------------------------------------------------------------------------
   LOGO
   Dar um pouco mais de presenca no fundo colorido.
   ------------------------------------------------------------------------ */

html body .ws-footer img {

    filter:
        drop-shadow(
            0 4px 8px
            rgba(0,0,0,.16)
        );

}


/* ========================================================================
   CHAMADAS VERMELHAS
   Elas sao importantes e estavam pequenas demais.
   ======================================================================== */

/*
 * Exemplos:
 *
 * INTERNET RESIDENCIAL
 * SUA EMPRESA CONECTADA
 * WI-FI PLUS
 * TELEFONIA
 * UTILIDADES
 */

html body .ws-heading .over,
html body .ws-feature-copy .tag {

    display:
        block;

    margin-bottom:
        10px;

    color:
        #a73546
        !important;

    font-size:
        15px
        !important;

    font-weight:
        900
        !important;

    line-height:
        1.25;

    letter-spacing:
        .10em
        !important;

    text-transform:
        uppercase;

}

/*
 * Pequeno detalhe visual que reforca a chamada sem
 * competir com o titulo principal.
 */

html body .ws-heading .over::after,
html body .ws-feature-copy .tag::after {

    content:
        "";

    display:
        block;

    width:
        34px;

    height:
        3px;

    margin-top:
        7px;

    border-radius:
        99px;

    background:

        linear-gradient(
            90deg,
            #a73546,
            #5b55ba
        );

}

/*
 * Quando a chamada esta centralizada,
 * centralizamos tambem o pequeno traco.
 */

html body .ws-heading .over::after {

    margin-left:
        auto;

    margin-right:
        auto;

}


/* ========================================================================
   DEMAIS FONTES PEQUENAS
   Mantemos o ganho de legibilidade sem afetar H1/H2/H3 grandes.
   ======================================================================== */

html body .ws-contact-item small {

    font-size:
        12px !important;

    font-weight:
        700;

}

html body .ws-utility-title {

    font-size:
        13px !important;

}

html body .ws-heading p {

    font-size:
        16px !important;

}

html body .ws-feature-copy p {

    font-size:
        16px !important;

}

html body .ws-support-heading p {

    font-size:
        16px !important;

}

html body .ws-support-card p {

    font-size:
        15px !important;

}

html body .ws-client span {

    font-size:
        15px !important;

}

/*
 * Titulos principais permanecem como estavam.
 */

html body .ws-heading h2,
html body .ws-feature-copy h2,
html body .ws-support-heading h2 {

    /* intencionalmente sem font-size */
}


/* ========================================================================
   RESPONSIVO
   ======================================================================== */

@media(max-width:700px) {

    html body .ws-heading .over,
    html body .ws-feature-copy .tag {

        font-size:
            13px
            !important;

    }

    html body .ws-footer p,
    html body .ws-footer a,
    html body .ws-footer span {

        font-size:
            13px
            !important;

    }

}

/* WSNET-FOOTER-FINAL-V2-END */


/* WSNET-FOOTER-LOGO-HIGHLIGHT-START */

/* ========================================================================
   LOGO WSNET NO RODAPE
   ======================================================================== */

html body .ws-footer img {

    display:
        block;

    width:
        112px
        !important;

    height:
        auto;

    padding:
        11px;

    box-sizing:
        border-box;

    border:
        1px solid
        rgba(255,255,255,.75);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.96);

    box-shadow:

        0 10px 28px
        rgba(24,24,65,.22),

        0 2px 8px
        rgba(0,0,0,.10);

    filter:
        none
        !important;

}

/*
 * Um pequeno efeito premium ao passar o mouse.
 */

html body .ws-footer img {

    transition:
        transform .20s ease,
        box-shadow .20s ease;

}

html body .ws-footer img:hover {

    transform:
        translateY(-2px);

    box-shadow:

        0 14px 34px
        rgba(24,24,65,.27),

        0 3px 10px
        rgba(0,0,0,.12);

}

/*
 * Mobile
 */

@media(max-width:700px) {

    html body .ws-footer img {

        width:
            100px
            !important;

        padding:
            9px;

        border-radius:
            16px;

    }

}

/* WSNET-FOOTER-LOGO-HIGHLIGHT-END */


/* WSNET-WIFI-HOUSE-4X3-START */

/*
 * Wi-Fi Plus - casa Mesh 4:3.
 * Mesmo conceito visual da imagem de Telefonia:
 * imagem preenchendo a coluna inteira.
 */

.ws-feature.wifi .ws-feature-media {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.ws-feature.wifi .ws-feature-media img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/* No celular continua proporcional */
@media (max-width: 760px) {

    .ws-feature.wifi .ws-feature-media {
        aspect-ratio: 4 / 3 !important;
    }

}

/* WSNET-WIFI-HOUSE-4X3-END */