/* css vars */
:root {
    --page_width: 800px;
    --page_height: 1280px;
    --page_bgcolor: #ED6B77;
    --page_textcolor: #000;
    --page_maincolor: #0079BF;
    --page_alternatecolor:#0079BF;
}

* {box-sizing:border-box;}
body {
    margin:0; padding:0; font-family: Arial, sans-serif; line-height: 1.5;  font-size: 23px;
    background:var(--page_bgcolor) url('loading.gif') no-repeat center; background-size: 50px;
    color: var(--page_textcolor);
}

/* LAYOUT */
.page, .pantalla {width:var(--page_width); height: var(--page_height); overflow: hidden;}
.page {position: relative; margin:0 auto;}
.pantalla {display:none; opacity: 0; position: absolute; top: 0; left: 0; padding:150px 75px;}
.pantalla.active {display:block; opacity: 1; position: relative;}

/* PANTALLAS */
#portada a {display: block; background:url('portada.jpg') no-repeat center; background-size: contain;}
#intro, #resultado {padding-top:450px; background:url('formulario.jpg') no-repeat center; background-size: contain;}
#primero, #segundo, #ticket, #resultado {background:url('formulario.jpg') no-repeat center; background-size: contain;}
#extra {background:url('pregunta.jpg') no-repeat center; background-size: contain;}
#primero, #resutlado {padding-top:400px;} #segundo, #ticket {padding-top:350px;}
#extra {padding-top:450px;} 
#message {text-align: center;}

/* FORMULARIO */
#formulario .form_input, #formulario .form_select {margin-bottom:35px;}  
#formulario .form_check {margin-bottom:20px;}
#formulario .form_buttons {margin-top: 50px;}  

#formulario input[type="text"], #formulario input[type="number"], #formulario input[type="tel"], #formulario input[type="email"], 
#formulario input[type="date"], #formulario select, #formulario textarea {
    display:block; width:100%; padding:15px 20px; margin-top:10px;  font-size:23px;
    border-radius:10px; outline:none!important; border:none!important;
}
#formulario input[type="checkbox"] {width: 16px; height: 16px; transform: scale(1.2); cursor: pointer;}

#formulario .form_date .label {display: block!important;}
#formulario select#dia, #formulario select#mes, #formulario select#ano {width: 30%; display: inline-block;}

#formulario #ticket h2 {font-size: 2.3rem; color:var(--page_maincolor)}
#formulario #ticket h2 + p {margin-top: -20px; margin-bottom: 50px; font-size: 18px;}

#formulario .form_check {font-size:21px;}
#formulario .form_check a {text-decoration: underline;}

#formulario span.error {display: block; margin: 0; font-size: 18px; padding: 0 10px;}

/* COLORS */
#formulario input[type="text"], #formulario input[type="number"], #formulario input[type="tel"], #formulario input[type="email"], 
#formulario input[type="date"], #formulario select, #formulario textarea {background-color:#dedede; color:#333;}
#formulario input::placeholder {color:#999!important;}
#formulario input[type="text"]:focus, #formulario input[type="email"]:focus {color:#333;}
#formulario .form_check a {color: var(--page_textcolor);}
#formulario .form_check a:hover {color: var(--page_maincolor) ;}
#formulario #ticket h2, #formulario #resultado h2 {color: #fff;}


#formulario button, #formulario a.button {
    display:inline-block; padding:1rem; margin-right: 10px; outline:none!important; 
    font-size: 1.2rem; border-radius:10px; cursor:pointer; text-transform:uppercase; text-decoration: none; 
    border: 2px solid var(--page_maincolor);
}
#formulario button:hover, #formulario a.button:hover {border: 2px solid var(--page_alternatecolor);}
#formulario .button_next, #formulario .button_next {background-color:var(--page_maincolor); color:#fff;}
#formulario .button_next:hover {background-color: var(--page_alternatecolor);}
#formulario .button_prev {color: var(--page_maincolor); background-color:var(--page_bgcolor);}
#formulario .button_prev:hover {color: var(--page_alternatecolor); }
#formulario span.error {background-color: #dc3545; color: #fff;}


#formulario select#dia + span.error, #formulario select#mes + span.error {display: none!important;}
#formulario .response_error, #formulario .response_warning {background-color: #dc3545; padding: 10px 15px; border-radius: 10px;}


/* POP-UP */
#popup-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);
}
#popup-container {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; height: 80%; max-width: calc(var(--page_width) - 50px); overflow: auto;
    background: white; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
#popup-inside {position: relative; padding: 20px;}
#popup-close {
    position:fixed; top:0; right:0; display:block; width: 50px; height: 50px; 
    background-color: #000; color: #fff; border: none; cursor: pointer;
    font-size:18px; font-weight: bold;
}
#popup-close:hover {font-size: 21px;}





/* JUEGO 

		* {box-sizing: border-box;}
        html, body, #juego, #response {
            position: relative; margin: 0 auto; padding: 0; background-color:#37b866;
            width:800px; height:1256px; overflow: hidden;
            font-family: Calibri, 'Trebuchet MS', sans-serif; text-align: center;
        }
        /* JUEGO - INSTRUCCIONES 
        body {background:#37b866 url('fondo-juego.jpeg') no-repeat center; background-size: contain;}
        #juego {
            background-color:transparent; background-image: url('loading.gif'); 
            background-repeat: no-repeat; background-position: center; background-size: auto;
        }
        #marcador {
            width:100px; height: 100px; position: absolute; 
            background: url('marcador.png') no-repeat center; background-size: contain;
            opacity: 0; transition: opacity 0.5s ease-in-out;
        }
        #marcador.bounce {animation: bounce 2s ease; opacity: 1;}
        @keyframes bounce {
            0%   { transform: scale(0.8); }
            30%  { transform: scale(1.5); }
            50%  { transform: scale(0.95); }
            70% { transform: scale(1); }
            100% { transform: scale(1); }

        }
        
        #contador {
            position: absolute; top: 1563px; left: 30px; width: calc(100% - 60px); 
            padding:25px; background-color: #fff; color:#d1060d; 
            font-size: 20px; line-height: 20px; vertical-align: middle; 
        }

        #response {
            position:absolute; top: 0; left: 100%; transition: none;
            background:#37b866 url('fondo-response.jpeg') no-repeat center; background-size: contain;
        }
        #response.slide-in {animation: slideIn 1s ease forwards;}
        @keyframes slideIn {
            from { left: 100%; }
            to { left: 0%; }
        }
        #message {
            position: absolute; top: 350px; left:20px; width: 750px; height: 350px;
            display: flex; justify-content: center; align-items: flex-end;
            background-repeat: no-repeat; background-position: top center; background-size: contain;
        }
        #message button {
            display:inline-block; width: 150px; padding: 15px; 
            border-radius: 0; color:#fff; border:3px solid #fff;
            font-size: 23px; text-decoration: none; background-color: transparent;
        }

        @media (min-width: 992px) and (orientation: portrait) {
            /* TOTEM 32" 
            html, body, #juego, #response {width:1080px; height:1920px; overflow: hidden;}
            #marcador {width:150px; height: 150px;}
            #message {top: 600px; left:20px; width: 1036px; height: 473px;}
        }*/