/*--  nav --------------------------------------------------------------------------------------
----- Barra de navegação superior da página.
-------------------------------------------------------------------------------------------------*/
header nav
{
  img
  {
    height: 30px;
    width: auto;
  }

  ul
  {
    background: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    margin-top: 10px;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 1.5px 1px #ffffff48;
    -moz-box-shadow: 1px 1px 1.5px 1px #ffffff48;
    box-shadow: 1px 1px 1.5px 1px #ffffff48;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  ul, li
  {
    list-style: none;

    a
    {
      text-decoration: none
    }
  }
  
}

/*--  Variáveis -----------------------------------------------------------------------------------
----- Defini algumas variáveis para facilitar a manutenção do código.
-------------------------------------------------------------------------------------------------*/
:root
{
  --cor-bg-1: #3b3174;
  --cor-bg-2: #ec071d;
  --cor-bg-3: #e79021;
  --cor-link-bg-1: #3b3174;
  --cor-link-bg-1-hover: #160e42;
  --cor-link-bg-2: #ec071d;
  --cor-link-bg-2-hover: #87010e;
  --cor-link-bg-3: #e79021;
  --cor-link-bg-3-hover: #ffb24e;
  --cor-link-txt-1: #3b3174;
  --cor-link-txt-1-hover: #160e42;
  --cor-link-txt-2: #ec071d;
  --cor-link-txt-2-hover: #87010e;
  --cor-link-txt-3: #e79021;
  --cor-link-txt-3-hover: #ffb24e;

  --cor-link-WhatsApp-1: #075E54;
  --cor-link-WhatsApp-2: #25D366;
  --cor-link-WhatsApp-3: #128C7E;

  --cor-bg-main-index: #ffffffc6;
}

/*--  Normalize -----------------------------------------------------------------------------------
----- Padronizei algumas áreas da página para evitar repetição do código e facilitar a manutenção.
-------------------------------------------------------------------------------------------------*/
.cor-bg-1{background-color: var(--cor-bg-1)}
.cor-bg-2{background-color: var(--cor-bg-2)}
.cor-bg-3{background-color: var(--cor-bg-3)}
.cor-bg-main-index{background-color: var(--cor-bg-main-index); border-radius: 10px;}
.cor-link-bg-1{background-color: var(--cor-link-bg-1)}
.cor-link-bg-1:hover{background-color: var(--cor-link-bg-1-hover)}
.cor-link-bg-2{background-color: var(--cor-link-bg-2)}
.cor-link-bg-2:hover{background-color: var(--cor-link-bg-2-hover)}
.cor-link-bg-3{background-color: var(--cor-link-bg-3)}
.cor-link-bg-3:hover{background-color: var(--cor-link-bg-3-hover)}
.cor-link-bg-WhatsApp-1{background-color: var(--cor-link-WhatsApp-1)}
.cor-link-bg-WhatsApp-1:hover{background-color: var(--cor-link-WhatsApp-3)}
.cor-link-bg-WhatsApp-2{background-color: var(--cor-link-WhatsApp-2)}
.cor-link-bg-WhatsApp-2:hover{background-color: var(--cor-link-WhatsApp-3)}
.cor-link-bg-WhatsApp-3{background-color: var(--cor-link-WhatsApp-3)}
.cor-link-bg-WhatsApp-3:hover{background-color: var(--cor-link-WhatsApp-1)}

.cor-link-txt-1{color: var(--cor-link-txt-1)}
.cor-link-txt-2{color: var(--cor-link-txt-2)}
.cor-link-txt-3{color: var(--cor-link-txt-3)}
.cor-link-txt-WhatsApp-1{color: var(--cor-WhatsApp-1)}
.cor-link-txt-WhatsApp-1:hover{color: var(--cor-WhatsApp-2)}
.cor-link-txt-WhatsApp-2{color: var(--cor-WhatsApp-2)}
.cor-link-txt-WhatsApp-2:hover{color: var(--cor-WhatsApp-3)}
.cor-link-txt-WhatsApp-3{color: var(--cor-WhatsApp-3)}
.cor-link-txt-WhatsApp-3:hover{color: var(--cor-WhatsApp-3)}

.d-flex-c-center-center{display: flex; flex-direction:column; align-items: center; justify-content: center;}
.d-flex-r-center-center{display: flex; flex-direction:row; align-items: center; justify-content: center;}
.d-flex-c-gap-10{display: flex; flex-direction:column; gap: 10px;}
.d-flex-r-gap-10{display: flex; flex-direction:row; gap: 10px;}
.border-radius-10{border-radius: 10px;}

/*--  header --------------------------------------------------------------------------------------
----- Tradução: Cabeçalho - Área no topo da página onde geralmente fica a logo e a navegação.
-------------------------------------------------------------------------------------------------*/


/*--  footer --------------------------------------------------------------------------------------
----- Tradução: Rodapé - Parte final da página, onde geralmente fica os créditos.
-------------------------------------------------------------------------------------------------*/