
.container_landing{ width: 100%; max-width: 1200px; padding: 0 10px; margin: auto; position:relative; }


/* HEADER ================================================================================== */
.landing_header{ background-color:#EAEEEF; }

    .landing_logo{ width:fit-content; margin: auto; padding-top:20px; }

    .landing_menu{ padding:40px 0; }

        .menu_movil_trigger_landing{ display:none; }
    
        .landing_menu_items{ display:flex; align-items: center; justify-content: center; font-size:15px; }
            .landing_menu_items div:after{ content:'|'; padding:0 20px; }
            .landing_menu_items div:last-child:after{ content:''; padding:0; }

            .landing_menu_item{ cursor:pointer; }


.container_landing .ylc_header_cart{ position:absolute; right:20px; top:20px; }



@media only screen and (max-width: 990px) {
    .landing_menu_items{ font-size:13px; }
        .landing_menu_items div:after{ padding:0 10px; }
}

@media only screen and (max-width: 768px) {
    .landing_header .container_landing{ display:flex; align-items: center; justify-content: space-between; padding-bottom:20px; }

        .landing_logo img{ width:120px; height:auto; }

        .landing_menu{ padding:0; }

            .menu_movil_trigger_landing{ display:inherit; position:absolute; left:20px; }
            .landing_menu_items{ display:none; }

    .container_landing .ylc_header_cart{ position:absolute; right:30px; top:50px; }
}


.sidr { font-family: 'Montserrat', sans-serif !important; }
.sidr ul li a, .sidr ul li span { padding: 10px 15px !important; font-weight: normal !important; }




/* SEC 1 ================================================================================== */
.landing_sec1{ background-color:#EAEEEF; }

    .landing_title{ font-size:25px; text-align:center; width:fit-content; margin:auto; padding:20px 0; line-height:1.2; }

    .landing_sec1_deco{ position:absolute; }

    .home_video_video{ width:100%; padding:20px 10px 40px 10px; }

        .home_video_video_inner{ width:100%; max-width:820px; aspect-ratio:16/9; margin:auto; position:relative; }

            .home_video_video_back{ position: absolute; width: 100%; height: 100%; background-size:cover; background-position: center; background-repeat: normal; }
            
            .home_video_video iframe{ width: 100%; aspect-ratio:16/9; }

            .home_video_video_play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;
                width:195px; height:195px; background-image:url('../images/glass-skin-lab/play.png'); background-size:100% 100%; }


@media only screen and (max-width: 768px) {
    .landing_title{ font-size:22px; padding:20px 10px 10px 10px; }
    .home_video_video{ width:100%; padding:0; }
         .home_video_video_play{  width:100px; height:100px; }
}


/* CARRUSEL PRODUCTES ================================================================================== */
.pin-section { position: relative; width: 100%; }
    
    .pin-container { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; 
        background-image:url('../images/glass-skin-lab/degree.png'); background-size: auto 100%; background-repeat: repeat-x;  }

        .pin_container_deco{ position: absolute; left: 0; background-image:url('../images/glass-skin-lab/Vector.png'); width: 60%; height: 100%; background-size: 100% 100%;}
        .pin_container_triangulo{ position:absolute; width:80%; height:80%; background-image:url('../images/glass-skin-lab/TRIANGULO.png'); 
            background-size:contain; background-repeat:no-repeat; background-position:center; }

        .product-showcase{ position: relative; width: 100%; max-width: 1100px; height: 100%; }

            .product-item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 750px; 
                text-align: center; display: flex; flex-direction: column; align-items: center; padding:0 10px; }

            .product-item p{ margin-bottom:15px; }

            .desc_line{ width:200px; margin: auto; height:1px; background-color:#000; }
            .desc_title{ font-size:20px; font-weight:900; text-align:center; margin-top:20px; }
            .desc_text{ margin-top:20px; font-size:14px; line-height:1.3; }

            .desc_text_bts{ display:flex; justify-content: center; }
                .desc_text_bts .desc_bt{ margin:0 5px; }

            .desc_bt{ width: fit-content; margin:20px auto 0 auto; background-color:#000; color:#fff; padding:10px 20px; }

            #p1 { z-index: 10; opacity: 1; left: 50%; }
            #p1 img { transform: scale(1); }
            #p1 .desc { opacity: 1; visibility: visible; }

            #p2 { z-index: 5; opacity: 1; left: 25%; }
            #p2 img { transform: scale(0.6); }
            #p2 .desc { opacity: 0; visibility: hidden; }

            #p3 { z-index: 1; opacity: 1; left: 10%; }
            #p3 img { transform: scale(0.6); }
            #p3 .desc { opacity: 0; visibility: hidden; }


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

    .desc_title{ font-size:17px; }
    .desc_text{ font-size:13px; }
    .desc_bt{ font-size:13px; }

    #p1 img { width:150px; height:auto; }
    #p2 img { width:150px; height:auto; }
    #p3 img { width:150px; height:auto; }
}



/*RUTINAS ===================================================================================*/
.rutina{ padding:60px 0; }
    
    .rutina_top{ width:100%; max-width:500px; }
        .lre_title{ font-size:70px; font-weight:800; white-space: nowrap; }
            .title_fomo{ color:#D8A4B0; }
            .title_glowup{ color:#E3AF4C; }
            .title_preppy{ color:#3BCFD6; }
        .lre_text{ font-size: 27px; line-height:1.4; margin-top:15px; }


    .rutina_content{ display:flex; align-items: end; margin-top:-20px; }

    .landing_rutina_esq{ width:313px; padding-right:10px; }
        
        .lre_img_bt{ width:100%; max-width:313px; }
            .lre_ig{ margin-top:15px; }
            .lre_ig img{ max-width:100%; height:auto; }
            .lre_bt{ width:fit-content; margin:30px auto 0 auto; color:#fff; padding:10px 15px; font-size:20px; }

                .lre_bt_fomo{ background-color:#D8A4B0; }
                .lre_bt_glowup{ background-color:#E3AF4C; }
                .lre_bt_preppy{ background-color:#3BCFD6; }


    .landing_rutina_dre{ width:calc(100% - 313px); padding-left:30px; }

        .lrd_filtros{ width: 357px; float:right; }

            .lrd_title{ font-size:22px; font-weight:700; }
            
            .lrd_todos{ width: 354px; text-align:center; font-size:22px; margin-top:20px; cursor:pointer; }

                .fomo_todos .off{ border:1px solid #000; color:#000; padding:10px 0; }
                .fomo_todos .on, .fomo_todos:hover div{ border:1px solid #D8A4B0; background-color:#D8A4B0; color:#fff; padding:10px 0; }

                .glowup_todos .off{ border:1px solid #000; color:#000; padding:10px 0; }
                .glowup_todos .on, .glowup_todos:hover div{ border:1px solid #E3AF4C; background-color:#E3AF4C; color:#fff; padding:10px 0; }

                .preppy_todos .off{ border:1px solid #000; color:#000; padding:10px 0; }
                .preppy_todos .on, .preppy_todos:hover div{ border:1px solid #3BCFD6; background-color:#3BCFD6; color:#fff; padding:10px 0; }

            .lr_filtros{ display:flex; justify-content: space-between; margin-top:10px; font-size:21px; }
                .lr_filtros svg{ margin-left:10px; }

                .lrd_dia{ width:49%; cursor:pointer; }
                .lrd_dia div{ display:flex; align-items: center; justify-content: center; padding: 5px 0; }

                    .fomo_dia .off{ border:1px solid #000; color:#000; }
                    .fomo_dia .on, .fomo_dia:hover div{ border:1px solid #D8A4B0; background-color:#D8A4B0; color:#fff; }
                    
                    .glowup_dia .off{ border:1px solid #000; color:#000; }
                    .glowup_dia .on, .glowup_dia:hover div{ border:1px solid #E3AF4C; background-color:#E3AF4C; color:#fff; }

                    .preppy_dia .off{ border:1px solid #000; color:#000; }
                    .preppy_dia .on, .preppy_dia:hover div{ border:1px solid #3BCFD6; background-color:#3BCFD6; color:#fff; }

                .lrd_nit{ width:49%; cursor:pointer; }
                .lrd_nit div{ display:flex; align-items: center; justify-content: center; padding: 9px 0; }

                    .fomo_nit .off{ border:1px solid #000; color:#000; }
                    .fomo_nit .on, .fomo_nit:hover div{ border:1px solid #D8A4B0; background-color:#D8A4B0; color:#fff; }

                    .glowup_nit .off{ border:1px solid #000; color:#000; }
                    .glowup_nit .on, .glowup_nit:hover div{ border:1px solid #E3AF4C; background-color:#E3AF4C; color:#fff; }
                    
                    .preppy_nit .off{ border:1px solid #000; color:#000; }
                    .preppy_nit .on, .preppy_nit:hover div{ border:1px solid #3BCFD6; background-color:#3BCFD6; color:#fff; }


        .lrd_swiper{ overflow:hidden; margin-top:25px; }

            .swiper-container_1, .swiper-container_2, .swiper-container_3{ overflow:hidden; width:100%; position:relative; padding-top:25px; }

            .exo_flip-card{ width: 100%; padding: 0; perspective: 1000px; cursor:pointer; }
                    
                /*
                @media only screen and (min-width: 768px) {
                    .exo_flip-card:hover .exo_flip-card-inner { transform: rotateY(180deg); }
                }
                */

                /*@media only screen and (max-width: 768px) {*/
                    .exo_flip-card.is-flipped .exo_flip-card-inner { transform: rotateY(180deg); }
                /*}*/
              
                .exo_flip-card-inner{ position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; }

                    .exo_flip-card-front{ position: absolute; width: 100%; height: 100%; padding: 10px; backface-visibility: hidden; background-color: #fff; border-radius: 10px;
                        border-radius: 30px; box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.15); }

                        .exo_flip_card_more{ position:absolute; width:30px; height:30px; right:10px; top:10px; }
                            .exo_flip_more_fomo{ background-image:url('../images/glass-skin-lab/fomo_more.png'); }
                            .exo_flip_more_glowup{ background-image:url('../images/glass-skin-lab/glowup_more.png'); }
                            .exo_flip_more_preppy{ background-image:url('../images/glass-skin-lab/preppy_more.png'); }

                        .exo_flip-card-front img{ max-width: 100%; height: auto; text-align:center; margin-top:30px; }
                        .flip_card_title{ text-align:center; font-size:16px; font-weight: 700; margin-top:15px; }

                        .flip_card_bt{ position:absolute; bottom:0; left: 0; width: 100%; background-color:#000; color:#fff; text-align: center; 
                            border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; font-size:18px; font-weight:800; padding:10px 0; }

                        .landing_bt{ position:absolute; bottom:0; left: 0; width: 100%; background-color:#000; color:#fff; text-align: center; cursor: pointer;
                            border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; font-size:18px; font-weight:800; padding:10px 0; }
                        .landing_bt img{ position:absolute; width:30px; height:auto; margin-top: -7px; display:none; }


                        .single_sug_add_cart_on{ font-size:16px; background-color:#ccc !important; }


                    .exo_flip-card-back{ position: relative; width: 100%; height: 100%; min-height: 450px; background-color: #fff; border-radius: 30px;
                        -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateY(180deg); padding:20px; 
                        border-radius: 30px; box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.15); }

                        .exo_flip_card_back{ position:absolute; width:30px; height:30px; right:10px; top:10px; background-size:cover; background-position:center; background-repeat:no-repeat; }
                            .exo_flip_back_fomo{ background-image:url('../images/glass-skin-lab/fomo_back.png'); }
                            .exo_flip_back_glowup{ background-image:url('../images/glass-skin-lab/glowup_back.png'); }
                            .exo_flip_back_preppy{ background-image:url('../images/glass-skin-lab/preppy_back.png'); }

                        .exo_flip_content{ font-size:14px; text-align:center; line-height:1.3; }
                        .exo_flip_content h2{ font-size:17px; margin-bottom:15px; padding:0 20px; }
            
            .num_icon{ display:flex; align-items: center; position:absolute; }

                .num{ width:26px; height:26px; border-radius:50%; padding-top:4px; font-weight:900; }
                .num_icon_fomo .num{ border:2px solid #D8A4B0; text-align:center;  color:#D8A4B0; }
                .num_icon_glowup .num{ border:2px solid #E3AF4C; text-align:center;  color:#E3AF4C; }
                .num_icon_preppy .num{ border:2px solid #3BCFD6; text-align:center;  color:#3BCFD6; }

                .icon{ padding-left:5px; }
                .num_icon_fomo{ color:#D8A4B0; }
                .num_icon_glowup{ color:#E3AF4C; }
                .num_icon_preppy{ color:#3BCFD6; }


.area{ width:100%; height:100%; }


@media only screen and (max-width: 940px) {
        
    .rutina_top{ width:100%; max-width:100%; }
        .lre_title{ max-width: 100%; font-size:60px; white-space: normal !important; }
        .lre_text{ font-size: 23px; }

    .rutina_content{ display:block; margin-top:30px; }

    .landing_rutina_esq{ width:313px; padding-right:10px; }
        
        .lre_img_bt{}
            .lre_ig{ display:none; }
            .lre_bt{ margin:0; font-size:17px; }

    .landing_rutina_dre{ width:100%; padding-left:0px; margin-top:40px; }

        .lrd_filtros{ width: 357px; float:none; }
}




.discounts-container{ margin-top: 30px; }

    .discount-button{ margin: 10px 0; display: flex; align-items: stretch; text-decoration: none; width: 500px; height: 60px; position:relative; }

        .discount-tag{ width: 100px; min-width: 100px; color: white; font-size: 38px; font-weight: bold; display: flex; align-items: center; justify-content: center;
            padding: 0 10px 0 15px; position: relative; }

        .discount-tag-fomo{ background-color: #D8A4B0; }
        .discount-tag-glowup{ background-color: #E3AF4C; }
        .discount-tag-preppy{ background-color: #3BCFD6; }

        .discount-tag:after{ content: ""; position: absolute; right: -12px; top: 0; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; z-index: 2; }

        .discount-tag-fomo:after{ border-left: 12px solid #D8A4B0; }
        .discount-tag-glowup:after{ border-left: 12px solid #E3AF4C; }
        .discount-tag-preppy:after{ border-left: 12px solid #3BCFD6; }
        
        .discount-text{ position:relative; background-color: #000000; color: white; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; 
            display: flex; align-items: center; padding: 0 25px; margin-left: 20px; flex-grow: 1; text-transform: uppercase; cursor:pointer; }

        .discount-text img{ position:absolute; width:30px; height:auto; margin-top: -7px; right: 20px; display:none; }

    .discount-text:hover { background-color: #333; }


@media (max-width: 768px) {
    .discount-button{ width: 380px; }

    .discount-tag{ width: 80px; min-width: 80px; padding: 0 5px 0 7px; font-size: 30px; }
    .discount-text{ font-size: 16px; }
}




.swiper-scrollbar { cursor: pointer !important; }
.swiper-scrollbar-drag { cursor: grab !important; }
.swiper-scrollbar-drag:active { cursor: grabbing !important; }



/* TIKTOK ============================================================================================================================ */
.gsl_tiktok{ margin: 70px 0 200px 0; padding: 0 10px; text-align:center; }

    .gsl_tiktok_logo{}
    .gsl_tiktok_title{ font-size:70px; font-weight:900; color:#ACDF4C; margin-top:15px; }

    .gsl_tiktok_items{ display:flex; flex-wrap:wrap; justify-content: center; width: 100%; margin-top:30px; }
        .gsl_tiktok_item{ width:190px; cursor:pointer; }
            .tiktok_item_img{ width:100%; aspect-ratio:0.80; background-size:100% 100%; }

            .tiktok_bt{ display:flex; align-items: center; background-color:#000; color:#fff; width:fit-content; margin:auto; padding:8px 15px; font-size:12px; }
            .tiktok_bt svg{ margin-left:10px; }


.tiktok-fake-player{ position: relative; cursor: pointer; width: 325px; border-radius: 12px; overflow: hidden; transition: transform 0.3s ease; }
.tiktok-fake-player:hover{ transform: scale(1.02); }

.modal{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 10000; justify-content: center; align-items: center; }

#video-container{ width: 100%; height: 100%; display: flex; flex-direction: column; }

.modal-content{ position: relative; width: 90%; max-width: 450px; height: 85vh; background: #000; border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; }
.modal-content iframe{ flex-grow: 1; border: none; }

