:root{
    --swiper-navigation-size: 30px;
    --swiper-navigation-top-offset: 40%;
    --swiper-navigation-sides-offset: 5%;
    --swiper-navigation-color: #fff;
    --swiper-pagination-bottom: 100px;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-color: #000;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 10px;
    --swiper-scrollbar-size: 8px;
    --swiper-scrollbar-drag-bg-color: #000;
}

.swiper-button-next, .swiper-button-prev {
    padding: 1.5em 2em;
    border: 3px solid;
    border-radius: 60px;
    opacity: 0.5;
    transition: opacity .3s ease;
    &:hover{
        opacity: 1;
    }
  }

.swiper-pagination-bullet{ 
    background-color: #000;
    border: 4px solid #000;
}

.swiper-pagination-bullet-active{
    
    background-color: transparent; 
}

.swiper {
    width: 100%;
    height: auto;
}
  

.swiper-wrapper{
    & img{
        width: 100%;
    }
}

h2{
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 600;
}



.home{
    opacity: 0;
    animation: animation-opacity 1s .5s ease forwards;
}

header {
    background-color: transparent;
    margin-bottom: -120px;
}



.clients, .reviews{
    padding: 90px 20px;
  & .slider-clients, .slider-reviews {
    padding-bottom: 40px;
    & .clients__title, .reviews__title{
        max-width: 600px;
        margin-inline: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-bottom: 40px;
        & .swiper-button-next, .swiper-button-prev {
            position: relative;
            color: #000;
            top: 0;
            left: 0;
            right: 0;
            padding: 1.2em;
            box-sizing: border-box;
            margin: 0;
            border-width: 1px;
            &::after{
                font-size: 20px;
            }
        }

        
    }

    & .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
        bottom: 0px;
    }

    
  }
}

.clients{
    & .slider-clients{
        & .swiper-slide{
            & img{
                border-radius: 20px;
                aspect-ratio: 1 / 1.3;
                object-fit: cover;
                transition: filter .3s ease;
            }
    
            & h3{
                position: absolute;
                bottom: 20%;
                left: 50%;
                transform: translateX(-50%) rotate(-10deg);
                color: #fff;
                font-size: 26px;
                font-weight: 900;
                text-transform: uppercase;
                transition: transform .3s ease;
            }
    
            &:hover{
                & h3{
                    transform: translateX(-50%) rotate(0deg);
                }
    
                & img{
                    filter: brightness(.8);
                }
            }
        }
    }
}


.plans{
    padding: 90px 20px;
    & .i-container{
        & > p{
            text-align: center;
            margin-top: 60px;
        }
    }
    & .plans__title{
        display: flex;
        justify-content: space-between;
        & h2{
            max-width: 40%;
        }
        & .plans__btns{
            display: flex;
            gap: 20px;
            & .internet-btn-prev, .duo-btn-next{
                font-size: 20px;
                text-transform: uppercase;
                font-weight: 900;
                color: var(--color-gray);
                border: solid 2px var(--color-gray);
                padding: 20px;
                border-radius: 10px;
                display: flex;
                cursor: pointer;
                &.swiper-button-disabled{
                    background-color: var(--color-light-gray);
                    border-color: var(--color-light-gray);
                    color: #000;
                    pointer-events: none;
                }

                &:hover{
                    /* background-color: var(--color-light-gray); */
                    border-color: var(--color-dark-gray);
                    color: var(--color-dark-gray);
                }
            }
        }
        
    }
    
    & .slider-plans-duo{
        & .plans__plan{
            margin-right: -50%;
            margin-left: 50%;
        }
    }

    & .slider-plans-internet, .slider-plans-duo{
        padding-bottom: 60px;
        & .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
            bottom: 0px;
        }
    }

    & .plans__plan{
        margin-top: 60px;
        --color: #e74c38;
        border: 1px solid var(--color-light-gray);
        border-radius: 30px;
        transform: translateX(-20%);
        opacity: 0;

        &:hover{
            & .plan__header{
                & h3{
                    -webkit-animation: pulsate-bck 3s ease-in-out infinite both;
                    animation: pulsate-bck 2s ease-in-out infinite both;
                }
            }
        }

        & .plan__header{
            
            background-color: var(--color);
            color: #fff;
            padding: 20px;
            border-radius: 20px;
            text-align: center;
            & h3{
                font-family: F37GingerPro;
                font-size: 100px;
                font-weight: 900;
                -webkit-text-stroke: 3px #000000;
                text-shadow: 
                0 1px 0px #000, 1px 0 0px #000, 
                1px 2px 1px #000, 2px 1px 1px #000, 
                2px 3px 2px #000, 3px 2px 2px #000, 
                3px 4px 2px #000, 4px 3px 3px #000, 
                4px 5px 3px #000, 5px 4px 2px #000, 
                5px 6px 2px #000, 6px 5px 2px #000, 
                6px 7px 1px #000, 7px 6px 1px #000, 
                7px 8px 0px #000, 8px 7px 0px #000, 
                2px 2px 4px rgba(0,0,0,0);
                transform: rotate(-5deg);
                margin: -50px 0 -15px 0;
            }

            & span{
                font-family: F37GingerPro;
                font-size: 24px;
                font-weight: 900;
                transform: rotate(-5deg);
                display: block;
            }
        }

        & .plan__body{
            font-family: Poppins;
            padding: 70px 20px 20px 20px;
            & .plan__price{
                padding-bottom: 40px;
                color: #fff;
                font-size: 65px;
                font-weight: 900;
                -webkit-text-stroke: 2px #000000;
                text-shadow: 
                0 1px 0px #000, 1px 0 0px #000, 
                1px 2px 1px #000, 2px 1px 1px #000, 
                2px 3px 2px #000, 3px 2px 2px #000, 
                3px 4px 2px #000, 4px 3px 3px #000, 
                4px 5px 3px #000, 5px 4px 2px #000, 
                5px 6px 2px #000, 6px 5px 2px #000, 
                6px 7px 1px #000, 7px 6px 1px #000, 
                7px 8px 0px #000, 8px 7px 0px #000, 
                2px 2px 4px rgba(0,0,0,0);
                transform: rotate(-5deg);
                margin: -50px 0 -15px 0;
                position: relative;
                display: flex;
                justify-content: center;
                & .price__zeros{
                    font-size: 0.4em;
                    margin: 0 0 -35px 0;
                    padding-top: .6em;
                    -webkit-text-stroke: 1px #000000;
                    text-shadow: 
                    0 1px 0px #000, 1px 0 0px #000, 
                    1px 2px 1px #000, 2px 1px 1px #000,  
                    2px 3px 0px #000, 3px 2px 0px #000, 
                    2px 2px 0px rgba(0,0,0,0);
                    }
                & .price__text{
                    position: absolute;
                    font-size: 16px;
                    text-shadow: none;
                    -webkit-text-stroke: 0px;
                    color: #000;
                    top: 0;
                    left: 45%;
                    text-transform: uppercase;
                }
            }
            & .plan__installation{
                color: var(--color-primary);
                text-align: center;
                font-size: 24px;
                font-weight: 700;
                border-top: 2px solid var(--color-light-gray);
                padding-top: 10px;
            }

            & .plan__features{
                padding-top: 10px;
                border-bottom: 2px solid var(--color-light-gray);
                & img{
                    max-width: 100%;
                }

                & .features__cable-go{
                    text-align: center;
                    padding: 10px;
                    border-block: 2px solid var(--color-light-gray);
                    & > p{
                        color: #f63b9f;
                        font-weight: 600;
                        margin-bottom: 5px;
                    }
                    & .features__cable-go__content{
                        display: flex;
                        align-items: center;
                        text-align: start;
                        gap: 10px;
                        font-weight: 500;
                        line-height: 1em;
                        & img{
                            width: 70%;
                        }
                    }
                }

                & .features__tv{
                    padding: 10px;
                    display: flex;
                    gap: 20px;
                    & img {
                        width: 60%;
                        object-fit: contain;
                    }

                    & .features__tv__content{
                        line-height: 1.2em;
                        & .tv__content__channels{
                            position: relative;
                            & strong{
                                font-size: 18px;
                            }

                            &::after{
                                content: "";
                                width: 30%;
                                height: 2px;
                                display: block;
                                background-color: #000;
                                margin-block: 5px;
                            }                            
                        }

                        & .tv__content__dispositives{
                            line-height: 1.5em;
                            & span{
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                font-size: 20px;
                                color: #fff;
                                font-weight: 900;
                                -webkit-text-stroke: 1px #000000;
                                text-shadow: 
                                0 1px 0px #000, 1px 0 0px #000, 
                                1px 2px 1px #000, 2px 1px 1px #000,  
                                2px 3px 0px #000, 3px 2px 0px #000, 
                                2px 2px 0px rgba(0,0,0,0);
                                & .num{
                                    font-size: 30px;
                                }                                
                            }
                        }
                    }
                }
            }
        }

        & .plan__footer{
            padding: 10px 20px;
            text-align: center;
            & .i-button{
                font-family: F37GingerPro;
                font-weight: 600;
                text-transform: none;
                font-size: 16px;
                padding: 1em 2.5em;
                margin-inline: auto;
                border-radius: 5px;
                background-color: var(--color);
                transition: padding .3s ease, opacity .3s ease;
                &:hover{
                    opacity: 0.8;
                    padding: 1em 3em;
                }
            }
        }
        &.plans__plan--70{
            & .plan__body{
                & .plan__installation{
                    border-block: 1px solid var(--color-primary);
                    padding: 10px;
                    font-weight: 500;
                    font-size: 13px;
                }

                & .plan__features{
                    border-top: 2px solid var(--color-light-gray);
                    margin-top: 20px;
                }
            }
        }

        &.plans__plan--100{
            --color: #5fbb95;
        }
        &.plans__plan--300, &.plans__plan-duo--400{
            --color: #fbb43f;
        }
        &.plans__plan--500, &.plans__plan-duo--600{
            --color: var(--color-primary);
        }
    }

    & .slider-plans{
        & > .swiper-wrapper{
            & > .swiper-slide-active{
                & .plans__plan{
                    animation: animation-position-x 0.5s .2s ease forwards; 
            
                    &.plans__plan--100, &.plans__plan-duo--400{
                        animation: animation-position-x 0.5s .4s ease forwards; 

                    }
                    &.plans__plan--300, &.plans__plan-duo--600{
                        animation: animation-position-x 0.5s .6s ease forwards; 

                    }
                    &.plans__plan--500{
                        animation: animation-position-x 0.5s .8s ease forwards; 
                    }
                }
            }
        }
    }
    
}

.banner{
    & img{
        max-width: 100%;
        width: 100%;
    }
}


.ventajas{
    padding: 90px 20px;
    & .i-container{
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        max-width: 1000px;
        
        & .ventajas__icon{
            width: 50px;
        }

        & h2{
            font-size: 35px;
            max-width: 500px;
            font-weight: bold;
        }

        & .ventajas__content{
            display: flex;
            align-items: center;
            gap: 20px;

            & .ventajas__content__image{
                width: 40%;
                & img{
                    max-width: 100%;
                }
            }

            & .ventajas__content__list{
                width: 30%;
                display: flex;
                flex-direction: column;
                justify-items: end;
                gap: 40px;
                & .ventajas__content__item{
                    display: flex;
                    font-size: 18px;
                    color: var(--color-dark-gray);
                    font-weight: 500;
                    text-align: end;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 20px;
                    & p{
                        width: 80%;
                    }
                    & .num{
                        font-family: Poppins;
                        font-size: 35px;
                        font-weight: bold;
                        color: var(--color-secondary);
                        border: 5px solid var(--color-secondary);
                        border-radius: 50%;
                        width: 20%;
                        text-align: center;
                        padding: .2em .3em;
                        aspect-ratio: 1;
                    }
                }
            }

            & .ventajas__content__list--right{
                & .ventajas__content__item{
                    text-align: start;
                }
            }
        }
    }
}


.connect{
    padding: 90px 20px;
    background-image: url(/resources/images/interlan_inicio_conectado.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    & .i-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        & h2{
            color: var(--color-primary);
            font-weight: bold;
            flex: 1;
        }

        & p{
            padding-block: 10px;
            flex: 1;
            color: var(--color-dark-gray);
            font-size: 1.2rem;
        }

        & .connect__btn{
            flex: 1;
            text-align: end;
            & a{
                width: 200px;
            }
        }
        
    }
}

.cable-go{
    padding: 90px 20px;
     & img{
        width: 100%;
     }
}

.reviews{
    & .reviews__review{
        background-color: var(--color-light-gray);
        padding: 20px;
        border-radius: 10px;
        & .review__info{
            display: flex;
            align-items: center;
            gap: 10px;

            & .review__info__image{
                width: 15%;
                aspect-ratio: 1;
                background-color: #5fbb95;
                border-radius: 50px;
                overflow: hidden;
            }

            & .review__info__content{
                & p{
                    color: var(--color-gray);
                    font-weight: 600;
                }
            }
        }

        & .review__stars{
            padding-block: 10px;
            color: #fbb43f;
            font-size: 18px;
        }
    }
}

.social-networks{
    padding: 90px 20px;
    & .i-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        max-width: 1600px;

        & h2{
            font-weight: bold;
        }

        & .slider-social-networks{
            padding-bottom: 40px;
            & .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
                bottom: 0px;
            }
        }

        & > p{
            font-size: 18px;
            color: var(--color-dark-gray);
            text-align: center;
        }
    }
}

.terms{
    & .first{
        padding: 60px 20px;
        & .i-container{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 60px;
            padding-bottom: 30px;
            max-width: 800px;

            & .i-button{
                width: 50%;
            }
            & p{
                text-transform: uppercase;
                font-size: 24px;
                font-weight: 700;
                color: var(--color-dark-gray);
            }
        }
    }

    & .second{
        padding: 60px 20px;
        background-color: var(--color-light-gray);
        & .i-container{
            display: flex;
            align-items: center;
            gap: 30px;

            & img, p{
                width: 50%;
            }
        }
    }
}

/* Desktop   */
@media screen and (min-width: 1367px){
    .ventajas {
        & .slash {
            padding-left: 0;
            margin-left: 0;
            &::before{
                display: none;
            }
        }
    }
}


/* Laptop */
@media screen and (max-width: 1366px) and (min-width: 1024px) {
    .ventajas {
        & .slash {
            padding-left: 0;
            margin-left: 0;
            &::before{
                display: none;
            }
        }
    }
    
    .plans {
        & .slider-plans-duo{
            & .plans__plan {
                margin-right: 0%;
                margin-left: 0%;
            }
        }
    }
}


/* Tablet */
@media screen and (max-width: 1023px) and (min-width: 768px){
    :root{
        --swiper-navigation-size: 24px;
        --swiper-navigation-sides-offset: 2.5%;
    }
    
    .swiper-button-next, .swiper-button-prev {
        padding: 1.5em 1.8em;
    }

    .ventajas {
        & .slash {
            padding-left: 0;
            margin-left: 0;
            &::before{
                display: none;
            }
        }
    }
    
    .plans {
        & .slider-plans-duo{
            & .plans__plan {
                margin-right: 0%;
                margin-left: 0%;
            }
        }
    }
}




/* Mobile */
@media screen and (max-width: 767px) {
    :root{
        --swiper-navigation-size: 24px;
        --swiper-navigation-sides-offset: 2.5%;
    }
    
    .swiper-button-next, .swiper-button-prev {
        padding: 1.5em 1.8em;
    }

    .plans{
        & .plans__title{
            flex-direction: column;
            gap: 20px;
            & h2{
                max-width: 100%;
                text-align: center;
            }

            & .plans__btns{
                justify-content: center;
            }
        }

        & .plans__plan{
            margin-top: 45px;
        }
        
       & .slider-plans-duo{
            & .plans__plan {
                margin-right: 0%;
                margin-left: 0%;
            }
        }
    }

    .ventajas{
        & .i-container{
            & h2{
                font-size: 24px;
            }
            & .ventajas__content{
                flex-direction: column;
                gap: 10px;
                & .ventajas__content__list{
                    width: 100%;
                    gap: 10px;
                    & .ventajas__content__item{
                        flex-direction: row-reverse;
                        text-align: start;
                        background-color: var(--color-light-gray);
                        padding: 10px 40px;
                        border-radius: 10px;
                        gap: 5px;

                        & .slash {
                            padding-left: 30px;
                            &::before{
                                width: 4px;
                                background-color: var(--color-secondary);
                                rotate: 10deg;
                            }
                        }

                        & .num{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 0;
                            border: none;
                        }
                    }

                    
                }
                & .ventajas__content__list--right{
                    & .ventajas__content__item{
                        flex-direction: row;
                    }
                }
            }
        }
    }

    .connect{
        padding: 45px 20px;
        background-size: cover;
        & .i-container{
            flex-direction: column;
            align-items: flex-start;
            gap: 40px;
            & .slash{
                ::before{
                    rotate: 0;
                }
            }

            & .connect__btn{
                width: 100%;
                box-sizing: border-box;
                & .i-button{
                    width: 100%;
                    max-width: 100%;
                    box-sizing: border-box;
                }
            }
        }
    }

    .terms{
        & .first{
            padding-bottom: 0;
            & .i-container{
                flex-direction: column-reverse;
                text-align: center;
                gap: 20px;
                & .i-button{
                    width: 100%;
                }
            }
        }

        & .second{
            margin-inline: 20px;
            border-radius: 30px;
            padding: 0px;
            background-color: #dadada;
            & .i-container{
                flex-direction: column;
                
                & img,p{
                    width: 100%;
                }

                & img{
                    padding: 30px 20px 0;
                    box-sizing: border-box;
                }

                & p{
                    background-color: var(--color-light-gray);
                    padding: 20px 30px;
                    box-sizing: border-box;
                    border-radius: 30px;
                    text-align: justify;

                }
            }
        }
    }
}