/* Reset básico para remover margens e paddings padrão do navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura */
}

/* Estilo base para o corpo da página */
body {
    font-family: Arial, sans-serif; /* Fonte padrão para todo o site */
    line-height: 1.6; /* Espaçamento entre linhas para melhor legibilidade */
    color: #333; /* Cor do texto principal */
    background-color: #f5f5f5; /* Cor de fundo clara */
}

/* Container principal para centralizar e limitar largura do conteúdo */
.container {
    max-width: 1200px; /* Largura máxima do container */
    margin: 0 auto; /* Centraliza o container horizontalmente */
    padding: 0 20px; /* Espaçamento interno lateral */
}

/* Seção hero (cabeçalho principal) com imagem de fundo */
.hero-section {
    /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400"><rect fill="%234a90e2" width="1200" height="400"/><path fill="%23ffffff" opacity="0.1" d="M0,200 Q300,100 600,200 T1200,200 L1200,400 L0,400 Z"/></svg>'); */
    background-color: #fff;
    /* Gradiente escuro sobre imagem de fundo azul simulada */
    background-size: cover; /* Cobre toda a área disponível */
    background-position: center; /* Centraliza a imagem de fundo */
    color: white; /* Texto branco para contraste */
    text-align: center; /* Centraliza o texto */
    padding: 100px 0; /* Espaçamento vertical interno */
    min-height: 300px; /* Altura mínima da seção */
    display: flex; /* Flexbox para centralização */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
}

/* Conteúdo dentro da seção hero */
.hero-content h1 {
    font-size: 2.5rem; /* Tamanho grande para o título principal */
    font-weight: bold; /* Texto em negrito */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra no texto para melhor legibilidade */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Logo padrão (desktop) */
.logo {
  max-width: 620px;   /* largura máxima */
  height: auto;       /* mantém proporção */
  display: block;
}

/* Tablets */
@media (max-width: 1024px) {
  .logo {
    max-width: 580px;
  }
}

/* Celulares */
@media (max-width: 768px) {
  .logo {
    max-width: 440px;
  }
}

/* Telas muito pequenas */
@media (max-width: 580px) {
  .logo {
    max-width: 320px;
  }
}


/* Seção de contato do coordenador */
.contact-section {
    background-color: #AB7E2C; /* Fundo azul escuro */
    color: white; /* Texto branco */
    text-align: center; /* Centraliza o texto */
    padding: 30px 0; /* Espaçamento vertical */
}

/* Título da seção de contato */
.contact-section h2 {
    font-size: 1.8rem; /* Tamanho médio-grande */
    font-weight: bold; /* Negrito */
    margin: 0; /* Remove margem padrão */
}

/* Conteúdo principal da página */
.main-content {
    background-color: white; /* Fundo branco */
    padding: 40px 0; /* Espaçamento vertical */
}

/* Estilo para seções individuais */
.itinerary-section,
.arrival-section,
.return-section {
    margin-bottom: 50px; /* Espaçamento entre seções */
    padding: 30px; /* Espaçamento interno */
    background-color: #fff; /* Fundo branco */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Títulos das seções */
.section-title {
    color: #e74c3c; /* Cor vermelha para destaque */
    font-size: 1.5rem; /* Tamanho médio */
    font-weight: bold; /* Negrito */
    margin-bottom: 25px; /* Espaçamento inferior */
    padding-bottom: 10px; /* Espaçamento interno inferior */
    border-bottom: 2px solid #e74c3c; /* Linha inferior vermelha */
    position: relative; /* Para posicionamento do link */
}
.section-title1 {
    color: #2F5D50; /* Cor vermelha para destaque */
    font-size: 1.5rem; /* Tamanho médio */
    font-weight: bold; /* Negrito */
    margin-bottom: 25px; /* Espaçamento inferior */
    padding-bottom: 10px; /* Espaçamento interno inferior */
    border-bottom: 2px solid #2F5D50; /* Linha inferior vermelha */
    position: relative; /* Para posicionamento do link */
}


/* Subtítulos */
.subsection-title {
    color: #2c3e50; /* Cor azul escura */
    font-size: 1.3rem; /* Tamanho médio */
    font-weight: bold; /* Negrito */
    margin: 30px 0 20px 0; /* Espaçamentos superior e inferior */
}

/* Link de cópia ao lado dos títulos */
.copy-link {
    color: #3498db; /* Cor azul */
    text-decoration: none; /* Remove sublinhado */
    margin-left: 10px; /* Espaçamento à esquerda */
    font-size: 0.8rem; /* Tamanho menor */
    opacity: 0.7; /* Transparência */
}

/* Efeito hover no link de cópia */
.copy-link:hover {
    opacity: 1; /* Remove transparência no hover */
    color: #2980b9; /* Cor azul mais escura */
}

/* Listas de horários */
.schedule-list {
    list-style: none; /* Remove marcadores padrão */
    padding: 0; /* Remove padding padrão */
}

/* Itens da lista de horários */
.schedule-list li {
    padding: 12px 0; /* Espaçamento vertical */
    border-bottom: 1px solid #ecf0f1; /* Linha divisória sutil */
    display: flex; /* Flexbox para alinhamento */
    align-items: center; /* Alinha verticalmente */
}

/* Remove a linha do último item */
.schedule-list li:last-child {
    border-bottom: none;
}

/* Estilo para os horários */
.time {
    background-color: #e74c3c; /* Fundo vermelho */
    color: white; /* Texto branco */
    padding: 4px 8px; /* Espaçamento interno */
    border-radius: 4px; /* Bordas arredondadas */
    font-weight: bold; /* Negrito */
    margin-right: 15px; /* Espaçamento à direita */
    min-width: 60px; /* Largura mínima para alinhamento */
    text-align: center; /* Centraliza o texto */
    font-size: 0.9rem; /* Tamanho ligeiramente menor */
}
.time1 {
    background-color: #2F5D50; /* Fundo vermelho */
    color: white; /* Texto branco */
    padding: 4px 8px; /* Espaçamento interno */
    border-radius: 4px; /* Bordas arredondadas */
    font-weight: bold; /* Negrito */
    margin-right: 15px; /* Espaçamento à direita */
    min-width: 60px; /* Largura mínima para alinhamento */
    text-align: center; /* Centraliza o texto */
    font-size: 0.9rem; /* Tamanho ligeiramente menor */
}

/* Listas de chegada (sem horários) */
.arrival-list {
    list-style: none; /* Remove marcadores padrão */
    padding: 0; /* Remove padding padrão */
}

/* Itens da lista de chegada */
.arrival-list li {
    padding: 10px 0; /* Espaçamento vertical */
    border-bottom: 1px solid #ecf0f1; /* Linha divisória sutil */
    padding-left: 20px; /* Espaçamento à esquerda */
    position: relative; /* Para posicionamento do marcador */
}

/* Marcador personalizado para lista de chegada */
.arrival-list li::before {
    content: "▶"; /* Símbolo de seta */
    color: #3498db; /* Cor azul */
    font-weight: bold; /* Negrito */
    position: absolute; /* Posicionamento absoluto */
    left: 0; /* Alinha à esquerda */
}

/* Remove a linha do último item */
.arrival-list li:last-child {
    border-bottom: none;
}

/* Avisos sobre atrasos */
.warning {
    background-color: #fff3cd; /* Fundo amarelo claro */
    color: #856404; /* Texto amarelo escuro */
    padding: 15px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    border-left: 4px solid #ffc107; /* Borda esquerda amarela */
    margin-top: 20px; /* Espaçamento superior */
    font-style: italic; /* Texto em itálico */
}

/* Rodapé da página */
.footer {
    background-color: #5D5D5E; /* Fundo cinza escuro */
    color: #fff; /* Texto cinza claro */
    text-align: center; /* Centraliza o texto */
    padding: 30px 0; /* Espaçamento vertical */
    margin-top: 50px; /* Espaçamento superior */
}

/* Parágrafos do rodapé */
.footer p {
    margin: 5px 0; /* Espaçamento vertical pequeno */
    font-size: 0.9rem; /* Tamanho menor */
}

/* Links no rodapé */
.footer a {
    color: #3498db; /* Cor azul */
    text-decoration: none; /* Remove sublinhado */
}

/* Efeito hover nos links do rodapé */
.footer a:hover {
    color: #2980b9; /* Cor azul mais escura */
    text-decoration: underline; /* Adiciona sublinhado */
}

/* Responsividade para tablets */
@media (max-width: 768px) {
    /* Ajusta o título principal em telas menores */
    .hero-content h1 {
        font-size: 2rem; /* Tamanho menor */
        padding: 0 20px; /* Espaçamento lateral */
    }
    
    /* Ajusta o título de contato */
    .contact-section h2 {
        font-size: 1.5rem; /* Tamanho menor */
        padding: 0 20px; /* Espaçamento lateral */
    }
    
    /* Reduz espaçamento das seções */
    .itinerary-section,
    .arrival-section,
    .return-section {
        margin-bottom: 30px; /* Espaçamento menor */
        padding: 20px; /* Espaçamento interno menor */
    }
    
    /* Ajusta títulos das seções */
    .section-title {
        font-size: 1.3rem; /* Tamanho menor */
    }
}

/* Responsividade para smartphones */
@media (max-width: 480px) {
    /* Container com menos padding */
    .container {
        padding: 0 15px; /* Espaçamento lateral menor */
    }
    
    /* Título principal ainda menor */
    .hero-content h1 {
        font-size: 1.8rem; /* Tamanho menor */
    }
    
    /* Título de contato menor */
    .contact-section h2 {
        font-size: 1.3rem; /* Tamanho menor */
    }
    
    /* Seções com menos espaçamento */
    .itinerary-section,
    .arrival-section,
    .return-section {
        padding: 15px; /* Espaçamento interno menor */
        margin-bottom: 20px; /* Espaçamento entre seções menor */
    }
    
    /* Horários em layout vertical em telas muito pequenas */
    .schedule-list li {
        flex-direction: column; /* Layout vertical */
        align-items: flex-start; /* Alinha à esquerda */
    }
    
    /* Ajusta margem do horário */
    .time {
        margin-right: 0; /* Remove margem direita */
        margin-bottom: 5px; /* Adiciona margem inferior */
    }
     .time1 {
        margin-right: 0; /* Remove margem direita */
        margin-bottom: 5px; /* Adiciona margem inferior */
    }
}


/* Estilos para a barra de navegação */
.navbar {
    background-color: #34495e; /* Fundo cinza escuro */
    padding: 15px 0; /* Espaçamento vertical */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    position: sticky; /* Fixa no topo durante scroll */
    top: 0; /* Posição no topo */
    z-index: 1000; /* Fica sobre outros elementos */
}

/* ===== NAVBAR ===== */
.navbar {
  background-color: #34495e;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 60px; /* altura mínima p/ alinhar ícone */
}

.navbar .container {
  position: relative; /* referência pro menu-toggle */
}

/* Menu normal no desktop */
.navbar .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* Links */
.navbar a {
  color: #ecf0f1;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
  display: block;
}

.navbar a:hover {
  background-color: #BF9A2E;
  color: white;
  transform: translateY(-2px);
}

.navbar a.active {
  background-color: #e74c3c;
  color: white;
}

/* base: altura e referência */
.navbar { min-height: 60px; }
.navbar .container { position: relative; }

/* Ícone no MEIO da barra quando FECHADO */
.menu-toggle{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 44px; height: 44px;
  display: none;
  align-items: center; justify-content: center;
  font-size: 28px; color: #fff; cursor: pointer;
  z-index: 1001;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){
  .menu-toggle{ display: flex; }

  .navbar .nav-list{
    display: none;
    position: fixed; inset: 0;
    background:#5D5D5E; z-index: 999;
    list-style:none; margin:0; padding:0;

    /* centraliza os links no meio da tela */
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    text-align: center;
  }
  .navbar .nav-list:not(.active){ display: none; }
  .navbar .nav-list.active{ display: flex; }

  .navbar .nav-list li{ margin: 20px 0; }
  .navbar .nav-list a{ font-size: 22px; color:#fff; text-decoration:none; }

  /* QUANDO O MENU ESTÁ ABERTO:
     move o botão para o topo-direito como “✕” */
  .navbar.open .menu-toggle{
    position: fixed;
    left: auto; right: 16px; top: 16px;
    transform: none;
  }
}





/* Estilos para seções de conteúdo das novas páginas */
.service-detail-section,
.about-section,
.contact-form-section,
.contact-info-section {
    margin-bottom: 40px; /* Espaçamento entre seções */
    padding: 30px; /* Espaçamento interno */
    background-color: #fff; /* Fundo branco */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Títulos das seções de conteúdo */
.service-detail-section h2,
.about-section h2,
.contact-form-section h2,
.contact-info-section h2 {
    color: #AB7E2C; /* Cor azul escura */
    font-size: 1.8rem; /* Tamanho grande */
    margin-bottom: 20px; /* Espaçamento inferior */
    border-bottom: 3px solid #3498db; /* Linha inferior azul */
    padding-bottom: 10px; /* Espaçamento interno inferior */
}

/* Subtítulos das seções */
.service-detail-section h3,
.about-section h3,
.contact-info-section h3 {
    color: #e74c3c; /* Cor vermelha */
    font-size: 1.3rem; /* Tamanho médio */
    margin: 25px 0 15px 0; /* Espaçamentos */
}

/* Parágrafos das seções */
.service-detail-section p,
.about-section p,
.contact-form-section p,
.contact-info-section p {
    line-height: 1.7; /* Espaçamento entre linhas */
    margin-bottom: 15px; /* Espaçamento inferior */
    text-align: justify; /* Justifica o texto */
}

/* Listas das seções */
.service-detail-section ul,
.about-section ul {
    margin: 20px 0; /* Espaçamento vertical */
    padding-left: 20px; /* Espaçamento à esquerda */
}

/* Itens das listas */
.service-detail-section li,
.about-section li {
    margin-bottom: 10px; /* Espaçamento entre itens */
    line-height: 1.6; /* Espaçamento entre linhas */
}

/* Estilos para o formulário de contato */
.contact-form {
    max-width: 600px; /* Largura máxima */
    margin: 0 auto; /* Centraliza o formulário */
}

/* Grupos de campos do formulário */
.form-group {
    margin-bottom: 20px; /* Espaçamento entre campos */
}

/* Labels do formulário */
.form-group label {
    display: block; /* Ocupa linha inteira */
    margin-bottom: 5px; /* Espaçamento inferior */
    font-weight: bold; /* Negrito */
    color: #2c3e50; /* Cor azul escura */
}

/* Campos de entrada do formulário */
.form-group input,
.form-group textarea {
    width: 100%; /* Largura total */
    padding: 12px; /* Espaçamento interno */
    border: 2px solid #ddd; /* Borda cinza clara */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 16px; /* Tamanho da fonte */
    font-family: Arial, sans-serif; /* Fonte consistente */
    transition: border-color 0.3s ease; /* Transição da borda */
    box-sizing: border-box; /* Inclui padding na largura */
}

/* Efeito focus nos campos */
.form-group input:focus,
.form-group textarea:focus {
    outline: none; /* Remove outline padrão */
    border-color: #3498db; /* Borda azul no focus */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); /* Sombra azul */
}

/* Botão de envio do formulário */
.btn-submit {
    background-color: #e74c3c; /* Fundo vermelho */
    color: white; /* Texto branco */
    padding: 15px 30px; /* Espaçamento interno */
    border: none; /* Remove borda */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    cursor: pointer; /* Cursor de ponteiro */
    transition: all 0.3s ease; /* Transição suave */
    display: block; /* Ocupa linha inteira */
    margin: 20px auto 0; /* Centraliza e adiciona margem superior */
}

/* Efeito hover no botão */
.btn-submit:hover {
    background-color: #c0392b; /* Vermelho mais escuro */
    transform: translateY(-2px); /* Movimento para cima */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

/* Estilos para informações de contato */
.contact-item {
    margin-bottom: 25px; /* Espaçamento entre itens */
    padding: 20px; /* Espaçamento interno */
    background-color: #f8f9fa; /* Fundo cinza claro */
    border-radius: 5px; /* Bordas arredondadas */
    border-left: 4px solid #3498db; /* Borda esquerda azul */
}

/* Títulos dos itens de contato */
.contact-item h3 {
    margin-top: 0; /* Remove margem superior */
    color: #2c3e50; /* Cor azul escura */
}

/* Links nos itens de contato */
.contact-item a {
    color: #3498db; /* Cor azul */
    text-decoration: none; /* Remove sublinhado */
    font-weight: bold; /* Negrito */
}

/* Efeito hover nos links de contato */
.contact-item a:hover {
    color: #2980b9; /* Azul mais escuro */
    text-decoration: underline; /* Adiciona sublinhado */
}

/* Responsividade para a navegação em dispositivos móveis */
@media (max-width: 768px) {
    /* Navegação em coluna em telas pequenas */
    .navbar ul {
        flex-direction: column; /* Layout vertical */
        gap: 10px; /* Espaçamento menor */
        align-items: center; /* Centraliza itens */
    }
    
    /* Ajusta padding da navegação */
    .navbar {
        padding: 10px 0; /* Espaçamento menor */
    }
    
    /* Formulário em telas menores */
    .contact-form {
        max-width: 100%; /* Largura total */
        padding: 0 15px; /* Espaçamento lateral */
    }
    
    /* Seções com menos padding */
    .service-detail-section,
    .about-section,
    .contact-form-section,
    .contact-info-section {
        padding: 20px; /* Espaçamento interno menor */
        margin-bottom: 25px; /* Espaçamento entre seções menor */
    }
}

/* Responsividade para smartphones */
@media (max-width: 480px) {
    /* Títulos menores em telas pequenas */
    .service-detail-section h2,
    .about-section h2,
    .contact-form-section h2,
    .contact-info-section h2 {
        font-size: 1.5rem; /* Tamanho menor */
    }
    
    /* Subtítulos menores */
    .service-detail-section h3,
    .about-section h3,
    .contact-info-section h3 {
        font-size: 1.2rem; /* Tamanho menor */
    }
    
    /* Seções com ainda menos padding */
    .service-detail-section,
    .about-section,
    .contact-form-section,
    .contact-info-section {
        padding: 15px; /* Espaçamento interno ainda menor */
    }
    
    /* Botão de envio menor */
    .btn-submit {
        padding: 12px 25px; /* Espaçamento interno menor */
        font-size: 14px; /* Fonte menor */
    }
}
/* ===== CORRIGE FUNDO E CENTRALIZA NAVBAR ===== */
.navbar {
  background-color: #5D5D5E;  /* uma cor única */
  height: 60px;               /* altura fixa */
  display: flex;
  align-items: center;        /* centraliza vertical */
  justify-content: center;    /* centraliza horizontal */
  position: sticky;
  top: 0;
  z-index: 1000;
  margin: 0;                  /* remove espaçamentos extras */
  padding: 0;                 /* remove padding que “quebra” a barra */
}

.navbar .container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Ícone hamburguer central */
.menu-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  z-index: 1001;
}
.banner-responsivo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
    box-sizing: border-box;
}

.banner-responsivo img {
    width: 100%;
    max-width: 350px; /* Tamanho padrão */
    height: auto;
    display: block;
    object-fit: contain;
}

/* 🔹 Ajuste especial para telas grandes (desktop) */
@media (min-width: 1024px) {
    .banner-responsivo img {
        max-width: 1024px; /* Diminui no PC */
    }
}

/* 🔹 Ajuste para telas pequenas (mobile) */
@media (max-width: 768px) {
    .banner-responsivo img {
        max-width: 350px; /* Um pouco maior no celular */
    }
}