/* Definições de fontes personalizadas */
@font-face { 
    font-family: 'Futura TS Heavy'; 
    src: url('https://calend365.com/fonts/futura-ts-heavy.woff2') format('woff2'),
         url('https://calend365.com/fonts/futura-ts-heavy.woff') format('woff'),
         url('https://calend365.com/fonts/futura-ts-heavy.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Carrega fonte alternativa primeiro */
    fallback: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
}

@font-face { 
    font-family: 'Impact'; 
    src: url('https://calend365.com/fonts/impact.woff2') format('woff2'),
         url('https://calend365.com/fonts/impact.woff') format('woff'),
         url('https://calend365.com/fonts/impact.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Carrega fonte alternativa primeiro */
    fallback: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
}

/* Reset básico para garantir maior consistência entre navegadores */
 body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4; /* Cor de fundo para o resto do corpo */
  }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilos do cabeçalho */
  .header {
    padding: 10px 0;
    background-color: #fff; /* Cor de fundo para o cabeçalho */
  }

.header-content {
    width: 1256px;
    padding:0px 10px 0px 10px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-logo {
    display: flex;
    align-items: center;
  }
  .search-container {
    display: flex;
    align-items: center;
  }
  .search-container input[type="search"] {
    padding: 5px;
    margin-right: 5px;
  }













/* ===== MENU PRINCIPAL ===== */
nav {
  width: 100%;
  background-color: #005799; /* Cor de fundo principal */
  padding:8px 0px;
}

/* Container para o menu: 
   - Centraliza o conteúdo 
   - Controla o "padding" (espaçamento interno)
   - Usa Flexbox para organizar os itens. */
.menu-container {
  margin: 0 auto;
  padding: 0 20px; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

/* Remove estilos de lista padrão e 
   alinha <li> em linha usando Flexbox */
.menu-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 60px; /* Espaço horizontal entre os itens */
}

/* Itens do menu (links) */
.menu-container li a {
  display: inline-block;
  padding: 5px 10px;       /* Espaçamento interno */
  color: #fff;             /* Cor do texto */
  text-decoration: none;   /* Remove sublinhado */
  font-size: 14px;
  font-weight: 600;
  background-color: transparent;  /* Fica transparente, muda no hover/active */
  border-radius: 5px;             /* Cantos levemente arredondados */
  transition: background-color 0.3s ease; /* Efeito suave ao passar o mouse */
}

/* Ao passar o mouse ou se o link tiver classe "active", 
   aplica a cor de destaque de fundo */
.menu-container li a:hover,
.menu-container li a.active {
  background-color: #004080;
}

/* ===== RESPONSIVIDADE ===== */
/* Abaixo de 768px de largura, 
   só mantém visíveis os 2 primeiros itens do menu 
   e oculta do 3º em diante */
@media (max-width: 768px) {
  .menu-container ul li:nth-child(n+3) {
    display: none;
  }
  

    
  

  
  /* Exemplo: se quiser ajustar algo nos primeiros 2 itens, 
     poderia usar .menu-container ul li:nth-child(-n+2) { ... } */
}


@media (max-width: 850px) {
  .menu-container ul li:nth-child(n+5) {
    display: none;
  }
}




@media (max-width: 1256px) {

  .menu-container ul {
  gap:20px;
  }
  
  }


.menu-container span{color:#FFF;}









/* Estilos para o conteúdo principal */
main {
  padding-top:0px;
}



/* Estilos para responsividade */
@media (max-width: 1080px) {
.header-content {
    width: 100%;
    padding:0px 20px 0px 20px;
    
    }
  
}


.country-selector {
  position: relative;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  margin-top:3px;
}

.country-btn {
  background: none;
  border: 1px solid transparent;
  padding: 5px 5px;
  cursor: pointer;
  outline: none;
  border-radius:4px;
  color: #407471;
  font-size:18px;
}

.country-btn:focus {
  border-color: #ccc; /* Cor de contorno ao focar */
  background: #f0f0f0; /* Cor de fundo ao focar */
}

.arrow {
  border: solid #407471; /* Define a cor da seta */
  border-width: 0 2px 2px 0; /* Define a espessura da borda para criar uma seta */
  display: inline-block;
  padding: 2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-bottom: 4px; /
}





.country-list {
  display: none;
   position: absolute; 
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border: 1px solid #ccc; /* Adiciona borda ao redor do box */
  z-index: 1;
  margin-top: 12px; /* Espaço acima do box para mostrar a setinha */
  margin-left:18px;
  border-radius:4px;
}

.country-list li {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #e7e7e7; /* Linha de divisão entre os itens */
}

.country-list li a{
color:#005799;
}

/* Remove a borda do último item para não ter uma linha dupla na parte inferior */
.country-list li:last-child {
  border-bottom: none;
}

.country-list li:hover {
  background-color: #ddd;
}

.country-selector.active .country-list {
  display: block;
}

/* Estilo para a borda da setinha */
.country-list::before {
  content: "";
  position: absolute;
  top: -12px; /* Ajuste para que a borda da setinha fique alinhada com a borda do box */
  left: 10px;
  border-width: 0 11px 11px 0; /* Aumente o tamanho para compensar a borda */
  border-style: solid;
  border-color: transparent transparent #ccc transparent; /* Cor da borda aqui */
  z-index: 0;
}

/* Estilo para preencher a setinha */
.country-list::after {
  content: "";
  position: absolute;
  top: -10px; /* Ajuste para alinhar com o pseudo-elemento ::before */
  left: 11px; /* Ajuste para alinhar com o pseudo-elemento ::before */
  border-width: 0 10px 10px 0; /* Tamanho da setinha preenchida */
  border-style: solid;
  border-color: transparent transparent #f9f9f9 transparent; /* Cor de fundo da setinha */
  z-index: 1;
}

.country-selector.active .arrow {
  transform: rotate(225deg);
}


h2 {
  font-size: 20px;
  font-family: 'Futura TS Heavy', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  margin-bottom: 25px;
  position: relative;
  text-align:left;
}

h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  margin-top:5px;
  background-color: #005799;  
  border-radius: 2px;
   
}





@media (max-width: 480px) {
  /* Estilos para telas de celular e abaixo */
}


/* Container principal */
main {
    max-width: 1256px; /* Tamanho máximo do container */
    margin: 0 auto; /* Centraliza o container na página */
    padding-left: 10px;
    padding-right: 10px;
}

/* Estilos para as colunas */
.container {
    display: flex;
    gap: 26px; /* Espaço entre as colunas */
}

/* Coluna esquerda */
.container .left-column {
    width: 900px;
}

/* Coluna direita (lateral) */
.container .right-column {
    width: 330px;
    margin-top:20px;
}

/* Layout responsivo */
@media (max-width: 1276px) {
    .container .left-column {
        width: 74%; /* 74% da largura da tela */
    }

    .container .right-column {
        width: 24%; /* 24% da largura da tela */
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Colunas em formato de bloco */
    }

    .container .left-column,
    .container .right-column {
        width: 100%; /* Ocupam 100% da largura no mobile */
    }
    
    .menu li {
    padding: 0px;
  }
  
  
  
    
}


.menu-container {
  width: 1256px; /* largura máxima do conteúdo do menu */
  padding: 0px; /* padding de 10px nas laterais */
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  
  
}

@media (max-width: 1266px) {
  .menu-container {
    width: 100%; /* garante que o conteúdo do menu ocupe a largura total da tela */
    padding: 0px;
    font-size:14px;
    padding: 0px 10px;; /* padding de 10px nas laterais */
  }
}




























/* Rodapé */
.footer {
  background-color: #005799;
  color: #fff;
  padding: 20px 0;
  margin-top:40px;
}

.footer_container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer_columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom:20px;
}

/* Colunas dos calendários */
.footer_calendars_wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.footer_calendars_left,
.footer_calendars_right {
  flex-basis: 50%; /* Cada coluna ocupa 50% em telas grandes */
}

.footer_column_right {
  flex-basis: 30%; /* Calend 365 ocupa 30% em telas grandes */
  text-align: right;
}

/* Estilo dos títulos */
.footer_column h4, .footer_calendars_left h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
}

/* Estilo dos links */
.footer_calendars_wrapper ul,
.footer_calendars_wrapper ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer_calendars_wrapper ul li {
  margin-bottom: 12px;
}

.footer_calendars_wrapper ul li a {
  color: #ccc;
  text-decoration: none;
}

.footer_calendars_wrapper ul li a:hover {
  color: #fff;
}

.footer_column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer_column ul li {
  margin-bottom: 12px;
}

.footer_column ul li a {
  color: #ccc;
  text-decoration: none;
}

.footer_column ul li a:hover {
  color: #fff;
}

/* Informações e logo no rodapé */
.footer_info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #444;
  padding-top: 10px;
}

.footer_text {
  flex: 1 1 300px;
  margin-bottom: 10px;
}

.footer_text p {
  margin: 5px 0;
  font-size: 13px;
}

.footer_logo_country {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer_logo {
  height: 20px;
  margin-bottom: 10px;
}

.footer_country_selector {
  position: relative;
}

.footer_country_btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* Ajustando a seta para rodapé */
.footer_arrow {
  border: solid #fff;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 5px;
  transform: rotate(45deg);
  transition: transform 0.3s ease; /* Transição suave ao clicar */
}

.footer_country_selector.active .footer_arrow {
  transform: rotate(225deg); /* Inverter a seta ao clicar */
}

/* Lista de países do rodapé aparecendo para cima */
.footer_country_list {
  display: none;
  position: absolute;
  right: 0;
  bottom: 35px; /* Ajusta a posição para aparecer acima do botão */
  background-color: #e7e7e7;
  list-style: none;
  margin: 0;
  padding: 10px;
  border: 1px solid #444; /* Adiciona borda para combinar com o estilo */
  border-radius: 4px;
  min-width:160px;
}

.footer_country_selector.active .footer_country_list {
  display: block;
}

ul.footer_country_list li{
height:30px;
} 

ul.footer_country_list li a{
color: #005799;
} 

/* Setinha no rodapé (pseudoelemento) */
.footer_country_list::before {
  content: "";
  position: absolute;
  bottom: -12px; /* Ajusta a seta para a parte inferior */
  right: 10px;
  border-width: 12px 12px 0 12px;
  border-style: solid;
  border-color: #333 transparent transparent transparent; /* Cor da seta */
}
.footer_country_selector.active .footer_country_list {
  display: block;
}

/* Responsividade para mobile */
@media (max-width: 768px) {
  .footer_columns {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer_calendars_wrapper {
    flex-direction: column;
    width: 100%; /* O bloco de calendários ocupa a largura total no mobile */
  }

  .footer_calendars_left,
  .footer_calendars_right {
    width: 100%;
  }

  .footer_column_right {
    text-align: left;
    width: 100%;
    margin-top:20px;
  }

  .footer_logo_country {
    align-items: flex-start;
  }

  .footer_calendars_wrapper ul li,
  .footer_column ul li {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    min-height: 30px;
  }

  .footer_info {
    padding-top: 10px;
  }
  
  
  
}








/* Responsividade para intermediários */
/* Estilos específicos para dispositivos móveis */
@media (max-width: 768px) {
  /* Ajustar a posição e estilo da lista de países */
  .country-list {
    position: fixed;
    top: 42px; /* Ajuste conforme a altura do seu header */
    left: 0;
    width: 100%;    
    z-index: 1000;
    display: none; /* Escondido por padrão */
    padding-top: 0px; /* Espaço para a setinha */    
    margin-left: 0px;
  }

  /* Mostrar a lista quando o seletor estiver ativo */
  .country-selector.active .country-list {
    display: flex; /* Mostrar como flex */
    flex-wrap: wrap;
  }

  /* Organizar os itens em duas colunas somente quando ativo */
  .country-selector.active .country-list li {
    width: 50%;
    box-sizing: border-box;
    padding: 0px;
    padding-left:10px;
  }

  /* Ajustes adicionais para links */
  .country-list li a {
    display: block;
    color: #005799;
    text-decoration: none;
    height:35px;
    line-height:35px;
  }

  .country-list li a:hover {
  background:#DDDDDD;
  }


.country-list::before {
left:230px;
}

.country-list::after {
left:231px;
}


  .footer_country_list {
  right:auto;
  left:0px;  
  }
  
  .footer_country_list::before {
  right:55px;
  }
  


}


h1{font-family: 'Futura TS Heavy', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;font-size:40px; text-align:center;margin-top:20px;}
h2.subtitulo{color:#777;font-size:18px;}
h2.subtitulo::after {display: none;}


@media (max-width: 768px) {
h1{font-size:30px;}
h2.subtitulo{font-size:15px;text-align:center;}
}


/* Estilo para a página ativa */
.menu a.active {
    background-color: #004080; /* Azul mais escuro para indicar a página ativa */
    border-radius: 5px; /* Bordas arredondadas (opcional) */    
}









 /* Estilo do container do menu lateral */
    .menu_lateral_container {
        width: 100%;
        background-color: #005799;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }



    /* Título do menu lateral */
.menu_lateral_titulo {
    font-size: 18px;
    color: rgb(255, 255, 255);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgb(168, 168, 168);
}
    /* Lista do menu lateral */
    .menu_lateral_lista {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu_lateral_lista li {
        margin-bottom: 10px;
    }

    /* Links do menu lateral */
    .menu_lateral_lista a {
        text-decoration: none;
        color: #fff;
        font-size: 16px;
        display: block;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.3s, color 0.3s;
    }

    .menu_lateral_lista a:hover {
        background-color: #004080;
        color: #fff;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .right-column {
            width: 100%;
            margin-top: 20px;
        }

        .menu_lateral_container {
            padding: 12px;
        }

        .menu_lateral_titulo {
            font-size: 16px;
            color:#fff;
        }

        .menu_lateral_lista a {
            font-size: 14px;
            padding: 6px 10px;
        }
    }
    
    
    
    
/* CSS */

/* Container principal das migalhas */
.migalha_breadcrumb {
  display: flex;
  flex-wrap: wrap;         /* Permite quebra de linha quando necessário */
  margin: 5px 0;
  font-family: sans-serif; /* Ajuste conforme a fonte do seu site */
  font-size: 1rem;
}

/* Lista não ordenada das migalhas */
.migalha_list {
  display: flex;           /* Disposição horizontal dos itens */
  align-items: center;     /* Alinhamento vertical ao centro */
  list-style: none;        /* Remove marcadores padrão */
  padding: 0;
  margin: 0;
}

/* Cada item (LI) na lista */
.migalha_item {
  display: flex;
  align-items: center;
}

/* Links das migalhas */
.migalha_link {
  color: #007BFF;          /* Ajuste de cor */
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

/* Efeito hover nos links */
.migalha_link:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

/* Link ativo (último item, página atual) */
.migalha_active {
  font-weight: bold;       /* Destaca o link atual */
  color: #000;             /* Ajuste conforme a paleta do seu site */
}

/* Separador entre itens (ex: “>”) */
.migalha_separator {
  color: #444;             /* Ajuste conforme a paleta do seu site */
  margin: 0 0.25rem;
}

/* Responsividade simples */
@media (max-width: 600px) {
  .migalha_link {
    padding: 0.5rem 0.5rem;
    font-size: 0.9rem;
  }
}


/* ===== DROPDOWN DO MENU "CALCULADORAS" COM AJUSTES ===== */

/* Posicionamento do dropdown */
.menu-container ul li.dropdown {
  position: relative;
}

/* Estilização do item "Calculadoras" */
.menu-container ul li.dropdown > a {
  display: inline-block;  
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background-color: #005799; /* Mesma cor do menu principal */
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* Adiciona a seta após o rótulo "Calculadoras" */
.menu-container ul li.dropdown > a::after {
  content: "\2228"; /* Código Unicode para seta para baixo (▼) */
  display: inline-block;
  margin-left: 3px;
  font-size: 12px;
  font-weight:500;
  transform: translateY(-1px);
  color:#ccc;
}

/* Efeito de hover no item "Calculadoras" */
.menu-container ul li.dropdown:hover > a {
  background-color: #004080; /* Azul mais escuro */
}

/* Exibe o dropdown ao passar o mouse */
.menu-container ul li.dropdown:hover ul.dropdown-content {
  display: block;
}

/* Estilização do dropdown */
.menu-container ul li.dropdown ul.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 0px); /* Fica colado ao item "Calculadoras" */
  left: 100%;
  transform: translateX(-100%); /* Centraliza com o item */
  background-color: #005799;
  min-width: 220px;
  border-radius: 6px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 0;
  border: 1px solid #6b8fc8;
}

/* Adicionando a setinha do dropdown (menor e mais à direita) */
.menu-container ul li.dropdown ul.dropdown-content::before {
  content: "";
  position: absolute;
  top: -6px; /* Diminuiu ainda mais a altura da seta */
  left: 95%; /* Moveu mais para a direita */
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px; /* Setinha bem menor */
  border-style: solid;
  border-color: transparent transparent #3a5a87 transparent;
}

/* Adicionando a borda na setinha para parecer um balão contínuo */
.menu-container ul li.dropdown ul.dropdown-content::after {
  content: "";
  position: absolute;
  top: -7px; /* Ajustado para acompanhar a borda */
  left: 95%; /* Moveu mais para a direita */
  transform: translateX(-50%);
  border-width: 0 7px 7px 7px; /* Setinha bem menor */
  border-style: solid;
  border-color: transparent transparent #6b8fc8 transparent;
}

/* Estilização dos itens do dropdown */
.menu-container ul li.dropdown ul.dropdown-content li {
  list-style: none;
  padding: 0;
}

/* Estilo dos links dentro do dropdown */
.menu-container ul li.dropdown ul.dropdown-content li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
  border-radius: 4px;
}

/* Borda entre os itens */
.menu-container ul li.dropdown ul.dropdown-content li + li a {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Efeito hover nos itens do dropdown */
.menu-container ul li.dropdown ul.dropdown-content li a:hover {
  background-color: #004080;
}