/* Scrollbar */
		::-webkit-scrollbar {
			width: 2px;
			height: 2px;
			background-color: rgba(255, 255, 255, 0);
		}

		::-webkit-scrollbar-thumb {
			margin-top: 1vw;
			margin-bottom: 1vw;
			border-radius: 0.5rem;
			background: linear-gradient(1deg, #1f1f1f, #070707, #131313);
		}

		::-webkit-scrollbar-track {
			margin: 1em;
			max-height: 2px;
			max-width: 2px;
            background: transparent;
		}

        
        /* FIELDSET */
            @font-face {
                font-family: 'fieldset';
                font-style: normal;
                font-weight: 2000px;
                src: url("../fonts/ROBO.ttf") format('truetype');
            } 

        /* REDONDED */
            @font-face {
                font-family: 'redonded';
                font-style: normal;
                font-weight: 2000px;
                src: url("../fonts/MyriadPro-Light.otf") format('truetype');
            } 

        /* LUXURY */
            @font-face {
                font-family: 'luxury';
                font-style: normal;
                font-weight: 2000px;
                src: url("../fonts/Vogue.ttf") format('truetype');
            }     

    /* =================================================== */
    /* ================== GENÉRICOS ====================== */
    /* =================================================== */

        :root{

        }

        *{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            user-select: none;
            scroll-behavior: smooth;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            touch-action: manipulation;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body{
            background: radial-gradient(circle, #e6e6e6 10%, transparent 11%);
            background-size: 1em 1em;
            background-color: #f3f3f3;
            opacity: 1;
            overflow: overlay;
        }

        #body{
            overflow-x: hidden !important;
            max-width: 100vw;
        }

        img{
            width: 100%;
            object-fit: contain;
        }

        button{
            border: none;
            background: transparent;
            outline: none;
            cursor: pointer;
        }

        h1{
            font-family: 'redonded';
            font-weight: 100;
            color: #282828;
            font-size: 8vmin;
            position: relative;
            margin: 1em;
            margin-top: 1em;
            margin-bottom: 3em;
        }

        area{
            position: relative;
        }

        a{
            display: flex;
            position: relative;
            text-decoration: none;
            cursor: pointer;
            transition: 0.2s linear;
        }

        

            /* VISTA PH */
            /* Cuando la pantalla es menor a "X" ejecuta el programa */
                @media only screen and (max-width: 630px) {
                    h1{
                        font-family: 'redonded';
                        font-weight: 100;
                        color: #282828;
                        font-size: 2.5em;
                        position: relative;
                        margin: 1em;
                        margin-top: 0;
                        margin-bottom: 3em;
                    }

                    #videoPC{display: none;}
                    #videoPH{display: visible;}

                }


            /* VISTA PC */
            /* Cuando la pantalla es mayor a "X" ejecuta el programa */
                @media only screen and (min-width: 631px) {
                    #videoPC{display: visible;}
                    #videoPH{display: none;}

                }

    /* =================================================== */
    /* ================== GENERALIZADOS ================== */
    /* =================================================== */


        /* P separadores --> | */
            .separator{
                color: #c8c8c8;
                font-size: 2em;
                top: -5px;
                font-weight: 100;
                position: relative;     
                display: none;                       
            }     


    /* =================================================== */
    /* ================= LP PRESENTATION ================= */
    /* =================================================== */


        /* SECTION contenedora de toda la lp */
            .lpGeneralContainer{
                position: fixed;
                z-index: 9999;
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                width: 100vw;
                max-width: 100vw;
                height: 100vh;
                background: transparent;
                
            }

            /* ARTICLE contenedor del lp */
                .lpContainer{
                    width: 100vw;
                    max-width: 100vw;
                    height: 100%;
                    display: flex;
                    position: relative;
                    flex-direction: column;
                    background: #000610;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    transition: 3s ease-out;
                }

                /* IMG COMUN */
                    .lpContainer img{
                        position: relative;
                        transition: 5s ease-in-out;
                        /* width: 13.5em;
                        height: 12em; */
                        width: 11.5em; height: 7em;
                        min-height: 0%;
                        max-height: 6em;
                        opacity: 0%;
                        /* z-index: 1; */
                        object-fit: fill;
                    }

                /* IMG superior */
                    .lpLogoDiamanteIzquierdo{
                        /* transform: rotate(0deg); */
                        transform: rotate(-40deg) scale(0.5);
                        bottom: -2em;
                        z-index: 4;
                    }

                /* IMG inferior */
                    .lpLogoDiamanteDerecho{
                        transform: translateX(-50px) rotate(8deg);
                        top: -4em;
                        left: -2px;
                        z-index: 0;
                    }  

                /* SPAN con titulos */
                    .lpTitlesContainer{
                        transition: 5s cubic-bezier(0,-0.01, 0, 0.57);
                        background: transparent;
                        padding: 0.5em;
                        /* width: 12em; */
                        width: auto;
                        opacity: 0%;
                        display: flex;
                        flex-direction: column;
                        align-content: center;
                        z-index: 5;
                        align-items: center;
                        padding-top: 0.72em;
                        justify-content: center;
                        top: -3em;
                        position: relative;
                    }

                    /* H1 con titulo */
                        .lpTitle{
                            transition: 6s ease-out;
                            transition-delay: 1s;
                            color: #706031;
                            font-family: 'luxury';
                            font-weight: 100;
                            font-size: 2em;
                            /* letter-spacing: 4px; */
                            transform: scale(0.5) translateY(-13px);
                            letter-spacing: -16px;
                            opacity: 0;
                        }

                    /* P con subtitulo */
                        .lpSubtitle{
                            transition: 8s ease-out;
                            color: #8d7b47a3;
                            font-family: 'luxury';
                            /* letter-spacing: 4px; */
                            transform: scale(0.5);
                            letter-spacing: -15px;
                            opacity: 0;
                            display: flex;
                            text-align: center;
                            /* width: 100%; */
                            /* background: red; */
                            justify-content: center;
                            margin: 0 auto;
                        }

                


                /* DIV contenedor de bullet */
                    .lpBulletContainer{
                    position: absolute;
                    display: flex;
                    background: #ff000000;
                    z-index: 7;
                    /* width: 12em; */
                    width: 20em;
                    justify-content: space-between;
                    transition: 3s ease-in-out;
                    opacity: 0%;
                    }

                    .lpBulletContainer p{
                    color: #8d7b47a3;
                    color: #937f46;
                    font-size: 1.5em;
                    transition: 1s ease-in-out;
                    }




    /* =================================================== */
    /* ===================== HEADER ====================== */
    /* =================================================== */


        /* HEADER general */
          header{
            z-index: 1020;
            position: fixed !important;
            transition: 0.4s ease;
            width: 100%;
          }

          .headerTitle{
            margin: 0;
            color: #cbab55;
            font-family: 'luxury';
            letter-spacing: 2px;
            font-weight: 100;
            text-shadow: 0 0 10px #8e6c34;
          }

          /* A iconos botones ANIMACION COMUN */
            .headerIconsContainer a:hover{
              filter: brightness(100%) contrast(100%) drop-shadow(0px 0px 6px wheat);
              transform: scale(1.05);
            }   

          /* A iconos botones ANIMACION COMUN */
            .headerTagsContainer a:hover{
                text-transform: uppercase;
                text-decoration-color: transparent;
                font-weight: 100;
                color: #efefef;
                /* margin: 0.5em; */
                transform: scale(1.07);
            }   

        /* VISTA PH */
        /* Cuando la pantalla es menor a "X" ejecuta el programa */
            @media only screen and (max-width: 674px) {

            /* HEADER container */
                header{
                    background: linear-gradient(360deg, black, #151000);
                    opacity: 1;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-content: center;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 6em;
                    padding: 1em 0;
                    justify-content: space-between
                    
                }

                /* IMG logo header */
                    .headerLogo{
                        width: 5em;
                        /* max-width: 3.5em; */
                        /* min-width: 2em; */
                        display: flex;
                        position: relative;
                        z-index: 10;
                        cursor: pointer;
                        transition: 0.2s ease-in-out;
                        margin-left: 1em;
                    }

                    .headerLogoPC{
                        display: none;
                    }

                    .headerLogoPH{
                        display: flex;
                    }

                /* LABEL contenedor del buscador del header */
                    .headerBrowserContainer{
                        background: #ebebeb;
                        border-radius: 5px;
                        border: solid 1px #fdfdfd;
                        display: flex;
                        flex-wrap: nowrap;
                        flex-direction: row;
                        align-items: stretch;
                        justify-content: space-between;
                        margin: 1em auto;
                        margin-left: 1em;
                        width: 56vw;
                        max-width: 21em;
                        z-index: 10;
                        transition: 0.2s ease-in-out;
                        height: 2em;
                        position: relative;
                    }  

                    /* INPUT text del buscador del header */
                        .headerBrowserInput{
                            background: transparent;
                            border: none;
                            outline: none;
                            width: 100%;
                            padding: 0 1em;
                            padding-top: 3px;
                            position: relative;
                            top: -2px;
                            z-index: 4;
                            font-family: 'redonded';
                        }

                    /* ICON de lupa del buscador */
                        .headerBrowserIcon{
                        width: 1.5em;
                        object-fit: contain;
                        filter: invert(50%);
                        margin-right: 0.5em;
                        }  

                    /* SPAN contenedor con los resultados */
                        .headerBrowserResultsContainer{
                            position: fixed;
                            background: #f0f0f0;
                            top: 96px;
                            left: 0;
                            z-index: 20;
                            border-radius: 6px;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            max-height: 17em;
                            overflow: overlay;
                            width: 100vw;
                            transition: ease-in-out 0.4s;
                            /* margin: 0 8%; */
                            box-shadow: 0px 35px 50px #3d3018;
                        }
            
                        /* LI contenedor con cada item buscado */
                            .headerBrowserResultItem{
                                display: flex;
                                flex-direction: row;
                                border-bottom: 1px solid #e1e1e1;
                                cursor: pointer;
                                transition: ease 0.3s;
                                align-items: center;
                            }
            
                            .headerBrowserResultItem:hover{
                            background-color: white;
                            box-shadow: 0 0 10px #00000017;
                            /* filter: invert(1); */
                            }
            
                            /* IMG con la imagen del resultado */
                                .headerBrowserResultItem img{
                                    width: 7em;
                                    filter: invert(0) !important;
                                    width: 8em;
                                    filter: saturate(110%);
                                    height: 8em;
                                    min-width: 8em;
                                    min-height: 8em;
                                    object-fit: cover;
                                    object-position: center;
                                    /* margin: auto; */
                                }
                
                            /* DIV contenedor con el nomrbe y colecc */
                                .headerBrowserResultItemInfo{
                                    padding: 2px 18px;
                                    transition: ease 0.3s;
                                }
                
                                /* H2 con nombre */
                                    .headerBrowserResultItemInfo h2{
                                    font-family: 'redonded';
                                    text-transform: uppercase;
                                    font-size: 1.2em;
                                    margin-top: 0.5em;
                                    font-weight: 600;
                                    color: black;
                                    text-align: left;
                                    width: 100%;
                                    }
                
                                /* P con Coleccion */
                                    .headerBrowserResultItemInfo P{
                                    font-family: 'redonded';
                                    font-size: 1em;
                                    font-weight: 100;
                                    margin: 0.5em 0;
                                    color: #737373;
                                    width: 100%;
                                    }
            
                            /* H3 con el precio */
                                .headerBrowserResultItem h3{
                                    font-family: 'redonded';
                                    text-transform: uppercase;
                                    font-size: 1.1em;
                                    margin: auto;
                                    margin-right: 1em;
                                    font-weight: 600;
                                    color: black;
                                    text-align: center;
                                }

                /* BUTTON de apertura cierre del menu header */    
                    .headerMenuButton{
                        background: transparent;
                        border-radius: 100%;
                        border: none;
                        outline: none;
                        padding: 5px;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                        align-content: center;
                        justify-content: center;
                        align-items: center;
                        width: 10vw;
                        max-width: 3.5em;
                        min-width: 3em;
                        margin: 1em;
                        z-index: 10;
                        transition: 0.2s ease-in-out;
                    }

                    .headerMenuButton img{
                        width: 100%;
                    }

            /* DIV contenedor de iconos botones */
                .headerIconsContainer{
                    display: none;
                    position: absolute;
                    top: 6em; /* 6em open */
                    background: black;
                    opacity: 0%;
                    width: 100%;
                    height: 0em;
                    justify-content: space-around;
                    align-items: center;
                    transition: 0.254s ease-in-out;
                    z-index: 1;
                }    

                /* A iconos botones */
                .headerIconsContainer a{
                        height: 100%;
                        max-width: 2.5em;
                        filter: contrast(41%) brightness(95%);
                        margin-top: -4px;
                    }                            

            /* DIV contenedor de tags botones */
                .headerTagsContainer{
                    display: none;
                    position: fixed;
                    width: 100%;
                    min-height: 2em;
                    height: auto;
                    max-height: 0em;
                    overflow: hidden;
                    justify-content: space-around;
                    background: #000000;
                    opacity: 0%;
                    /* bottom: -1.5em; */
                    align-items: center;
                    padding: 1em;
                    box-shadow: 0 0 20px #00000040;
                    flex-wrap: nowrap;
                    transition: 0.254s ease-in-out;
                    flex-direction: column;
                    z-index: 0;
                }    

                /* A tags botones */
                    .headerTagsContainer a{
                    text-transform: uppercase;
                    text-decoration-color: transparent;
                    font-weight: 100;
                    color: #e3e3e3;
                    margin: 0.5em;
                    }         
                    
                /* P separador | */
                    .headerTagSeparator{
                    display: none;
                    }  

                    .bannerContainer video{
                        margin: 0 auto;
                        margin-top: 5.8em;
                    }

                    

            }


        /* VISTA PC */
        /* Cuando la pantalla es mayor a "X" ejecuta el programa */
            @media only screen and (min-width: 675px) {

            /* HEADER container */
                header{
                    background: linear-gradient(355deg,#231a0d, black, #151000);
                    opacity: 90%;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-content: center;
                    align-items: center;
                    justify-content: space-evenly;
                    padding: 1em 0;
                    height: 8em;
                    padding-top: 0;
                }

                /* IMG logo header */
                    .headerLogo{
                        width: 17vw;
                        max-width: 6.5em;
                        cursor: pointer;
                        min-width: 2em;
                        display: flex;
                        position: relative;
                        margin: 1em;
                        margin-left: 1em;
                        height: 100%;
                    }

                    .headerLogoPH{
                        display: none;
                    }

                    .headerLogoPC{
                        display: flex;
                    }

                /* LABEL contenedor del buscador del header */
                    .headerBrowserContainer{
                        background: #f0f0f0;
                        border-radius: 5px;
                        border: solid 1px #fdfdfd;
                        display: flex;
                        flex-wrap: nowrap;
                        flex-direction: row;
                        align-items: stretch;
                        justify-content: space-between;
                        margin: 1em auto;
                        width: 49vw;
                        max-width: 28em;
                        position: relative;
                        height: 2.3em;
                        box-shadow: 0 0 21px black;
                    }  

                    /* INPUT text del buscador del header */
                        .headerBrowserInput{
                        background: transparent;
                        border: none;
                        outline: none;
                        width: 100%;
                        padding: 0 1em;
                        position: relative;
                        top: -2px;
                        }

                    /* ICON de lupa del buscador */
                        .headerBrowserIcon{
                        width: 1.5em;
                        object-fit: contain;
                        filter: invert(50%);
                        margin-right: 0.5em;
                        }  

                    /* SPAN contenedor con los resultados */
                        .headerBrowserResultsContainer{
                            position: absolute;
                            background: #f0f0f0;
                            top: 35px;
                            width: 49vw;
                            max-width: 28em;
                            z-index: 20;
                            border-radius: 6px;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            transition: ease-in-out 0.4s;
                            max-height: 17em;
                            overflow: overlay;
                            box-shadow: 0px 10px 30px 0px #0000008a;
                        }
            
                        /* LI contenedor con cada item buscado */
                            .headerBrowserResultItem{
                                display: flex;
                                flex-direction: row;
                                border-bottom: 1px solid #e1e1e1;
                                cursor: pointer;
                                transition: ease 0.3s;
                                align-items: center;
                            }
            
                            .headerBrowserResultItem:hover{
                            background-color: white;
                            box-shadow: 0 0 10px #00000017;
                            /* filter: invert(1); */
                            }
            
                            /* IMG con la imagen del resultado */
                                .headerBrowserResultItem img{
                                    width: 8em;
                                    filter: saturate(110%);
                                    height: 8em;
                                    min-width: 8em;
                                    min-height: 8em;
                                    object-fit: cover;
                                    object-position: center;
                                    /* margin: auto; */
                                }
                
                            /* DIV contenedor con el nomrbe y colecc */
                                .headerBrowserResultItemInfo{
                                    padding: 2px 18px;
                                    transition: ease 0.3s;
                                }
                
                                /* H2 con nombre */
                                    .headerBrowserResultItemInfo h2{
                                    font-family: 'redonded';
                                    text-transform: uppercase;
                                    font-size: 1.2em;
                                    margin-top: 0.5em;
                                    font-weight: 600;
                                    color: black;
                                    text-align: left;
                                    width: 100%;
                                    }
                
                                /* P con Coleccion */
                                    .headerBrowserResultItemInfo P{
                                    font-family: 'redonded';
                                    font-size: 1em;
                                    font-weight: 100;
                                    margin: 0.5em 0;
                                    color: #737373;
                                    width: 100%;
                                    }
            
                            /* H3 con el precio */
                                .headerBrowserResultItem h3{
                                    font-family: 'redonded';
                                    text-transform: uppercase;
                                    font-size: 1.1em;
                                    margin: auto;
                                    margin-right: 1em;
                                    font-weight: 600;
                                    color: black;
                                    text-align: center;
                                }

                /* BUTTON de apertura cierre del menu header */    
                .headerMenuButton{
                    display: none;
                }

                .headerMenuButton img{
                    width: 100%;
                }

            /* DIV contenedor de iconos botones */
                .headerIconsContainer{
                    display: flex;
                    padding: 0 1em;
                    height: auto !important;
                }    
                
                /* A iconos botones */
                .headerIconsContainer a{
                    height: 15vw;
                    max-width: 2.5em;
                    filter: contrast(41%) brightness(95%);
                }   
                
            /* DIV contenedor de tags botones */
                .headerTagsContainer{
                    
                    display: flex;
                    position: absolute;
                    width: 97%;
                    min-height: 2em;
                    max-height: 5em;
                    justify-content: space-around;
                    background: #000000;
                    opacity: 1;
                    bottom: -3.3em !important;
                    align-items: center;
                    box-shadow: 0 0 10px #00000040;
                }    

                    /* A tags botones */
                    .headerTagsContainer a{
                        text-transform: uppercase;
                        text-decoration-color: transparent;
                        font-weight: 100;
                        color: #ebebeb;
                    }                                

                    .bannerContainer video{
                        margin: 0 auto;
                        margin-top: 7.8em;
                    }

                    .sampleNavWrapperFour{
                        right: -44px;
                        left: auto;
                    }

            }




    /* =================================================== */
    /* ====================== MAIN ======================= */
    /* =================================================== */

        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        /* ~~~~~~~~~~~~~~ BANNER ~~~~~~~~~~~~~ */
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

            /* ARTICLE contenedor del banner principal */
                .bannerContainer{
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 100vh;
                    min-height: 22em;
                    box-shadow: 0 0 44px black;
                    margin-bottom: -17em;
                    z-index: 0;
                }

                /* BUTTON de controles */
                    .bannerContainer button{
                        z-index: 2;
                        width: 2em;
                        height: 5em;
                        transition: 0.4s ease-in-out;
                        background: #0000003d;
                        position: relative;
                    }

                    .bannerContainer button:hover{
                        background: #0000007f;
                        
                    }
                    
                /* IMG de BANNER */
                    .bannerContainer img{
                        z-index: 1;
                        position: absolute;
                        width: 100%;
                        margin: 0 auto;
                        object-fit: cover;
                        height: 100vh;
                        min-height: 22em;
                        max-height: 31em;
                        top: 0;
                    }

                    .bannerContainer video{
                        z-index: 1;
                        position: absolute;
                        width: 100%;
                        object-fit: cover;
                        height: 90vh;
                        min-height: 22em;
                        /* max-height: 32em; */
                        top: 0;
                    }

                /* DIV con el background */    
                    .bannerBg{
                        display: flex;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 30;
                        background: #00000026;
                        background: linear-gradient(45deg,transparent 34%, #00000010 35%, #00000010 40%, transparent 41%, transparent 59%, #00000010 60%, #00000010 65%, transparent 66%),linear-gradient(135deg,transparent 34%, #00000010 35%, #00000010 40%, transparent 41%, transparent 59%, #00000010 60%, #00000010 65%, transparent 66%), radial-gradient(#00000010 10%, transparent 11%), radial-gradient(circle at left,#00000010 5%, transparent 6%), radial-gradient(circle at right,#00000010 5%, transparent 6%), radial-gradient(circle at top,#00000010 5%, transparent 6%), radial-gradient(circle at bottom,#00000010 5%, transparent 6%);
                        background-size: 1em 1em;
                        background-color: #00000000;
                        opacity: 60%;
                    }

                /* BUTTON de ver modelos */
                    .bannerViewModelsPH{
                        position: relative !important;
                        display: flex;
                        z-index: 50;
                        font-family: 'redonded';
                        white-space: nowrap;
                        padding: 1em 1.5em;
                        margin: 0 auto;
                        background: #000000c4 !important;
                        color: #cfcfcf;
                        letter-spacing: 2px;
                        font-weight: 900;
                        font-size: 13px;
                        border-radius: 1px;
                        box-shadow: 0 0 10px #292518;
                        /* border: solid 2px #b2ab96; */
                        animation: shadowAnimation 4s infinite;
                        transition: box-shadow 0.3s ease;
                        bottom: -9em;
                        max-width: 12em;
                        align-items: center;
                        justify-content: center;
                    }

                    @keyframes shadowAnimation {
                        0% {
                          box-shadow: 0 0 10px #000000;
                          border: solid 1px #534a2e;
                        }
                        50% {
                          box-shadow: 0 0 10px #b39e65;
                          border: solid 1px rgb(224, 224, 224);
                        }
                        100% {
                          box-shadow: 0 0 10px #000000;
                          border: solid 1px #534a2e;
                        }
                    }

                    .bannerViewModelsPH:hover{
                        transform: scale(1.02);
                        border: solid 2px #b49f65;
                        color:white;
                        animation: shadowAnimation 2s paused; 
                    }

        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        /* ~~~~~~ NOSOTROS Y PROCESO ~~~~~~~~~ */
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

            /* SECTION contenedora de todo PADRE */
                .usProcessPADRE{
                    width: 100vw;
                    overflow: hidden;
                }

            /* ARTICLE contenedora de todo HIJO */
                .usProcessGeneralContainer{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    padding: 0.5em;
                    background: #f1f1f1;
                    filter: invert(1);
                    /* margin-top: 12em; */
                    /* padding-bottom: 12em; */
                    padding-bottom: 7em;
                    padding-top: 4em;
                    position: relative;
                    z-index: 5;
                    background: radial-gradient(circle at center ,#f6f6f6, #f6f6f6 10%, transparent 10%, transparent  20%, #f6f6f6 20%, #f6f6f6 30%, transparent 30%, transparent 40%, #f6f6f6 40%, #f6f6f6 50%, transparent 50%, transparent 60%, #f6f6f6 60%, #f6f6f6 70%, transparent 70%, transparent 80%, #f6f6f6 80%, #f6f6f6 90%, transparent 90%);
                    background-size: 1em 1em;
                    background-color: #f1f1f1;
                    opacity: 1
                  }

                  /* H1 con el titulo CONOCENOS de la seccion */
                    .usProcessGeneralContainer h1{
                        text-align: left;
                        padding-left: 10vw;
                        margin: 0;
                        margin-bottom: 2em;
                        margin-top: 1em;
                        font-size: 3.7em;
                        width: 100%;
                    }

                  /* DIV contenedor de los contenedores de proceso y nosotros */
                    .usProcessContainer{
                      display: flex;
                      flex-direction: row;
                      flex-wrap: wrap;
                      justify-content: space-around;
                      align-items: flex-start;
                      width: 100%;
                    }

                    /* ARTICLE contenedor de NOSOTROS */
                      .usContainer{
                        width: 50%;
                        min-width: 17em;
                        margin-bottom: 4em;
                      }

                      /* H2 de NOSOTROS */
                        .usContainer h2{
                          font-family: 'redonded';
                          letter-spacing: 1px;
                          margin: 1em;
                          margin-left: 0;
                          white-space: nowrap;
                          font-size: 2.2em;
                          color: black;
                        }

                      /* P de NOSOTROS */
                        .usContainer p{
                          font-family: 'redonded';
                          color: #5c5c5c;
                          letter-spacing: 1.5px;
                          display: flex;
                          font-size: 1.4em;
                        }

                    /* ARTICLE contenedor de PROCESO */
                      .processContainer{
                        width: 40%;
                        min-width: 20em;
                      }    

                      /* H2 de PROCESO */
                        .processContainer h2{
                          font-family: 'redonded';
                          letter-spacing: 1px;
                          margin: 1em 0;
                          font-size: 2.2em;
                        } 

                      /* UL contenedora de la lista de PROCESO */  
                        .processListContainer{
                          display: flex;
                          flex-direction: column;
                          flex-wrap: nowrap;
                          align-content: flex-start;
                          align-items: flex-start;
                          justify-content: space-between;
                        }

                        /* LI contenedor de cada item */
                          .processListContainer li{
                            display: flex;
                            width: 80%;
                            margin: 0.7em 0;
                            align-items: center;
                            position: relative;
                          }

                          /* SVG de cada item */
                            .processListContainer svg{
                              width: 45px;
                              height: 30px;
                              fill: #bba259 !important;
                              filter: invert(1);
                            }

                          /* P de cada item */  
                            .processListContainer p{
                              font-family: 'redonded';
                              margin-left: 0.7em;
                              font-size: 1.25em;
                            }


                            

        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        /* ~~~~~~~~~~~~ MUESTRAS ~~~~~~~~~~~~~ */
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

            /* ~~~~~~~~~~ Navegacion ~~~~~~~~~~ */        

                /* VISTA PH */
                /* Cuando la pantalla es menor a "X" ejecuta el programa */
                    @media only screen and (max-width: 674px) {

                        /* SPAN con la navegacion de muestras */
                            .samplesNavContainer{
                                background: radial-gradient(circle, transparent 25%, #e9e9e9 26%),linear-gradient(45deg, transparent 46%, #fdfdfd 47%, #fdfdfd 52%, transparent 53%), linear-gradient(135deg, transparent 46%, #fdfdfd 47%, #fdfdfd 52%, transparent 53%);
                                background-size: 1em 1em;
                                background-color: #e9e9e9;
                                opacity: 1;
                                width: 100%;
                                display: flex;
                                padding: 1em 2em;
                                flex-wrap: nowrap;
                                align-items: center;
                                flex-direction: column;
                                overflow: hidden;
                                transition: 0.5s linear;
                                max-height: 5em;
                                box-shadow: 0px 55px 20px #0000001a;
                                z-index: 200;
                                position: relative;
                            }

                            /* P separadores */
                                .samplesNavContainer p{
                                    display: none;
                                }

                            /* A navegacion FILTRAR */
                                #sampleNavFilterButton{
                                    font-weight: 600;
                                    border-bottom: 1px solid #f2f2f200;
                                    text-shadow: 0 0 1px black;
                                }        
            
                            /* LABEL boton d enavegacion de muestras */
                                .sampleNavButton{
                                    display: flex;
                                    position: relative;
                                    text-decoration: none;
                                    cursor: pointer;
                                    transition: 0.2s linear;
                                    font-family: 'redonded';
                                    text-transform: uppercase;
                                    color: #e5e5e5;
                                    margin: 1em 0.5em;
                                    padding: 0 2.5em;
                                    padding-bottom: 0.5em;
                                    border-bottom: 1px solid #d6d6d6;
                                    width: 100%;
                                    min-width: 11em;
                                    justify-content: flex-start;
                                }
            
                                .sampleNavButton:hover{
                                    color: #ffffff;
                                    transform: scale(1.02);
                                }

                                .sampleNavButtonOPEN{
                                    padding-bottom: 3em;
                                }

                                /* H3 con texto filtrado */
                                    .sampleNavFilterName{
                                        bottom: 0.5em !important;
                                        text-wrap: wrap;
                                    }
                                
                                    /* BUTTON de borrar filtro */
                                        .sampleNavFilterDeleteButton{
                                            margin: 0px 1em;
                                            position: relative;
                                        }

                                /* UL wrapper con las opciones */
                                    .sampleNavWrapper{
                                        width: 100%;
                                        max-width: 20em;
                                        min-width: 100%;
                                        background: transparent;
                                        position: relative;
                                        max-height: 0em;
                                        overflow: hidden;
                                        list-style: none;
                                        display: flex;
                                        flex-direction: column;
                                        flex-wrap: nowrap;
                                        padding: 0;
                                        border-radius: 3px;
                                        margin: 0;
                                        left: -4.4em;
                                        transition: 0.2s linear;
                                        display: flex;
                                    }

                                    /* Muestra la sampleNavWrapper cuando el input está marcado */
                                        /* #sampleNavWrapperShooterOne:checked ~ .sampleNavButton .sampleNavWrapperOne,
                                        #sampleNavWrapperShooterTwo:checked ~ .sampleNavButton .sampleNavWrapperTwo,
                                        #sampleNavWrapperShooterThree:checked ~ .sampleNavButton .sampleNavWrapperThree,
                                        #sampleNavWrapperShooterFour:checked ~ .sampleNavButton .sampleNavWrapperFour,
                                        #sampleNavWrapperShooterFive:checked ~ .sampleNavButton .sampleNavWrapperFive {
                                            max-height: 15em;
                                            overflow: overlay;
                                            margin: 1.5em 0;
                                            margin-top: 2em;
                                        }
 */
                                        .sampleNavButton:hover .sampleNavWrapperOne,
                                        .sampleNavButton:hover .sampleNavWrapperTwo,
                                        .sampleNavButton:hover .sampleNavWrapperThree,
                                        .sampleNavButton:hover .sampleNavWrapperFour, 
                                        .sampleNavButton:hover .sampleNavWrapperFive{
                                            max-height: 15em;
                                            overflow: overlay;
                                            position: relative;
                                            min-width: 98vw;
                                            background: #664e26;
                                            display: flex;
                                            margin-top: 4em;
                                            left: -7em;
                                        }

                                        .sampleNavButton:hover ~ #body {
                                            overflow: hidden !important;
                                        }
                                        

                                    /* LI con cada item */
                                        .sampleNavWrapperOption{
                                            font-weight: 100;
                                            color: #ffffff;
                                            margin: 0;
                                            padding: 0 1em;
                                            width: 100%;
                                            min-height: 2.5em;
                                            display: flex;
                                            /* border-bottom: 1px solid #dedede; */
                                            transition: 0.2s ease-in-out;
                                            align-items: center
                                        }

                                        .sampleNavWrapperOption:hover{
                                            color: #141414;
                                            background: #d3d3d361;
                                        }

                                    /* UL Wrapper - ESTILO PERSONALIZADO */    
                                        .sampleNavWrapperOne{

                                        }

                                        .sampleNavWrapperTwo{
                                            left: -8.5em !important;
                                        }

                                        .sampleNavWrapperThree{
                                            
                                        }

                                        .sampleNavWrapperFour{
                                           
                                        }

                                        .sampleNavWrapperFive{
                                            left: -7.4em !important;
                                        }

                                        .sampleNavWrapperSix{
                                            
                                        }

                                /* SVG con el icono */
                                    .sampleNavButton svg{
                                        /* filter: brightness(16%); */
                                        position: absolute;
                                        top: -2px;
                                        left: 6px;
                                        fill: rgb(63, 63, 63);
                                        fill: #664e26 !important;
                                    }

                                /* H3 generado con el filtro */ /* EXPANDIR CON padding-bottom: 1.5em; */
                                    .sampleNavButton h3{
                                        display: flex;
                                        flex-wrap: nowrap;
                                        text-wrap: nowrap;
                                        position: absolute;
                                        font-family: 'redonded';
                                        font-size: 1em;
                                        color: rgb(133, 133, 133);
                                        top: 27px;
                                    }    


                                    /* Para navegadores WebKit (Chrome, Safari, etc.) */
                                        .sampleNavWrapper::-webkit-scrollbar {
                                            width: 55px; /* Ancho del scrollbar */
                                        }

                                        .sampleNavWrapper::-webkit-scrollbar-thumb {
                                            background-color: white; /* Color del thumb (barra de desplazamiento) */
                                            border-radius: 100%;
                                        }

                                        .sampleNavWrapper::-webkit-scrollbar-track {
                                            background-color: transparent; /* Fondo del scrollbar (puedes cambiarlo si lo deseas) */
                                        }

                                        /* Para Firefox */
                                        .sampleNavWrapper {
                                            scrollbar-width: thin; /* Define que el scrollbar sea fino */
                                            scrollbar-color: white transparent; /* thumb color / track color */
                                        }


                    }


                /* VISTA PC */
                /* Cuando la pantalla es mayor a "X" ejecuta el programa */
                    @media only screen and (min-width: 675px) {

                        /* SPAN con la navegacion de muestras */
                            .samplesNavContainer{
                                background: radial-gradient(circle, transparent 25%, #e9e9e9 26%),linear-gradient(45deg, transparent 46%, #fdfdfd 47%, #fdfdfd 52%, transparent 53%), linear-gradient(135deg, transparent 46%, #fdfdfd 47%, #fdfdfd 52%, transparent 53%);
                                background-size: 1em 1em;
                                background-color: #e9e9e9;
                                opacity: 1;
                                width: 100%;
                                display: flex;
                                padding: 0em 2em;
                                flex-wrap: wrap;
                                justify-content: space-around;
                                align-items: center;
                                box-shadow: 0px 55px 20px #0000001a;
                                z-index: 200;
                                position: relative;
                            }
                
                                /* LABEL boton d enavegacion de muestras */
                                    .sampleNavButton{
                                        display: flex;
                                        position: relative;
                                        text-decoration: none;
                                        cursor: pointer;
                                        transition: 0.2s linear;
                                        font-family: 'redonded';
                                        text-transform: uppercase;
                                        color: #e0e0e0;
                                        height: 4em;
                                        flex-direction: row;
                                        align-content: center;
                                        align-items: center;
                                    }
                    
                                    .sampleNavButton:hover{
                                        color: #ffffff;
                                        transform: scale(1.02);
                                    }

                                    .sampleNavButtonOPEN{
                                        padding-bottom: 1.5em;
                                    }

                                    /* H3 con texto filtrado */
                                        .sampleNavFilterName{
                                            bottom: 0.5em !important;
                                        }
    
                                    /* UL wrapper con las opciones */
                                        .sampleNavWrapper{
                                            width: max-content;
                                            min-width: 9.8em;
                                            background: #fffffff0;
                                            position: absolute;
                                            /* max-height: 13em; */
                                            overflow: visible;
                                            list-style: none;
                                            display: flex;
                                            flex-direction: column;
                                            flex-wrap: nowrap;
                                            align-items: flex-start;
                                            padding: 0;
                                            border-radius: 3px;
                                            box-shadow: 0 0 25px #00000012;
                                            left: -45px;
                                            top: 4em;
                                        }

                                        .sampleNavWrapper:hover{
                                            display: flex;
                                        }
    
                                        /* LI con cada item */
                                            .sampleNavWrapperOption{
                                                font-weight: 100;
                                                color: #393939;
                                                margin: 0;
                                                padding: 0 1em;
                                                width: 100%;
                                                min-height: 2.5em;
                                                display: flex;
                                                border-bottom: 1px solid #dedede;
                                                transition: 0.2s ease-in-out;
                                                align-items: center
                                            }
    
                                            .sampleNavWrapperOption:hover{
                                                color: #2b2b2b;
                                                background: #aeaeae61;
                                            }
    
                                        /* UL Wrapper - ESTILO PERSONALIZADO */    
                                            .sampleNavWrapperOne{
    
                                            }
    
                                            .sampleNavWrapperTwo{
                                                
                                            }
    
                                            .sampleNavWrapperThree{
                                                
                                            }
    
                                            .sampleNavWrapperFour{
                                                right: -44px;
                                                left: auto;
                                            }
    
                                            .sampleNavWrapperFive{
                                                left: -11em;
                                                max-width: 19em;
                                            }
    
                                            .sampleNavWrapperSix{
                                                
                                            }
                    
                                        /* Oculta la sampleNavWrapper por defecto */
                                            .sampleNavWrapper {
                                                display: none;
                                            }


                                        /* Muestra los sampleNavWrapperShooter cuando sampleNavButton es clickeado */
                                            .sampleNavButton:hover .sampleNavWrapperOne,
                                            .sampleNavButton:hover .sampleNavWrapperTwo,
                                            .sampleNavButton:hover .sampleNavWrapperThree,
                                            .sampleNavButton:hover .sampleNavWrapperFour, 
                                            .sampleNavButton:hover .sampleNavWrapperFive{
                                                display: block !important;
                                                max-height: 20em;
                                                overflow: overlay;
                                            }

                                    /* SVG con el icono */
                                        .sampleNavButton svg{
                                        filter: brightness(86%);
                                        position: relative;
                                        top: -2px;
                                        }

                                /* A navegacion FILTRAR */
                                    #sampleNavFilterButton, .sampleNavFilterSeparator{
                                        display: none;
                                    }    

                                /* H3 generado con el filtro */ /* EXPANDIR CON padding-bottom: 1.5em; */
                                    .sampleNavButton h3{
                                        display: flex;
                                        position: absolute;
                                        font-family: 'redonded';
                                        font-size: 1em;
                                        color: rgb(132, 132, 132);
                                        bottom: 0;
                                        width: 16vw;
                                        white-space: nowrap;
                                        overflow: hidden;
                                    }    

                    }

                    .sampleNavButtonCLOSE{
                        padding-bottom: 0.5em;
                    }

                    .headerBrowserContainer:active + .headerBrowserResultsContainer {
                        max-height: 17em;
                    }

            /* ~~~~~~~~~~ Muestras ~~~~~~~~~~ */        

                /* ARTICLE contenedor con todas las muestras */    
                    .sampleGeneralContainer{
                        padding: 3em 0.2em;
                        padding-bottom: 5em;
                        background: linear-gradient(135deg, #ececec80 50%, transparent 0),linear-gradient(-135deg, #ececec80 50%, transparent 0);
                        background-size: 3em 3em;
                        background-color: #f4f4f4;
                        opacity: 1;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        align-content: flex-start;
                        flex-direction: row;
                        overflow: hidden;
                        transition: 0.5s ease;
                        max-height: 100vh;
                        position: relative;
                        z-index: 1;
                    }

                    /* H1 con mensaje "no se encontraron elementos" */
                        .sampleGeneralContainerEmptyAlert{
                            font-family: 'redonded';
                            font-weight: 100;
                            color: #282828;
                            font-size: 8vmin;
                            position: relative;
                            margin: 1em;
                            margin-top: 0em;
                            margin-bottom: 3em;
                        }

                    /* IMG con gif de no se encontraron elementos */
                        .sampleGeneralContainerEmptyAlertImg{
                            max-width: 18em;
                            width: 100vw;
                            margin: 1em auto;
                            position: relative;
                            display: flex;
                            border-radius: 27%;
                            opacity: 100%;
                        }    

                    /* SPAN contenedor de la muestra */
                        .sampleContainer{
                            width: 46vmin;
                            min-width: 9em;
                            max-width: 12em;
                            min-height: 14.5em;
                            display: flex;
                            position: relative;
                            overflow: hidden;
                            flex-direction: column;
                            background: #ffffff1a;
                            margin: 1em 0.2em;
                            align-items: flex-start;
                            border-radius: 6px;
                            transition: 0.2s ease-in-out;
                            padding: 0.5em;
                            padding-top: -0;
                            filter: saturate(80%);
                            cursor: pointer;
                            border-bottom: solid 1px #e5e5e5;
                            padding-bottom: 0;
                        }

                        .sampleContainer:hover{
                            background: #ffffff;
                            transform: scale(1.01);
                            filter: saturate(100%);
                            border-bottom: solid 1px #c0c0c0;
                        }

                        .sampleSeeMoreButton{
                            margin: 0em auto;
                            margin-bottom: 10em;
                            display: flex;
                            width: 100%;
                            align-items: center;
                            justify-content: center;
                            background: white;
                            padding: 1em;
                            box-shadow: 0px -30px 33px 0px #00000078;
                            transition: 0.5s ease;
                            z-index: 2;
                            position: relative;
                        }




                        .sampleSeeMoreButton a{
                            font-family: 'redonded';
                            letter-spacing: 1.5px;
                            text-transform: uppercase;
                            transition: 0.5s ease;
                        }



                        /* VISTA PC */
                        /* Cuando la pantalla es menor a "X" ejecuta el programa */
                            @media only screen and (min-width: 642px) {

                                .sampleSeeMoreButton:hover {
                                    filter: invert(80%);
                                }

                                /* SPAN contenedor de la muestra */
                                    .sampleContainer{
                                        margin-bottom: 1.5em;
                                    }

                            }

                        /* DIV contenedor del slider con imagenes */
                            .sampleImageContainer{
                                display: flex;
                                position: relative;
                                width: 100%;
                                min-height: 10em;
                                max-height: 10em;
                                height: 102vmin;
                                overflow: hidden;
                                border-radius: 6px;
                                align-items: center;
                                justify-content: space-between;
                            }

                            /* VISTA PH */
                            /* Cuando la pantalla es menor a "X" ejecuta el programa */
                                @media only screen and (max-width: 412px) {


                                    /* DIV contenedor del slider con imagenes */
                                        .sampleImageContainer{
                                            display: flex;
                                            position: relative;
                                            width: 100%;
                                            min-height: 11em;
                                            max-height: 11em;
                                            height: 61vmin;
                                            overflow: hidden;
                                            border-radius: 6px;
                                            align-items: center;
                                            justify-content: space-between;
                                        }

                                }

                            /* BUTTON sliders */
                                .sampleImageContainer button{
                                    position: relative;
                                    display: flex;
                                    background-color: rgb(0 0 0 / 6%);
                                    width: 2em;
                                    height: 3em;
                                    z-index: 1;
                                    padding: 6px;
                                    align-items: center;
                                    justify-content: center;
                                    transition: 0.2s ease-in-out;
                                    cursor: pointer;
                                    opacity: 50%;
                                    margin: 0;
                                    border-radius: 0;
                                    font-size: 19px;
                                    box-shadow: 0 0 0px;
                                }

                                .sampleImageContainer button:hover{
                                    background-color: rgba(0, 0, 0, 0.478);
                                    opacity: 100%
                                }

                            /* IMG slider */
                                .sampleImageContainer img{
                                    position: absolute;
                                    object-fit: cover;
                                    border-radius: 7px;
                                    display: flex;
                                    transition: 0.2s ease-in-out;
                                    z-index: 0;
                                }    

                        /* H2 con nombre de la muestra */
                            .sampleContainer h2{
                                font-family: 'redonded';
                                text-transform: uppercase;
                                font-size: 1.2em;
                                margin-top: 0.5em;
                                font-weight: 600;
                                color: black;
                            }       

                        /* P con el nombre de la muestra */    
                            .sampleContainer p{
                                font-family: 'redonded';
                                font-size: 1em;
                                font-weight: 100;
                                margin: 0.5em 0;
                                color: #737373;
                            }

                        /* H3 con el precio de la muestra */
                            .sampleContainer h3{
                                font-family: 'redonded';
                                text-transform: uppercase;
                                font-size: 1.1em;
                                margin-top: 0.5em;
                                font-weight: 600;
                                color: black;
                                width: 100%;
                                text-align: inherit;
                            }

                    /* ESTILO TRAIDO DE ADMIN */        

                        /* BUTTON sliders */
                            .sampleImageContainer button{
                                position: relative;
                                display: flex;
                                background-color: rgb(0 0 0 / 6%);
                                width: 2em;
                                height: 3em;
                                z-index: 1;
                                padding: 10px;
                                align-items: center;
                                justify-content: center;
                                transition: 0.2s ease-in-out;
                                cursor: pointer;
                                opacity: 50%;
                                margin: 0;
                                border-radius: 0;
                                box-shadow: 0 0 0px;
                            }

                            .sampleImageContainer button:hover{
                                background-color: rgba(0, 0, 0, 0.478);
                                opacity: 100%
                            }

                        /* IMG slider */
                            .sampleImageContainer img{
                                position: absolute;
                                object-fit: cover;
                                object-position: center;
                                border-radius: 7px;
                                display: flex;
                                transition: 0.2s ease-in-out;
                                z-index: 0;
                                width: 100%;
                                height: 96%;
                                top: 8px;
                                left: 0;
                                right: 0;
                            }    

                    /* H2 con nombre de la muestra */
                        .sampleContainer h2{
                            font-family: 'redonded';
                            text-transform: uppercase;
                            font-size: 1.2em;
                            margin-top: 0.5em;
                            font-weight: 600;
                            color: black;
                            text-align: left;
                            width: 100%;
                            justify-content: left;
                        }       

                    /* P con el nombre de la muestra */    
                        .sampleContainer p{
                            font-family: 'redonded';
                            font-size: 1em;
                            font-weight: 100;
                            margin: 0.5em 0;
                            color: #737373;
                            width: 100%;
                            justify-content: left;
                        }

                    /* H3 con el precio de la muestra */
                        .sampleContainer h3{
                            font-family: 'redonded';
                            text-transform: uppercase;
                            font-size: 1.1em;
                            margin-top: 0.5em;
                            font-weight: 600;
                            color: black;
                            width: 100%;
                            text-align: inherit;
                            width: 100%;
                            justify-content: left;
                        }

                        /* WRAPPER disparador en hover */
                            .samplePriceWrapper{
                                display: flex;
                                width: 100%;
                                align-items: flex-end;
                                flex-direction: row;
                                flex-wrap: nowrap;
                            }

                            /* INPUT check */
                                .samplePriceWrapper input{
                                    display: none !important;
                                }

                            /* A wrapper ejecutable */
                                .sampleWrapperShooter{
                                    font-family: 'redonded';
                                    font-size: 14px;
                                    color: #393939;
                                    text-decoration: underline 1px;
                                    text-decoration-color: #313131;
                                    white-space: nowrap;
                                    cursor: pointer;
                                    user-select: none;
                                    right: -4px;
                                    position: relative;
                                }

                                /* SVG */
                                    .sampleWrapperShooter svg{
                                        right: -1px;
                                        position: relative;
                                        width: 20px;
                                    }

                                /* UL contenedor del wrapper */
                                    .sampleWrapperContainer{
                                        position: absolute;
                                        width: 8em;
                                        max-height: 20em;
                                        z-index: 3;
                                        display: flex;
                                        right: 13px;
                                        bottom: 108px; /* 103px en front */
                                        background: #ffffff;
                                        border-radius: 5px;
                                        box-shadow: 0 0 10px #bfbfbf;
                                        overflow: auto;
                                        padding: 0.5em;
                                        padding-top: 0;
                                        flex-wrap: wrap;
                                        align-items: center;
                                        cursor: initial;
                                        justify-content: space-around;
                                        align-content: flex-start;
                                        display: none;
                                    }

                                    .sampleWrapperContainer:hover{
                                        display: flex;
                                    }

                                    .sampleWrapperContainer p{
                                        font-family: 'redonded';
                                        font-size: 1em;
                                        font-weight: 100;
                                        margin: 0.5em 0;
                                        margin-left: 4px;
                                        color: #737373;
                                        width: 100%;
                                        user-select: none;
                                    }

                                    .sampleWrapperContainer li{
                                        margin: 0;
                                        list-style-type: none;
                                        border: solid 1px #e2e2e2;
                                        padding: 5px;
                                        margin: 2px;
                                        font-family: system-ui;
                                        font-size: 0.95em;
                                        border-radius: 2px;
                                        color: #676767;
                                        user-select: none;
                                    }
                                
                                /* Muestra la sampleWrapperContainer cuando sampleWrapperShooter es clickeado */
                                    #sample1:checked ~ .sampleWrapperShooter + .sampleWrapperContainer {
                                        display: flex;
                                    }

                                /* Muestra la sampleWrapperContainer cuando sampleWrapperShooter es clickeado */
                                    .sampleWrapperShooter:hover + .sampleWrapperContainer {
                                        display: flex !important;
                                    }

                    /* DIV contenedor dle boton de añadir */
                        .sampleAddKartButtonContainer{
                            width: 100%;
                            display: flex;
                            height: 100%;
                            align-items: flex-end;
                            justify-content: center;
                        }                

                        /* BUTTON de "AÑADIR AL CARRITO" */
                            .sampleAddKartButton{
                                background: transparent;
                                width: 90%;
                                margin: 1em auto;
                                padding: 0.5em;
                                border-radius: 3px;
                                border: solid 1px #03031e45;
                                transition: 0.2s linear;
                                letter-spacing: 1px;
                                color: #6d6d6d;
                            }                

                            .sampleAddKartButton:hover{
                                background: #f1f1f1;
                                border: solid 1px #f1f1f1;
                                filter: invert(1);
                            }

    /* ~~~~~~~~~~~~~ PREVIEW EMERGENTE CON IMAGENES ~~~~~~~~~~~~~ */                    

        /* ARTICLE contenedor de la previsualizacion de img */
            .samplePreviewContainer{
                position: fixed;
                top: 0;
                left: 0;
                display: flex;
                width: 100vw;
                height: 100vh;
                z-index: 1220;
                justify-content: space-between;
                flex-wrap: nowrap;
                flex-direction: row;
                background: #000000e6;
                align-items: center;

            }

            /* DIV contenedor d elos elementos */
                .samplePreviewElementsContainer{
                    width: 100vw;
                    height: 30.5em;
                    max-width: 32em;
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-shadow: 0 0 36px 24px black;
                    background: white;
                    margin: auto;
                    border-radius: 9px;
                    border: solid 1px #0a0a0a;
                }

                /* BUTTON de las preview */
                    .samplePreviewImagePrev{
                        position: relative;
                        top: 0;
                        right: 0;
                        z-index: 5;
                        width: 3em;
                        height: 6em;
                        padding: 1em;
                        background: #00000017;
                        transition: 0.5s ease;
                        border-bottom-right-radius: 3px;
                        border-top-right-radius: 3px;
                    }

                    .samplePreviewImagePrev:hover{
                        background: #000000ab;
                    }

                    .samplePreviewImageNext{
                        position: relative;
                        top: 0;
                        right: 0;
                        z-index: 5;
                        width: 3em;
                        height: 6em;
                        padding: 1em;
                        background: #00000017;
                        transition: 0.5s ease;
                        border-bottom-left-radius: 3px;
                        border-top-left-radius: 3px;
                    }

                    .samplePreviewImageNext:hover{
                        background: #000000ab;
                    }

                /* IMG con las imagenes */
                    .samplePreviewImgVisualizer{
                        position: absolute;
                        z-index: 2;
                        top: 0;
                        left: 0;
                        margin: auto;
                        border-radius: 6px;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                /* BUTTON de cerrar el preview */  
                    .samplePreviewClose{
                    position: absolute;
                    width: 2em;
                    height: 2em;
                    z-index: 6;
                    top: 18px;
                    right: 18px;
                    transform: scale(130%);
                    opacity: 68%;
                    filter: drop-shadow(0px 0px 6px black);
                }

                /* H2 con el nombre del item */
                    .samplePreviewName{
                        position: absolute;
                        top: 14px;
                        left: 18px;
                        z-index: 10;
                        text-transform: uppercase;
                        color: #ffffff;
                        text-shadow: 0 0 7px black;
                        width: 85%;
                    }




































































































































































































































































        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        /* ~~~~~~~~~~~~~~~~~~ CONTACTO ~~~~~~~~~~~~~~~~~~~ */
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

            /* SECTION de contacto */
                .contactContainer{
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    z-index: 1;
                    position: relative;
                    background: #d3d3d31f;
                    padding: 1em;
                    padding-top: 3em;
                    padding-bottom: 3em;
                    box-shadow: 0 0 69px #00000030;
                }

                /* SPAN contenedor con el titulo de la seccion */
                    .contactTitleContainer{
                    padding: 1em 0;
                    /* background: #090909; */
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-bottom: 2em;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-content: center;
                    align-items: center;
                    text-align: center;
                    }

                    /* H2 con el titulo de la seccion */
                        .contactTitle{
                            font-family: 'redonded';
                            font-size: 3em;
                            text-align: left;
                            width: 100%;
                            max-width: 9em;
                        }

                    /* H3 con el subtitulo de "nosotros nos comunicamos" */
                        .contactTitleContainer h3{
                            color: #3d3d3d;
                            font-family: system-ui;
                            font-size: 1.3em;
                            font-weight: 100;
                            width: 100%;
                            max-width: 20.5em;
                            text-align: left;
                            position: relative;
                            display: flex;
                        }  
                
                /* ARTICLE contenedor del contenido */
                    .contactContentContainer{
                        width: 100%;
                        display: flex;
                        flex-direction: row-reverse;
                        flex-wrap: wrap;
                        align-content: center;
                        justify-content: space-evenly;
                        align-items: stretch;
                    }    

                    /* SPAN contenedor de los inputs */
                        .contactFormContainer{
                            display: flex;
                            flex-direction: column;
                            flex-wrap: nowrap;
                            align-content: center;
                            justify-content: center;
                            align-items: center
                        }

                        /* INPUTS de contacto */
                            .contactFormContainer input, textarea{
                                border-radius: 0;
                                border: 0;
                                border-bottom: 1px solid #00000024;
                                padding: 0.65em;
                                outline: none;
                                font-family: 'redonded';
                                background: #00000000;
                                margin: 0.5em 0;
                                width: 84vw;
                                max-width: 21em;
                                color: black;
                                font-weight: 100;
                            }

                        /* BUTTON de enviar */
                            .contactFormContainer button{
                                color: #d1d1d1;
                                outline: none;
                                border-radius: 2px;
                                width: 8em;
                                font-family: 'redonded';
                                padding: 0.5em;
                                padding-bottom: 0.55em;
                                margin: 0.8em auto;
                                font-weight: 100;
                                box-shadow: 0 0 10px #0000003d;
                                background: linear-gradient(119deg, #414141, #2d2d2d, #191919);
                                font-size: 1em;
                                cursor: pointer;
                                text-transform: uppercase;
                                letter-spacing: 2px;
                            } 

                        /* P con la alerta de contacto */
                            .contactFormContainer p{
                                margin: 1em auto 2em;
                                font-family: 'redonded';
                                font-weight: 700;
                                font-size: 1.2em;
                            }    

                    /* SPAN contenedor de la informacion extra */
                        .contactExtrasContainer{

                        }    

                /* HR divisoria de botones extras */
                    .contactContainer hr{
                        margin-top: 1.5em;
                        width: 64%;
                        border-radius: 100%;
                        border: none;
                        background: #19120f;
                        height: 2px;
                        opacity: 38%;
                        box-shadow: 0 0 10px 10px #00000021;
                        display: none;
                    }    

                /* DIV contenedor de los botones */
                    .contactExtrasButtonContainer{
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        flex-direction: row;
                        align-content: center;
                        justify-content: center;
                        padding: 2em 0;
                        margin: 0 1em;
                        max-width: 40em;
                    }

                    /* BUTTON de los extras */
                        .contactExtrasButtonContainer button{
                            background: #0d0d0d;
                            border: 1px #626350 solid;
                            /* padding: 1em 1.2em; */
                            width: 1.5em;
                            margin: 0.5em;
                            height: 1.5em;
                            background-position: center;
                            background-size: cover;
                            border-radius: 100%;
                            background-repeat: no-repeat;
                            display: flex;
                            color: whitesmoke;
                            font-size: 2.8em;
                            box-shadow: 0 0 15px #0000007d;
                            flex-direction: row;
                            align-items: center;
                            justify-content: center;
                            background: linear-gradient(119deg, #414141, #2d2d2d, #191919);
                            padding: 9px;
                        }

                    /* A con los enlaces */
                        .contactExtrasButtonContainer a{
                            color: transparent;
                            
                        }


                    /* DIV contenedor del input y label */
                        .contactInputContainer {
                            position: relative;
                            margin-bottom: 20px;
                        }

                    /* INPUTS */
                        .contactInput{
                            position: relative;
                        }

                    /* LABBEL */  
                        .contactInputLabel, .contactInputContainer label {
                            position: absolute;
                            top: 0.7em;
                            left: 0.6em;
                            pointer-events: none;
                            transition: 0.3s ease-in-out;
                            color: #00000080;
                            font-family: 'redonded';
                        }

                        .contactInput:focus + .contactInputLabel,
                        .contactInput:valid + .contactInputLabel {
                            top: -5px;
                            font-size: 12px;
                            color: black;
                            font-weight: 100;
                        }



        /* =================================================== */
        /* ===================== FOOTER ====================== */
        /* =================================================== */

          /* FOOTER conenedor */
            footer{
                padding: 1.4em 1em;
                display: flex;
                flex-direction: column;
                align-content: center;
                align-items: center;
                justify-content: space-between;
                background: linear-gradient(135deg, #1c1c1c80 50%, transparent 0),linear-gradient(-135deg, #1c1c1c80 50%, transparent 0);
                background-size: 2em 2em;
                background-color: #141414;
                position: relative;
                opacity: 1
            }

            /* P Texto del footer */
                .footerText{
                    margin: 5px auto;
                    font-family: system-ui;
                    font-size: 0.8em;
                    color: #404040;
                    display: flex;
                }

            /* A de FIELDSET */  
                .footerDeveloper{
                color: #949494;
                font-family: 'fieldset';
                text-align: center;
                margin: 1em 1em;
                margin-bottom: 0.4em;
                text-decoration: none;
                font-size: 1.5em;
                font-weight: 900;
                cursor: pointer;
                position: relative;
                z-index: 1;
                text-shadow: 0 0 0px transparent;
                transition: 0.5s ease-in-out;
                }

                .footerDeveloper:hover{
                color: #fdfdfd;
                text-shadow: 0 0 15px rgba(255, 255, 255, 0.561);
                }

                .footerDeveloperBackground {
                    transition: 0.7s ease-in-out;
                    position: absolute;
                    z-index: 0;
                    width: 3em;
                    top: 5em;
                    transform: scale(0.9);
                    opacity: 0;
                    filter: grayscale(1);
                }

                .footerDeveloper:hover + .footerDeveloperBackground {
                    transform: scale(1);
                    opacity: 1;
                    width: 7em;
                    top: 4em;
                    filter: grayscale(0);
                }


            /* DIV contenedor de contacto / sugerencia */
                .footerOcurrencesContainer{
                margin: 5px;
                margin-bottom: 10px;
                color: #2e2e2e;
                }

                /* A texto enlace del footer */
                .footerOcurrence{
                    text-decoration: none;
                    text-decoration: rgba(132, 132, 132, 0.259);
                    color: #474747;
                    font-weight: 100;
                    display: inline;
                    transition: 0.5s ease-in-out;
                }  

                .footerOcurrence:hover{
                    text-decoration: underline;
                    text-decoration: rgba(132, 132, 132, 0.846);
                    color: #949494;
                }

            /* A con nombre de empresa */
                .footerCompany{
                    color: #999999;
                    font-family: 'redonded';
                    letter-spacing: 3px;
                    font-size: 1em;
                    position: relative;
                    bottom: -2px;
                    margin-left: 5px;
                }    





















































































                

    /* =================================================== */
    /* ================MENU Y PEDIDOS ==================== */
    /* =================================================== */

        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
        /* ~~~~~~~~~ BUTTON flotante de pedido ~~~~~~~~~ */   
        /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
            /* BUTTON flotante de pedido */
                .menuFloatingButtonOrder{
                    background: linear-gradient(45deg, #393939, #1a1919);
                    border: 1px solid #916f35;
                    box-shadow: 0 0 27px #727272;
                    border-radius: 100%;
                    overflow: hidden;
                    outline: none;
                    height: 65px;
                    width: 65px;
                    cursor: pointer;
                    position: fixed;
                    bottom: 10px;
                    right: 10px;
                    transition: 0.5s ease-in-out;
                    z-index: 202;
                    color: white;
                }

                .menuFloatingButtonOrder:hover{
                    box-shadow: 0 0 15px black;
                    transform: scale(1.05);
                }

                /* I con el vector del boton */
                    .menuFloatingButtonOrder i{
                        color: var(--colorText2);
                        font-size: 3.5em;
                        position: relative;
                        left: -1px;
                        bottom: -6px;
                    }

                /* P con número de ordenes agregadas al pedido */    
                    .menuFloatingButtonOrderNumber{   
                        font-family: 'redonded';
                        font-style: normal;
                        font-size: 18pt;
                        position: absolute;
                        /* top: 15px;
                        left: 22px; */
                        top: 4px;
                        left: 20px;
                        width: 100%;
                        left: 0;
                        display: flex;
                        max-height: 24px;
                        margin: 0 auto;
                        color: #dbdbdb;
                        user-select: none;
                        z-index: 110;
                        text-shadow: 3px 2px 1px var(--colorBackground2);
                       /*  background: linear-gradient(45deg, #292929, #232222); */
                        border-radius: 100%;
                        align-items: center;
                        justify-content: center;
                    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~ ALERTA flotante de ¡Agregado al pedido! ~~ */   
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

        /* Contenedor de Alerta de pedido añadido - Inferior */
            .orderAddedAlertON{
                height: 50px;
                display: flex;
                position: fixed;
                right: 0;
                bottom: 0;
                margin-bottom: 19px;
                margin-right: 50px;
                border-radius: 51px;
                border-top-right-radius: 0%;
                border-bottom-right-radius: 0%;
                background-color: transparent;
                backdrop-filter: blur(4px);
                box-shadow: 0px 0px 10px 1px rgb(0 0 0 / 33%);
                z-index: 101;
                text-align: left;
                animation-name: pedidoAddedIn;
                animation-duration: 5s;
                animation-iteration-count: 1;
                animation-fill-mode: both;
                align-items: center;
                width: auto !important;
                padding-right: 0.2em;
                max-width: 0px;
            }

                @keyframes pedidoAddedIn {
                    0%{max-width: 0px;padding-right: 0.2em;}
                    33%{max-width: 220px;padding-right: 2.2em;}
                    66%{max-width: 220px;padding-right: 2.2em;}
                    100%{max-width: 0px; padding-right: 0.2em;}
                }

                .orderAddedAlertOFF{
                    display: none;
                }

        /* Texto de ¡Agregado al pedido! */
            .orderAddedAlertText{ 
                font-family: 'redonded';
                font-weight: 100;
                font-size: 15pt;
                color: var(--colorText2);
                text-shadow: 0px 0px 0px var(--colorText2);
                user-select: none;
                display: flex;
                overflow: hidden;
                margin: 10px auto;
                margin-left: 15px;
                white-space: nowrap;
                justify-content: left;
            }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* ~~~~~ Contenedor general de "Mi pedido" ~~~~~ */   
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

            #seccionOrderContainer{
                transition: 0.4s ease-in-out;
                display: flex;
                position: fixed;
                margin: 0 auto;
                z-index: 201;
                overflow: hidden;
                white-space: nowrap;
                background-color: rgb(255, 255, 255);
                border-radius: 4px;
                border-bottom-right-radius: 2em;
            }

            /* VISTA PH */
                /* Cuando la pantalla es menor a "X" ejecuta el programa */
                    @media only screen and (max-width: 499px) {

                        /* Seccion de lista de items seleccionados del pedido */
                            .seccionOrderContainerOPEN{
                                bottom: 10px;
                                right: 11px;
                                box-shadow: 0px 0px 30px 1px var(--colorBackground2);
                                opacity: 1;
                                width: 95vw;
                                max-width: 25em;
                                height: 80vh;

                            }


                            .seccionOrderContainerCLOSE{
                                bottom: 20px;
                                right: 21px;
                                box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 0);
                                opacity: 0;
                                width: 0vw;
                                max-width: 25em;
                                height: 0vh;
                            }

                    }


            /* VISTA PC */
                /* Cuando la pantalla es mayor a "X" ejecuta el programa */
                    @media only screen and (min-width: 500px) {

                        /* Seccion de lista de items seleccionados del pedido */
                            .seccionOrderContainerOPEN{
                                bottom: 10px;
                                right: 11px;
                                box-shadow: 0px 0px 30px 1px var(--colorBackground2);
                                
                                width: 95vw;
                                max-width: 20em;
                                height: 66vh;

                            }


                            .seccionOrderContainerCLOSE{
                                bottom: 20px;
                                right: 21px;
                                box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 0);

                                width: 0vw;
                                max-width: 21em;
                                height: 0vh;
                            }
                                                        
                    }


            /* Seccion de lista de items seleccionados del pedido */
                .seccionOrderContainerKILL{
        /*             height: 42vw;
                    width: 32%;

                    display: flex;
                    position: fixed;
                    bottom: 0;
                    right: 15px;
                    top: 20px;
                    margin: 0 auto;
                    margin-top: 40px;
                    z-index: 95;

                    background-color: rgb(255, 255, 255);

                    box-shadow: 0px 0px 15px 7px black;   */          
                    display: none;
                }

        /* ======= Título de "Mi pedido" ======= */

            /* Contenedor del titulo de la lista del pedido */
                .titleOrderContainer{
                    background: linear-gradient(45deg, #3b3b3b, #1f1f1f);
                    height: fit-content;
                    width: 100%;
                    position: absolute;
                    text-align: center;
                    z-index: 20;
                    /* box-shadow: 0px 0px 5px #0000005c; */
                }

                /* Texto del Título de mi pedido */
                    .titleOrderText{
                        font-family: 'redonded';
                        font-weight: 500;
                        color: #dddddd;
                        font-size: 1.4em;
                        user-select: none;
                        display: flex;
                        position: relative;
                        margin: 12px 0px 12px auto;
                        justify-content: space-around;
                        z-index: 20;
                        text-transform: uppercase;
                        letter-spacing: 1px;
                        
                    }

        /* ==================Costo total de la orden================== */

            /* Contenedor de costo total de la orden */
                .fieldsetTotalOrderON{
                    border-color: rgb(255 255 255 / 4%);
                    position: absolute;
                    right: 10px;
                    top: 5.5px;
                }

                .fieldsetTotalOrderOFF{
                    display: none;
                }

                    .legendTotalOrder{
                        text-align: center;
                        font-family: 'redonded';
                        font-size: 11pt;
                        color: #9c9c9c;
                        user-select: none;
                        margin-bottom: 0;
                        height: 15px;
                        text-transform: uppercase;
                        top: -3px;
                        position: relative;
                    }

                /* texto de costo total de orden */
                    .textTotalOrder{     
                        font-family: 'redonded';
                        font-size: 13pt;
                        font-weight: 100;
                        color: #c4c4c4;
                        user-select: none;
                        margin: 6px;
                        text-align: center;
                    }
            
        /* ==============Avisto de "Mi pedido" de Orden Vacia============== */

            /* Contenedor del aviso de la lista del pedido vacío */  
                .messajeEmptyOrderContainerON{
                    width: 100%;
                    height: fit-content;
                    position: relative;
                    text-align: center;
                    margin: 31% auto;
                    white-space: normal;
                }

                .messajeEmptyOrderContainerOFF{
                    display: none;
                }

                /* Título de pedido vacio */
                    .messajeEmptyOrderTitle{
                        font-family: 'redonded';
                        font-weight: 500;
                        color: #202020;
                        font-size: 1.3em;
                        user-select: none;
                        display: flex;
                        margin: 10px 25px 15px 25px;
                        justify-content: space-around;
                        text-transform: uppercase;
                    }

                /* Ayuda subtitulo de la lista del pedido vacio */
                    .messajeEmptyOrderText{
                        font-family: 'redonded';
                        font-weight: 100;
                        color: var(--colorText2);
                        font-size: 1.2rem;
                        user-select: none;
                        opacity: 70%;
                        display: flex;
                        margin: 10px 25px 15px 25px;
                        justify-content: space-around;
                    }

        /* -------------------------------------------------------- */
        /* --------------Tabla de items de la orden---------------- */
        /* -------------------------------------------------------- */

        /* DIV Contenedor de lista de items añadidos */
            .tableOrderContainer{
                padding: 15px 10px 0px 10px;
                height: 50%;
                width: 100%;
                text-align: left;
                margin-top: 30px;
                display: inline-flex;
                white-space: normal;
            }

            .tableEmptyOrderContainer{
                display: none;
            }

        /* ==================ESTRUCTURA DE LA TABLA================== */
            /* Tabla contenedora de los items del menu */
                .tableOrder{
                    height: 73%;
                    width: 99%;
                    text-align: left;
                    list-style: none;
                    position: absolute;
                    border-spacing: 5px !important;
                    vertical-align: top;
                    margin-left: -10px;
                    margin-top: 10px;
                    overflow: auto;
                    border-collapse: collapse;
                }

        /* ==================Botón de borrar Items de la orden================== */

            /* Contenedor de tabla del Botón de borrar pedido */
                .buttonEraseItemOrderContainer{
                    user-select: none;
                    text-align: left;
                    vertical-align:middle;
                    padding-left: 10px;
                }

                /* Botón de borrar pedido */
                    .buttonEraseItemOrder{
                        font-family: Calibri, 'Trebuchet MS', sans-serif;
                        font-weight: 500;
                        color: var(--colorBackground2);
                        /* box-shadow: 0px 0px 3px rgb(0, 0, 0); */
                        font-size: 1.5em;
                        user-select: none;
                        text-align: center;
                        vertical-align: middle;
                        padding-left: 6px;
                        padding-right: 6px;
                        margin-left: -5px;
                        width: auto;
                        border-radius: 100%;
                        border-width: 0px;
                        background-color: transparent;
                        position: relative;
                        top: 5px;
                        cursor: pointer;
                        transition: 0.3s ease-in-out;
                    }

                        .buttonEraseItemOrder:hover{
                            transform: scale(1.04);
                        }

        /* ==================Items de la orden================== */

            /* Contenedor de Items de la lista de la orden HAMBURGESA */
                .listItemOrderBurger{
                    font-family: Calibri, 'Trebuchet MS', sans-serif;
                    font-weight:500;
                    color: rgb(37, 0, 0);
                    text-shadow: 0px 0px 3px rgb(211, 211, 211);
                    font-size: 1.25rem;            
                    user-select: none;
                    text-align: left;
                    vertical-align: middle;       
                    width: 100%;
                    padding-left: 15px;
                    padding-right: 10px;
                    padding-top: 10px;
                    padding-bottom: 20px;
                }

                    /* .listItemOrderBurger::before{
                        content: "\01F354  ";
                    } */

            /* Contenedor de Items de la lista de la orden PAPAS */
                .listItemOrderPapas{
                    font-family: Calibri, 'Trebuchet MS', sans-serif;
                    font-weight:500;
                    color: rgb(37, 0, 0);
                    text-shadow: 0px 0px 3px rgb(211, 211, 211);
                    font-size: 16pt;
                    user-select: none;
                    text-align: left;
                    vertical-align: middle;       
                    width: 100%;
                    padding-left: 15px;
                    padding-right: 10px;
                    padding-top: 5px;
                    padding-bottom: 8px;
                }

                    /* .listItemOrderPapas::before{
                        content: "\01F35F  ";
                    } */

                /* Texto de Items de la lista de la orden */
                    .listItemOrderText{
                        font-weight: 100;
                        font-family: 'redonded';
                        font-size: 1.05em;
                        color: #3c0606c2;
                        text-shadow: 0 0 transparent;
                    }

        /* ==================Precios de los items de la orden================== */

            /* Contenedor de precio de los items de la orden */
                .priceItemOrder{
                    font-family: Calibri, 'Trebuchet MS', sans-serif;
                    font-weight:600;
                    color: rgb(37, 0, 0);
                    text-shadow: 0px 0px 3px rgb(211, 211, 211);
                    font-size: 1.25rem;
                    user-select: none;
                    text-align: right;
                    vertical-align: middle;
                    width: 50px;
                    padding-left: 7px;
                    padding-right: 10px;
                }

                /* Texto Precio de los items de la orden */
                    .priceItemOrderText{
                        position: relative;
                        /* top: -1px; */
                        font-family: 'redonded';
                        font-weight: 100;
                    }

        /* ==================Linea separadora========================= */

            /* línea separadora de los items de la orden */
                .lineSeparatorItem{     
                    border-bottom: 1px solid rgba(215, 215, 215, 0.505);
                }


            /* -------------------------------------------------------- */
            /* --------------Botón de realizar pedido------------------ */
            /* -------------------------------------------------------- */

                /* Contenedor de boton de realizar pedido */
                    .buttonRealizarPedidoContainerON{
                        height: 50px;
                        width: 100%;
                        position: absolute;
                        text-align: center;
                        z-index: 100;
                        box-shadow: 0px 0px 5px #00000038;
                        bottom: 0;
                        border-bottom-right-radius: 2em;
                        background-color: var(--colorBackground1);
                    }

                    .buttonRealizarPedidoContainerOFF{
                        display: none;
                    }

                /* Boton de realizar pedido */
                    .buttonRealizarPedido{
                        background: linear-gradient(192deg, #e6a870, #8e763f);
                        padding: 0px;
                        padding-top: 0px;
                        padding-bottom: 0px;
                        border-radius: 6px;
                        outline: none;
                        height: 2.8em;
                        border: none;
                        position: relative;
                        top: 5px;
                        border: solid 1px #8e703c;
                        left: -4%;
                        display: flex;
                        margin: 0 auto;
                        transition: 0.3s ease-in-out;
                        cursor: pointer;
                        align-items: center;
                    }

                    .buttonRealizarPedido:hover{
                        transform: scale(1.02);
                        
                    }

                    .buttonRealizarPedido:active{
                        transform: scale(1.03);
                    }

                /* texto del boton de realizar pedido */
                    .textButtonRealizaPedido{
                        font-family: 'redonded';
                        text-decoration: none;
                        color: #ffffff;
                        padding: 3px;
                        font-weight: 100;
                        font-size: 1.35em;
                        text-transform: uppercase;
                        margin: 0px 11px;
                        text-align: center;
                        display: flex;
                        width: 100%;
                        transition: 0.3s ease-in-out;
                        align-items: center;
                        justify-content: center;
                        letter-spacing: 1px;
                        text-shadow: 0 0 1px #170e00;
                    }

                    .buttonRealizarPedido:hover .textButtonRealizaPedido{
                    }


                    /* ======================================================== */
                    /* --------------Menú Emergente de agregados--------------- */
                    /* ======================================================== */
                            
                        /* Contenedor emergente de los items agregables ACTIVADO */                                    
                            .inputsContainer{  
                                background-color: rgb(255, 255, 255);
                                position: fixed;
                                top: 0;
                                bottom: 0;
                                right: 0;
                                left: 0;
                                margin: auto auto;
                                overflow: hidden;
                                height: 90vh;
                                border-radius: 7px;
                                border: solid 0px var(--colorBackground1);
                                box-shadow: 0px 0px 100px 0px #000000;
                                z-index: 1001;
                                text-align: center;
                                width: 93vw;
                                max-width: 30em;
                                padding-bottom: 6em;
                            }
                            
                            /* H1 con el nombre del item seleccionado */
                                .nameOfElementSelected{
                                    font-family: 'redonded';
                                    background: var(--colorBackground1);
                                    color: var(--colorBackground2);
                                    font-weight: 100;
                                    box-shadow: 0 0 5px #00000047;
                                    font-size: 2em;
                                    padding: 10px;
                                    padding-bottom: 12px;
                                }

                                
                                .addonList{
                                    overflow: overlay;
                                    height: -webkit-fill-available;
                                    padding-bottom: 2em;
                                }

                                .tittleSectionAddons{
                                    background: var(--colorBackground3);
                                    padding: 2px 0;
                                    padding-top: 7px;
                                }    


                            /* Contenedor emergente de los items agregables DESACTIVADO */                                    
                                .inputsContainerNone{  
                                    display: none;
                                }

                            /* ============= Título del menú emergente con nombre de hamburgesa ============= */

                                /* Fielset contenedor del titulo */
                                    .legendTitle{
                                        border-color: rgba(75, 0, 0, 0);
                                        width: 100%;
                                        border-bottom: 0;
                                        border-left: 0;
                                        border-right: 0;
                                    }

                                    /* Texto del titulo de "agregale a tu combo X" */    
                                        .textAgregaCombo{
                                            font-family: 'redonded';
                                            font-size: 16pt;
                                            color: var(--colorBackground1);
                                            user-select: none;
                                            display: block;
                                            margin: 5px;
                                            font-weight: 100;
                                        }

                            /* ============= Article contenedor con los agregables ============= */

                                /* Article contenedor de las opciones agregables al combo */        
                                    .agregadosHamburguesaArticle{
                                        display: grid;
                                        grid-template-columns: 95%;
                                        flex-wrap: wrap;
                                        width: 100%;
                                        /* max-height: 40%; */
                                        overflow: hidden;
                                        margin: 0 auto;
                                        justify-content: space-around;
                                        overflow: auto;
                                        /* max-height: 12em; */
                                    }

                            /* ============= Label contenedor de los Addons ============= */

                                /* Label contenedor de item añadible */
                                    .labelInputs{   
                                        user-select: none;
                                        padding-top: 4px;
                                        padding-bottom: 0px;
                                        padding-right: 5px;
                                        height: fit-content;
                                        min-height: 70px;
                                        border-width: 0px 0px 1px 0px;
                                        border-color: rgba(24, 24, 24, 0.205);
                                        border-style: solid;
                                        position: relative;
                                        top: 0;
                                        display: flex;
                                    }

                                        .labelInputs:active{
                                            background-color:rgb(185, 185, 185);
                                        }

                            /* ============= Lista contenedora con los textos de Addons ============= */

                                /* Lista PADRE contenedora de nombre, descripcion y precio del addon */        
                                    .listAddon{
                                        list-style: none;
                                        padding-right: 50px;
                                        width: 100%;
                                    }

                                /* ============= Textos de los Addons ============= */

                                    /* Titulo de producto para agregar */
                                        .titleAddon{    
                                            font-size: 15pt;
                                            font-weight: 100;
                                            font-family: 'redonded';
                                            color: rgb(37, 0, 0);
                                            user-select: none;
                                            text-align: left;
                                            margin-bottom: 5px;
                                        }

                                    /* Descripcion de producto para agregar */
                                        .descriptionAddon{ 
                                            font-family: 'redonded';
                                            font-size: 14pt;
                                            user-select: none;
                                            text-align: left;
                                            font-weight: 100;
                                            color: #3c060659;
                                        }

                                    /* ============= Lista contenedora con precio y checkbox (Para alinearlos) ============= */

                                        /* Lista PADRE contenedora de check y precio para alinearlos */
                                            .listPriceCheck{    
                                                list-style: none;
                                                padding: 0;
                                                position: relative;
                                                right: 0;
                                            }

                                            /* Precio de producto para agregar */
                                                .priceAddon{     
                                                    font-family: 'redonded';
                                                    font-size: 14pt;
                                                    color: var(--colorBackground3);
                                                    user-select: none;
                                                    text-align: left;
                                                    margin-left: 5px;
                                                    margin-top: 5px;
                                                    position: absolute;
                                                    display: flex;
                                                    top: 0;
                                                    font-weight: 100;
                                                    right: 0;
                                                }

                                            /* SPAN on checkbox controller */
                                                .spanOnCheck{
                                                    height: 24px;
                                                    width: 26px;
                                                    margin-bottom: 5px;
                                                    margin-right: 4px;                            
                                                    position: absolute;
                                                    bottom: 0 ;
                                                    right: 0;
                                                    z-index: 10;
                                                }    

                                                /* Checkbox input */
                                                    .inputCheck{   
                                                        user-select: none;
                                                        background-color: rgb(41, 41, 41);
                                                        margin-bottom: 10px;
                                                        margin-right: 8px;
                                                        position: absolute;
                                                        display: flex;
                                                        right: 0;
                                                        bottom: 0;
                                                    }

                                /* ============= Contenedor de los botones de Aceptar/Cancelar y total ============= */

                                    /* Articulo contenedor de cancelar, agregar y total */
                                        .buttonTotalArticle{    
                                            margin-bottom: 5px;
                                            box-shadow: 0px 0px 9px rgb(0 0 0 / 24%);
                                            position: absolute;
                                            background: var(--colorBackground1);
                                            bottom: -0.3rem;
                                            width: 100%;
                                            border-radius: 0px 0px 7px 7px;
                                            z-index: 16;
                                        }

                                    /* ============= Label contenedor de los Addons ============= */

                                        /* Lista contenedora de items cancelar, agregar y total */
                                            .buttonTotalList{   
                                                width: 100%;
                                                margin: auto auto;
                                                list-style: none;
                                                display: flex;
                                                position: relative;
                                                justify-content: space-around;
                                                align-content: center;
                                                align-items: center;
                                                flex-direction: row;
                                                flex-wrap: nowrap;
                                                padding: 8px;
                                                padding-bottom: 10px;
                                            }

                                            /* Botón de cancelar */
                                                .buttonCancelar{    
                                                    font-family: 'redonded';
                                                    text-decoration: none;
                                                    color: var(--colorBackground2);
                                                    background-color: var(--colorBackground1);
                                                    padding: 11px 12px 6px;
                                                    border-width: 1px;
                                                    border-color: #ff660e1f;
                                                    border-radius: 7px;
                                                    font-size: 1.3em;
                                                    /* text-shadow: 0px 0px 5px #1a1919a6; */
                                                    position: relative;
                                                    justify-content: center;
                                                    outline: none;
                                                    font-weight: 100;
                                                    cursor: pointer;
                                                    bottom: -1px;
                                                    transition: 0.3s ease-in-out;
                                                }

                                                    .buttonCancelar:hover{
                                                        transform: scale(1.025);
                                                    }

                                            /* boton de Agregar */
                                                .buttonAgregar{     
                                                    font-family: 'redonded';
                                                    text-decoration: none;
                                                    color: var(--colorBackground1);
                                                    background-color: var(--colorBackground2);
                                                    padding: 11px 12px 6px;
                                                    border-width: 1px;
                                                    border-color: #ff660e1f;
                                                    border-radius: 7px;
                                                    font-size: 1.3em;
                                                    text-shadow: 0px 0px 0px #1a1919a6;
                                                    position: relative;
                                                    justify-content: center;
                                                    outline: none;
                                                    font-weight: 100;
                                                    cursor: pointer;
                                                    text-decoration: underline solid transparent;
                                                    bottom: -1px;
                                                    transition: 0.3s ease-in-out;
                                                }

                                                    .buttonAgregar:hover{
                                                        transform: scale(1.025);
                                                        background-color: var(--colorBackground1);
                                                        color: var(--colorBackground2);
                                                        text-shadow: 0px 0px 0px #1a1919a6;
                                                        text-decoration: underline solid var(--colorBackground2);

                                                    }

                                    /* ============= Fieldset contenedor de precio total de addons ============= */

                                        /* Contenedor PADRE del precio total */
                                            .fieldsetTotal{
                                                border-color: rgba(79, 11, 12, 0.349);
                                                position: relative;
                                                top: -0.2rem;
                                            }

                                            /* Leyenda contenedora del texto del valor */
                                                .legendTotal{
                                                    text-align: center;
                                                    font-family: 'redonded';
                                                    font-size: 14pt;
                                                    color: var(--colorText2);
                                                    user-select: none;
                                                    margin-bottom: 0;
                                                    height: 18px;
                                                }

                                                /* texto de total */
                                                    .textTotal{     
                                                        font-family: 'redonded';
                                                        font-size: 16pt;
                                                        font-weight: 100;
                                                        color: var(--colorText2);
                                                        user-select: none;
                                                        margin: 5px;
                                                        text-align: center;
                                                    }






            /* ======================================================== */
            /* --------------Consulta de la ubicacion------------------ */
            /* ======================================================== */
                
                /* Contenedor Article de TODOS los elementos de la consulta */
                    .ubicationQuestionGeneralContainerON{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        margin: auto auto;
                        z-index: 195;
                        overflow: hidden;
                        white-space: nowrap;
                        /* padding-top: 10vw; */
                        border-bottom-right-radius: 2em;
                        display: flex;
                        box-shadow: 0px 0px 30px 15px black;
                    }

                /* Contenedor Article de TODOS los elementos de la consulta */
                    .ubicationQuestionGeneralContainerOFF{
                        display: none;
                    }

                    /* Contenedor DIV alineador de los elementos de la consulta */
                        .ubicationQuestionContainer{
                            margin-top: 10vw;
                            width: 89%;
                            height: 90%;
                            padding: 0em;
                            position: relative;
                            text-align: center;
                            box-shadow: 0px 0px 5vw 5vw rgba(0, 0, 0, 0.334);
                            border-radius: 4px;
                            background-color: rgb(255, 255, 255);
                            margin: auto auto;
                            overflow: overlay;
                        }

                        .questionTextTitleContainer{
                            font-family: 'redonded';
                            font-weight: 500;
                            color: white;
                            text-transform: uppercase;
                            background: linear-gradient(45deg, #3b3b3b, #1f1f1f);
                            font-size: 1.4em;
                            user-select: none;
                            display: flex;
                            position: relative;
                            justify-content: space-around;
                            z-index: 20;
                            padding-top: 11px;
                            padding-bottom: 10px;
                            border-top-left-radius: 7px;
                            border-top-right-radius: 7px;
                            margin-bottom: 0em;
                            margin-top: -2px;
                            box-shadow: 0px 1px 4px #00000033;
                        }

                            /* Botón de cerrar ventanita en esquina superior derecha */
                                /* #closeQuestion{
                                    font-family: Calibri, 'Trebuchet MS', sans-serif;
                                    font-weight:300;
                                    color: rgb(255, 255, 255);
                                    text-shadow: 0px 0px 3px rgb(211, 211, 211);
                                    font-size: 15pt;
                                    text-align: center;
                                    position: absolute;
                                    display: flex;
                                    justify-content: center;
                                    background-color: rgb(31, 31, 31);
                                    border-radius: 7px;
                                    padding: 0px 7px 0.3vw 7.5px;
                                    right: -13px;
                                    top: -14px;
                                } */

            /* ==============Texto título de consulta hacia el ususario============== */

                    /* Contenedor del texto de la pregunta hacia el ususario */
                        .questionTextContainer{
                            margin: 0 auto;
                            width: 100%;
                            z-index: 10;
                            padding-top: 18px;
                            padding-bottom: 7px;
                        }

                        /* Texto de la pregunta hacia el usuario */
                            .questionText{
                                font-family: 'redonded';
                                font-weight: 100;
                                color: var(--colorBackground3);
                                font-size: 1.4em;
                                text-align: center;
                                margin-bottom: 0;
                                white-space: pre-wrap;
                                user-select: none;
                            }

            /* ==================Entrada de texto escrita por el usuario================== */

                    /* Contenedor Form de la entrada de texto de la consulta PC */
                        .ubicationQuestionForm{
                            margin: 0 auto;
                            width: 100%;
                            padding: 10px;
                            z-index: 5;
                            padding-top: 0;
                        }

                        /* Input de texto de la consulta PC */
                            .ubicationAnswer{
                                resize: vertical;
                                width: 95%;
                                display: flex;
                                margin: 0.25em auto;
                                padding-bottom: calc(0.25em - 0.5px);
                                padding-left: calc(0.75em - 0.5px);
                                padding-right: calc(0.75em - 0.5px);
                                padding-top: calc(0.25em - 0.5px);
                                font-family: Calibri, 'Trebuchet MS', sans-serif;
                                font-size: 1.1rem;
                                border-style: solid;
                                border-width: 0.1vw;
                                border-color: rgb(228, 228, 228);
                                border-radius: 8px;
                                outline: none !important;
                                font-family: 'redonded';
                            }

                            .ubicationAnswerDiv{
                                display: flex;
                            }

                                .ubicationAnswerDiv input{
                                    resize: vertical;
                                    width: 95%;
                                    display: flex;
                                    margin: 0.25em 0.35em;
                                    padding-bottom: calc(0.25em - 0.5px);
                                    padding-left: calc(0.75em - 0.5px);
                                    padding-right: calc(0.75em - 0.5px);
                                    padding-top: calc(0.25em - 0.5px);
                                    font-family: Calibri, 'Trebuchet MS', sans-serif;
                                    font-size: 1.1rem;
                                    border-style: solid;
                                    border-width: 0.1vw;
                                    border-color: rgb(228, 228, 228);
                                    border-radius: 8px;
                                    font-family: 'redonded';
                                    outline: none !important;
                                }

            /* ==================Botones de la consulta de ubicacion================== */

                /* Contenedor de los botones de consulta de la ubicacion PC */
                    .ubicationQuestionButtonsContainer{
                        width: 100%;
                        display: flex;
                        justify-content: space-around;
                        list-style: none;
                        padding: 12px;
                        padding-bottom: 20px;
                        background: var(--colorBackground1);
                        border-bottom-left-radius: 7px;
                        border-bottom-right-radius: 7px;
                        margin-top: 0.9em;
                        box-shadow: 0px -1px 6px #00000024;
                        bottom: 0;
                        position: absolute;
                        padding-right: 3em;
                        background: #f2f2f2;
                    }

                    /* Botones de consulta de la ubicacion PC */
                        .ubicationQuestionButton{
                            background: linear-gradient(192deg, #e6a870, #8e763f);
                            padding: 0px;
                            border-radius: 6px;
                            outline: none;
                            position: relative;
                            padding: 6px 9px;
                            top: 5px;
                            border: solid 1px #8e703c;
                            left: -4%;
                            display: flex;
                            margin: 0 auto;
                            transition: 0.3s ease-in-out;
                            cursor: pointer;
                            align-items: center;
                            font-family: 'redonded';
                            text-transform: uppercase;
                            font-size: 1.1em;
                        }

                        .ubicationQuestionButton:hover{
                            text-decoration: underline solid var(--colorBackground1);
                            transform: scale(1.025);
                        }

                    /* Botones de consulta de la ubicacion pulsados */
            /*             .ubicationQuestionButton:active{
                            font-family: Calibri;
                            text-decoration: none;
                            color: rgb(253, 241, 220);
                            background-color: rgb(22, 22, 22);
                            padding: 2px 5px 7px 5px;
                            border-width: 1px;
                            border-color: black;
                            font-size: 42vw;
                            text-shadow: 1px -1px #000000a6;
                            box-shadow: 0px 0px 5px  rgb(0, 0, 0);
                            outline: none;
                        } */



                        .questionTypeContainer{
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            flex-wrap: wrap;
                        }
                        
                        .questionType{
                            display: flex;
                            align-items: center;
                            justify-content: space-evenly;
                            flex-wrap: nowrap;
                            flex-direction: row;
                            padding: 0.3em;
                            border-radius: 7px;
                            border: solid #e4e4e4 1px;
                            margin: 0.5em 0;
                            background: #f7f7f7;
                        }
                        
                        .questionType p{
                            font-family: 'redonded';
                        }
                      
            /* Opcion de medio de pago en menu emergente de mi pedido */
                .payOption{
                    resize: vertical;
                    width: 95%;
                    display: flex;
                    margin: 1vw auto;
                    padding-bottom: calc(0.25em - 0.5px);
                    padding-left: calc(0.75em - 0.5px);
                    padding-right: calc(0.75em - 0.5px);
                    padding-top: calc(0.25em - 0.5px);
                    font-family: Calibri, 'Trebuchet MS', sans-serif;
                    font-size: 1.1rem;
                    border-style: solid;
                    border-width: 0.1vw;
                    border-color: rgb(228, 228, 228);
                    border-radius: 8px;
                    outline: none !important;
                    font-family: 'redonded';
                }

                /* BUTTON generado por mp */
                    .mpButtonGeneratedContainer{

                    }