@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;0,600;0,700;1,100;1,400;1,500;1,600;1,700&display=swap');

/* ***************** Estilos Genéricos  ********************* */

:root {

    --FuenteTexto: 'Poppins', sans-serif;

    /*BASE VERDE */

    --base: #6EB52C;

    --boton: #79BB3C;

    --shadow: #81d731;



    /* BASE NARANJA */

    /* --base: #ff5227;

    --boton:#ff8264;

    --shadow: #ffa690; */



    /* BASE AZUL */

    /* --base: #54bacc;

    --boton:#6dc1cf;

    --shadow: #a0f1ff; */



    /* BASE NARANJA2 */

    /* --base: #ffa127;

        --boton:#ffbc64;

        --shadow: #ffcb90; */



    /* VERDE2 */

    --base: #82c742;

    --boton: #62963391;

    --verdeOscuro: green;

    --shadow: #638a40;

    /* 

        --base: #42c2c7; */

    /* --base: #00B0A5;

        --boton:#49d4cb8e; 

        --shadow: #67cec7; */









    --gris: #f1f1f1d5;

    --grisOscuro: #8c779186;

    --naranja: #ff8264;

    --rosa: #f8f8f8b7;

    --rojo: rgb(247, 47, 47);

    --azul: #54bacc;

    --verde: #66D0A4;

    --amarillo: #FDD05B;

    --blanco: #FFFFFF;

    --Negro: #000000;

    --transparent: #ffffff15;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: var(--FuenteTexto);

}





body {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: var(--FuenteTexto);

    background-color: var(--base);

    background: linear-gradient(180deg, #82c742 15%, #82c742 50%, #638a40 140%, #354d20 190%);

    background-attachment: fixed;

    overscroll-behavior: none;

    /* overflow: hidden; */

    /* max-height: 600px !important; */

    /* max-width: 1024px; */

    overflow-x: hidden;

    scrollbar-width: 0px;

    align-content: center;
    height: 100dvh;

}



img {

    max-width: 100%;

    image-orientation: from-image;

}



div:focus,
div:active,
a:focus,
a:active,
.active:focus,
.active:active {

    outline: none !important;

    outline-color: transparent;

    outline-style: none;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /*PARA QUITAR EL SOMBREADO AL PULSAR SOBRE LA PANTALLA*/



}



a {

    text-decoration: none;

    font-size: clamp(16px, 2vw, 18px);

    cursor: pointer;

    color: var(--lila);

}



/* a:hover {

    color: var(--naranja);

} */



ul {

    list-style: none;

}



li {

    list-style: none;

}



h1 {

    font-size: clamp(20px, 2vw, 25px);

    font-weight: 400;

}



h2 {

    font-size: clamp(17px, 2vw, 18px);

    font-weight: 400;

}



h3 {

    font-size: clamp(16px, 2vw, 20px);

    font-weight: 400;

}



p {

    font-size: clamp(15px, 2vw, 18px);

}



i {

    padding: 11.11px 11.11px 0 11.11px;

}



input {

    font-size: clamp(12px, 2vw, 15px);
 
}



input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

    -webkit-appearance: none;

}



/* input[type=number] { 

    -moz-appearance:textfield; 

} */



.noVisible {

    visibility: hidden;

}



.invalid {

    border: 2px solid red !important;

    background-color: var(--rosa) !important;

}



.warning {

    color: red !important;

}



.ok {

    color: var(--base) !important;

}



.hide {

    display: none !important;

}



.container {

    margin: 0 auto;

    width: 85%;

}



.block {

    display: block;

}



.flex {

    display: flex;

}



.wrap {

    flex-wrap: wrap;

}



.grid {

    display: grid;

}



.relative {

    position: relative;

}



.absolute {

    position: absolute;

}



.centrarEjeX {

    text-align: center;

}



.txtLeft {

    text-align: left;

}



.itemCenter {

    align-items: center;

}



.justBetw {

    justify-content: space-between;

}



.justAround {

    justify-content: space-around;

}



.justEnd {

    justify-content: end;

}



/* MARGENES y PADDING y GAP*/

.mt__0 {

    margin-top: 0px !important;

}

.mt__10 {

    margin-top: 10px !important;

}

.mt__20 {

    margin-top: 20px;

}





.mt__50 {

    margin-top: 50px;

}



.mt__70 {

    margin-top: 70px;

}



.mt__100 {

    margin-top: 100px;

}



.mb__10 {

    margin-bottom: 10px;

}



.mb__20 {

    margin-bottom: 20px;

}



.mb__50 {

    margin-bottom: 50px;

}



.mb__200 {

    margin-bottom: 200px;

}



/*  */



.pt__20 {

    padding-top: 20px;

}



.pt__60 {

    padding-top: 60px;

}



.pt__80 {

    padding-top: 80px;

}



.pb__15 {

    padding-bottom: 15px;

}



.pb__60 {

    padding-bottom: 60px;

}



.pb__150 {

    padding-bottom: 150px;

}





/*  */

.gap__5 {

    gap: 5px;

}







/* BOTON PRINCIPAL */



button {

    cursor: pointer;

    background-color: transparent;

    border: 1px solid transparent;

}



.btn_default {
    align-items: center;
    justify-content: center;
    background-color: var(--boton);

    border: solid 1px transparent;

    color: var(--blanco);

    border-radius: 33.33px;

    padding: 10px 40px;

    font-size: medium;

    cursor: pointer;

    transition: 0.5s;

    max-width: 400px;



}



.btn_default:hover {

    background-color: var(--transparent);

    border: solid var(--Negro) 1px;

    color: var(--Negro);

    transition: 0.5s;

}



.btn_default img {

    filter: none;

    transition: 0.5s;

    box-shadow: none !important;

    border-bottom: none;

}



.btn_default:hover img {

    filter: invert();

    transition: 0.5s;

}



.btn_cancel {

    background-color: var(--rojo);

    border: solid 1px var(--rojo);

    color: var(--blanco);

    border-radius: 33.33px;

    padding: 10px 40px;

    font-size: medium;

    cursor: pointer;

    transition: 0.5s;

    max-width: 400px;

}



.btn_cancel:hover {

    background-color: var(--rojoTransparente);

    border: solid var(--rojo) 1px;

    color: var(--Negro);

    transition: 0.5s;

}



.btnPrice {

    margin: 0 auto;

    /* max-width: 250px; */

    width: 300px;

    display: flex;

    justify-content: center;

    color: var(--shadow);

    background-color: #c0fe13;

    margin-top: 5px;

    border-radius: 0px 0px 33px 33px;

    padding: 10px 0;

}



.btnPrice:hover {

    filter: opacity(0.5);

    color: var(--Negro);

}



button:disabled {

    background-color: var(--grisOscuro) !important;

    cursor: initial !important;

    color: gray
}



.btnPrice:disabled:hover,
button:disabled:hover {

    background-color: var(--grisOscuro) !important;

    cursor: initial !important;

    border: solid var(--grisOscuro) 1px !important;

    color: gray !important;

    filter: none !important;

}



button:disabled img {

    filter: brightness(0.5) !important;

    color: gray;

}



button:disabled:hover img {

    filter: brightness(0.5) !important;

    color: gray;



}



/* PANTALLA BIENVENIDA */



.welcome {

    display: flex;

    flex-direction: column;

    /* max-height: 600px; */

    align-items: center;

    justify-content: center;

    /* margin: 5vh auto; */

    position: relative;

    /* padding: 95px 0; */

    top: 0px;

    left: 0;

    z-index: 9999;



}



.welcome__logo {

    max-width: 600px;

    padding-bottom: 40px;

}



.welcome__languages {

    justify-content: center;

    gap: 100px;

    padding: 40px 20px;

}



.welcome__languages div div a img {

    width: 100px;

    border-radius: 100px;

    transform: scale(0.9);

}





.active {

    box-shadow: 0px 2px 17px 10px var(--shadow);

    transform: scale(1.1);

    border-radius: 100px;

}





.welcome__message {

    color: var(--blanco);

}




/* PAGINADO */

.pagActual {

    position: relative;

    top: 0px;

    left: 0px;

    z-index: 99999;

    transition: 2s;

    /* transition-duration: 5s; */

    /* overflow-x: hidden; */

    scrollbar-width: 0px;

}



.moveRight {

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 0;

    left: 2000px;

    z-index: 9990;

    transition: 1s;

    overflow: hidden;

    width: 0px;

    overflow-x: hidden;

    scrollbar-width: 0px;

    width: 0px;

    height: 0px;

    /* transition-duration: 5s; */

}





.moveLeft {

    position: absolute;

    top: 0px;

    left: -2000px;

    z-index: 9998;

    transition: 2s;

    /* transition-duration: 5s; */

    overflow: hidden;

    overflow-x: hidden;

    scrollbar-width: 0px;

    width: 0px;

    height: 0px;

}

/* BOTONES ACCION */
#accion{
    left: 0px !important;
}


/* REGISTRO */



.login {

    /* background-image: url("img/loginBack.png");

    background-repeat: no-repeat; */

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    /* margin-top: 10vh; */
    justify-content: center;
    align-items: center;

    gap: 10px;

}

.login__title{
    color: var(--verdeOscuro);
    font-weight: 500;
}

.login__formulario {

    margin-right: 10px;

}



.login__cabecera {

    color: var(--blanco);

}



.login__registro {

    padding-top: 1%;

    padding-bottom: 2%;

    text-align: center;

    margin-bottom: 10px;

}



.login__registro--size {

    max-width: 500px;

    margin: 0 auto;

}



.login__registro__campo {

    position: relative;

    padding: 20px 50px 20px 0;

    border-radius: 33.05px;

    border: solid 1px var(--blanco);

    margin: 20px 0;

    background-color: var(--blanco);

    min-width: 300px;

}



.login__registro__campo__label {

    position: absolute;

    top: 4px;

    left: 6px;

    color: var(--base);

    /* background-color: var(--blanco); */

    /* background: linear-gradient(0deg, rgb(255, 255, 255) 37%, rgba(255, 255, 255, 0.068) 100%); */

    /* background: linear-gradient(180deg, #ffffffa6 54%, #ffffff 65%); */

    padding: 0 8px;

    z-index: 999999999999;

    font-size: 15px;

    height: 40px;

    margin: 5px 0;

    /* border-radius: 15px; */





}



.login__registro__campo__dato {

    position: absolute;

    top: -5px;

    left: 95px;

    border: none;

    z-index: 0;

    width: 71%;

    height: 40px;

    margin: 5px 0;

    background-color: transparent !important;

    outline: none !important;

    /*Quita los bordes al seleccionar el input*/

}



.login__registro__campo__dato--ancho {

    position: absolute;

    top: -5px;

    left: 122px;

    border: none;

    z-index: 0;

    width: 66%;

    height: 40px;

    margin: 5px 0;

    background-color: transparent !important;

    outline: none !important;

    max-width: 60%;



}





.login__registro__campo__remember {

    display: flex;

    align-items: baseline;

    justify-content: center;

    padding: 10px 0 20px 0;

    align-items: flex-start;

}



.login__registro__campo__remember__check {

    margin-top: 2px;

    width: 23px;

    height: 23px;

}



.check {

    width: 30px;



}



.login__registro__campo__condiciones {

    color: var(--blanco);

    width: 90%;

}



.login__registro__buttons {

    display: flex;

    justify-content: space-around;

    /* position: absolute;

    bottom: 20px;

    left: 300px; */

    gap: 5vw;

    padding-top: 20px;

}



.terms {

    color: var(--verdeOscuro);

    cursor: help;

}



input {

    accent-color: var(--boton);

}



/* ABRIR TAQUILLA */



.qr {

    max-width: 175px;

}



/* PAGINA SELECCION TAQUILLA */

/* .top__50 {

    top: 50px;

} */



.seleccion__titulo {

    color: var(--blanco);

    font-size: clamp(20px, 4vw, 48px);

}



.seleccion__taquilla {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: end;

    gap: 10px;

    padding-top: 50px;

}

.seleccion__taquilla2 {

display: none;

}


.precio__activo,
.taquilla__activa,
.tipo__taquilla:hover {

    /* box-shadow: 0px 2px 17px 10px var(--shadow); */

    transform: scale(1.3);

    transition: 0.5s;

}



.precio__inactivo,
.taquilla__inactiva {

    filter: brightness(0.6);

    color: darkgray;

}



.tipo__taquilla {

    display: grid;

    color: var(--blanco);

    padding: 20px;

    border-radius: 20px;

}



.tipo__taquilla--small {

    max-width: 150px;

    margin-left: 31px;

}



.tipo__taquilla--medium {

    max-width: 185px;

    margin-left: 41px;

}



.tipo__taquilla--large {

    max-width: 210px;

    margin-left: 51px;

}



.tipo__taquilla--xtralarge {

    max-width: 225px;

    margin-left: 61px;

}



.size__message {

    color: var(--blanco);

    /* top: 34px;

    position: absolute; */

    width: 100%;



}



.disponible__table_titulo {

    color: var(--blanco);

    background-color: var(--boton);

    padding: 5px 0;

}



.disponible__table__data {

    background-color: #ceffc8;
    gap: 10px;
    padding: 20px 0;

    border-radius: 0 0 16px 16px;

}

.disponible__table__data2 {
    background-color: #ceffc8;
    background: linear-gradient(180deg, #ceffc8 15%, #ceffc800 99%);
    gap: 10px;
    padding: 20px 0;
    border-radius: 0px;
}



.NoBright {

    filter: brightness(1) !important;





}


.price {

    margin: 0 auto;

    max-width: 250px;

    color: var(--shadow);

    background-color: #c0fe13;

    margin-top: 5px;

    border-radius: 0px 0px 33px 33px;

    padding: 3px 0;

}



/* PAGINA PAGO */



.finalPrice {

    cursor: default;

    text-align: right;

    font-weight: bold;

    font-size: clamp(15px, 2vw, 18px);

    background-color: transparent;

    border: none;

    color: #42494c;
    min-width: 56px;
    text-wrap: nowrap;
    width: 100%;
}





.pin-login {

    display: inline-block;

    border-radius: 10px;

    padding: 10px;

    font-size: 28px;

    background: #d9deff;

    border: 1px solid #363b5e;

    user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    -webkit-user-select: none;

    font-family: sans-serif;

    min-width: 262px;

    width: 100%;

    max-width: 300px;

}



.pin-login__text {

    margin: 10px auto 10px auto;

    padding: 10px;

    display: block;

    /* width: 50%; */

    font-size: 0.5em;

    text-align: center;

    letter-spacing: 0.2em;

    background: rgba(0, 0, 0, 0.15);

    border: none;

    border-radius: 10px;

    outline: none;

    cursor: default;

    font-size: larger;

    width: 90%;

}



.pin-login__text--error {

    color: #901818;

    background: #ffb3b3;

    animation-name: loginError;

    animation-duration: 0.1s;

    animation-iteration-count: 2;

}

/* TAQUILLA ASIGNADA */
.taquilla__asignada {

    justify-content: center;

    gap: 100px;

    padding: 10px 20px;

}


@keyframes loginError {

    25% {

        transform: translateX(-3px);

    }

    75% {

        transform: translateX(3px);

    }

}



@-moz-keyframes loginError {

    25% {

        transform: translateX(-3px);

    }

    75% {

        transform: translateX(3px);

    }

}



.pin-login__key {

    width: 60px;

    height: 60px;

    margin: 10px;

    background: rgba(0, 0, 0, 0.15);

    color: #363b5e;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    cursor: pointer;

}



.pin-login__key:active {

    background: rgba(0, 0, 0, 0.25);

}



/* ANIMACION LOADER */

/* PONER EN EL HTML: <div class="loader"></div> */

.loaderAnimation {

    position: absolute;

    z-index: 999999999999999;

    top: 24dvh;

}



.lockerAnimation {

    position: absolute;

    z-index: 999999999999999;

}



.loader {

    width: 100px;

    aspect-ratio: 1;

    display: grid;

    border: 4px solid #0000;

    border-radius: 50%;

    border-right-color: #ceffc8;

    animation: l15 1s infinite linear;

}



.loader::before,

.loader::after {

    content: "";

    grid-area: 1/1;

    margin: 2px;

    border: inherit;

    border-radius: 50%;

    animation: l15 2s infinite;

}



.loader::after {

    margin: 8px;

    animation-duration: 3s;

}



@keyframes l15 {

    100% {

        transform: rotate(1turn)
    }

}





/* PAGINA GRACIAS */



.thanks {

    font-size: clamp(50px, 2vw, 80px);

    color: var(--blanco);

}



.thanks__message {

    color: var(--shadow);

    font-size: clamp(25px, 2vw, 30px);



}





.thanks__seeYou {

    color: var(--blanco);



}

.countDown{
    position: relative;

    top: -85px;

    left: 1px;
}

.countDown span {

   

    font-size: 46px;

    color: #ceffc8;

    text-align: center;

    margin: 0 auto;

    padding: 10px;



}





/* PAGINA NUMER TAQUILLA */



.locker {

    font-size: clamp(27px, 2vw, 38px);

    color: var(--blanco);

}



.locker__number {

    color: var(--shadow);

    font-size: clamp(100px, 13vw, 270px);



}







/* MENSAJE POPUP */

.overlay {

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background: rgba(0, 0, 0, 0.7);

    transition: opacity 500ms;

    visibility: hidden;

    opacity: 0;

    z-index: 99999999999999999999999999999;

}



.popUpVisible {

    visibility: visible;

    opacity: 1;

    backdrop-filter: blur(40px);

}



#popupDisponibilidad {

    padding: 20px;

}



.popup {

    margin: 70px auto;



    background: #fff;

    border-radius: 5px;

    width: 80%;

    max-width: 600px;

    position: relative;

    top: 160px;

    transition: all 5s ease-in-out;

}



.popup h2 {

    margin-top: 0;

    color: #333;

    font-family: Tahoma, Arial, sans-serif;

    padding: 15px;

}



.popup h1 {

    padding: 15px;

}



.popup h3 {

    padding: 15px;

}





.popup .close {

    position: absolute;

    top: 20px;

    right: 30px;

    transition: all 200ms;

    font-size: 30px;

    font-weight: bold;

    text-decoration: none;

    color: #333;

}



.popup .close:hover {

    color: #06D85F;

}



.popup .content {

    max-height: 30%;

    overflow: auto;

}



.content {

    text-align: center;

    color: var(--rojo);

    padding: 10px 0;

}



#popupPIN {

    text-align: center;

}



#popupPIN h1 {

    color: var(--blanco) !important;

    padding-bottom: 10px;

}



#popupPIN .popup {



    background: transparent !important;



}

#resumen {
    min-width: 300px;
}

.resumen__prices {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    text-wrap: nowrap;
    color: #42494c;   
}

.paypal__card {
    margin-top: 20px;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(300px, 600px));

}

.paypal__data {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;

}


.slider-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    display: flex;
    align-items: center;
}

.slide img {
    width: 100%;
    height: auto;
}

.buttonSlide {
    position: absolute;
    top: 150px;
    transform: translateY(-50%);
    background: #06040415;
    color: var(--blanco);
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 33px;
    padding: 10px 20px;
}


.prevSlider {
    left: 10px;
}

.nextSlider {
    right: 10px;
}


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

    .seleccion__taquilla {

        display: none;
        
        }

.seleccion__taquilla2 {

    display: block;    
    min-height: 330px;
    
    }

    .precio__activo, .taquilla__activa, .tipo__taquilla:hover {
        transform: scale(1.1);
    }

    .tipo__taquilla {
       margin: 0 auto;
       width: 100%;
       display: block;
    }

    .taquilla__activa h3{
        padding-bottom: 24px;
    }

    .disponible__table_titulo{
        margin-top: 20px;
    }
}


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

    body {

        margin: 0;
    
        padding: 0;
    
        box-sizing: border-box;
    
        font-family: var(--FuenteTexto);
    
        /* background-color: var(--base); */
    
        background: var(--base);
    
        background-attachment: fixed;
    
        overscroll-behavior: none;
    
        /* overflow: hidden; */
    
        max-height: 600px !important;
    
        /* max-width: 1024px; */
    
        /* overflow-x: hidden; */
    
        scrollbar-width: 0px;
    
    }

    .box {

        width: 70%;

    }

    .login{
        margin-top: 0px;
        top: 15px; 
    }

    .popup {

        width: 70%;

    }

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

    
    body {

       
    
        overflow-x: initial !important;
    
       
    
    }

    .container {
        margin: 0 auto;
        width: 90%;
    }

    .welcome{
        top: 30px !important;
    }

    .login__img img{
        max-height: 200px;
    }

    .login__registro__buttons{
        padding: 0px !important;
    }
    .login__registro__campo__remember, #f-login{
        padding-bottom: 0px !important;
    }

    #disponible{
        width: 100% !important;
        margin: 0px !important;
    }

    .disponible__table__data {
      
        padding: 20px;
       
    }

    #popupPIN{
        top: -160px;
    }

    .disponible__table_titulo{
        margin-top: -30px;
    }

    #pagar{
        margin-top: 15px;
        display: flex !important;
    }
    .seleccion__taquilla2 {
        display: block;
        min-height: 280px;
    }

    .disponible__table__data2{
        div{
            width: 80% !important;
        }
    }

    #resumenPago{
       
        width: 90% !important;
        div{
            width: 90% !important;
        }
    }


    #noDisponible{
        top: 0px !important;
    }
    #noDisponible .welcome__logo{
        padding-bottom: 0px;
    }

    #noDisponible .thanks{
        text-wrap-mode: nowrap;
        font-size: clamp(40px, 2vw, 80px);
       

    }

    .lockerAnimation{
        height: 50px;
    }

    .popup {
        width: 95%;
    }

    .btn_default.openLockerSelected{
        margin: 10px !important;
    }

    .slide {
        align-items: end;
        justify-content: center;
    }

    .tipo__taquilla--small {
        width: 115px !important;
    }    

    .tipo__taquilla--medium{
        width: 135px  !important;
    }

    .tipo__taquilla--large {
        width: 150px !important;
    }

    .tipo__taquilla--xtralarge{
        width: 170px !important;
    }
}