:root {
    --color-principal: #ff4403;
    --color-secundario:#000000;
    --color-whatsapp:#58c038;
    --color-contactos:#000000;
    --color-card:#ffff;
}


*{
    font-family: "Poppins";
}


/*background: linear-gradient(180deg, rgba(217, 217, 217, 0.56) 0%, rgba(115, 115, 115, 0.56) 100%);*/


/* ESTILOS GLOBALES*/






ol{
    margin:0px !important;
}


.navbar{
    padding:0px !important;
    height: auto !important;
}

.navbar__body-links {

    .active {
        span {
            font-weight: bold;
            color: var(--color-principal);
        }
    }
}


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

    .navbar__body{
        display:flex !important;
        flex-direction: column-reverse !important;
    }

    .navbar__body-logo{

        width:60% !important;
    }

    .navbar__logo-links{

        display:flex !important;
        flex-direction: column !important;

        a{

            text-align: center !important;
            padding-top: 20px;

            img{
                margin:0 auto !important;
            }
        }

        ul{
            padding-bottom: 20px;
        }
    }
}



#header_menu{
    all:unset;
    display: block;
    padding:0 0  0 45px;
    position: sticky;
    top:0;
    left:0;
    z-index:910;
    background-color:var(--color-secundario);

    @media screen and (max-width:850px){
        padding:0;
    }

    ul{

        margin:0;
        padding:0;
        display:flex;
        justify-content: space-between;
        list-style: none;
        flex-direction: row;

        @media screen and (max-width:850px){
            flex-direction: column-reverse;
            justify-content: center;
        }


        li{

            all:unset;
            display:flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            gap:20px;




            &:first-child{

                @media screen and (max-width:850px){
                    padding:15px;
                }


                a{



                    width:min-content;

                    img{
                        display: block;
                        width:100px;
                    }
                }

                div{
                    font-weight: 400;
                    color:white;


                    span{
                        color:var(--color-principal);
                    }
                }

            }


            &:last-child{
                all:unset;
                list-style:none ;
                display: grid;
                grid-template-columns: repeat(2,1fr);


                .contact_menu{

                    text-align: center;
                    font-size: 0.9em;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    gap:10px;
                    color:white;
                    padding:10px 30px 10px 30px;
                    text-decoration: none !important;

                    .text_contact{
                        div:first-child{
                            font-size:0.7em;
                        }
                    }



                    div:first-child{
                        i{
                            font-size: 1.5em;
                        }
                    }

                    div:last-child{
                        display:flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        gap:3px;
                    }

                    &:first-child{
                        background-color: var(--color-whatsapp);
                    }


                    &:last-child{
                        background-color: var(--color-contactos);
                    }

                }
            }


        }
    }

}



.sombra_negra{
    width:100%;
    height: 200px;
    position: absolute;
    bottom:0;
    left:0;
    z-index: 900;
    background: linear-gradient(to top, rgba(0, 0, 0, 1.5), transparent);
}

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
    bottom:auto !important;
}

#gpon_slider{

    position: relative;
    background-color: red;
    width:100%;



    .swiper-container{
        overflow: hidden;
        .swiper-wrapper{

            .swiper-slide{
                img{
                    width:100%;
                }
            }
        }

        .swiper-pagination{
            position:relative;

        }

    }






    #gpon_slider_tapa{

        position: absolute;
        top:0;
        left:0;
        z-index:900;
        color:white;
        width:100%;
        height: 100%;
        display:flex;
        justify-content: space-around;
        align-items: flex-end;
        flex-direction: column;
        pointer-events: none;

        @media screen and (max-width:1200px){
           justify-content: center;
        }


        .ERLISOFT_card{

            transform:translateX(-80px);
            background-color: var(--color-card);
            height:min-content;
            border-radius: 50px;
            width:min-content;


            @media screen and (max-width:1200px){
                transform: translateX(-80px)scale(0.9,0.9);
            }

            @media screen and (max-width:1100px){
                transform: translateX(-80px)scale(0.8,0.8);
            }

            @media screen and (max-width:1000px){
                transform: translateX(-80px)scale(0.7,0.7);
            }

            @media screen and (max-width:950px){
                transform: translateX(-80px)scale(0.6,0.6);

            }

            @media screen and (max-width:750px){
                display: none;
            }


            .ERLISOFT_card_header{

                width:100%;
                padding:20px;
                background-color: var(--color-contactos);
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                border-radius: 50px 50px 0 0;



                img{
                    width:75%;
                    display: block;
                }
            }

            .ERLISOFT_card_body{
                color:var(--color-contactos);
                pointer-events: all;

                form{

                    padding:30px;
                    display:grid;
                    grid-template-columns: repeat(1,1fr);
                    gap:10px;
                    pointer-events: all;
                    width:300px;



                    p{
                        font-weight: bold;
                        font-size: 1.2em;
                        margin:0;
                        padding:0;
                        text-align: center;
                    }

                    .select_llamanos{

                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap:10px;
                        border:1px solid var(--color-contactos);
                        font-weight: bold;




                        select{
                            width:65%;
                            text-align: center;
                            appearance: none;
                            font-size:.9em;
                            border:none;
                            outline:none;
                            font-weight:bold;
                        }



                    }


                    input[type=text]{
                        text-align: center;
                        border: 1px solid #C1C1C1

                    }

                    input[type=text]::placeholder{
                        font-weight: bold;
                    }

                    a{
                        color:black !important;
                    }


                    & .select_llamanos,& input[type=text]{
                        padding:12px 0 12px 0;
                        border-radius: 20px;


                    }


                    label{

                        font-size: .6em;
                        display:flex;
                        justify-content:flex-start;
                        align-items: center;
                        gap:8px;
                        margin:0;
                        padding:0;
                    }


                    button{
                        border-radius: 20px;
                        background-color: var(--color-contactos);
                        padding:20px;
                        color:white;
                        font-weight: bold;
                    }


                }
            }
        }

    }


}




.banner_form-header{

    img{
        padding:10px;
        display: block;
        width:85%;
    }
}

.banner_form{

    display:flex;
    flex-direction: column;
    gap:10px;

    p{
        margin-bottom: 10px !important;
    }



    .select_container{

        width:85%;
        display:flex;
        justify-content: center;
        align-items: centr;
        flex-direction: row;
        border:1px solid var(--color-contactos);
        border-radius: 5px;
        overflow: hidden;
        padding:7px;



        select{


            width:100%;
            border:none;
            appearance: none;
            margin: 0;

        }

    }

    input{
        width:85%;
        border-radius: 5px;
        border:1px solid var(--color-contactos);
        padding:7px;
    }


    ol{
        display:flex;
        flex-direction: column;
        list-style: none;
        margin-top: 10px !important;
        gap:5px;

        li{

            font-size: .8em;

            input{
                width:auto !important;
            }
        }
    }

}

.banner_form-container{


    height:auto !important;

    .banner_form-title{
        margin-bottom: 0px;
    }
}

.banner{
    .banner_carousel{
        .banner_item{

            padding:20px;
            background-color: var(--color-principal);

            a{
                display: block;

                img{
                    display: block;
                    width:35%;
                }
            }
        }
    }
}


.seccion_planes{

    position: relative;
    margin:0;


    .sombra_negra{
        display:none !important;
    }

    background: linear-gradient(
        var(--color-secundario),
        var(--color-principal),
        var(--color-secundario)
    );


    h2.seccion_planes-subtitle{
        display:flex;
        justify-content: center;
        align-items: center;
        gap:8px;
        font-weight: 400;
        color:white;

        strong{
            font-size: .9em;
            color:white;
            background: linear-gradient(90deg, #0A0A0A 0%, #FF4D00 100%);
            padding:7px;
            border-radius:0 10px 10px 10px;
        }
    }

    .seccion_planes-title{
        font-size: 3em;

        @media screen and (max-width:780px){
            font-size: 2.3em;
        }
    }

    .seccion_planes-subtitle{

        font-size: 1.6em;

        @media screen and (max-width:780px){
            font-size: 1.2em;
        }

        @media screen and (max-width:600px){
            font-size: 1.3em;
            display:flex;
            flex-direction: column;
            gap:15px !important;
        }
    }

    p.seccion_planes-destacado{
        all:unset;
        font-weight: 400 !important;
        color:var(--color-contactos);
        text-align: center;
        width:100%;
        text-align: center;
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color:white;
        font-size: 1.3em;
        margin-bottom: 50px;

        @media screen and (max-width:780px){
            font-size: 1em;
        }

        @media screen and (max-width:500px){
            font-size: .9em;
            flex-direction: column-reverse;
            gap:20px;
        }

        span{


            position: relative;

            img{
                position: absolute;
                top:100%;
                left:0;
                width:100%;
            }
        }

    }
}


.plan_item_animate{

    position: relative;
    animation-name: efecto;
    animation-duration:2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}


@keyframes efecto {
    0%{
        top:0px;
    }
    50%{
        top:20px;
    }
    100%{
        top:0px;
    }
}



@keyframes brillo {
    0%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(3);
    }
    100%{
        filter:brightness(1);
    }
}

/* =========================================
       CONTENEDOR DE PLANES
       ========================================= */
    .gpon-plans .container_planes {
        margin-top: 20px;
    }

    .gpon-plans #planes-fibra-base-content,
    .gpon-plans #planes-fibra-dgo-content {
        justify-content: center;
    }

    .gpon-plans .container_planes>[class*="col-"] {
        display: flex;
        justify-content: center;
    }

    .gpon-plans .container_planes:hover .plan_item_nuevo:not(:hover) {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        overflow: hidden;
        transition: all 200ms;
        transform: scale(0.97, 0.97);
        border: none !important;
    }

    .gpon-plans .container_planes:hover .plan_item_nuevo:not(:hover) a {
        background-color: var(--color-principal) !important;
    }

    .gpon-plans .plan_item_nuevo {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        overflow: hidden;
        transition: all 200ms;
        width: 100%;
        max-width: 320px;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .gpon-plans .plan_item_nuevo:hover {
        transform: scale(1, 1);
        background-color: var(--color-principal);
        border: 3px solid white;
    }

    .gpon-plans .plan_item_nuevo:hover a {
        background-color: black !important;
    }

    /*.gpon-plans .plan_item_nuevo:hover .meses {
        background-color: black !important;
    }*/

    .gpon-plans .plan_item_nuevo.recomendado {
        background-color: var(--color-principal);
        border: 3px solid white;
    }

    .gpon-plans .plan_item_nuevo.recomendado .plan_item_container_recomendado {
        display: block;
    }

    .gpon-plans .plan_item_nuevo.recomendado .plan_item_container_nuevo h3 .mbps {
        background-color: black !important;
    }

    .gpon-plans .plan_item_nuevo.recomendado .plan_item_container_nuevo hr {
        border: 1px solid #ffc5b0;
    }

    .gpon-plans .plan_item_nuevo.recomendado .plan_item_container_nuevo a {
        background-color: black;
    }

    .gpon-plans .plan_item_container_recomendado {
        background-color: white;
        width: 100%;
        padding: 10px;
        text-align: center;
        color: black;
        font-weight: bold;
        font-size: 1.5em;
        display: none;
    }

    .gpon-plans .plan_item_container_promo {
        background-color: yellow;
        width: 100%;
        padding: 10px;
        text-align: center;
        color: black;
        font-weight: bold;
        font-size: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gpon-plans .plan_item_container_promo .bono {
        font-size: 0.9em;
        padding: 0px 5px 0px 5px;
    }

    .gpon-plans .plan_item_container_promo .mbps {
        font-size: 0.7em;
        padding: 0px 5px 0px 5px;
    }

    .gpon-plans .plan_item_container_nuevo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 17px;
        padding: 30px 20px;
        height: 100%;
        flex: 1;
    }

    .gpon-plans .plan_item_container_nuevo h6 {
        font-size: 2.3em;
        font-weight: 800;
        color: white;
    }

    .gpon-plans .plan_item_container_nuevo h3 {
        position: relative;
        display: flex;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    .gpon-plans .plan_item_container_nuevo h3 strong {
        color: white;
        font-style: italic;
        font-family: "Kanit", sans-serif !important;
        font-weight: 800;
        font-size: 3.2em;
        overflow: hidden;
        line-height: 69px;
    }

    .gpon-plans .plan_item_container_nuevo h3 .mbps {
        all: unset;
        position: absolute;
        right: -25px;
        font-size: 13px;
        background-color: var(--color-principal);
        font-weight: 700;
        color: white;
        border-radius: 3px;
        padding: 3px 5px;
        transform: skewX(-17deg);
        text-rendering: geometricPrecision;
    }

    .gpon-plans .plan_item_container_nuevo hr {
        border: 1px solid var(--color-principal);
        width: 70%;
        border-radius: 10px;
        margin: 0;
        padding: 0;
    }

    .gpon-plans .plan_item_container_nuevo p {
        font-family: "Poppins", sans-serif;
        color: white;
        text-rendering: geometricPrecision;
        font-size: 0.9em;
        margin: 0;
    }

    .gpon-plans .bono {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .gpon-plans .bono h5 {
        margin: 0;
        padding: 0;
        font-style: italic;
    }

    .gpon-plans .bono h3 .mbps {
        right: 32px;
    }

    .gpon-plans .bono h5:first-of-type {
        font-style: italic;
        font-size: 0.9em;
        padding: 2px;
        font-weight: bold;
        border-radius: 5px;
        background-color: #ffd21f;
    }

    .gpon-plans .bono h5:last-of-type {
        font-size: 0.9em;
        color: white;
        font-family: "Kanit", sans-serif;
        font-weight: 600;
        font-style: italic;
    }

    .gpon-plans .recibe_gratis {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    .gpon-plans .recibe_gratis p {
        line-height: 1;
        margin: 0;
        padding: 0px 0px 0px 20px;
        font-family: "Poppins", sans-serif;
        font-size: 25px;
        text-align: center;
    }

    .gpon-plans .recibe_gratis p strong {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
        font-size: 20px;
    }

    .gpon-plans .recibe_gratis div {
        width: min-content;
    }

    .gpon-plans .recibe_gratis div img {
        width: 33px;
    }

    .gpon-plans .recibe_gratis img.full_logo {
        width: 40%;
    }

    .gpon-plans .plan_item_nuevo:hover img.full_logo {
        content: url('/images/gpon-plans/gpon_original.png');
    }

    .gpon-plans .incluye {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 0.9em;
        gap: 6px;
    }

    .gpon-plans .incluye img {
        width: 25%;
    }

    .gpon-plans .incluye strong {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
    }

    .gpon-plans .mas {
        width: 100%;
        font-size: 4.2em;
        font-weight: bold;
        color: white;
        font-style: italic;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 50px;
    }

    .gpon-plans .mas img {
        width: 110%;
    }

    .gpon-plans .precio {
        color: white;
        font-size: 80%;
    }

    .gpon-plans .precio_decimal {
        font-style: italic;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .gpon-plans .precio_decimal span:first-child {
        font-weight: 500;
        font-size: 23px;
        align-self: flex-end;
    }

    .gpon-plans .precio_decimal span:nth-child(2) {
        font-size: 8.4em;
        font-weight: 600;
        overflow: hidden;
        line-height: 100px;
    }

    .gpon-plans .precio_decimal span:last-child {
        font-size: 50px;
        align-self: flex-start;
    }

    .gpon-plans .precio_decimal span:last-child .decimal {
        line-height: 47px;
        overflow: hidden;
    }

    .gpon-plans .precio_decimal span:last-child .meses span {
        font-style: italic;
        font-family: "Kanit", sans-serif !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        left: -10px;
        color: white;
        font-size: 20px;
        line-height: 0.88;
        margin-left: 7px;
    }

    .gpon-plans .precio_regular {
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        color: white;
        font-size: 1.1em;
    }

    .gpon-plans .plan_item_container_nuevo a {
        background-color: var(--color-principal);
        color: white;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 10px;
        text-decoration: none;
        font-family: "Poppins", sans-serif;
    }

    .gpon-plans .plan_item {
        background: linear-gradient(179.31deg, #c63c00 -10.49%, #000000 104.47%);
        color: white;
        text-align: center;
        border-radius: 20px;
        height: min-content;
        transition: all 200ms;
        width: 100%;
    }

    .gpon-plans .plan_item_informacion {
        pointer-events: none;
        color: white;
        background: none !important;
        padding-top: 25px;
        text-align: justify !important;
    }

    .gpon-plans .plan_item_informacion p {
        font-size: 0.8em;
        margin: 0;
    }

    @media screen and (max-width: 780px) {
        .gpon-plans .seccion_planes-title {
            font-size: 2.3em;
        }

        .gpon-plans .seccion_planes-subtitle {
            font-size: 1.2em;
        }

        .gpon-plans p.seccion_planes-destacado {
            font-size: 1em;
        }
    }

    @media screen and (max-width: 600px) {
        .gpon-plans .seccion_planes-subtitle {
            font-size: 1.3em;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
    }

    @media screen and (max-width: 500px) {
        .gpon-plans p.seccion_planes-destacado {
            font-size: 0.9em;
            flex-direction: column-reverse;
            gap: 20px;
        }
    }

    .gpon-plans .plan-switch {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        margin: -12px 0 22px;
    }

    .gpon-plans .plan-switch-btn {
        border: 2px solid #ff4403;
        border-radius: 12px;
        background: #0b0b0b;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.15;
        text-align: center;
        min-width: 220px;
        padding: 10px 14px;
        cursor: pointer;
    }

    .gpon-plans .plan-switch-btn.is-active {
        background: #fff;
        color: #111;
    }

    .gpon-plans .plan_item_container_nuevo h3>p {
        position: absolute;
        top: 100%;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        margin: 0;
        font-size: 0.38em;
        font-weight: 700;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .gpon-plans .liga-max-line {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        color: white;
        font-size: 0.9em;
        margin: 0;
        flex-direction: column;
    }

    .gpon-plans .items {
        display: flex;
        text-align: center;
        flex-direction: column;
    }

    .gpon-plans .liga-max-line img {
        width: auto;
        height: 40px;
        display: block;
        flex-shrink: 0;
        padding: 0px 0px 0px 5px;
    }

    .gpon-plans .liga-max-text {
        color: white;
        display: inline-block;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
    }

    .gpon-plans .disney-premium-text {
        color: white;
        display: inline-block;
        line-height: 1.2;
        white-space: nowrap;
    }

    .gpon-plans .incluye strong {
        font-family: "Poppins", sans-serif;
        font-weight: 600;
    }

    .gpon-plans .precio_pago_puntual {
        width: 100%;
        max-width: 80%;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 7px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--color-principal);
        margin: -4px auto 0 auto;
    }

    .gpon-plans .precio_pago_puntual_texto {
        font-family: "Poppins", sans-serif;
        font-size: 0.85em;
        font-weight: 800;
        line-height: 1.05;
        text-align: center;
    }

    .gpon-plans .precio_pago_puntual_monto {
        display: flex;
        align-items: flex-start;
        font-family: "Kanit", sans-serif !important;
        font-weight: 800;
        line-height: 1;
    }

    .gpon-plans .precio_pago_puntual_monto .simbolo {
        font-size: 1.25em;
        margin-right: 3px;
        margin-top: 5px;
    }

    .gpon-plans .precio_pago_puntual_monto .numero {
        font-size: 2.7em;
    }

    .gpon-plans .plan_item_container_recomendado {
        background-color: white;
        width: 100%;
        padding: 10px;
        text-align: center;
        color: black;
        font-weight: 800;
        font-size: 1.1em;
        display: none;
        text-transform: uppercase;
    }

    /* Clase dinámica para mostrar el encabezado */
    .gpon-plans .plan_item_nuevo.plan-con-encabezado .plan_item_container_recomendado {
        display: block;
    }

    /* Opcional: borde blanco cuando el plan tiene encabezado */
    .gpon-plans .plan_item_nuevo.plan-con-encabezado {
        border: 3px solid white;
    }












.seccion_beneficios{
    margin: 0px;

    background: linear-gradient(
        var(--color-secundario)
    );



    .seccion_beneficios-title{
        color:white;
    }
}


.section_metodo_de_pago{
    background: linear-gradient(
        var(--color-secundario),
        var(--color-secundario)
    ) !important;
}


/*
background: linear-gradient(
        var(--color-secundario),
        var(--color-principal)

    );
*/


.beneficios_container{
    width:100%;

    background: linear-gradient(
        var(--color-secundario),
        var(--color-secundario)

    );

    .swiper-container{
        overflow: hidden;

        .swiper-wrapper{

            .swiper-slide{
                img{
                    width:100%;
                }
            }
        }
    }

}

.metodos_de_pago{

    background: linear-gradient(
        var(--color-secundario),
        var(--color-principal)
    ) !important;


    a{

        display: flex;
        justify-content: center;
        align-items: center;
        padding:10px 10px 70px 10px;

        img{

            width:51%;

            @media screen and (max-width:1000px){
                max-width:70%;
                min-width: 80%;
            }
        }
    }
}


#TerminosyCondiciones{
    width:70%;
    margin:30px auto;

    ol{


        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:10px;
        list-style: none;


        li{


            width:100%;

            input[type=radio]{
                display:none;

                &:checked ~ .container_title + .container_text{
                   height: auto;
                   padding:12px;
                }



            }

            .container_title{


                border-radius: 15px;
                background-color: var(--color-contactos);
                color:white;
                display:flex;
                justify-content: flex-start;
                align-items: center;
                gap:15px;
                padding:8px;
                position: relative;
                margin:0;
                cursor: pointer;





                .circle_title{
                    width:31px;
                    height: 31px;
                    border-radius: 50%;
                    background-color: var(--color-principal);
                    flex-shrink: 1;
                    font-size: .8em;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;
                }

                span{
                    font-size: .9em;
                }

                i{
                    position: absolute;
                    right:20px;
                    font-size: 1.2em;
                    cursor: pointer;
                }

            }

            .container_text{

                font-size: .8em;
                padding:0px;
                border-radius: 0  0 15px 15px;
                overflow: hidden;
                height: 0px;
                transition: all 200ms;
                interpolate-size:allow-keywords;

            }
        }
    }
}



.tyc-title__container{
    background-color: var(--color-contactos) !important;


    i{
        color:white;
    }

    .tyc-title{
        color:white !important;
    }
}

.seccion_planes{
    .container{


    }
}



#form_footer{


    position:fixed;
    left:0;
    bottom:0;
    z-index:900;
    width:100%;
    display:none;
    transform:translateY(78%);
    transition: all 200ms;


    &.active_form_footer{
        transform:translateY(0%);
    }


    @media screen and (max-width:750px){
        display:block;
    }


    form{



        margin:0 auto;
        width:max-content;
        background-color: var(--color-principal);
        display:grid;
        grid-template-columns: repeat(2,min-content);
        border-radius:20px 20px 0 0;
        border-width: 2px, 2px, 0px, 2px;
        border-style: solid;
        border-color: #FF4403;
        overflow: hidden;
        border-bottom: 1px solid transparent !important;


        @media screen and (max-width:900px){
            display:grid;
            grid-template-columns: repeat(1,1fr);
            place-items: center;
        }


        .col_1{


            &:first-child{

                width:400px;
                display:flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                cursor: pointer;


                @media screen and (max-width:1200px){
                    width:300px !important;
                }

                @media screen and (max-width:900px){
                    width:100% !important ;
                }


                p{
                    font-size: 1.9em;
                    display:flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color:White;
                    font-weight: 500;

                    @media screen and (max-width:1200px){
                         font-size: 1.5em;
                    }

                    @media screen and (max-width:900px){
                        font-size: 1.2em;
                        margin:0px;
                        padding:10px;
                    }
                }
            }

            &:last-child{

                display:flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color:white;
                gap:10px;
                padding:25px;

                @media screen and (max-width:900px){
                    gap:20px;
                }

                .form_input{

                    display:grid;
                    grid-template-columns: repeat(3,200px);
                    gap:10px;



                    @media screen and (max-width:1100px){
                        grid-template-columns: repeat(3,1fr);
                    }

                    @media screen and (max-width:900px){
                       grid-template-columns: repeat(1,1fr);
                       width:100%;
                    }

                    .select_llamanos,input,button{
                        padding:8px;
                        background-color: white;
                        border-radius: 15px;
                        font-size: .9em;
                    }




                    .select_llamanos{

                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap:10px;
                        border:1px solid var(--color-contactos);
                        font-weight: bold;



                        @media screen and (max-width:900px){
                            width:100%;
                        }



                        select{
                            width:65%;
                            text-align: center;
                            appearance: none;
                            font-size:.9em;
                            border:none;
                            outline:none;
                            font-weight:bold;
                        }

                    }


                    input{

                        border:none;
                        border: 1px solid #C1C1C1

                    }

                    input::placeholder{
                        font-size: .9em;
                        text-align: center;
                    }

                    button{
                        background-color: var(--color-principal);
                        color:white;

                        @media screen and (max-width:1000px){
                            font-size: 0.8em;
                        }
                    }

                }

                .form_checkbox{

                    display:flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    width:100%;
                    gap:20px;


                    @media screen and (max-width:900px){
                        flex-direction: column;
                        gap:1px;
                    }


                    label{

                        font-size: .7em;
                        display:flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        gap:5px;

                        a{
                            color:black;
                            text-decoration: none;
                        }
                    }


                }


            }

        }

    }
}

footer{


    background-color: var(--color-principal);

    .footer__derechos{
       background-color: var(--color-contactos);
    }

    #whatsap_float{
        position: fixed;
        right:30px;
        bottom:30px;
        z-index: 900;
        width:70px;
        height: 70px;
        border-radius: 50%;
        background-color: var(--color-principal);
        cursor: pointer;
        display:none;
        justify-content: center;
        align-items: center;




        a{

            width:100%;
            height: 100%;
            display: block;
            display:flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            background-color: var(--color-principal);
            border-radius: 50%;


            i{
                color:white;
                font-size:30px;
            }
        }
    }

}





@media screen and (min-width: 1500px) {
    .container {
        max-width: 1500px !important;
    }
}