@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jaldi:wght@400;700&display=swap');

/*----------------------------------------------
                    BASIC
----------------------------------------------*/
body {
    background-color: #fafafa;
    font-family: Jaldi, sans-serif;
    color: #424242;
    font-size: 18px;
    overflow-x: hidden;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

a {
    text-decoration: none;
}

label {
    cursor: pointer;
}

/*-------------- TEXTO ----------------*/
.formato-resumen {
    margin-left: 20px;
    text-align: right;
}

/*-------------- BOTONES ----------------*/
.button-basic {
    height: 45px;
    width: 200px;
    background-color: #fafafa;
    border-radius: 5px;
    border: 1px solid #37495780;
    color: #374957;
    font-weight: bold;
    font-size: 14px;
    margin: 5px;
    cursor: pointer;
}

.button-buy {
    background-color: #58aa12;
    border: 2px solid #58aa12;
    color: #fafafa;
}

.button-empty {
    background-color: #fafafa;
    border: 2px solid #e71837; 
    color: #e71837;
}

.button-basic:hover {
    background-color: #eaeaea;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button-buy:hover {
    background-color: #58aa1280;
}

.button-empty:hover {
    background-color: #ffdfdb;
}

input:focus {
    outline-style: solid;
    outline-width: thin;
}

/*----------------------------------------------
                    HEADER
----------------------------------------------*/
.contenedor-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

/*-------------- LOGO ----------------*/
.contenedor-logo {
    display: flex;
}

h1 {
    font-family: Satisfy;
    color: #4949e7;
    font-weight: 900;
    font-size: 35px;
    margin-top: 6px;
    margin-left: 10px;
    text-shadow: 1px 1px 2px #00af80;
}

.img-logo {
    width: 35px;
}

/*-------------- CARRITO ----------------*/
.contenedor-carrito {
    display: flex;
    align-items: center;    
}

.img-carrito {
    width: 40px;
    font-weight: bold;
}

.texto-carrito {
    margin-right: 15px;
    cursor: pointer;
}

/*-------------- CHECKOUT ----------------*/
.total-compra {
    font-weight: bold;
}

.descuento-compra {
    color: #58aa12;
}

.recargo-compra {
    color: #e71837;
}

/*----------------------------------------------
            CARRITO MENÚ DESPLEGABLE
----------------------------------------------*/
.overlay {
    display: flex;
}

.overlay-fondo {
    width: 100vw;
    height: 100vh;
    background-color: #424242;
    opacity: 0.4;
    position: absolute;
    top: 0;
    right: -110%;
    z-index: 1;
}

.contenedor-carrito-menu {
    width: 35vw;
    height: 100vh;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: -1000px;
    z-index: 2;
    padding: 25px;
    transition: 0.8s;
    overflow-y: scroll;
    scrollbar-width: thin;    
}

.equis {
    width: 35px;
    height: 35px;
}

.carrito-titulo {
    display: flex;
    justify-content: space-between;
}

.contenedor-productos-agregados {
    width: 100%;
    height: 50%;
    margin: 10px;
    overflow: scroll;
    scrollbar-width: thin;    
    font-weight: bold;
    text-align: center;
    font-size: 22px;
}

.contenedor-resumen-carrito {
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cantidad-productos-agregados {
    text-align: right;
    margin-bottom: 10px;
}

.contenedor-botones-carrito {
    display: flex;
    margin-top: 20px;
}

/*----------------------------------------------
        MINIATURA DE VIAJE EN CARRITO
----------------------------------------------*/
.contenedor-viaje-miniatura {
    width: 380px;
    display: flex;
}

.contenedor-img-miniatura {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
}

.img-tarjeta-miniatura {
    max-width: 80px;
    overflow: hidden;
}

.contenedor-info-miniatura {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
}

.sub-contenedor-info-miniatura {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.destino-txt-miniatura {
    font-weight: bold;
    font-size: 20px;
}

.precio-viaje-miniatura {
    font-size: 18px;
}

.trash-miniatura {
    width: 25px; 
    height: 25px;
}

.cantidad-viajes {
    width: 40px; 
    height: 25px;
}

/*----------------------------------------------
            CONFIRMA VACIAR
----------------------------------------------*/
.overlay-confirma-vaciar {
    position: relative;
}

.overlay-fondo-confirma-vaciar {
    width: 100vw;
    height: 100vh;
    background-color: #424242;
    opacity: 0.4;
    position: absolute;
    top: 0;
    right: -110vw;
    z-index: 3;
}

.contenedor-confirma-vaciar {
    width: 45vw;
    height: 35vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    position: absolute;
    top: 20vh;
    right: -110vw;
    z-index: 4;
    transition: 0.8s;
}

.texto-vaciar-carrito {
    font-size: 30px;
    font-weight: bold;
}

/*----------------------------------------------
            CHECKOUT COMPRA
----------------------------------------------*/
.overlay-fondo-modal {
    width: 100vw;
    height: 100vh;
    background-color: #424242;
    opacity: 0.4;
    position: absolute;
    top: -80px;
    right: -110%; 
    z-index: 3;
}

.contenedor-titulo-checkout {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.contenedor-confirmar-compra {
    width: 65vw;
    height: 100vh;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: -78px;
    right: -2000px;
    z-index: 4;
    padding: 25px;
    transition: 1s;
    overflow: scroll;
    scrollbar-width: thin;    
}

.modal-formularios {
    display: flex;
    flex-direction: row;
    flex-basis: 65%;
}

.contenedor-formulario-confirmar-compra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.datos-personales {
    width: 40%;
    flex-direction: column;
    margin: 20px;
}

hr {
    width: 80%;
    border: 1px solid rgba(55, 73, 87, 0.2);
    margin: 20px 0;
}

.opciones-pago {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.resumen-compra {
    flex-basis: 45%;
    background-color: rgba(55, 73, 87, 0.1);
    padding: 25px;
}

.resumen-compra h3 {
    margin-left: 5px;
}

.contenedor-botones-checkout {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.etiquetas-datos-personales {
    margin: 10px 5px 5px 5px;
}

.espacio-datos-personales {
    height: 30px;
    border: none;
    border-bottom: 1px solid #424242;
    padding: 5px;
    margin-bottom: 10px;
}

/*----------------------------------------------
                    BANNER
----------------------------------------------*/
.contenedor-banner {
    background-color: rgba(55, 73, 87, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-img-banner {
    position: relative;
}

.img-banner {
    width: 100vw;
    height: auto;
}

.contenedor-texto-banner {
    background-color: rgba(55, 73, 87, 0.4);
    position: absolute;
}

.texto-banner {
    padding: 10px;
    margin: 0 15px;
    font-weight: bold;
    font-size: 40px;
    color: #fafafa;
    font-style: italic;
    text-shadow: 2px 2px 4px #4949e7;
}

.texto-logo-gt {
    font-family: Satisfy;
    font-size: 35px;
    font-weight: bold;
}

/*----------------------------------------------
                SECCIÓN PRINCIPAL
----------------------------------------------*/
.seccion-principal {
    display: flex;
    background-color: rgba(55, 73, 87, 0.1);
}

/*----------------------------------------------
                    ASIDE
----------------------------------------------*/
.contenedor-filtro-puntaje, .contenedor-filtro-categoria, .contenedor-filtro-busqueda, .formulario-aside  {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.aside {
    flex-basis: 20vw;
    display: flex;
    flex-direction: column;
    background-color: #fafafa;
    margin: 5px 10px 25px 15px;
    padding: 20px;
}

/*-------------- FILTROS ----------------*/
.aside-filtros {
    display: flex;
    justify-content: space-between;
}

.contenedor-boton-limpiar {
    position: relative;
}

.despliega-filtros-lupa {
    display: none;
}

.trash {
    position: absolute;
    left: -28px;
    width: 25px;
}

/*-------------- BÚSQUEDA ----------------*/
.contenedor-filtro-busqueda {
    margin-top: 0;
    position: relative;
}

.filtro-busqueda {
    outline: none;
    border: none;
    border-bottom: 2px solid #374957;
    padding-bottom: 5px;
    height: 36px;
    max-width: 200px;
    padding-left: 5px;
    padding-right: 30px;
}

.lupita {
    width: 30px;
    position: absolute;
    left: 172px;
    top: 33px;
}

/*-------------- CATEGORÍA ----------------*/
.filtro-categoria {
    padding-left: 2px;
}

/*-------------- PUNTAJE ----------------*/
.star-icon {
    width: 22px;
}

/*----------------------------------------------
                    VIAJES
----------------------------------------------*/
.seccion-viajes {
    flex-basis: 80vw;
    background-color: #fafafa;
    margin: 5px 15px 25px 10px;
    padding: 20px;
}

.barra-viajes {
    display: flex;
    justify-content: space-between;
}

/*-------------- VER COMO ----------------*/
.ver-como {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ver-como input {
    width: 40px;
}


/*-------------- TARJETAS ----------------*/
.seccion-tarjetas {
    max-width: 100%;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.contenedor-tarjeta { /*ARTICLE*/
    width: 295px;
    height: 400px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid #37495760;
    align-items: center;
    margin: 10px;
}

.contenedor-img-tarjeta {
    margin-top: 20px;
}

.contenedor-tarjeta:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.img-tarjeta {
    width: 250px;
    height: 165px;
    overflow: hidden;
    transition: 0.5s;
}

.img-tarjeta:hover {
    transform: scale(117.5%);
}

.texto-tarjeta-titulo {
    font-size: 25px;
}

.contenedor-contenido-viaje {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.texto-tarjeta-valor {
    margin-top: 10px;
    font-size: 18px;
}

/*----------------------------------------------
                    FOOTER
----------------------------------------------*/
.seccion-footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color:  rgba(55, 73, 87, 0.1);
}

.contenedor-footer {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    margin: 15px 0;  
}

.firma-footer, .contenedor-mi-firma {
    display: flex;
    justify-content: center;
    padding: 15px;
}

.texto-footer, .txt-mi-firma {
    font-size: 22px;
    margin-top: 5px;
}

.span-footer {
    font-family: Satisfy;
    font-weight: bold;

}

.img-logo-footer {
    width: 22px;
    margin: 5px;
}

/*----------------------------------------------
                    FILTROS
----------------------------------------------*/
/*-------------- VER COMO LISTA ----------------*/
.ver-como-lista { /* APLICA AL CONTENEDOR ARTICLE */
    flex-basis: 100%;
    height: auto;
    flex-direction: row;
    align-items: none;
}

.margen-como-lista { /* APLICA AL CONTENEDOR contenedor-img-tarjeta */
    margin: 20px;
    align-items: center;
}

.img-como-lista { /* APLICA A LA IMAGEN img-tarjeta */
    width: 340px;
    height: 265px;
}

.contenedor-contenido-viaje-lista { /* AGREGAR ESTA CLASE AL CONTENEDOR */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

/*----------------------------------------------
                RESPONSIVE
----------------------------------------------*/
@media (min-width: 768px) and (max-width: 992px) {

    /*----------------------------------------------
                    BASIC
    ----------------------------------------------*/
    /*-------------- TEXTO ----------------*/
    /*-------------- BOTONES ----------------*/
    /*-------------- CARRITO ----------------*/
    /*-------------- CHECKOUT ----------------*/
    /*----------------------------------------------
                CARRITO MENÚ DESPLEGABLE 🤓
    ----------------------------------------------*/
    .contenedor-carrito-menu {
        width: 50vw;
    }

    .contenedor-botones-carrito {
        flex-direction: column;
        align-items: flex-end;
    } 

    /*----------------------------------------------
            MINIATURA DE VIAJE EN CARRITO 🤓
    ----------------------------------------------*/
    .contenedor-viaje-miniatura {
        width: 100%;
    }

    /*----------------------------------------------
                CONFIRMA VACIAR 🤓
    ----------------------------------------------*/
    .contenedor-confirma-vaciar {
        width: 55vw;
        height: 45vh;
    }

    .texto-vaciar-carrito {
        font-size: 25px;
        text-align: center;
    }

    /*----------------------------------------------
                CHECKOUT COMPRA 🤓
    ----------------------------------------------*/
    .contenedor-titulo-checkout {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .contenedor-confirmar-compra {
        width: 100vw;
    }

    .modal-formularios {
        flex-basis: 50vw;
    }

    .datos-personales {
        width: 40vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .datos-personales label {
        width: 25vw;
    }

    hr {
        width: 90%;
    }

    .resumen-compra {
        flex-basis: 50vw;
    }

    /*----------------------------------------------
                        BANNER 🤓
    ----------------------------------------------*/
    .texto-banner {
        font-size: 30px;
        text-align: center;
    }

    /*----------------------------------------------
                    SECCIÓN PRINCIPAL 🤓
    ----------------------------------------------*/
    .seccion-principal {
        flex-direction: column;
    }

    /*----------------------------------------------
                        ASIDE 🤓
    ----------------------------------------------*/
    .aside {
        flex-basis: 0;
        margin: 10px;
    }

    .formulario-aside {
        display: none;
        margin-top: 5px;
    }

    #filters-form {
        display: flex;
        flex-basis: 100vw;
        justify-content: space-between;
    }

    .contenedor-filtro-busqueda, .contenedor-filtro-puntaje, .contenedor-filtro-categoria {
        width: auto;
        margin: 0px 10px 5px 10px;
        padding: 10px;
        text-align: center;
    }

    .despliega-filtros-lupa {
        display: flex;
        width: 30px;
        height: 30px;
    }

    /*-------------- FILTROS ----------------*/
  
    /*-------------- BÚSQUEDA ----------------*/
    .lupita {
        position: absolute;
        left: 180px;
        top: 42px;
    }

    /*-------------- CATEGORÍA ----------------*/
    .contenedor-filtro-categoria {
        align-items: flex-start;
    }

    /*-------------- PUNTAJE ----------------*/

    /*----------------------------------------------
                        VIAJES 
    ----------------------------------------------*/
    /*-------------- MOSTRANDO ----------------*/
    /*-------------- VER COMO ----------------*/
    /*-------------- TARJETAS ----------------*/
    /*----------------------------------------------
                        FOOTER 
    ----------------------------------------------*/
    /*----------------------------------------------
                        FILTROS 🤓
    ----------------------------------------------*/
    /*-------------- VER COMO LISTA ----------------*/
    .img-como-lista { /* APLICA A LA IMAGEN img-tarjeta */
        width: 290px;
        height: 215px;
    }

} /* FIN @MEDIA 768-992 */

@media (min-width: 576px) and (max-width: 767.98px) {

    /*-------------- BOTONES ----------------*/
    /*-------------- CARRITO ----------------*/
    /*-------------- CHECKOUT ----------------*/
    /*----------------------------------------------
                CARRITO MENÚ DESPLEGABLE 🤓
    ----------------------------------------------*/
    .contenedor-carrito-menu {
        width: 70vw;
    }

    .contenedor-botones-carrito {
        flex-direction: column;
        align-items: flex-end;
    } 

    /*----------------------------------------------
            MINIATURA DE VIAJE EN CARRITO 🤓
    ----------------------------------------------*/
    .contenedor-viaje-miniatura {
        width: 100%;
    }

    /*----------------------------------------------
                CONFIRMA VACIAR 🤓
    ----------------------------------------------*/
    .contenedor-confirma-vaciar {
        width: 60vw;
        height: 45vh;
    }

    .texto-vaciar-carrito {
        font-size: 22px;
        text-align: center;
        padding: 0 10px;
    }

    /*----------------------------------------------
                CHECKOUT COMPRA 🤓
    ----------------------------------------------*/
    .contenedor-confirmar-compra {
        width: 100vw;
    }

    .modal-formularios {
        flex-basis: 40vw;
    }

    .datos-personales {
        width: 40vw;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .datos-personales label {
        width: 25vw;
    }

    .espacio-datos-personales {
        height: 25px;
    }

    hr {
        width: 90%;
    }

    .resumen-compra {
        flex-basis: 50vw;
    }

    /*----------------------------------------------
                        BANNER 🤓
    ----------------------------------------------*/
    .contenedor-texto-banner {
        width: 65vw;
    }
    
    .texto-banner {
        font-size: 25px;
        text-align: center;
        padding: 0 20px 0 20px;
    }

    /*----------------------------------------------
                    SECCIÓN PRINCIPAL 🤓
    ----------------------------------------------*/
    .seccion-principal {
        flex-direction: column;
    }

    /*----------------------------------------------
                        ASIDE 🤓
    ----------------------------------------------*/
    .aside {
        flex-basis: 0;
        margin: 5px;
    }
    
    /*-------------- FILTROS ----------------*/
    #filters-form {
        display: flex;
        flex-basis: 100vw;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .contenedor-filtro-busqueda, .contenedor-filtro-puntaje, .contenedor-filtro-categoria {
        width: auto;
        margin: 0px 10px 5px 10px;
        padding: 5px;
        text-align: center;
    }

    .despliega-filtros-lupa {
        display: flex;
        width: 30px;
        height: 30px;
    }

    .formulario-aside {
        display: none;
        margin-top: 5px;
    }

    /*-------------- BÚSQUEDA ----------------*/
    .contenedor-filtro-busqueda {
        margin-top: 0;
        position: relative;
        flex-basis: 1;
    }

    .filtro-busqueda {
        max-width: 180px;
        padding-left: 5px;
        padding-right: 30px;
    }

    .lupita {
        position: absolute;
        left: 156px;
        top: 36px;
    }

    /*-------------- CATEGORÍA ----------------*/
    .contenedor-filtro-categoria {
        align-items: flex-start;
    }

    .filtro-categoria {
        max-width: 180px;
    }

    /*-------------- PUNTAJE ----------------*/
    .star-icon {
        width: 20px;
    }

    /*----------------------------------------------
                        VIAJES 🤓
    ----------------------------------------------*/
    /*-------------- MOSTRANDO ----------------*/
    /*-------------- VER COMO ----------------*/
    .ver-como {
        display: none;
    }
    
    /*-------------- TARJETAS ----------------*/

    /*----------------------------------------------
                        FOOTER 
    ----------------------------------------------*/
    /*----------------------------------------------
                        FILTROS 
    ----------------------------------------------*/
    /*-------------- VER COMO LISTA ----------------*/

}  /* FIN @MEDIA 576-767.9 */

@media (max-width: 575.9px) {
    /*-------------- BOTONES ----------------*/

    /*----------------------------------------------
                    HEADER 🤓
    ----------------------------------------------*/
    /*-------------- LOGO ----------------*/
    .contenedor-logo {
        display: flex;
    }
    
    h1 {
        font-size: 25px;
    }
    
    .img-logo {
        width: 25px;
    }

    /*-------------- CARRITO ----------------*/
    /*-------------- CHECKOUT ----------------*/
    /*----------------------------------------------
                CARRITO MENÚ DESPLEGABLE 🤓
    ----------------------------------------------*/
    .contenedor-carrito-menu {
        width: 100vw;
    }

    .contenedor-botones-carrito {
        flex-direction: column;
        align-items: flex-end;
    } 

    /*----------------------------------------------
            MINIATURA DE VIAJE EN CARRITO 🤓
    ----------------------------------------------*/
    .contenedor-viaje-miniatura {
        width: 100%;
    }

    /*----------------------------------------------
                CONFIRMA VACIAR 🤓
    ----------------------------------------------*/
    .contenedor-confirma-vaciar {
        width: 65vw;
        height: 45vh;
    }

    .texto-vaciar-carrito {
        font-size: 20px;
        text-align: center;
        padding: 0 10px;
    }

    /*----------------------------------------------
                CHECKOUT COMPRA 🤓
    ----------------------------------------------*/
    .contenedor-confirmar-compra {
        width: 100vw;
    }

    .modal-formularios {
        flex-basis: 40vw;
        flex-direction: column;
    }

    .datos-personales {
        width: 40vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .datos-personales label {
        width: 25vw;
    }

    .espacio-datos-personales {
        height: 25px;
    }

    hr {
        width: 90%;
    }

    .opciones-pago {
        align-items: center;
    }

    .resumen-compra {
        flex-basis: 50vw;
    }

    /*----------------------------------------------
                        BANNER 🤓
    ----------------------------------------------*/
    .contenedor-texto-banner {
        width: 80vw;
    }
    
    .texto-banner {
        font-size: 20px;
        text-align: center;
        padding: 0 15px;
    }

    .texto-logo-gt {
        font-size: 20px;
    }

    /*----------------------------------------------
                    SECCIÓN PRINCIPAL 🤓
    ----------------------------------------------*/
    .seccion-principal {
        flex-direction: column;
    }

    /*----------------------------------------------
                        ASIDE 🤓
    ----------------------------------------------*/
    .aside {
        flex-basis: 0;
        margin: 10px;
    }

    #filters-form {
        display: flex;
        flex-direction: column;
        flex-basis: 100vw;
        justify-content: space-evenly;
        flex-wrap: nowrap;
    }

    .contenedor-filtro-busqueda, .contenedor-filtro-puntaje, .contenedor-filtro-categoria {
        padding: 10px;
        text-align: center;
        margin: 10px 0 0 0;
    }

    .despliega-filtros-lupa {
        display: flex;
        width: 30px;
        height: 30px;
    }

    .formulario-aside {
        display: none;
        margin-top: 5px;
    }

    .lupita {
        left: 235px;
        top: 42px;
    }

    /*-------------- FILTROS ----------------*/
    /*-------------- BÚSQUEDA ----------------*/
    /*-------------- CATEGORÍA ----------------*/
    /*-------------- PUNTAJE ----------------*/

    /*----------------------------------------------
                        VIAJES 🤓
    ----------------------------------------------*/
    /*-------------- MOSTRANDO ----------------*/
    /*-------------- VER COMO ----------------*/
    .ver-como {
        display: none;
    }
    
    /*-------------- TARJETAS ----------------*/

    /*----------------------------------------------
                        FOOTER 
    ----------------------------------------------*/
    /*----------------------------------------------
                        FILTROS 
    ----------------------------------------------*/
    /*-------------- VER COMO LISTA ----------------*/

}  /*FIN @MEDIA 575.9 */

/*--------------------------------
        FILTROS GENERALES 
----------------------------------*/
.mostrar {
    top: 0;
    right: 0;
}

.mostrar-confirma {
    top: 20vh;
    right: 20vw;
}

.mostrar-checkout {
    top: -80px;
    right: 0;
}

.hidden {
    display: none;
}

.agrega-overflow {
    overflow-y: hidden;
    position: fixed; /* agregando esta propiedaed el overflow funciona en Chrome */
}

.blocking-hidden {
    display: flex;
}

/*----------------------------------------------
                    NOTAS
----------------------------------------------*/

/* ::placeholder  para cambiar el color de texto que viene por defecto */

/* sacar outline con none y agregar estilo a ::focus */

.lolipop {
    color: #00af80; /* VERDE */
    color: #4949E7; /* PÚRPURA */
    color: #EA3457; /* MAGENTA  */
    color: #374957; /* AÑIL */
}

/* @media puntos de quiebre:

Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } */

/*----------------------------------------------
                    by @Luzyla
----------------------------------------------*/