/* Resetando margens e preenchimentos padrão de todos os elementos */

* {

    margin: 0; /* Remove margens padrão */

    padding: 0; /* Remove preenchimentos padrão */

    box-sizing: border-box; /* Inclui borda e padding no cálculo do tamanho */

}



/* Definição do fundo da página com gradiente e fonte padrão */

body {

    background: linear-gradient(90deg, #ffffff, #89bcff, #357ac2); /* Fundo com gradiente */

    font-family: 'Simonetta', cursive; /* Fonte principal */

    text-align: center; /* Centraliza o texto */

    overflow-x: hidden; /* Esconde rolagem horizontal */

}



/* Responsividade para telas muito pequenas */

@media screen and (max-width: 375px) {

    .body-container {

        width: 100%; /* Ocupa toda a largura */

        padding: 0; /* Remove padding */

        min-width: 100%; /* Garante largura mínima */

    }

}



/* Container principal para centralizar os elementos */

.principal-container {

    display: flex; /* Usa flexbox */

    flex-direction: column; /* Coloca elementos em coluna */

    align-items: center; /* Centraliza horizontalmente */

    justify-content: center; /* Centraliza verticalmente */

    padding: 0; /* Sem padding */

}



/* Estilização do logotipo */

.logo-container img {

    max-width: 180px; /* Largura máxima da imagem */

    height: auto; /* Altura automática */

}



/* Estilização do menu de navegação */

.navegacao-container {

    background-color: black; /* Fundo preto */

    padding: 10px 0; /* Espaçamento interno */

    width: 100vw; /* Largura total da viewport */

    border-radius: 0; /* Sem borda arredondada */

    margin-top: 10px; /* Espaço acima */

}



/* Ícone do menu (hambúrguer) */

.menu-toggle {

    display: none; /* Esconde por padrão (mostra só em mobile) */

    font-size: 32px; /* Tamanho do ícone */

    cursor: pointer; /* Cursor de ponteiro */

    color: #e4e4e4; /* Cor do ícone */

    user-select: none; /* Impede seleção do texto */

}



/* Responsividade para o menu e navegação */

@media screen and (max-width: 768px) {

    .menu-toggle {

        display: block; /* Exibe o ícone em telas pequenas */

        margin-right: 80%; /* Margem direita para posicionamento */

        word-wrap: none; /* Impede quebra de linha */

        font-size: 32px; /* Tamanho da fonte do ícone */

        cursor: pointer; /* Cursor de ponteiro ao passar o mouse */

        color: #e4e4e4; /* Cor do texto */

        user-select: none; /* Impede a seleção do texto */

        z-index: 20; /* Z-index para posicionamento */

        position: relative; /* Posicionamento relativo */

    }

    .navegacao-lista {

        display: flex; /* Exibe a lista de navegação como flexbox */

        flex-direction: column; /* Direção da coluna */

        gap: 15px; /* Espaçamento entre os itens */

        background-color: #f0f0f0; /* Cor de fundo */

        position: fixed; /* Posicionamento fixo */

        top: 50%; /* Posicionamento vertical */

        left: 50%; /* Posicionamento horizontal */

        transform: translate(-50%, -50%) scale(0.95); /* Centraliza e escala */

        z-index: 9; /* Z-index para posicionamento */

        padding: 20px 30px; /* Preenchimento */

        border-radius: 12px; /* Bordas arredondadas */

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Sombra */

        visibility: hidden; /* Esconde o menu */

        opacity: 0; /* Transparente */

        pointer-events: none; /* Não interage */

        transition: opacity 0.3s, transform 0.3s; /* Transição suave */

        min-width: 200px; /* Largura mínima */

        align-items: center; /* Centraliza itens */

    }

    .navegacao-lista.ativa {

        visibility: visible; /* Mostra o menu */

        opacity: 1; /* Opacidade total */

        pointer-events: auto; /* Permite interação */

        transform: translate(-50%, -50%) scale(1); /* Escala normal */

    }

}



/* Estilo da lista de navegação */

.navegacao-lista {

    list-style: none; /* Remove marcadores */

    display: flex; /* Exibe como flex */

    justify-content: center; /* Centraliza horizontalmente */

    gap: 15px; /* Espaçamento entre itens */

}

.navegacao-item {

    display: inline; /* Exibe em linha */

}

.navegacao-link {

    font-family: "Simonetta", serif; /* Fonte personalizada */

    font-weight: 400; /* Peso normal */

    text-decoration: none; /* Sem sublinhado */

    color: rgb(255, 255, 255); /* Cor do texto */

    font-size: 18px; /* Tamanho da fonte */

    padding: 8px 12px; /* Espaçamento interno */

    position: relative; /* Para o efeito do ::after */

}

.navegacao-lista.ativa .navegacao-link {

    color: #000000; /* Cor do texto quando o menu está ativo */

}

.navegacao-link:hover {

    background-color: transparent; /* Sem fundo ao passar o mouse */

}

.navegacao-link::after {

    content: ""; /* Cria um pseudo-elemento */

    display: block; /* Exibe como bloco */

    width: 0; /* Largura inicial */

    height: 3px; /* Altura do efeito */

    background-color: #357ac2; /* Cor do efeito */

    transition: width 0.3s ease; /* Transição suave */

    position: absolute; /* Posição absoluta */

    bottom: -5px; /* Distância do fundo */

    left: 50%; /* Centraliza horizontalmente */

    transform: translateX(-50%); /* Centraliza */

}

.navegacao-link:hover::after {

    width: 100%; /* Efeito de sublinhado ao passar o mouse */

}



/* Seção de introdução */

.introducao-container {

    width: 100%; /* Ocupa toda a largura */

    text-align: center; /* Centraliza o texto */

}

.introducao-titulo {

    font-size: 40px; /* Tamanho do título */

    text-shadow:

      0 2px 8px rgba(0,0,0,0.18),   /* sombra principal suave */

      0 1px 0 #000000,                  /* brilho sutil em cima */

      2px 2px 0 rgba(63,133,198,0.10); /* leve sombra azul */

    font-family: 'Arial', sans-serif; /* Fonte do título */

    color: #1d5b95; /* Cor do título */

}

.introducao-texto {

    font-family: 'Simonetta', cursive; /* Fonte do texto */

    font-size: 18px; /* Tamanho da fonte */

    color: black; /* Cor do texto */

    margin-top: 10px; /* Espaço acima */

}



/* Responsividade para introdução */

@media screen and (max-width:375px) {

    .introducao-container {

        padding: 40px 40px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 32px; /* Título menor */

    }

    .introducao-texto {

        font-size: 16px; /* Texto menor */

    }

}

@media screen and (max-width: 1024px) {

    .introducao-container {

        padding: 40px 40px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 32px;    /* Tamanho do título */

    }

    .introducao-texto {

        font-size: 16px;    /* Tamanho do texto */

    }

}

@media screen and (max-width: 768px) {

    .introducao-container {

        padding: 40px 40px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 32px; /* Tamanho do título */

    }

    .introducao-texto {

        font-size: 16px; /* Tamanho do texto */

    }

}

@media screen and (max-width: 480px) {

    .introducao-container { 

        padding: 30px 10px; /* Espaçamento interno */

    }

    .introducao-titulo {

        font-size: 28px; /* Tamanho do título */

    }

    .introducao-texto {

        font-size: 14px; /* Tamanho do texto */

    }

}



/* Container principal da galeria */

main {

    max-width: 1200px; /* Largura máxima */

    margin: 10px auto 0 auto; /* Centraliza e espaça do topo */

    padding: 0 2vw; /* Espaçamento lateral responsivo */

}



/* Subtítulo da galeria */

.subtitulo-galeria {

    margin-top: 30px; /* Espaço acima */

}



/* Galeria Flex antiga (para fallback ou grid) */

.galeria-container {

    display: flex; /* Flexbox para layout */

    flex-wrap: wrap; /* Permite quebra de linha */

    gap: 30px; /* Espaço entre itens */

    justify-content: center; /* Centraliza horizontalmente */

}

.galeria-item {

    background: #fff; /* Fundo branco */

    border-radius: 10px; /* Bordas arredondadas */

    box-shadow: 0 2px 10px #0001; /* Sombra */

    overflow: hidden; /* Esconde overflow */

    width: 260px; /* Largura fixa */

    display: flex; /* Flexbox */

    flex-direction: column; /* Coloca elementos em coluna */

    align-items: center; /* Centraliza horizontalmente */

    transition: transform .2s; /* Animação suave */

}

.galeria-item:hover {

    transform: scale(1.04); /* Aumenta ao passar o mouse */

    box-shadow: 0 4px 18px #0002; /* Sombra maior */

}

.galeria-item img {

    width: 100%; /* Largura total */

    height: 180px; /* Altura fixa */

    object-fit: cover; /* Cobre o espaço mantendo proporção */

    display: block; /* Exibe como bloco */

    cursor: pointer; /* Cursor de ponteiro */

    transition: filter .2s; /* Animação suave no filtro */

}

.galeria-item img:hover {

    filter: brightness(0.95) blur(2px); /* Efeito ao passar o mouse */

}

.galeria-legenda {

    padding: 12px; /* Espaçamento interno */

    font-size: 1.1rem; /* Tamanho da fonte */

    color: #234; /* Cor do texto */

    font-family: 'Simonetta', cursive; /* Fonte */

    background: #f6f8fa; /* Fundo claro */

    width: 100%; /* Largura total */

    box-sizing: border-box; /* Inclui borda e padding no cálculo */

    text-align: center; /* Centraliza texto */

}



/* Responsividade para galeria flex */

@media (max-width: 700px) {

    .galeria-container {

        gap: 16px; /* Espaço menor */

    }

    .galeria-item {

        width: 90vw; /* Largura responsiva */

        max-width: 320px; /* Largura máxima */

    }

    .galeria-item img {

        height: 40vw; /* Altura responsiva */

        max-height: 230px; /* Altura máxima */

    }

}



/* ================ */

/*  SWIPER GALERIA  */

/* ================ */



.swiper {

    width: 100%; /* Largura total */

    padding-bottom: 30px; /* Espaço abaixo */

    margin-top: 18px; /* Espaço acima do carrossel */

}



.swiper-externo-nav {

    display: flex; /* Flexbox */

    align-items: center; /* Centraliza verticalmente */

    justify-content: center; /* Centraliza horizontalmente */

    gap: 8px; /* Espaço entre elementos */

    position: relative; /* Posição relativa */

    margin-bottom: 10px; /* Espaço abaixo */

}

.swiper-externo-nav .swiper {

    flex: 1 1 0%; /* Flex grow/shrink/basis */

    min-width: 0; /* Largura mínima */

}



/* Slide do Swiper */

.swiper-slide {

    display: flex; /* Flexbox */

    flex-direction: column; /* Coloca elementos em coluna */

    align-items: center; /* Centraliza horizontalmente */

    background: #fff; /* Fundo branco */

    border-radius: 14px; /* Bordas arredondadas */

    border: 3px solid #e4e4e4; /* Borda cinza */

    box-shadow: 0 2px 12px #0001; /* Sombra */

    overflow: hidden; /* Esconde overflow */

    padding: 10px; /* Espaçamento interno */

    transition: box-shadow .15s, transform .12s; /* Animação suave */

}

.swiper-slide:hover {

    box-shadow: 0 6px 24px #0002; /* Sombra maior ao passar o mouse */

    transform: scale(1.02); /* Aumenta levemente */

}

.swiper-slide img {

    width: 100%; /* Largura total */

    max-height: 220px; /* Altura máxima */

    object-fit: cover; /* Cobre o espaço mantendo proporção */

    border-radius: 12px; /* Bordas arredondadas */

    border: 2px solid #d3d3d3; /* Borda cinza */

    margin-bottom: 8px; /* Espaço abaixo */

    background: #fff; /* Fundo branco */

    cursor: pointer; /* Cursor de ponteiro */

    transition: box-shadow .14s; /* Animação suave */

}

.swiper-slide img:hover {

    box-shadow: 0 4px 18px #0003; /* Sombra maior ao passar o mouse */

}

.galeria-legenda {

    font-size: 1.1rem; /* Tamanho da fonte */

    color: #234; /* Cor do texto */

    text-align: center; /* Centraliza texto */

    background: #f9f9f9; /* Fundo claro */

    width: 100%; /* Largura total */

    padding: 6px 0 2px 0; /* Espaçamento interno */

    border-radius: 0 0 12px 12px; /* Bordas arredondadas embaixo */

    font-weight: 500; /* Peso da fonte */

}



/* Responsividade para swiper */

@media (max-width: 900px) {

    .swiper-slide img {

        max-height: 150px; /* Altura máxima menor */

    }

    .swiper-slide {

        padding: 5px; /* Espaçamento menor */

    }

}

@media (max-width: 600px) {

    .swiper-slide img {

        max-height: 120px; /* Altura máxima ainda menor */

    }

    .galeria-legenda {

        font-size: 1rem; /* Fonte menor */

    }

}

.swiper-pagination {

    display: none !important; /* Esconde paginação padrão do Swiper */

}



/* Botões externos do Swiper (seta escura, sem fundo) */

.swiper-button-prev,

.swiper-button-next {

    position: static !important; /* Remove posicionamento absoluto */

    width: 44px; /* Largura do botão */

    height: 44px; /* Altura do botão */

    border-radius: 50%; /* Botão redondo */

    background: transparent; /* Remove fundo */

    box-shadow: none;        /* Remove sombra */

    border: none; /* Sem borda */

    color: #222;             /* Cor escura da seta */

    font-size: 2rem; /* Tamanho da seta */

    display: flex; /* Flexbox */

    align-items: center; /* Centraliza verticalmente */

    justify-content: center; /* Centraliza horizontalmente */

    opacity: 1; /* Totalmente visível */

    transition: color 0.2s, transform 0.17s; /* Transição suave */

    cursor: pointer; /* Cursor de ponteiro */

    outline: none; /* Remove contorno */

    margin: 0 12px; /* Espaço lateral */

}

.swiper-button-prev:hover,

.swiper-button-next:hover,

.swiper-button-prev:focus,

.swiper-button-next:focus {

    color: #357ac2;          /* Azul escuro ao passar o mouse */

    background: transparent; /* Garante que não aparece fundo */

    box-shadow: none;        /* Sem sombra */

    transform: scale(1.1);   /* Aumenta levemente */

}

.swiper-button-prev:after,

.swiper-button-next:after {

    font-size: 2rem; /* Tamanho da seta */

    font-weight: bold; /* Negrito */

    color: inherit; /* Herda cor */

    text-shadow: none; /* Sem sombra */

}



/* Rodapé */

.rodape {

    width: 100%; /* Largura total */

    background-color: #002557; /* Fundo azul escuro */

    display: flex; /* Flexbox */

    justify-content: space-between; /* Espaço entre colunas */

    align-items: center; /* Centraliza verticalmente */

    padding: 20px 40px 10px 40px; /* Espaçamento interno */

    color: white; /* Cor do texto */

    font-size: 16px; /* Tamanho da fonte */

    font-weight: bold; /* Negrito */

    border-top: 2px solid #444; /* Linha superior */

    box-sizing: border-box; /* Inclui borda e padding no cálculo */

    flex-wrap: wrap; /* Permite quebra de linha */

}

.paragrafo1,

.paragrafo2,

.icones-centro {

    flex: 1; /* Cada coluna ocupa 1 parte */

}

.paragrafo1 {

    text-align: left; /* Alinha à esquerda */

}

.paragrafo2 {

    text-align: right; /* Alinha à direita */

}

.icones-centro {

    display: flex; /* Flexbox */

    justify-content: center; /* Centraliza horizontalmente */

    align-items: center; /* Centraliza verticalmente */

    gap: 25px; /* Espaço entre ícones */

    font-size: 26px; /* Tamanho dos ícones */

}

.icones-centro a {

    color: white; /* Cor dos ícones */

    text-decoration: none; /* Sem sublinhado */

    transition: color 0.3s; /* Transição suave */

}

.icones-centro a:hover {

    color: #00bfff; /* Cor ao passar o mouse */

}

/* Navegação no final */

.nav-final {

    width: 100%; /* Largura total */

    margin-top: 20px; /* Espaço acima */

    text-align: center; /* Centraliza */

}

.nav-final ul {

    list-style: none; /* Remove marcadores da lista */

    padding: 0; /* Remove padding */

    margin: 0; /* Remove margem */

    display: flex; /* Flexbox */

    flex-wrap: wrap; /* Permite quebra de linha */

    justify-content: center; /* Centraliza */

    gap: 20px; /* Espaço entre itens */

    font-weight: normal; /* Remove negrito da fonte */

}

.nav-final a { /* Link estilizado */

    color: white; /* Cor do texto */

    text-decoration: none; /* Remove sublinhado */

    font-size: 14px;    /* Tamanho da fonte */

    transition: color 0.3s; /* Transição suave para a cor */

}

.nav-final a:hover { /* Efeito ao passar o mouse */

    color: #00bfff; /* Cor azul ao passar o mouse */

}

/* Responsivo */

@media (max-width: 768px) {

    .rodape {

        flex-direction: column; /* Empilha colunas */

        text-align: center; /* Centraliza texto */

    }

    .paragrafo1,

    .paragrafo2,

    .icones-centro {

        flex: unset; /* Remove flex */

        width: 100%; /* Ocupa toda a largura */

        margin: 10px 0; /* Espaço vertical */

        text-align: center; /* Centraliza texto */

    }

    .nav-final ul {

        flex-direction: column; /* Empilha links */

        gap: 10px; /* Espaço menor */

    }

}