@font-face {
    font-family: 'Nunito Bold';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./../fonts/Nunito-Bold.ttf');
}

@font-face {
    font-family: 'Nunito Regular';
    src: url('./../fonts/Nunito-Regular.ttf');
}

html, body {
    height: 100%!important;
    margin: 0;
    padding: 0;
    font-family: 'Nunito Regular';

}

/* Override SweetAlert2 height auto */
body.swal2-height-auto {
    height: 100%!important;
}

.login-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type=email],
input[type=password],
input[type=text] {
    border-width: 2px;
    border-color: #212949;
    border-radius: .75rem;
    height: 50px;
}

.label-input {
    position: relative;
    top: 15px;
    left: 15px;
    background-color: white;
    padding: 5px;
    z-index: 100;
}

button[type=submit] {
    background-color: #f28403;
    color: white;
    border-width: 0;
    border-radius: .25rem;
}

button[type=submit]:hover {
    background-color: #04acbd;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 70%;
    transform: translateY(-50%);
    cursor: pointer;
}

#personagem img {
    width: 100%;
    max-width: 1000px;
    height: auto;
}

#conjunto {
    position: relative; 
    z-index: 2;
}

#celular {
    position: relative; 
    z-index: 2; 
}

/* Somente aplica para desktop */
@media (min-width: 992px) {

    .topo {
        background-image: url('../img/bg-desk.png');
    }
    #personagem {
        position: fixed; 
        bottom: 0;
        left: -90px;
        z-index: 1;
        width: 40%; 
        height: auto;
        overflow: hidden;
    }
}

/* * {
    outline: 1px solid red;
  } */
/* Somente aplica para mobile */
@media (max-width: 991px) {
    .topo {
        background-image: url('../img/bg-mobile.png');
    }

    #personagem {
        img {
            width: 160%;
            height: auto;
            transform: translateX(-20%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, transparent 100%);
        }
    }
    #celular{
        transform: translateX(20%);
    }
    .texto-home {
        font-size: 10px;
    }
    .btn-baixar{
        font-size: 8px;
    }
}


.topo {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.baixo{
    background-image: url('../img/bg02-desk.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.card {
    border-radius: 1.25rem;
}

@media screen and (max-width:768px) {
    .card {
        max-width: 100vw;
    }
}


.card-instrucao {
    height: 100%; /* ocupar todo o espaço do col */
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.btn-baixar{
    background-color: #E58F22;  
    border-radius: 100px;
    width: 100%;
    max-width: 200px;
}
.laranja-loga{
    background-color: #E58F22;  

}

.azul-loga{
    background-color: #212949
}

.card-instrucao p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

@media (max-width: 576px) {
    .card-instrucao p {
        font-size: 0.5rem; /* ou 13px, conforme seu gosto */
    }
}