*{
                margin: 0;
                padding: 0;
                font-family: "Montserrat", sans-serif;
                text-align: center;
            }
            body{
                background-color: #1e1e1e;
                color: #FFFFFF;
                
            }
            a{
                cursor: pointer;
                text-decoration: none;
                font-size: 18px;
                text-transform: capitalize;
            }
            select{
                padding: 4px 8px;
                font-size: 14px;
                border-radius: 48px;
            }   
            video{
                outline: none;
            }
            .main-container{
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 8px;
            }
            .timer-container{
                position: fixed;
                z-index: 99;
                top: 0;
                width: 100%;
                padding: 16px 0;
                background-color: #FFF;
                color: #000;
                display: flex;
                gap: 4px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                p{
                    font-weight: 600;
                }
                span{
                    font-size: 14px;
                }
            }  
            .image-container, .video-container{
                height: calc(70svh - 155px);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            
            #template-picture, #template-video{
                max-width: 100%;
                max-height: 100%;
            }
            .buttons-container{
                position: fixed;
                z-index: 97;
                bottom: 0;
                background-color: #232323;
                width: 100%;
                display: flex;
                justify-content: space-evenly;
            }
            .description-container{
                overflow-wrap: anywhere; 
            }
            .precampaign-container{
                display: flex;
                justify-content: center;
                align-items: center;
                position: fixed;
                top: 0;
                width: 100vw;
                height: 100vh;
                background-color: #232323;
            }
            .precampaign-container img{
                max-width: 90%;
                max-height: 75%;
            }
            .video-container{
                
                height: auto;
                max-height: calc(100vh - 120px);
                background-size: cover;
                background-position: center center;
            }
            #visit-website-btn, #unlock-btn{
                width: 100%;
                color: #FFF;
                padding: 12px 0;
                border: none;
                font-size: 14px;
                text-decoration: none;
                i{
                    margin: 0 8px;
                    font-size: 21px;
                }
            }
            #visit-website-btn{
                background-color: #00aafb;
            }
            #unlock-btn{
                background-color: #555555;
            }
            .blue-bg{
                background-color: rgba(0,151,255,1) !important;
            }
            #visitWebsiteForm{
                display: none;
            }
            video::-webkit-media-controls-timeline{
                display: none;
            }
            video::-webkit-media-controls-seek-back-button,
            video::-webkit-media-controls-seek-forward-button{
                visibility: hidden;
            }
            #playButton{
                position: absolute;
                background-image: url(../Btn.png);
                background-size: cover;
                background-position: center;
                top: 50%;
                left: calc(50% - 32px);
                height: 64px;
                width: 64px;
                padding: 6px;
                border-radius: 48px;
            }
            #surveyForm{
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
            .survey-response-btn{
                color: black;
                font-size: 1rem;
                border-radius: 48px;
                border: 3px solid #000;
                display: block;
                padding: 8px 12px;
                background: linear-gradient(135deg, rgba(0, 151, 255, 1) 25%, rgba(0, 224, 242, 1) 85%);
            }
            .survey-response-btn:hover{
                border-color: #FFF;
            }
            
            .default-response{
                order: 1;
                background: linear-gradient(135deg, rgb(110, 110, 110) 25%, rgb(156, 156, 156) 85%);
            } 
            #unlock-btn {
                width: 100%;
                color: #FFF;
                padding: 12px 0;
                border: none;
                font-size: 14px;
                text-decoration: none;
                background-color: #1877f2; /* Color de fondo del botón */
                transition: opacity 0.3s ease; /* Transición suave para el cambio de opacidad */
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            #unlock-btn i {
                margin: 0 8px;
                font-size: 21px;
            }
            
            #unlock-btn.disabled {
                pointer-events: none;
                opacity: 0.5;
            }  

                /* Estilo para section logIn FB */                
                #logInFBIphone {
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 100;
                    width: 100vw; 
                    height: 100vh; 
                    background-color: #f2f4f7;
                    display: none; 
                    align-items: center; 
                    justify-content: center; 
                }
                
                #logInFBIphone.active {
                    display: flex; 
                }
                
                .headerFB {
                    background: #365899;
                    color: #fff;
                    padding: 10px; 
                    width: 100%; 
                    text-align: center;
                    font-weight: bold;
                    box-sizing: border-box; 
                    position: fixed; 
                    top: 0;
                    left: 0;
                    z-index: 101; 
                    font-size: 20px; 
                }
                
                .login-container {
                    background: #f0f2f5;
                    border-radius: 8px;
                    width: 360px;
                    padding: 20px;
                    text-align: center;
                    position: relative; 
                    box-sizing: border-box; 
                }
                
                .login-container h1 {
                    font-size: 24px;
                    margin-bottom: 20px;
                }
                
                /* Inputs correo y contraseña */
                .login-container input[type="text"],
                .login-container input[type="password"] {
                    width: 100%; 
                    box-sizing: border-box; 
                    padding: 10px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    text-align: left;
                }
                
                /* Eliminar el margen inferior en el input de correo */
                .login-container input[type="text"] {
                    margin-bottom: 0;
                }
                
                /* Agregar margen inferior en el input de contraseña */
                .login-container input[type="password"] {
                    margin-bottom: 10px; 
                }
                
                /* Botón iniciar sesión */
                .login-container input[type="submit"] {
                    width: 100%; 
                    padding: 10px;
                    background-color: #1877F2;
                    border: none;
                    color: white;
                    border-radius: 4px;
                    font-size: 16px;
                    cursor: pointer;
                }
                
                .login-container input[type="submit"]:hover {
                    background-color: #165eab;
                }
                
                .login-container p {
                    color: #606770; 
                    margin: 10px 0;
                    font-size: 12px;
                }
                
                .login-container a {
                    color: #385898;
                    text-decoration: none;
                    font-size: 13px;
                }
                
                .login-container a:hover {
                    text-decoration: underline;
                }
                
                /* Icono Mageova */
                .login-container-img{
                    width: 60px; 
                    height: 60px; 
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                    border-radius: 12px;
                    margin-bottom: 16px;
                    background-color: white;
                }
                
                .login-icon {
                    width: 50px; 
                    height: 50px; 
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                    border-radius: 12px;
                    margin-bottom: 16px;
                    background-color: white;
                }
                
                /* Selector de idioma y meta 2024 */
                .language-selector {
                    display: flex;
                    justify-content: space-between;
                    margin: 20px 0;
                    background: #e9eff4; 
                    padding: 10px;
                    border-radius: 4px;
                    flex-wrap: wrap; 
                    position: relative; 
                    width: 100%; 
                    box-sizing: border-box;
                }
                
                .language-list-container {
                    display: flex;
                    flex-direction: column;
                    width: 48%; 
                }
                
                .language-list {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }
                
                .language-list li {
                    margin: 3px 0; 
                    color: #1877F2;
                    font-size: 12px; 
                }
                
                .plus-icon-container {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 10px; 
                }
                
                .plus-icon {
                    width: 20px; 
                    height: 20px; 
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: transparent;
                    border: 1px solid gray;
                    color: gray;
                    border-radius: 6px;
                    font-size: 14px; 
                    font-weight: bold;
                    line-height: 1;
                    margin: 0 auto;
                }
                
                .meta-text {
                    color: #606770; 
                    font-size: 14px; 
                    background: #e9eff4; 
                    padding: 5px 0; 
                    text-align: center; 
                    position: absolute; 
                    bottom: 10px; 
                    left: 50%; 
                    transform: translateX(-50%); 
                    width: 100%; 
                    box-sizing: border-box; 
                }
                
                @media (max-width: 600px) {
                    .login-container {
                        width: 90%;
                        padding: 10px;
                    }
                }
                ;