@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Special+Elite&display=swap');
 :root {
     --MaxWidthPage: 1000px;
     --PeachColor: #E98D50;
}
 *{
     box-sizing: border-box;
}
 html, body {
     margin: 0;
     padding: 0;
     color: #fff;
     background-repeat: no-repeat;
     justify-content: center;
     align-items: center;
     font-size: 3vw;
     font-family: "Bebas Neue", sans-serif;
     font-weight: 400;
     font-style: normal;
     scroll-behavior: smooth;
}
 h1 {
     font-size: 2rem;
}

.backgroundImage{
    background-image: url("../Images/LMDS_Background.webp");
     background-position: center center;
     background-size: cover;
     width:100vw;
     height: 100vh;
     position: fixed;
     top:0;
     left:0;
     z-index: -1;
}
 .BannerDesktop img, .BannerMovil img{
     width:100%;
}
 .BannerDesktop{
     display: block;
}
 .BannerMovil{
     display:none;
}
 .ContenedorGeneral{
     width: 100%;
     margin:0 auto;
     max-width: var(--MaxWidthPage);
     padding:0 4%;
     margin-top: -40px;
}

.VideosShop{
    display: flex;
    flex-direction: row;
    justify-content: center;
    width:100%;
}
.VideoMerch{
    margin: 0 auto;
    display: block;
    mix-blend-mode: plus-lighter;
    filter: contrast(1.02);
    margin-top:-12svw;
    width:100%;
}


/* Contenedores Fechas */
 .ContenedorEnlacesRegiones{
     display: flex;
     flex-direction: row;
     width:60%;
     align-items: center;
     justify-content: space-between;
     margin: 0 auto;
     font-size: 7vw;
     line-height: 1.1em;
     color: var(--PeachColor);
     text-decoration: none;
}
 .ContenedorEnlacesRegiones a{
     color: var(--PeachColor);
     text-decoration: none;
     transition: 100ms ease-in-out;
     display:block;
}
 .ContenedorEnlacesRegiones a:hover{
     transform: translateY(-5px);
}
 .ContenedorRegion{
     display: flex;
     flex-direction: row;
     width:100%;
     max-width: var(--MaxWidthPage);
     vertical-align:middle;
     align-items:flex-start;
     padding-top: 5svw;
}
 .ContenedorNombreRegion{
     writing-mode: vertical-rl;
     transform: rotate(-180deg);
     width:10%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 7vw;
     color: var(--PeachColor);
     padding-bottom: 0.7vw;
}
 .ContenedorFechas{
     width:100%;
     align-items: center;
     row-gap: 0.5vw;
     display:flex;
     flex-direction: column;
}
 .FechaConcierto{
     display: flex;
     flex-direction: row;
     column-gap: 10px;
     width:100%;
     padding: 0 1%;
     box-sizing: border-box;
     vertical-align: middle;
     align-items: center;
}
 .DiaConcierto{
     width:15%;
     color: var(--PeachColor);
     font-size: 4vw;
}
 .CiudadConcierto{
     width:70%;
     font-family: "Special Elite", system-ui;
     font-weight: 400;
     font-style: normal;
     font-size: 2.7vw;
}
.BotonSoon{
    opacity:0.5;
}
 .BotonCompra{
     width: 15%;
     text-align: right;
}
 .BotonCompra img{
     width:100%;
     display: block;
     transition: 100ms ease-in-out;
}
 .BotonCompra a img:hover{
     transform: translate(5px);
}
.TextoRegistrate{
    font-family: "Special Elite", system-ui;
     font-weight: 400;
     font-style: normal;
     font-size: 2.7vw;
     line-height: 1.1em;
     padding:0;
     margin:0;
     margin-bottom:8px;
     text-align:center;
}
.BotonRegistrate{
    width:60%;
    margin: 0 auto;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.BotonRegistrate img{
    width:200px;
    margin: 0 auto;
}
.LogosBottom{
    margin:0 auto;
    display: block;
}
 @media only screen and (min-width: 1001px) {
     .ContenedorGeneral{
         padding:0 34px 34px 34px;
         margin-top: -80px;
    }
    .PresaleCode{
     font-size: 30px;
     margin-top:40px;
}
    .ContenedorEnlacesRegiones{
         font-size: 70px;
         padding-top:36px;
    }
     .ContenedorNombreRegion{
         font-size: 70px;
         padding-bottom: 7px;
    }
     .FechaConcierto{
         height: 44px;
    }
     .DiaConcierto{
         font-size: 40px;
    }
     .CiudadConcierto{
         font-size: 27px;
    }
    .TextoRegistrate{
     font-size: 27px;
}
}
 @media only screen and (max-width: 600px) {
     .BannerDesktop{
         display: none;
    }
     .BannerMovil{
         display:block;
    }
        .PresaleCode{
     font-size: 6svw;
     margin-top:40px;
}
     .ContenedorEnlacesRegiones{
         width:80%;
         font-size: 11svw;
         padding-top:7svw;
    }
     .ContenedorRegion{
         flex-direction: column;
    }
     .ContenedorNombreRegion{
         writing-mode:horizontal-tb;
         transform: rotate(0);
         width:100%;
         font-size: 16vw;
         padding-top:10vw;
    }
     .ContenedorFechas{
         row-gap: 8vw;
         width: 100%;
        ;
    }
     .FechaConcierto{
         flex-direction: column;
    }
     .DiaConcierto{
         font-size: 9vw;
         width:100%;
         text-align: center;
    }
     .CiudadConcierto{
         font-size: 5vw;
         width:100%;
         text-align: center;
    }
     .BotonCompra{
         width:40%;
         max-width: 168px;
         padding-top:5px;
    }
    .TextoRegistrate{
     font-size: 5vw;
}
}