@charset "UTF-8";

    body{
      font-size:16px;
      font-family: var(--fonte-principal);
      background-color: #fff;
      overflow-x: hidden;
    }

    a{
      text-decoration: none;
    }

    a:hover{
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s linear;
    }

    header,
    footer,
    section{
      width: 100%;
    }

:root{

    /* ============= cores ============= */

        --sem-cor: transparent !important;

        /* cores padrões */
        --cor-azul: #0d6efd;
        --cor-azul-escuro: #00375f;
        --cor-roxo: #6f42c1;
        --cor-rosa: #d63384;
        --cor-vermelho: #dc3545;
        --cor-laranja: #fd7e14;
        --cor-amarelo: #ffc107;
        --cor-amarelo-escuro: #ba8d00;
        --cor-verde: #198754;
        --cor-verde-azulado: #20c997;
        --cor-ciano: #0dcaf0;
        --cor-branco: #fff;
        --cor-cinza: #6c757d;
        --cor-cinza-escuro: #343a40;
        --cor-cinza-100: #f8f9fa;
        --cor-cinza-200: #e9ecef;
        --cor-cinza-300: #dee2e6;
        --cor-cinza-400: #ced4da;
        --cor-cinza-500: #adb5bd;
        --cor-cinza-600: #6c757d;
        --cor-cinza-700: #495057;
        --cor-cinza-800: #343a40;
        --cor-cinza-900: #212529;
        --cor-preto: #202020; /* cor preto não é totalmente preto */;


      --f-10: 10px !important;
      --f-11: 11px !important;
      --f-12: 12px !important;
      --f-14: 14px !important;
      --f-16: 16px !important;
      --f-18: 18px !important;
      --f-20: 20px !important;
      --f-24: 24px !important;
      --f-26: 26px !important;
      --f-28: 28px !important;
      --f-30: 30px !important;
      --f-32: 32px !important;
      --f-34: 34px !important;
      --f-36: 36px !important;
      --f-38: 35px !important;
      --f-40: 40px !important;
      --f-50: 50px !important;

      --fonte-principal: 'Inter', sans-serif;

}


  /* ==========================[ FONTES | TEXTOS ]========================== */

    /* Tamanhos de fontes */
    .f-10,
    .fonte-10{ font-size: var(--f-10) !important; }

    .f-11,
    .fonte-11{ font-size: var(--f-11) !important; }

    .f-12,
    .fonte-12{ font-size: var(--f-12) !important; }

    .f-14,
    .fonte-14{ font-size: var(--f-14) !important; }

    .f-16,
    .fonte-16{ font-size: var(--f-16); }

    .f-18,
    .fonte-18{ font-size: var(--f-18); }

    .f-20,
    .fonte-20{ font-size: var(--f-20); }

    .f-22,
    .fonte-24{ font-size: var(--f-22); }

    .f-24,
    .fonte-24{ font-size: var(--f-24); }

    .f-26,
    .fonte-24{ font-size: var(--f-26); }

    .f-28,
    .fonte-24{ font-size: var(--f-28); }

    .f-30,
    .fonte-30{ font-size: var(--f-30); }

    .f-32,
    .fonte-32{ font-size: var(--f-32); }

    .f-34,
    .fonte-34{ font-size: var(--f-34); }

    .f-36,
    .fonte-34{ font-size: var(--f-36); }

    .f-38,
    .fonte-34{ font-size: var(--f-38); }

    .f-40,
    .fonte-34{ font-size: var(--f-40); }

    .f-50,
    .fonte-50{ font-size: var(--f-50); }

    /* Peso/Estilos das fontes */
    .fonte-p-300,
    .f-p-3{ font-weight: 300; }

    .fonte-p-400,
    .f-p-4{ font-weight: 400; }

    .fonte-p-500,
    .f-p-5{ font-weight: 500; }

    .fonte-p-600,
    .f-p-6{ font-weight: 600; }

    .fonte-p-700,
    .f-p-7{ font-weight: 700; }

    .fonte-p-800,
    .f-p-8{ font-weight: 800; }

    .fonte-p-900,
    .f-p-9{ font-weight: 900; }
    /* AVISO IMPORTANTE: Antes de usar as tags 'fonte-p-', verifique se a fonte que você está utilizando possui variação de estilo. */

    /* Alinhamento de texto */
    .esquerda,
    .fonte-esquerda,
    .f-esquerda{ text-align: left !important; }

    .direita,
    .fonte-direita,
    .f-direita{ text-align: right !important; }

    .centro,
    .fonte-centro,
    .f-centro{ text-align: center !important; }

    .justificado,
    .fonte-justificado,
    .f-justificado{ text-align: justify !important; }

    /* Estilo da fonte */
    .normal,
    .fonte-normal,
    .f-normal{ font-weight: normal !important; }

    .negrito,
    .fonte-negrito,
    .f-negrito{ font-weight: bold !important; }

    .italico, .italica,
    .fonte-italico, .fonte-italica,
    .f-italico, .f-italica{ font-style: italic !important; }

    .obliquo, .obliqua,
    .fonte-obliquo, .fonte-obliqua,
    .f-obliquo, .f-obliqua{ font-style: oblique !important; }

    .riscado,
    .fonte-riscado,
    .f-riscado{ text-decoration: line-through !important; }

    .sublinhado,
    .fonte-sublinhado,
    .f-sublinhado{ text-decoration: underline !important; }

    /* Transformação */
    .maiusculo,
    .fonte-maiusculo,
    .f-maiusculo{ text-transform: uppercase !important; }

    .minusculo,
    .fonte-maiusculo,
    .f-maiusculo{ text-transform: lowercase !important; }

    /* Sombra */
    .sombra-escura
    .fonte-sombra-escura,
    .sombra-escura-texto{ text-shadow: 1em 0.1em 0.2em black; }

    .sombra-cinza
    .fonte-sombra-cinza,
    .sombra-cinza-texto{ text-shadow: 0.1em 0.1em 0.2em gray; }

    .sombra-branco
    .fonte-sombra-branco,
    .sombra-branco-texto{ text-shadow: 0.1em 0.1em 0.2em white; }

    /* Cor para fontes */
    .azul,
    .cor-azul,
    .c-azul{ color: var(--cor-azul) !important; }

    .azul-escuro,
    .cor-azul-escuro,
    .c-azul-escuro{ color: var(--cor-azul-escuro) !important; }

    .roxo,
    .cor-roxo,
    .c-roxo{ color: var(--cor-roxo) !important; }

    .rosa,
    .cor-rosa,
    .c-rosa{ color: var(--cor-rosa) !important; }

    .vermelho,
    .cor-vermelho,
    .c-vermelho{ color: var(--cor-vermelho) !important; }

    .laranja,
    .cor-laranja,
    .c-laranja{ color: var(--cor-laranja) !important; }

    .amarelo,
    .cor-amarelo,
    .c-amarelo{ color: var(--cor-amarelo-escuro) !important; }

    .amarelo-escuro,
    .cor-amarelo-escuro,
    .c-amarelo-escuro{ color: var(--cor-amarelo-escuro) !important; }

    .verde,
    .cor-verde,
    .c-verde{ color: var(--cor-verde) !important; }

    .verde-azulado,
    .cor-verde-azulado,
    .c-verde-azulado{ color: var(--cor-verde-azulado) !important; }

    .branco,
    .cor-branco,
    .c-branco{ color: var(--cor-branco) !important; }

    .cinza,
    .cor-cinza,
    .c-cinza{ color: var(--cor-cinza) !important; }

    .cinza-escuro,
    .cor-cinza-escuro,
    .c-cinza-escuro{ color: var(--cor-cinza-escuro) !important; }

    .cinza-1,
    .cor-cinza-1,
    .c-cinza-1{ color: var(--cor-cinza-100) !important; }

    .cinza-2,
    .cor-cinza-2,
    .c-cinza-2{ color: var(--cor-cinza-200) !important; }

    .cinza-3,
    .cor-cinza-3,
    .c-cinza-3{ color: var(--cor-cinza-300) !important; }

    .cinza-4,
    .cor-cinza-4,
    .c-cinza-4{ color: var(--cor-cinza-400) !important; }

    .cinza-5,
    .cor-cinza-5,
    .c-cinza-5{ color: var(--cor-cinza-500) !important; }

    .cinza-6,
    .cor-cinza-6,
    .c-cinza-6{ color: var(--cor-cinza-600) !important; }

    .cinza-7,
    .cor-cinza-7,
    .c-cinza-7{ color: var(--cor-cinza-700) !important; }

    .cinza-8,
    .cor-cinza-8,
    .c-cinza-8{ color: var(--cor-cinza-800) !important; }

    .cinza-9,
    .cor-cinza-9,
    .c-cinza-9{ color: var(--cor-cinza-900) !important; }

    .preto,
    .cor-preto,
    .c-preto{ color: var(--cor-preto) !important; }

    .transparente,
    .cor-trasnparente,
    .c-transparente{ color: var(--sem-cor) !important; }

    /* Cores de fundo */
    .fundo-transparente,
    .f-transparente{ background-color: var(--sem-cor) !important; }

    .fundo-azul-escuro,
    .f-azul-escuro{ background-color: var(--cor-azul-escuro) !important; }

    .fundo-azul,
    .f-azul{ background-color: var(--cor-azul) !important; }

    .fundo-roxo,
    .f-roxo{ background-color: var(--cor-roxo) !important; }

    .fundo-rosa,
    .f-rosa{ background-color: var(--cor-rosa) !important; }

    .fundo-vermelho,
    .f-vermelho{ background-color: var(--cor-vermelho) !important; }

    .fundo-laranja,
    .f-laranja{ background-color: var(--cor-laranja) !important; }

    .fundo-amarelo-escuro,
    .f-amarelo-escuro{ background-color: var(--cor-amarelo-escuro) !important; }

    .fundo-amarelo,
    .f-amarelo{ background-color: var(--cor-amarelo) !important; }

    .fundo-verde,
    .f-verde{ background-color: var(--cor-verde) !important; }

    .fundo-verde-azulado,
    .f-verde-azulado{ background-color: var(--cor-verde-azulado) !important; }

    .fundo-ciano,
    .f-ciano{ background-color: var(--cor-ciano) !important; }

    .fundo-branco,
    .f-branco{ background-color: var(--cor-branco) !important; }

    .fundo-cinza,
    .f-cinza{ background-color: var(--cor-cinza) !important; }

    .fundo-cinza-escuro,
    .f-cinza-escuro{ background-color: var(--cor-cinza-escuro) !important; }

    .fundo-cinza-1,
    .f-cinza-1{ background-color: var(--cor-cinza-100) !important; }

    .fundo-cinza-2,
    .f-cinza-2{ background-color: var(--cor-cinza-200) !important; }

    .fundo-cinza-3,
    .f-cinza-3{ background-color: var(--cor-cinza-300) !important; }

    .fundo-cinza-4,
    .f-cinza-4{ background-color: var(--cor-cinza-400) !important; }

    .fundo-cinza-5,
    .f-cinza-5{ background-color: var(--cor-cinza-500) !important; }

    .fundo-cinza-6,
    .f-cinza-6{ background-color: var(--cor-cinza-600) !important; }

    .fundo-cinza-7,
    .f-cinza-7{ background-color: var(--cor-cinza-700) !important; }

    .fundo-cinza-8,
    .f-cinza-8{ background-color: var(--cor-cinza-800) !important; }

    .fundo-cinza-9,
    .f-cinza-9{ background-color: var(--cor-cinza-900) !important; }

    .fundo-preto,
    .f-preto{ background-color: var(--cor-preto) !important; }

    /* Botão padrão */
    .botao{
      padding: 6px 12px;
      font-size: var(--f-16);
      color: var(--cor-preto);
      font-weight: 400;
      line-height: 1.5;
      text-align: center;
      text-decoration: none;
      border-radius: 4px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

      .botao:hover{
        background-color: var(--cor-cinza-200);
        color: var(--cor-preto);
      }

      .botao-vermelho,
      .b-vermelho{
        background-color: #f36c79 !important;
        color: var(--cor-branco) !important;
        border-color: #f36c79 !important;
        padding: 12px 24px;
        font-weight: bold;
      }

      .botao-vermelho:hover,
      .b-vermelho:hover{
        background-color: #bf2f3c !important;
        border-color: #bf2f3c !important;
      }

      .botao-azul,
      .b-azul{
        background-color: #0962a3 !important;
        color: var(--cor-branco) !important;
        border-color: #0962a3 !important;
        padding: 12px 24px;
        font-weight: bold;
      }

      .botao-azul:hover,
      .b-azul:hover{
        background-color: #07548d !important;
        border-color: #07548d !important;
      }

      .botao-amarelo-escuro,
      .b-amarelo-escuro{
        background-color: var(--cor-amarelo-escuro) !important;
        color: var(--cor-branco) !important;
        border-color: #0962a3 !important;
        padding: 12px 24px;
        font-weight: bold;
      }

      .botao-amarelo-escuro:hover,
      .b-amarelo-escuro:hover{
        background-color: #07548d !important;
        border-color: #07548d !important;
      }

    *{
      margin: 0px;
      padding: 0px;
    }