/*BOTTON PARA HACER SCROLL ARRIBA*/
.scroll-top{
    display: block; position: fixed; right: 7%; bottom: 1em;
    width: 3.75em; height: 3.75em; background: var(--PRIMARY);
    box-shadow: 0 0 .5em rgba(0,0,0,.5); border-radius: 50%;
    cursor: pointer; z-index: 500; color: var(--WHITE);
    opacity: 0; pointer-events: none;
    transition: background .3s, color .3S, bottom .3s ease, opacity .3s ease;
}
    .scroll-top.display{
        pointer-events: all; opacity: 1; bottom: 2em;
    }
    .scroll-top span{
        display: block; position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%); font-size: 1.5em;
    }
/* AVISO DE COOKIES */
.cookies{
    animation: slide_up_cookie 1s; display: grid; position: fixed;
    width: 80vw; max-width: 1000px; left: 50%;
    transform: translateX(-50%); bottom: 0;
    background: var(--BACK-COLOR); z-index: 1060; box-shadow: 0 0 1em rgba(0,0,0,.5);
    padding: 1em; transition: background .3s, bottom 1s;
}
            .cookies.remove{ bottom: -100vh; }
    .cookies-content{
        display: block; position: relative; overflow-y: scroll; max-height: 250px;
    }
        .cookies-content p{ font-size: .9em; }
    .cookies-actions{
        display: grid; width: 100%; margin: 0 auto; max-width: 500px;
        align-items: center; grid-template-columns: repeat(2, 1fr); grid-gap: .25em;
        position: relative; padding: 1em .5em 0 .5em;
    }
        .cookies-actions > a{ display: block; text-align: center; }
/*VENTANA EMERGENTE*/
/*TRIGGER*/
/*< class="link show_emergent_window" emergent="TARGET" >*/
.show_emergent_window{ cursor: pointer; }
/*TEST*/
.emergent-window-container{
    display: flex;  justify-content: center; position: fixed; z-index: 1100;
    top: -25vh; left: -25vw; right: -25vw; bottom: -25vh; background: rgba(0,0,0,.75);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
        .display.emergent-window-container{ opacity: 1; pointer-events: all; }
        .display.emergent-window-container .emergent-window{ transform: scale(1); }
.emergent-window{
    display: flex; flex-direction: column; position: fixed; width: 45em; 
    top: 3rem; max-width: 600px; box-shadow: 0 0 2.5em rgba(0,0,0,.75); background: var(--BACK-COLOR);
    border-radius: 4px; max-height: 80vh; z-index: 1100;
    transform: scale(0.9); padding: 25px 20px 10px 20px; transition: background .3s, transform .3s ease;
}
            .emergent-window.wide{ width: 70vw; max-width: 1400px !important; }
            .emergent-window.tiny{ max-width: 500px !important; }
        /*TITULO*/
        .emergent-window-title{
            display: block; position: relative; padding: 0 1.5em 5px 0; /*margin-bottom: 1rem*/;
        }
            .emergent-window-title > i{ color: var(--TEXT); }
            .emergent-window-title > h3{
                color: var(--TEXT); font-weight: 400; transition: color .3s; font-size: 1.25em;
            }
                .emergent-window-title > h3 > i{ padding: .25em; }
    /*CONTENIDO*/
    .emergent-window-content{
        display: block; position: relative; width: 100%; overflow-y: scroll; scrollbar-width: none; padding: 5px;
    }
        .emergent-window-content::-webkit-scrollbar { display: none; }
                    /*CONTENIDOO DINAMICO*/
                    .ewc-dinamic{ 
                        display: block; opacity: 0; min-height: 10em; transition: opacity .3s;
                    }
    /*ACCIONES*/
    .emergent-window-actions{
        display: block; position: relative; width: 100%; text-align: right;
    }
        .emergent-window-actions > input[type="submit"]{ display: block; width: 100%; }
        .emergent-window-footer{
            position: relative; bottom: 0; background: var(--BACK-COLOR);
            padding-top: .5em; transition: all .3s; text-align: right;
        }
    .close_emergent_window.on-head{
        display: flex; position: absolute; width: 3em; height: 2em; top: 0; right: 0;
        align-items: center; justify-content: center; cursor: pointer; z-index: 9;
    }
        .close_emergent_window.on-head:before{ content: '×'; font-size: 1.75em; }
/* CAJA CON HALTURA VARIABLE */
/*EJEMPLO: 
    <IGNITOR box-target="id_target">
    <OBJETIVO id="id_target">

*/
/*EJEMPLO DE UNICO: 
    <IGNITOR class="height-animation-box-ignitor unique" box-target="id_target">
    <IGNITOR class="height-box-ignitor unique" box-target="id_target">

    <div class="height-animation-box-container unique" id="id_target"></div>

    AMBOS DEBEN TENER LA CLLASE unique, EL IGNITOR Y EL OBJETO box-target 
*/
/*IGNITOR ALTERNATIVE*/
.height-box-ignitor{ cursor: pointer; }
    /*OBJETIVO*/
    .height-animation-box-container{
        position: relative; width: 100%; height: 0; overflow: hidden; transition: height .5s ease;
    }
/*CONTADOR DE CREDITOS*/
.credit-counter{ display: block; position: relative; padding: .5em; }
    .credit-counter > h1{
        display: block; position: relative; text-align: center; font-size: 4.5em;
        font-weight: 300; color: var(--TEXT); transition: color .3s;
    }
        .credit-counter > h1 > i{
            font-size: .75em; padding: .15em 0 .15em .25em; color: var(--GOLDEN);
        }
        .credit-counter > h1 > span{ font-size: .5em; color: var(--GOLDEN); }
    .credit-counter > p{
        padding: .25em .1em; display: block; position: relative; text-align: center;
        font-style: oblique; font-size: 1em; font-weight: 300; color: var(--TEXT);
        transition: color .3s;
    }
/*VIEW CHANGER*/
#ads_view_changer{ cursor: pointer; overflow: hidden; }
    #ads_view_changer #view_mode_checkbox{ display: none; }
    #ads_view_changer #view_mode_checkbox:checked + i:before{ content: '\f00b'; }
    #ads_view_changer i{
        color: var(--TEXT-1); font-size: 1.75em; transition: color .3s;
    }
/*ADS VIEW SWITCH*/
.switch-view{
    display: inline-block; position: relative; width: 2em; height: 2em;
}
    .switch-view span{
        display: block; position: absolute; background: var(--TEXT-WEAK);
        width: 40%; height: 40%; border-radius:  0.1em; transition: background 0.3s;
    }
        .switch-view span:nth-child(1){
            top: 5%; left: 5%; transition: left 0.3s ease, background 0.3s, opacity 0.3s;
        }
        .switch-view span:nth-child(2){
            top: 55%; left: 5%; transition: left 0.3s ease 0.1s, background 0.3s, opacity 0.3s;
        }
        .switch-view span:nth-child(3){
            top: 5%; left: 55%; transition: left 0.3s , background 0.3s, opacity 0.3s, width 0.3s;
        }
        .switch-view span:nth-child(4){
            top: 55%; left: 55%; transition: left 0.3s ease 0.1s, background 0.3s, width 0.3s;
        }
        .switch-view span:nth-child(5){
            top: 5%; left: 55%; transition: left 0.3s , background 0.3s, opacity 0.3s;
        }
        .switch-view span:nth-child(6){
            bottom: 5%; left: 55%; transition: left 0.3s ease 0.1s, background 0.3s, opacity 0.3s;
        }
            .switch-view span:nth-child(1),
            .switch-view span:nth-child(2){ left: 5%; width: 25%; }
            .switch-view span:nth-child(3),
            .switch-view span:nth-child(4){ width: 55%; left: 40%; }
            .switch-view span:nth-child(5),
            .switch-view span:nth-child(6){ left: 102.5%; opacity: 0; pointer-events: none; }
            /*SWITCHED*/
            #view_mode_checkbox:checked + .switch-view span:nth-child(1),
            #view_mode_checkbox:checked + .switch-view span:nth-child(2){
                left: -32.5%; pointer-events: none; opacity: 0;
            }
            #view_mode_checkbox:checked + .switch-view span:nth-child(3),
            #view_mode_checkbox:checked + .switch-view span:nth-child(4){
                left: 5%; width: 40%;
            }
            #view_mode_checkbox:checked + .switch-view span:nth-child(5),
            #view_mode_checkbox:checked + .switch-view span:nth-child(6){
                left: 55%; pointer-events: all; opacity: 1;
            }
/*LOADER*/
.dynamic-content{ }
.form-msg{ margin: 1em 0; }
.loader-container{
    animation: fade_in .25s; display: none; position: relative; width: 100%; min-height: 35px;
    z-index: 10; top: 0; left: 0; align-items: center; justify-content: center;
    flex-direction: column;
}
            .loader-container.loader_display{ display: flex; }
    .loader{ height: 1.5rem; display: flex; align-items: center; }
        .loader-item{
            display: inline-block; height: 0.75rem; width: 0.75rem; margin: 0 0.25rem;
            border-radius: 50%; background: var(--PRIMARY-LIGHTEN);
            animation: loader_circle_fade 1s linear alternate infinite;
        }
        .loader-item:nth-child(1){animation-delay: -0.2s;}
        .loader-item:nth-child(2){animation-delay: -0.1s;}
        .loader-item:nth-child(3){animation-delay: 0s;}
        .loader-item:nth-child(4){animation-delay: 0.3s; display: none;}
        .loader-item:nth-child(5){animation-delay: 0.4s; display: none;}
            .loader-container.danger .loader-item{background: var(--RED);}
                                .loader-container.danger .loader-item:nth-child(1){background: rgba(235,77,65,.6);}
                                .loader-container.danger .loader-item:nth-child(2){background: rgba(235,77,65,.8);}
                                .loader-container.danger .loader-item:nth-child(3){background: rgba(235,77,65,1);}
                                .loader-container.danger .loader-item:nth-child(4){background: rgba(235,77,65,.8);}
                                .loader-container.danger .loader-item:nth-child(5){background: rgba(235,77,65,.6);}
            @keyframes loader_circle_fade{
                0% {filter: opacity(0.25) saturate(0); transform: scale(0.5);}
                25%{filter: opacity(1) saturate(1);}
                50%{filter: opacity(1) saturate(1); transform: scale(1);}
                75%{filter: opacity(1) saturate(1);}
                100%{filter: opacity(0.25) saturate(0); transform: scale(0.5);}
            }
/*TABS*/
.tabs{
    display: grid; position: relative; margin: 1em 0 1.5em 0;
}
    .tab-link{
        display: flex; align-items: center; justify-content: center; position: relative;
        text-decoration: none; color: var(--TEXT); cursor: pointer; font-size: 1em;
        padding: .5em; overflow: hidden; border-top-left-radius: .25em;
        border-top-right-radius: .25em; transition: color .3s;
    }
        .tab-link.current-tab{ pointer-events: none; border-bottom: .15em solid var(--PRIMARY); }
        .tab-link i{ display: block; padding: .25em; }
        .tab-link span{ display: block; white-space: nowrap; }
        .tab-link p{
            display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0;
        }
/*NOTIFICATION*/
.notification{
    display: block; position: fixed; bottom: -100vh; border-radius: 2em;
    background: rgba(50,50,50,1); width: 100vw; max-width: 350px; left: 2rem;
    box-shadow: 0 0 1em rgba(0,0,0,.5); color: var(--WHITE); padding: 1em 2.5em 1em 1.5em;
    overflow: hidden; z-index: 2000; transition: all .5s ease;
}
            .notification.display{ bottom: 2rem; }
    .notification > i{ z-index: 1; }
    .notification .button-close{
        position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    }
    .notification .button-close:before{
        content: '×'; color: white; font-size: 2.5rem; cursor: pointer; line-height: 1; font-weight: 100;
    }
    .notification-content{
        display: block; position: relative; overflow-y: scroll; scrollbar-width: none;
        font-size: 1.1em; font-weight: 300; max-height: 25vh;
    }
        .notification-content::-webkit-scrollbar { display: none; }

.footer{
    display: block; position: relative; min-height: 10em; width: 100%;
    padding: 2em 0 0 0; margin-top: auto; overflow: hidden; padding-bottom: 7em;
    background: var(--FOOTER); transition: background .3s, box-shadow .3s;
}
    .footer *{ color: var(--WHITE) !important; }
            .footer.admin{
                background: var(--TRANSPARENT-0); padding: 0; box-shadow: 0 0 .5em rgba(0,0,0,.1);
                min-height: auto;
            }
    .footer-content{
        display: grid; position: relative; padding: .5em; margin: 0 auto;
        width: 80%; max-width: 800px;
    }
        .footer-box{ display: block; position: relative; padding: .5em; }
            .footer-box h3{
                display: block; position: relative; font-size: 1.25em; margin: .5em 0;
                font-weight: 500; color: var(--TEXT); transition: color .3s;
            }
            .footer-box > a{
                display: block; position: relative; font-size: 1em; padding: .25em .75em;
                margin: .15em 0; text-decoration: none; border-radius: .25em;
                color: var(--TEXT); transition: color .3s;
            }
                .footer-box > a:hover{ background: rgba(128,128,128,.1); }
                .footer-box > a > i{ padding: .15em .25em; }
            .footer-box-links{
                display: grid; grid-template-columns: repeat(2, 1fr); position: relative;
            }
                .footer-box-links a{
                    display: block; position: relative; font-size: 1em; padding: .25em .75em;
                    margin: .15em 0; text-decoration: none; border-radius: .25em;
                    color: var(--TEXT); transition: color .3s;
                }
                    .footer-box-links a:hover{ background: rgba(128,128,128,.1); }
                    .footer-box-links a i{
                        padding: .15em .25em; color: var(--LIGHT-PURPLE);
                    }
    /* CP */
    .footer-copy{ display: block; position: relative; }
        .footer-copy h3{
            display: block; position: relative; text-align: center; padding: .5em;
            font-size: 1.25em; font-weight: 400; color: var(--TEXT); transition: color .3s;
        }
/*VENTANA DE FORMULARIO*/
.form-window{ display: block; position: relative; width: 100%; padding: 1em; }
    /*CONTENEDOR DE FORMULARIO*/
    .form-container{
        display: grid; position: relative; width: 70%; margin: 1em auto;
        padding: 1em; min-height: 1em; overflow: hidden;
    }
        /*DESCRIPCION AUXILIAR*/
        .form-aux-label{
            display: flex; align-items: center; justify-content: center; font-size: 1em;
            padding: .15em .25em ; color: var(--TEXT); transition: color .3s; cursor: pointer;
        }
                .form-aux-label i{
                    font-size: 1.25em; color: rgba(128,128,128,.25); padding: .1em .25em .1em .1em;
                    transition: color .3s, transform .3s;
                }
        /*TITULO DEL FORMULARIO*/
        .form-title{
            display: block; position: relative; width: 100%; font-size: 1.5em;
            padding: .25em 0; text-align: center; font-weight: 300; color: var(--TEXT);
            transition: color .3s;
        }
            .form-title > i{ padding: .1em .25em .1em .1em; }
        /*SUBTITULO DEL FORMULARIO*/
        .form-subtitle{
            display: block; position: relative; width: 100%; font-size: 1.35em;
            padding: .25em 0; text-align: center; font-weight: 300; color: var(--TEXT);
            transition: color .3s;
        }
        /*ACTION*/
        .form-action{ display: grid; position: relative; }
        /*INPUT*/
        .form-input{ display: block; position: relative; overflow: hidden; }
        /*INPUT TEXT*/
        .form-input input{
            width: 100%; height: 100%; font-size: 1em; padding-top: 1.8em;
            color: var(--TEXT); border: none; outline: none; background: transparent;
            transition: color .3s;
        }
            .form-input input[type="date"]:required:invalid { color: transparent; }
            .form-input input[type="date"]:focus { color: inherit !important; }
                .form-input input[type="date"]::-webkit-inner-spin-button,
                .form-input input[type="date"]::-webkit-outer-spin-button{ 
                    -webkit-appearance: none;
                }
            /*LABEL*/
            .form-input .form-input-label {
                position: absolute; bottom: 0; left: 0; height: 100%;
                width: 100%; font-weight: 300; font-size: 1.1em;
                border-bottom: 1px solid var(--TEXT-WEAK); pointer-events: none;
                transition: border .3s;
            }
                .form-input .form-input-label::after {
                    content: ""; position: absolute; height: 100%;
                    width: 100%; border-bottom: 2px solid var(--PRIMARY-LIGHTEN);
                    left: 0; bottom: -1px; transform: translateX(-100%);
                    transition: transform .3s ease;
                }
                /*SPAN DENTRO DEL LABEL*/
                .form-input-span{
                    position: absolute; bottom: .2em; left: 0; font-size: 1em;
                    color: var(--TEXT); transition: transform .3s, font-size .3s, color .3s;
                }
                    /*CUANDO SE HACE CLICK EN EL IMPUT*/
                    .form-input input:focus + .form-input-label .form-input-span,
                    .form-input input:valid + .form-input-label .form-input-span{
                        transform: translateY(-1.8em); font-size: .9em;
                        color: var(--TEXT);
                    }
                    .form-input input:focus + .form-input-label::after,
                    .form-input input:valid + .form-input-label::after{
                        transform: translateX(0%);
                    }
        /*INPUT RADIO*/
        .form-input-radio{ display: grid; position: relative; width: 100%; }
            .form-input-radio > label{ 
                display: inline-flex; align-items: center; font-size: 1em;
                padding: .15em .25em ; color: var(--TEXT); transition: color .3s;
                cursor: pointer;
            }
                .form-input-radio > label > i{
                    font-size: 1.5em; color: rgba(128,128,128,.25);
                    padding: .1em .25em .1em .1em; transition: color .3s, transform .3s;
                }
            .form-input-radio > input[type="radio"]{ display: none; }
                .form-input-radio input[type="radio"]:checked + label > i{
                    color: var(--PRIMARY-LIGHTEN);
                }
        /*INPUT CHECKBOX*/
        .form-input-checkbox{
            display: flex; position: relative; overflow: hidden; width: 100%;
        }
            .form-input-checkbox > label{
                display: flex; align-items: center; font-size: 1em;
                padding: .15em .25em ; color: var(--TEXT); transition: color .3s;
                cursor: pointer;
            }
                .form-input-checkbox > label > i{
                    font-size: 1.5em; color: rgba(128,128,128,.25);
                    padding: .1em .25em .1em .1em; transition: color .3s, transform .3s;
                }
            .form-input-checkbox > input[type="checkbox"]{ display: none; }
                .form-input-checkbox input[type="checkbox"]:checked + label > i{
                    color: var(--PRIMARY-LIGHTEN);
                }
        /* TEXTAREA */
        .form-text-area{
            display: block; position: relative; width: 100%; height: 5em;
        }
            .form-text-area > textarea{
                display: block; position: relative; width: 100%; height: 100%;
                font-family: inherit; background: rgba(128,128,128,.05);
                border: .1em solid rgba(128,128,128,.1); outline: none; padding: .5em;
                color: var(--TEXT); resize: none; transition: color .3s;
            }
        
        /* SUBIDA DE FOTOS */
        .form-photo-upload{
            display: block; position: relative; width: 100%; padding: .5em 0;
            color: var(--TEXT-WEAK); transition: color .3s;
        }
            /*ETIQUETA PARA SUBIR*/
            .form-photo-upload > label{
                display: block; position: relative; text-align: center;
                padding: 1em; width: 100%; cursor: pointer;
                border: .05em dotted var(--TEXT-WEAK); overflow: hidden;
                background: rgba(128,128,128,.05); transition: border .3s;
            }
                .form-photo-upload > label > i{
                    display: block; position: relative; font-size: 2em; padding: .25em;
                }
            .form-photo-upload input[type="file"]{
                -webkit-appearance: none; appearance: none; display: block;
                position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
                appearance: none; cursor: pointer; outline: none;
            }
            /*PREVIEW*/
            .form-photo-upload-preview{
                display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .5em;
                width: 100%; padding: 1em 0;
            }
                /*LISTA DE IMAGENES*/
                .form-photo-upload-preview .thumb-Images{
                    display: grid; grid-template-columns: repeat(2, 1fr);
                    grid-gap: .5em; list-style: none;
                }
                    /*CONTENEDOR DE LA MINIATURA*/
                    .form-photo-upload-preview  .img-wrap{
                        display: block; position: relative; padding-top: 100%;
                        background: rgba(128,128,128,.1); border: .05em dotted var(--TEXT-WEAK);
                        transition: border .3s;
                    }
                        .img-wrap input[type="text"]{ width: 100%; }
                        /*IMAGEN EN MINIATURA*/
                        .form-photo-upload-preview .img-wrap img{
                            display: block; position: absolute; left: 50%; top: 50%;
                            transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;
                        }
                        /*BOTON DE ELIMINAR*/
                        .form-photo-upload-preview .img-wrap .close{
                            position: absolute; top: -.6em; right: -.3em; width: 1.5em;
                            height: 1.5em; border-radius: 50%; background: var(--BACK-COLOR);
                            box-shadow: 0 0 .25em rgba(0,0,0,.5); cursor: pointer; padding: .25em;
                            z-index: 1; transition: background .3s;
                        }
                            .form-photo-upload-preview .img-wrap .close > i{
                                position: absolute; top: 50%; left: 50%;
                                transform: translate(-50%, -50%); color: var(--TEXT);
                                transition: color .3s;
                            }
                        /*BOTON DE GIRAR*/
                        .form-photo-upload-preview .img-wrap .rotate{
                            position: absolute; bottom: .5em; left: 25%;
                            transform: translateX(-50%); width:2em; height: 2em;
                            border-radius: 50%; background: var(--BACK-COLOR);
                            box-shadow: 0 0 .25em rgba(0,0,0,.5); cursor: pointer; 
                            padding: .25em; z-index: 1; transition: background .3s;
                        }
                            /*.form-photo-upload-preview .thumb-Images .img-wrap .close > i*/
                            .form-photo-upload-preview .img-wrap .rotate > i{
                                position: absolute; top: 50%; left: 50%;
                                transform: translate(-50%, -50%); color: var(--TEXT);
                                transition: color .3s;
                            }
                        /*BOTON DE GIRAR*/
                        .form-photo-upload-preview .img-wrap .mirror{
                            position: absolute; bottom: .5em; left: 75%; 
                            transform: translateX(-50%); width:2em; height: 2em;
                            border-radius: 50%; background: var(--BACK-COLOR);
                            box-shadow: 0 0 .25em rgba(0,0,0,.5);
                            cursor: pointer; padding: .25em; z-index: 1;
                            transition: background .3s;
                        }
                            /*.form-photo-upload-preview .thumb-Images .img-wrap .close > i*/
                            .form-photo-upload-preview .img-wrap .mirror > i{
                                position: absolute; top: 50%; left: 50%;
                                transform: translate(-50%, -50%); color: var(--TEXT);
                                transition: color .3s;
                            }
                    /*NOMBRE DE LA IMAGEN*/
                    .form-photo-upload-preview .thumb-Images .FileNameCaptionStyle{ display: none; }
/*CAMPO DE ERRORES*/
.form-errors{
    animation: fade_in .3s; display: block; grid-gap: .25em; position: relative; padding: .5em;
}
    .form-errors > p{
        display: block; position: relative; font-size: 1em; font-weight: 400; transition: all .3s;
    }
        .form-errors > p > i{ padding: .15em; }
/*IMAGENES*/
.img-container{
    display: block; position: relative; width: 100%; padding-top: 100%;
    background: rgba(128,128,128,.25);
}
    .img-container img{
        display: block; position: absolute; max-width: 100%; max-height: 100%;
        left: 50%; top: 50%; transform: translate(-50%, -50%);
    }
/*CLEAR INPUT BTN*/
.clear-input{
    display: none; position: absolute; right: .5em; top: 50%;
    transform: translateY(-50%); cursor: pointer; font-size: 1.15em; padding: .1em;
    color: var(--TEXT); transition: color .3s;
}
    .clear-input.display{ display: block; }
/*FORMULARIO DE PAGO*/
.payment-form{
    display: block; position: relative; box-shadow: 0 0 .08em rgba(0,0,0,.5);
    background: var(--BACK-COLOR); transition: background .3s;
}
    .payment-form-head{
        display: block; position: relative; width: 100%; padding: 1em 0;
        background: rgba(128,128,128,.05);
    }
    .payment-form-offer{
        display: grid; grid-template-columns: 3fr 4fr; position: relative;
        grid-gap: .5em; padding: .5em 1em;
    }
        .payment-form-offer span{
            display: block; color: var(--TEXT); font-weight: 700; font-size: 1.1em;
            text-align: right; transition: all .3s;
        }
        .payment-form-offer i{
            display: block; text-align: right; color: var(--TEXT-WEAK);
            text-decoration-line: line-through; font-size: .9em; transition: all .3s;
        }
        .payment-form-offer .discount{
            background: var(--GREEN); display: inline-flex; height: 1.5em;
            align-items: center; position: relative; margin-right: .75rem;
            color: var(--WHITE); font-size: .75em; padding: .15em .5em;
            text-transform: uppercase;
        }
                .payment-form-offer .discount:before{
                    content: ""; display: block; position: absolute; right: -.75em;
                    border-bottom: solid .75em transparent; border-left: solid .75em var(--GREEN);
                    border-top: solid .75em transparent;
                }
/*RECAPTCHA*/
.g-recaptcha{
    transform: scale(.8) !important; transform-origin: 0 0 !important; margin: 0 auto !important;
}
    .g-recaptcha > div{ width: 250px !important; }
.nav-bar{
    display: block; position: sticky; top: 0; background: var(--NAV);
    height: 4.5em; z-index: 1000;
    transition: background .3s, padding .3s, height .3s, box-shadow .3s, transform .2s linear, opacity .2s linear;
}
.nav-bar.admin{ margin: 0; position: relative; }
.nav-bar.no-transparent{
    background: var(--NAV-SCROLLED); backdrop-filter: blur(5px);
}
.nav-bar.fixed-color{
    background: var(--NAV-SCROLLED) !important; backdrop-filter: blur(5px);
}
    .nav-bar.scrolled{
        background: var(--NAV-SCROLLED); backdrop-filter: blur(5px);
    }
.nav-bar.nav-hidden{
    transform: translateY(-100px); opacity: 0; pointer-events: none;
}
    /*.nav-bar.nav-hidden *{
        pointer-events: none !important;
    }*/
                .nav-bar.scrolled .nav-bar-content{ /*padding: 0 1.75em;*/ }
/*CONTENIDO DE LA BARRA DE NAVEGACION*/
.nav-bar-content{
    display: flex; width: 100%; grid-template-columns: 8fr 2fr; align-items: center;
    margin: 0 auto; height: 100%; max-width: 1280px; /*padding: 0 3em;*/ padding: 0 1.75em; transition: padding .5s;
}   
    /*LOGO*/
    .nav-logo{
        display: flex; position: relative; padding: 0 0 0 1em; font-size: 1.5em;
        transition: font-size .3s; margin-right: auto;
    }
.logo{
    display: flex; align-items: center; position: relative; cursor: pointer; text-decoration: none;
}
    .logo-icon{ padding: .1em .2em .1em 0; }
        .logo-icon i{
            font-size: 1.5em; transform: rotateY(180deg); color: var(--TEXT-WEAK);
            padding: .05em; transition: color .3s;
        }
        .logo-icon img{
            width: 40px; height: 40px; filter: drop-shadow(0 0 0.2rem rgba(0,0,0,0.1)); 
        }
    .logo-title{
        display: flex; align-items: center; position: relative;
    }
        .logo-title h2{
            font-size: 1.25em; font-weight: 500; margin: 0;
            color: var(--PRIMARY); text-shadow: 0 0 0.3rem rgba(0,0,0,0.1);
            transition: color .3s; white-space: nowrap;
        }
    .logo-info{ display: block; position: relative; height: .5em; }
        .logo-info p{
            display: block; position: absolute; top: -.5em; left: 0;
            color: var(--TEXT); font-size: .5em; font-weight: 400; transition: color .3s;
            white-space: nowrap;
        }
        
        
    /*BOTONES*/
    .nav-buttons{
        display: flex; align-items: center; position: relative; margin-left: auto;
    }
            /*CLASE QUE ACTIVA LOS DROPDOWN*/
            .click-nav-menu.display{ pointer-events: none; opacity: 0.75; }
            .click-nav-menu.display + .nav-plegable-menu{
                top: 150%; opacity: 1; pointer-events: all;
            }
                .click-nav-menu.display + .nav-plegable-menu + .nav-plegable-menu-arrow{
                    top: 126%; opacity: 1; pointer-events: all;
                }
                    .click-nav-menu.display + .nav-plegable-menu + .nav-plegable-menu-arrow + .nav-plegable-menu-arrow1{
                        top: 116%; opacity: 1; pointer-events: all;
                    }
/*PLEGABLE MENU*/
.nav-plegable-menu{
    display: block; position: absolute; background: var(--BACK-LAYER-1);
    box-shadow: 0 0 .1em rgba(0,0,0,.5); top: 300%; right: 0; opacity: 0; pointer-events: none;
    padding: .5em .5em .75em .5em; max-height: 70vh; border-radius: 2px;
    border-top: .15em solid var(--PRIMARY); z-index: 10; overflow-y: scroll;
    min-width: 10em; transition: all .3s; scrollbar-width: none; min-width: 180px;
    max-width: 75vw;
}   
            .nav-plegable-menu::-webkit-scrollbar { display: none; }    
    .nav-plegable-menu-arrow{
        display: block; position: absolute; width: 1.5em; height: 32%; opacity: 0;
        pointer-events: none; border-bottom: solid .75em var(--BACK-LAYER-1);
        border-left: solid .75em transparent; border-right: solid .75em transparent;    
        left: 50%; top: 275%; transform: translateX(-50%); z-index: 11;
        transition: all .3s;
    }
    .nav-plegable-menu-arrow1{
        display: block; position: absolute; width: 2em; height: 35%; opacity: 0;
        pointer-events: none; border-bottom: solid 1em var(--PRIMARY);
        border-left: solid 1em transparent; border-right: solid 1em transparent;    
        left: 50%; top: 266%; transform: translateX(-50%); z-index: 9;
        transition: all .3s;
    }
.search-container{
    display: grid; grid-column-gap: .5em; position: relative; width: 80%;
    margin: 0 auto 1em auto; padding: .5em;
}
    /* RESULTADOS */
    .search-results{ display: block; position: relative; width: 100%; }
        /* HEAD DE LOS RESULTADOS */
        .search-head{
            text-align: left; display: grid; grid-gap: .25em; align-items: center;
            position: relative; width: 100%; padding: 0 0 .5em 0;
        }
            .search-head-options{
                display: flex; justify-content: flex-end; align-items: center;
                position: relative; text-align: right; overflow: hidden;
            }
                .search-head-options p{ font-size: .9em; }
                .search-head-options span > i{ margin: 0em; font-size: 1.35em; }
        .search-sub-head{ display: block; position: relative; }
        /* CONTADOR DE RESULTADOS */
        .search-head-counter{
            display: block; position: relative; width: 100%; text-align: left;
        }
        /* TARJETAS DE RESULTADOS*/
        /* MODO LISTA POR SIEMPRE*/
        .search-cards{
            display: block; grid-template-columns: repeat(1, 1fr); /*padding: 0 8em;*/
            margin: 0 auto .5em auto; position: relative; transition: padding .3s;
        }
            .search-cards:not(.grid-view){ max-width: 800px; padding: 0 0.5em;}
            /*MODO PARA VER EN GRILLA*/
            .search-cards.grid-view{
                display: grid; grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 1.5em; grid-gap: 1em; padding: 0 1em; max-width: 800px;
            }
            .search-cards > h5{
                margin-top: 1.5em;
                margin-bottom: 1em;
                grid-row: span 1;
                /*color: var(--TEXT-WEAK);*/
                grid-column: 1/-1;
            }
            .search-cards > h5:first-child{
                margin-top: 0;
            }
            .search-cards.grid-view > h5{
                margin-top: 0; margin-bottom: 0;
            }
            .search-cards.grid-view .main-card:not(.top) .hide-on-grid{
                display: none !important;
            }
            .search-cards:not(.grid-view) .main-card .hide-on-list{
                display: none !important;
            }
        /* PAGINACION */
        .search-results-pagination{
            display: block; position: relative; text-align: center; margin: 2em 0 0 0;
            padding: .5em;
        }
    /*SECCION DE FILTROS */
    .search-fils{ display: block; position: relative; }
        .search-filters-container{ display: block; }
            /* BUSQUEDA */
            .search-filters{
                display: block; position: relative; scrollbar-width: none;
                margin: 0 0 1em 0; transition: background .3s;
            }
                .search-filters::-webkit-scrollbar { display: none; }
                .search-filters-filters{
                    display: grid; position: relative; align-items: end;
                    grid-template-columns: 3fr 2fr 3fr 4fr 3fr; grid-gap: .5em;
                }
/* ESTILOS PARA LOS FILTROS */
.search-filter-box{ display: grid; align-items: center; position: relative; padding: 0; }
    .search-filter-box input[type="text"]{
        display: block; position: relative; width: 100%; background: var(--BACK-COLOR);
        border-radius: .15em; font-size: 1em; color: var(--TEXT); padding: .75em .5em;
        transition: color .3s, background .3s, border .3s; outline: none;
    }
        /* INPUT SELECT */
        .search-filter-box.select{ grid-template-columns: 2fr 3fr; padding: .25em .75em; }
            .search-filter-box.select label{
                display: block; position: relative; font-size: .9em;
                color: var(--BACK-COLOR); transition: color .3s;
            }
    /*SELECT*/
    .search-filter-box select{ padding: .75em .35em; font-size: 1em; }
        /* INPUT RANGE */
        .search-filter-box.range{
            grid-template-columns: 1fr 3fr 1fr; grid-gap: .5em; padding: .8em 0;
        }
            .search-filter-box.range .range-number{
                display: block; position: relative; width: 100%; text-align: center;
            }
                .search-filter-box.range .range-number span{ font-size: .9em; }
.showcase:before{
    content: '';
    display: block;
    position: absolute;
    width: calc(100vw - 12px);
    top: -5em; left: 50%; bottom: 0; transform: translateX(-50%);
    background-size: cover; background-position: center;
    background-repeat: no-repeat;
}
@media (pointer: coarse)  {
    .showcase:before{
        width: 100vw;
    }
}
body.body-dialog .showcase:before{
    width: 100vw;
}
.showcase:before{
    background-image: url("../pics/desktop/dark_1.jpg");
}
body.light-mode .showcase-background{animation: showcase_light_desktop 30s ease-in-out infinite;}
body.dark-mode .showcase-background{animation: showcase_dark_desktop 30s ease-in-out infinite;}
.showcase{ display: block; position: relative; width: 100%; }
    .showcase-background{
        display: block; position: absolute; top: -5em; min-width: 100%; width: calc(100vw - 12px);
        left: 50%; transform: translateX(-50%); height: 700px; background-position: center;
        background-size: cover; z-index: -1;
    } 
    .showcase-content{
        display: flex; position: relative; width: 90%; margin: 0 auto; /*padding: 10em 0 10em 0; */
        flex-direction: column; justify-content: center; min-height: 700px; max-width: 1000px;
    }
        /*MENSAJE DE BIENVENIDA*/
        .showcase-welcome{
            display: block; position: absolute; width: 100%; top: 0;
            padding: 1.5em 1em; text-align: center;
        }
            .showcase-welcome > h3{
                animation: slide_up .75s, fade_in .75s; display: block; position: relative;
                font-size: 1.25em; font-weight: 400; font-style: oblique; width: 75%;
                margin: 0 auto; padding: .5em; background: var(--BACK-COLOR);
                color: var(--TEXT); transition: color .3s, background .3s;
            }
        /*TITULO*/
        .showcase-title{
            display: block; position: relative; text-align: center;
        }
            .showcase-title h1{
                display: inline-block; padding: .25em; margin: 0; font-size: 1.85em;
                font-weight: 500; border-radius: .25em; color: var(--WHITE);
                text-shadow: 0 0px 1rem rgba(0, 0, 0, 0.5);
            }
            .showcase-title h2{
                display: inline-block; padding: .25em; margin: 0 auto; max-width: 90%;
                font-size: 1.5em; font-weight: 400; border-radius: .25em;
                color: var(--WHITE); text-shadow: 0 0px 1rem rgba(0,0,0,0.5);
            }
        .showcase-cards{
            display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 1em;
            position: relative; width: 85%; min-height: 1em; margin: 5em auto 0 auto;
            border-radius: 0em; background: var(--BACK-COLOR);
            box-shadow: 0 0 .2em rgba(0,0,0,.25); backdrop-filter: blur(5px);
            padding: 1em; transition: all .3s;
        }
/*REGIONES*/
.region-list{
    display: block; position: relative; width: 45%; margin: 2em auto 1em auto; padding: 1em;
}
    .region-list-content{
        display: block; position: relative; padding: .5em 1em; border-radius: 2px;
        width: 100%; box-shadow: 0 0 .5em rgba(0,0,0,.25); background: var(--BACK-LAYER-1);
        transition: background .3s;
    }
        /* TITULO */
        .region-list-content > h2{
            display: block; position: relative; text-align: center; color: var(--TEXT);
            padding: .25em; font-size: 1.5em; font-weight: 400;
            border-bottom: .1em solid rgba(128,128,128,.1); transition: color .3s;
        }
            .region-list-content > h2 > i{
                display: inline-block; position: relative; padding: .5em;
                color: var(--PRIMARY-LIGHTEN);
            }
/*SELECTOR DE CATEGORIA*/
.selector-container{
    display: grid; position: relative; width: 85%; margin: 6em auto 0em auto;
}
    /*GRID DE CATEGORIAS*/
    .categories-container{
        display: grid; grid-template-columns: repeat(4, 1fr); position: relative;
        grid-gap: 2em; margin: 3em auto;
    }
        .category{
            display: grid; position: relative; background: var(--BACK-LAYER-1);
            box-shadow: 0.1em 0.1em 0.4em rgba(0,0,0,.15); overflow: hidden;
            transition: background .3s;
        }
            /*IMAGEN DE CATEGORIA*/
            .category-image{
                display: block; position: relative; width: 100%; padding-top: 100%;
                background-position: center; background-size: cover; transition: all .3s;
            }
            /*CONTENIDO*/
            .category-link{
                display: block; width: 100%; position: relative; padding: .75em .2em .75em .5em;
                background: var(--PRIMARY); color: var(--WHITE); text-decoration: none;
                font-size: 1.1em; font-weight: 500; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap;
            }
                .category-link i{ font-size: 1.1em; padding: 0 .25em 0 0; }
.no-scroll{ position: fixed; overflow-y: scroll; }
/*COLORES*/
.color-white{color: var(--WHITE) !important;}
.color-green{color: var(--GREEN) !important;}
.color-red{color: var(--RED) !important;}
.color-blue{color: var(--BLUE) !important;}
.color-silver{color: var(--SILVER) !important;}
.color-purple{color: var(--PURPLE) !important;}
.color-ultra-purple{color: var(--ULTRA-LIGHT-PURPLE) !important;}
.color-light-purple{color: var(--LIGHT-PURPLE) !important;}
.color-golden{color: var(--GOLDEN) !important;}
.color-orange{color: var(--ORANGE) !important;}
.color-whatsapp{color: var(--WHATSAPP) !important;}
.color-text{color: var(--TEXT-1) !important;}
/*BACKGROUND*/
.back-white{background: var(--WHITE) !important;}
.back-green{background: var(--GREEN) !important;}
.back-red{background: var(--RED) !important;}
.back-blue{background: var(--BLUE) !important;}
.back-silver{background: var(--SILVER) !important;}
.back-purple{background: var(--PURPLE) !important;}
.back-ultra-purple{background: var(--ULTRA-LIGHT-PURPLE) !important;}
.back-light-purple{background: var(--LIGHT-PURPLE) !important;}
.back-golden{background: var(--GOLDEN) !important;}
.back-orange{background: var(--ORANGE) !important;}
.back-whatsapp{background: var(--WHATSAPP) !important;}
.back-nackground{background: var(--BACKGROUND-COLOR) !important;}
.back-clear{background: var(--BACK-CLEAR) !important;}
/*404*/
.page-404{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; min-height: 60vh; max-height: 100px; max-width: 1700px; margin: 0 auto;
    text-align: center;
}
    .page-404 > h1{
        display: flex; align-items: center; font-size: 8em; color: var(--TEXT-12);
        transition: all .3s;
    }
        .page-404 > h1 > b{
            display: block; position: relative; font-weight: 400;
        }
            .page-404 > h1 > b:nth-child(1){
                transform: rotate(25deg); right: -.5rem;
            }
            .page-404 > h1 > b:nth-child(3){
                transform: rotate(-30deg); bottom: -.7rem; left: -1rem;
            }
        .page-404 > h1 > span{
            display: block; position: relative; width: 6rem; height: 6rem;
            border-radius: 50%; border: .5rem solid var(--TEXT-12); transition: all .3s;
        }
            .page-404 > h1 > span > i{
                display: block; position: absolute; font-size: 4rem; top: 50%;
                left: 50%; color: var(--TEXT-12); transform: translate(-50%, -50%);
                transition: all .3s;
            }
    .page-404 > h2{
        font-size: 2em; color: var(--TEXT-1); font-weight: 400; transition: all .3s;
    }
    .page-404 > h3{
        font-size: 1em; color: var(--TEXT-1); max-width: 300px; font-weight: 400;
        margin: 1em 0 0 0; transition: all .3s;
    }
.container{
    display: block; position: relative; width: 100%; max-width: 1000px; margin: 1em auto;
}
.container-small{
    display: block; position: relative; width: 100%; max-width: 800px; margin: 1em auto;
}
.font-5{font-size: .5em !important;}
.font-6{font-size: .6em !important;}
.font-7{font-size: .7em !important;}
.font-8{font-size: .8em !important;}
.font-9{font-size: .9em !important;}
.font-95{font-size: .95em !important;}
.font-10{font-size: 1em !important;}
.font-11{font-size: 1.1em !important;}
.font-12{font-size: 1.2em !important;}
.font-13{font-size: 1.3em !important;}
.font-14{font-size: 1.4em !important;}
.font-15{font-size: 1.5em !important;}
/*TEXTO BORDEADO*/
.bordered{
    position: relative; font-size: .75em; text-transform: uppercase; border-radius: .25em;
    border: .05em solid var(--TEXT);
}
/*TITULO GRANDE*/
.big-title{
    display: block; position: relative; width: 100%; font-size: 2em; font-weight: 400;
    color: var(--TEXT); transition: color .3s;
}
    .big-title > i{ padding: .1em .25em .1em .1em; }
/*TITULO*/
.title{
    display: block; position: relative; width: 100%; font-size: 1.5em; font-weight: 400;
    color: var(--TEXT); transition: color .3s;
}
    .title > i{ padding: .1em .25em .1em .1em; }
/*SUB TITULO*/
.sub-title{
    display: block; position: relative; width: 100%; font-size: 1.15em;
    font-weight: 400; color: var(--TEXT); transition: color .3s;
}
    .sub-title > i{ padding: .1em .25em .1em .1em; }
/*TEXTO*/
.text{
    display: block; position: relative; width: 100%; font-size: 1em;
    font-weight: 400; color: var(--TEXT); transition: color .3s; line-height: 1.5em;
}   
    .text > i{ padding: .1em .25em .1em .1em; }
    .text-1{
        display: block; position: relative; width: 100%; font-size: .85em; padding: .25em 0;
        font-weight: 400; color: var(--TEXT); transition: color .3s; line-height: 1.5em;
    }
        .text-1 > i{ padding: .1em; }
    .text-2{
        display: block; position: relative; width: 100%;
        font-size: .70em; padding: .25em 0; font-weight: 300; color: var(--TEXT);
        transition: color .3s; line-height: 1.5em;
    }
        .text-2 > i{ padding: .1em .25em .1em .1em; }
    .text-3{
        display: block; position: relative; width: 100%; font-size: .55em;
        font-weight: 300; color: var(--TEXT); transition: color .3s;
    }
        .text-3 > i{ padding: .1em .25em .1em .1em; }

.small{
    display: block; position: relative; width: 100%; font-size: .85em;
    font-weight: 500; color: var(--TEXT); transition: color .3s;
}
    .small b{ font-weight: 800; }
    .small i{ padding: .1em .15em .1em .15em; }
.uppercase{ text-transform: uppercase; }
/*|1||1||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*|1||1||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*|1||1||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*|1||1||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*|1||1||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@media screen and (min-width: 1500px){
    /*.search-cards{ padding: 0 10em; }
    .search-cards.grid-view{ padding: 0 7em; }*/
}
@media screen and (max-width: 1200px){
    .search-container{ width: 90%; }
                .search-head-change-location{ width: 100%; }
    .showcase-cards{ width: 100%; }
}
@media screen and (max-width: 950px){
    .form-container{ width: 85%; }
    .search-container{ width: 100%; }
            .search-cards:not(.grid-view){ max-width: 700px; }
            .search-cards.grid-view{ /*padding: 0 1em; grid-auto-rows: 1em;*/ }
    .showcase-cards{ width: 70%; grid-template-columns: repeat(3, 1fr); }
        .region-list{ width: 70%; }
        .categories-container{ grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 700px){
    .emergent-window{ width: 90vw; }
    .cookies{ width: 100vw; }
    .footer-content{ width: 100%; }
        .footer-box{ padding: 1em; }
            .footer-box-links{ grid-template-columns: repeat(2, 1fr); }
    .form-container{ width: 85%; margin: 1em auto; }
    .form-input-normal label{ padding: 0 .1em; }
    .nav-bar{ height: 4em; }
            .nav-bar.admin{ margin: 0; position: sticky; }
            .nav-bar.scrolled .nav-bar-content{ /*padding: 0 1em;*/ }
    .nav-bar-content{ grid-template-columns: 10fr 3fr; /*padding: 0 1.5em;*/ padding: 0 1em; }
            .nav-logo{ padding: 0 0 0 0; font-size: 1.25em; }
            .nav-bar.scrolled .nav-logo{ font-size: 1.25em; }
        .logo-icon img{ width: 35px; height: 35px; }
            .nav-buttons > ul{ grid-template-columns: repeat(2,1fr); }
                .click-nav-menu{ padding: .25em .1em; font-size: 1.4em; }
    .search-container{
        grid-template-columns: 1fr; flex-direction: column; /*padding: .5em 1em;*/ width: 90%;
    }
            .search-cards{ padding: 0; }
            .search-cards.grid-view{ padding: 0; grid-template-columns: repeat(3, 1fr); }
            .search-filters-filters{
                grid-template-columns: repeat(1, 1fr); max-width: 400px; margin: 0 auto;
            }
        .search-fils{
            display: block; position: relative; width: 100%; max-height: 0;
        }
        .search-filters-container{
            display: block; position: fixed; top: auto; width: 100vw; max-height: 85vh;
            left: 0; bottom: -100vh; z-index: 1050; transition: bottom .5s;
        }
        .search-filters-container::before{
            content: ''; display: block; position: fixed; top: -25vh; left: -25vw; right: -25vw;
            bottom: -25vh; background: rgba(0,0,0,.1); backdrop-filter: blur(5px);
            z-index: -1; opacity: 0; transition: opacity .5s; pointer-events: none;
        }
        .active.search-filters-container::before{
            display: block; opacity: 1; pointer-events: all;
        }
        .search-filters-container.active{ bottom: 0; transition: bottom .4s; }
            .search-filters{
                display: block; position: absolute; bottom: 0; width: 100%;
                max-height: 85vh; overflow-y: scroll; margin: 0;
                padding: .5em 2em 2em 2em; border-radius: 0; box-shadow: 0 0 1em rgba(0,0,0,.25);
                background: var(--BACK-COLOR);
            }
            .search-filter-box{ padding: .25em 0; }
                .search-filter-box.range .range-number span{ font-size: .95em; }
    .showcase-background{ height: 850px; top: -4em; } 
    .showcase-content{ /*padding: 12em 0 12em 0;*/ width: 95%; min-height: 700px;}
    .showcase-content:not(.not-flex-end){justify-content: flex-end;}
        .showcase-cards{
            margin: 2.5em auto 0 auto; width: 90%; rid-template-columns: repeat(3, 1fr);
        }
    .region-list{ width: 75%; }
    .selector-container{ width: calc(100% - 2em); }
        .categories-container{
            grid-template-columns: repeat(2, 1fr); grid-gap: 1em; max-width: 400px;
        }
    body.no-scroll-mobile{ overflow-y: hidden; }
}
@media screen and (max-width: 600px){
    .search-container{ width: 80%; }
    .search-cards{ padding: 0; }
    .search-cards.grid-view{
        padding: 0; grid-template-columns: repeat(2, 1fr); max-width: 400px;
    }
}
/*MOVIL MEDIANO*/
@media screen and (max-width: 450px){
    .notification{ max-width: 100vw; left: 0; }
                .notification.display{ bottom: 0; }
    .form-window{ padding: 0 1em 1em 1em; }
            .form-container{ width: 100%; margin: 0 auto; }
    .nav-bar-content{ grid-template-columns: 9fr 3fr; }
    .nav-logo{ padding: 0 0 0 0; }
        .nav-buttons > ul{ grid-gap: .25em; }
                    .nav-plegable-menu-box > h3{ font-size: 1.05em; }
    .search-container{ width: 100%; }
            .search-cards.grid-view{
                padding: 0; grid-template-columns: repeat(2, 1fr); grid-column-gap: 0.75em; grid-row-gap: 1em;
                /*grid-auto-rows: 1.3em; */
            }
            .search-filters{ padding: .5em 2em 2em 2em; }
                .search-head-change-locations-list{ grid-template-columns: 1fr; }
        .showcase:before{
            background-image: url("../pics/mobile/dark_0.jpg");
        }
        body.light-mode .showcase-background{animation: showcase_light_mobile 30s ease-in-out infinite;}
        body.dark-mode .showcase-background{animation: showcase_dark_mobile 30s ease-in-out infinite;}       
            .showcase-title{ padding: 0 0 0 0; }
                /*.showcase-title h1{ font-size: 1.85em; }
                .showcase-title h2{ font-size: 1.25em; }*/
            .showcase-cards{ width: 90%; grid-template-columns: repeat(2, 1fr); }   
                .showcase-card-location{ top: .5em; width: 90%; }
                    .showcase-card-location h3{ font-size: .8em; }
                    .showcase-card-content{ width: 110%; bottom: .5em; }
                            .showcase-card-content-title h3{ font-size: 1em; }
                            .showcase-card-content-title h4{ font-size: 1em; }
                .region-list{ width: 100%; }
        .selector-container{ width: 100%; }
            .categories-container{ grid-template-columns: 1fr 1fr; }
            .category p{font-size: 0.85em;}
}
@media screen and (max-width: 350px){
    .search-cards.grid-view{ /*grid-auto-rows: .85em;*/ }
}