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

@font-face {
    font-family: 'Mulish-ExtraBold';
    src: url('../fonts/Mulish-ExtraBold.woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Mulish-000000-900';
    src: url('../fonts/Mulish-000000.woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Mulish-Bold';
    src: url('../fonts/Mulish-Bold.woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Mulish-SemiBold';
    src: url('../fonts/Mulish-SemiBold.woff');
}

@font-face {
    font-family: 'Mulish-Medium';
    src: url('../fonts/Mulish-Medium.woff');
}

@font-face {
    font-family: 'Mulish-Light';
    src: url('../fonts/Mulish-Light.woff');
}

@font-face {
    font-family: 'Mulish-Black';
    src: url('../fonts/Mulish-Black.woff');
}



:root{
    /*Cores padrões*/
    --cor-titulo:#212121;
    --cor-subtitulo:#757575;
    --hover-btn: #ffffff;
    --hover-text-btn: #212121;


      /*Menu*/
    --bg-menu: #ffffff;
    --menu-text: #616161;
    --bg-menu-webservice: #E7E9EC;

    /*Btn topo 1*/
    --btn-1-text: #606060;
    --btn-1-bg: #fff;
    --btn-1-border: #606060;
    --btn-1-icone: brightness(0) saturate(100%) invert(39%) sepia(1%) saturate(2%) hue-rotate(314deg) brightness(95%) contrast(95%);

    /*Btn topo 2*/
    --btn-2-text: #E13937;
    --btn-2-bg: #ffff;
    --btn-2-border: #E13937;
    --btn-2-icone: brightness(0) saturate(100%) invert(40%) sepia(19%) saturate(4002%) hue-rotate(330deg) brightness(88%) contrast(102%);

    /*Btn topo 3*/
    --btn-carteirinha-bg: #606060;
    --btn-carteirinha-text: #ffff;
    --btn-carteirinha-border: #606060;
    --btn-carteirinha-icone: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(278deg) brightness(101%) contrast(105%);

    /*Btn topo 4*/
    --btn-4-bg:#FF0636;
    --btn-4-border:#FF0636;
    --btn-4-text: #ffff;
    --btn-4-icone: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(278deg) brightness(101%) contrast(105%);;

    /*BANNER*/
    --banner-bg: #3c1314;

    /*CONSULTAR CARTEIRINHA*/
    --consulta-carteirinha-bg: #E7E9EC;
    /*BTN*/
    --btn-baixe-carteirinha-text: #ffffff;
    --btn-baixe-carteirinha-bg: #878787;
    --btn-baixe-carteirinha-border: #878787;

    /*Beneficios*/
    --beneficios-bg: #FFFFFF;
    --beneficios-bg-box: #FF0636;
    --beneficios-text-box: #ffff;
    --beneficios-border-box: #FF0636;
    --beneficios-icons: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(278deg) brightness(101%) contrast(105%);

    /*TRATAMENTOS COBERTOS*/
    --tratamentos-cobertos-bg: #EEEEEE;
    /*carrosel*/
    --bg-box: #fff;
    --text-box: #757575;
    --icon-box: brightness(0) saturate(100%) invert(48%) sepia(0%) saturate(2%) hue-rotate(343deg) brightness(95%) contrast(94%);

    /*SORTE*/
    --bg-right: #cccfd4;
    --bg-left: #FF0636;
    /*Conteudo*/
    --titulo-box-sorte: #FFFFFF;
    --premio-box-sorte: #FFFFFF;
    --subtitulo-box-sorte:#FFFFFF;
    /*Btn sorte*/
    --btn-sorteio-text: #212121;
    --btn-sorteio-border: #FFFFFF;
    --btn-sorteio-bg: #FFFFFF;
    --btn-icon: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(27%) hue-rotate(335deg) brightness(100%) contrast(74%);
    /*Regulamento*/
    --regulamento-text: #ffff;

    /*DESCONTO DE MEDICAMENTOS*/
    --desconto-bg: #EEEEEE;

    /*SOS 24H*/
    --sos-bg: #EEEEEE;

    /*REDE CREDENCIADA*/
    --cor-fundo-rede-credenciada: #e3e7e8;
    --btn-buscar-rede: #FF0636;
    --btn-buscar-rede-txt: #ffff;
    --titulo-busca-rede: #212121;
    --subtitulo-busca-rede: #757575;




    /*APP*/
    --titulo-app:#212121;
    --subtitulo-app: #212121;

    /*PRECOS*/
    --plano-bg-header: #6BBF7A;
    --text-corpo-preco: #757575;
    --border-corpo: #bababa;
    --bg-valor: #1A6C83;
    --text-valor: #fff;
    --filter-icon-corpo: brightness(0) saturate(100%) invert(46%) sepia(8%) saturate(0%) hue-rotate(208deg) brightness(96%) contrast(81%);
    --cor-container-plano: #E7E9EC;
    --azul-claro: #1A6C83;
    --azul-escuro: #0D4659;
    --text-rodape: #757575;

    /*SAC*/
    --sac-bg: #FF0636;
    --text-sac: #fff;
    --icon-sac: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(278deg) brightness(101%) contrast(105%);

    /*RODAPE*/
    --titulo-rodape:#633803;
    --subtitulo-rodape: #ffff;
    --bg-rodape: #878787;

    /*PÁGINA CONSULTA NÚMERO DA SORTE*/
    --icone-sorte: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(6849%) hue-rotate(343deg) brightness(104%) contrast(105%);
    --sorte-box-bg: #FF0636;
    --sorte-box-text: #fff;
    --sorte-btn-bg:#FF0636;
    --sorte-btn-text: #ffff;
}

body {
    font-family: 'Mulish';
    min-height: 75rem;
    padding-top: 4.5rem;
    /**background-color: #F2F2F2;*/
}

.so-responsive {
    width: 100%;
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}


@media (max-width:570px) {
    .so-responsive {
        padding-left: 0;
        padding-right: 0;
}

}
.titulo-padrao {
    font-family: 'Mulish-Medium'!important;
    font-size: 40px !important;
    color: var(--cor-titulo) !important;
    text-align: center;
}

.sub-titulo-padrao {
    font-family: 'Mulish-Light' !important;
    font-size: 20px !important;
    color: var(--cor-subtitulo) !important;
    text-align: center;
}


#quebra-mobile {
    display:none;
}
    

@media(max-width:991px){
    .titulo-padrao {
        font-size: 24px !important;
        color: var(--cor-titulo) !important;
    }

    .sub-titulo-padrao {
        font-size: 18px !important;
        color: var(--cor-subtitulo)!important;
    }    

    #quebra-mobile {
        display:block;
    }

}



/*Configuração do recurso de Icone
para baixar o app no mobile*/
.app-mobile {
    display: none;
}

@media (max-width: 900px) {

    .app-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2em;
        gap: 1em; /* Espaçamento entre o botão e as imagens */
    }
    
    .btn-app-mobile {
        background-color: #212121 !important;
        max-width: 288px;
        width: 100% !important;
        color: #fff;
        height: 40px;
        border-radius: 0.7em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-app-mobile a {
        text-decoration: none;
        font-size: 20px;
        color: #fff;
        font-family: "Mulish-SemiBold";
    }
    
    .logo-app {
        display: flex;
        gap: 1em; /* Espaçamento entre os ícones da loja */
        margin-top: 1em; /* Ajusta a distância do botão */
        justify-content: center; /* Centraliza os ícones */
    }
    
    .logo-app img {
        max-width: 133px;
        width: 100%;
        height: 39px;
    }
}