@font-face {
    font-family: 'BSBook';
    src: url(fonts/BentonSans-Book.woff) format("woff"),
         url(fonts/BentonSans-Book.ttf) format("opentype");
}
@font-face {
    font-family: 'BSBold';
    src: url(fonts/BentonSans-Bold.woff) format("woff"),
         url(fonts/BentonSans-Bold.ttf) format("opentype");
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

a {
    text-decoration: none;
    color: #FFFFFF;
}

.bold { font-family: 'BSBold'; }
.right { text-align: right; }
.clear { clear: both; }
.float { float: left; }

body {
    font-size: 12pt;
    font-family: 'BSBook';
    overflow-x: hidden; /* Evita scroll lateral por decoraciones */
}

#footer {
    width: 100%;
    text-align: center;
    color: #8BE1E9;
    font-size: 0.8em;
    position: absolute;
    bottom: 5px;
    z-index: 5;
}

/* =========================================
   VERSION MOVIL (220px - 767px)
   ========================================= */
@media only screen and (min-width:220px) and (max-width:767px) {
    #contenedor {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        position: relative;
    }

    #recoveries-logo {
        width: 45%;
        position: absolute;
        top: 20px;
        left: 20px;
    }
    #recoveries-logo img { width: 100%; }

    #login {
        width: 85%;
        text-align: center;
        z-index: 10;
    }
    #login img { width: 75%; margin-bottom: 10px; }

    #box-login {
        background-color: #FFFFFF;
        border-radius: 15px;
        padding: 30px 20px;
        color: #1464A5;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    #box-login p { font-size: 1.1em; margin-bottom: 20px; }

    .boton {
        border-radius: 10px;
        background-color: #FFE761;
        color: #001391;
        padding: 12px 0;
        cursor: pointer;
        text-align: center;
        font-family: 'BSBold';
        width: 100%;
        max-width: 200px;
        margin: 10px auto;
        font-size: 4.5vw;
        transition: transform 0.2s;
    }

    #alert {
        width: 90%;
        margin: 15px auto 0;
        color: #ffa63b;
        font-size: 0.85em;
        display: none;
    }

    /* Decoraciones en móvil (Añadidas para coherencia visual) */
    .circulo {
        border-radius: 50%;
        background-color: #85C8FF;
        position: absolute;
        filter: blur(40px);
        opacity: 0.5;
        z-index: 1;
    }
    #circulo1 { width: 150px; height: 150px; top: -50px; right: -50px; }
    #circulo2 { width: 100px; height: 100px; bottom: 10%; left: -30px; }
    
    #pelota1, #pelota2, #pelota3 {
        position: absolute;
        opacity: 0.6;
        z-index: 2;
    }
#pelota1{
        position: absolute;
        left: 74%;
        width: 9vw;
        top: 25%;
        animation: bounce1 2s ease-in-out infinite;
    }
    @keyframes bounce1{
        0%, 100%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-70px);
        }
    }
    #pelota2{
        position: absolute;
        left: 18%;
        width: 5vw;
        top: 29%;
        animation: bounce 1.4s ease-in-out infinite;
    }
    @keyframes bounce{
        0%, 100%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-15px);
        }
    }
    #pelota3{
        position: absolute;
        left: 59%;
        width: 7vw;
        top: -2%;
        animation: bounce3 1.8s ease-in-out infinite;
    }
    @keyframes bounce3{
        0%, 100%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-30px);
        }
    }
}

/* =========================================
   VERSION ESCRITORIO (768px+)
   ========================================= */
@media only screen and (min-width: 768px) {
    #contenedor {
        position: relative;
        width: 100%;
        height: 100vh;
    }

    .circulo {
        border-radius: 50%;
        background-color: #85C8FF;
        position: absolute;
    }
    #circulo1 { width: 200px; height: 200px; left: 5%; filter: blur(70px); }
    #circulo2 { width: 70px; height: 70px; left: 25%; bottom: -30px; filter: blur(30px); }
    #circulo3 { width: 120px; height: 120px; left: 70%; filter: blur(45px); }
    #circulo4 { width: 70px; height: 70px; left: 85%; top: 0px; filter: blur(30px); }

    #pelota1 { position: absolute; left: 74%; width: 9vw; top: 25%; animation: bounce1 2s ease-in-out infinite; }
    #pelota2 { position: absolute; left: 18%; width: 5vw; top: 75%; animation: bounce 1.4s ease-in-out infinite; }
    #pelota3 { position: absolute; left: 33%; width: 7vw; top: -2%; animation: bounce3 1.8s ease-in-out infinite; }

    @keyframes bounce1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-70px); } }
    @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
    @keyframes bounce3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }

    .boton {
        border-radius: 10px;
        background-color: #FFE761;
        color: #001391;
        padding: 5px 35px;
        cursor: pointer;
        text-align: center;
        font-family: 'BSBold';
        width: fit-content;
        margin: 10px auto;
        font-size: 1.3vw;
    }

    #login {
        width: 30%;
        left: 35%;
        top: 20%;
        text-align: center;
        z-index: 2;
        position: absolute;
    }
    #login img { width: 75%; }

    #box-login {
        background-color: #FFFFFF;
        border-radius: 12px;
        padding: 10px 0;
        margin: 8% 0;
        color: #1464A5;
    }

    #recoveries-logo { width: 18%; padding: 4vw; }
    #recoveries-logo img { width: 100%; }

    #alert { width: 80%; margin: 0 auto; color: #ffa63b; font-size: 0.9em; display: none; }
}