* {
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: "JetBrains Mono", monospace;
    color: #ffffff;
}

body {
    background-color: #333333;
}

#mc_embed_signup{
    background-color: transparent;
}

#mc_embed_signup_scroll div{
    display: inline-block;
}


.videoBackground {
    position: relative;
    height: 100vh;
}

.videoBackground video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
    position:absolute;
}

.txtMain {
    position:absolute;
    left: 5vw;
    top: 4vh;
    z-index: 1;
}

.txtMain p{
    margin-bottom: 0;
    font-weight: 500;
    font-size: 1.25vh;
}

.txtMain span{
    display: inline-block;
}

.txtFade1{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 5s;
}

.txtFade2{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 5.25s;
}

.txtFade3{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 5.5s;
}

.txtFade4{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 5.75s;
}

.txtFade5{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 6s;
}

.txtFade6{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 6.25s;
}

.txtFade7{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 6.5s;
}

.txtFade8{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 6.75s;
}

.txtFade9{
    will-change: transform, opacity, filter;
    opacity: 0.1;
    transform: scale(2);
    filter: blur(10px);
    animation: fadeInScale 1s ease-in-out forwards;
    animation-delay: 7s;
}

@keyframes fadeInScale {
    from {
        filter: blur(10px);
        opacity: 0.1;
        transform: scale(2);
    }
    to {
        filter: blur(0px);
        opacity: 1;
        transform: scale(1);
    }
}

.botonSuscribirse {
    position:absolute;
    right: 3vw;
    top: 4vh;
    z-index: 1;
}

#mc_embed_signup_scroll{
    display: flex;
    gap: 10px;
}

.botonSuscribirse input{
    font-size: 1.4vh;
}

.formularioSus {
    width: 20vw;
    background-color: rgba(255, 255, 255, 0.35);
    padding: 8px 12px;
    border: 1.5px solid #000;
    border-radius: 5px;
    color: #222;
}

.botonActivar {
    padding: 8px 12px;
    background-color: #fff;
    color: #000;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.txtFloatLima {
    position:absolute;
    left: 15vw;
    top: 72vh;
    z-index: -1;
}

.flotaIzquierda{
    display: inline-block;
    font-size: 1.9vh;
    opacity: 0;
    transform: translateX(100%);
    animation: fadeInMoveIzq 2.5s ease-in-out forwards;
    animation-delay: 0;
}

@keyframes fadeInMoveIzq {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.txtFloatNY {
    position:absolute;
    right: 15vw;
    top: 36vh;
    z-index: -1;
}

.flotaDerecha{
    display: inline-block;
    font-size: 1.9vh;
    opacity: 0.3;
    transform: translateX(-100%);
    animation: fadeInMoveDer 3s ease-in-out forwards;
    animation-delay: 2.25s;
}

@keyframes fadeInMoveDer {
    from {
        transform: translateX(-100%);
        opacity: 0.3;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.textCenter {
    flex-direction: column;
    color: #ffffff;
    margin-top: 48vh;
}

.imgCenter, .textSpan {
    display: flex;
    justify-content: center;
}

.imgCenter img{
    width: 30vh;
}

.textSpan {
    margin-top: 2.4vh;
}

.textSpan p{
    font-size: 2vh;
}

.logosFinales{
    position:absolute;
    right: 3vw;
    bottom: 5vh;
    z-index: -1;
}

.textoLogos{
    display: inline-block;
    margin-right: 1.2vw;
    vertical-align: middle;
}

.textoLogos p{
    margin-bottom: 0.25vh;
    font-weight: 500;
    font-size: 1.25vh;
}

.logosFinales img{
    display: inline-block;
    margin: 0 1vw;
    max-width: 14vh;
    max-height: 8.5vh;
    vertical-align: middle;
}


@media (min-aspect-ratio: 4 / 1){
    .txtFloatLima {
        left: 25vw;
    }

    .txtFloatNY {
        right: 25vw;
    }

    .logosFinales img{
        margin: 0 0.4vw !important;
        max-width: 23vh !important;
        max-height: 12vh !important;
    }
}

@media (min-aspect-ratio: 5 / 2){
    .txtMain{
        top: 6vh;
    }

    .txtMain p{
        font-size: 0.6vw;
    }

    .flotaIzquierda{
        font-size: 0.9vw;
    }

    .flotaDerecha{
        font-size: 0.9vw;
    }

    .textCenter {
        margin-top: 42vh;
    }

    .imgCenter img{
        width: 16vw;
    }

    .textSpan p{
        font-size: 1.2vw;
    }

    .logosFinales{
        bottom: 9vh;
    }

    .logosFinales img{
        margin: 0 0.75vw;
        max-width: 17vh;
        max-height: 9.5vh;
    }
}

@media (max-aspect-ratio: 6 / 5) {
    .formularioSus {
        width: 30vw;
    }
}

@media (max-aspect-ratio: 1 / 1){
    .txtMain p{
        font-size: 1.2vh;
    }

    .flotaIzquierda{
        font-size: 2vh;
    }

    .flotaDerecha{
        font-size: 2vh;
    }

    .txtFloatNY {
        right: 14vw;
    }

    .txtFloatLima {
        left: 14vw;
    }

    .textSpan span{
        font-size: 2.2vh;
    }
}

@media (max-aspect-ratio: 7 / 8){
    #mc_embed_signup_scroll {
        gap: 8px;
    }

    .formularioSus {
        padding: 6px 8px;
        width: 45vw;
    }

    .txtMain {
        left: 5vw;
        top: 10.5vh;
    }
    
    .botonActivar {
        padding: 6px 8px;
    }

    .txtFloatNY {
        top: 42vh;
    }

    .txtFloatLima {
        top: 66vh;
    }

    .textCenter {
        margin-top: 50vh;
    }

    .logosFinales{
        bottom: 15vh;
    }

    .textoLogos p{
        font-size: 1vh;
    }

    .logosFinales img{
        margin: 0 1.5vw;
        max-width: 12vh;
        max-height: 7vh;
    }
}

@media (max-aspect-ratio: 5 / 8){
    .txtFloatNY {
        top: 38vh;
    }

    .txtFloatLima {
        top: 62vh;
    }

    .textCenter {
        margin-top: 46vh;
    }

    .imgCenter img{
        width: 60vw;
    }

    .logosFinales{
        bottom: 16vh;
    }

    .textoLogos{
        display: block;
        margin: 0 0 0.5vh;
    }

    .textoLogos p{
        font-size: 0.9vh;
    }

    .logosFinales img{
        margin: 0 0.5vh;
    }
}

@media (max-aspect-ratio: 1 / 2){
    #mc_embed_signup_scroll {
        gap: 6px;
    }

    .txtFloatLima {
        left: 10vw;
    }

    .txtFloatNY {
        right: 10vw;
    }

    .imgCenter img{
        width: 75vw;
    }

    .logosFinales{
        bottom: 17vh;
    }
}