/* --- Cores e Estilos Base --- */
:root {
    /* Cores principais baseadas na imagem */
    --color-main-blue: #2d5a8d; /* Azul principal do background */
    --color-header-green: #00a85a; /* Verde da barra de menu superior */
    --color-text-white: white; /* Cor do texto padrão */
    --color-facebook: #3b5998; /* Cor do botão Facebook */
    --color-instagram: #517fa4; /* Cor do botão Instagram */
    --color-whatsapp: #00a896; /* Cor do botão WhatsApp */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f4f4f4; /* Fundo cinza claro para a página */
    line-height: 1.6;
}

/* --- Cabeçalho --- */
header {
    display: flex;
    justify-content: space-between; /* Alinha logo à esquerda e menu à direita */
    align-items: center;
    width: 100%;
    background-color: var(--color-header-green); /* Cor de fundo da barra superior */
    padding: 0 20px; /* Espaçamento lateral */
    position: relative; /* Necessário para o posicionamento do menu mobile */
}

#mainMenu a{
    text-decoration: none;
   
}
#mainMenu{
     display: flex;
    justify-content:space-around;
}

.logo-area {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.logo-img {
    /* Imagem da bandeira. Ajuste o caminho no HTML. */
    height: 70px; 
    object-fit: contain;
    /* Adicione background-image com a bandeira aqui se o logo for apenas texto */
}

.logo-texto h1 {
    color: var(--color-text-white);
    font-size: 2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-left: -50px; /* Ajuste para o texto 'Miguel Alcantra' sobre a bandeira */
}

.logo-texto p {
    color: var(--color-text-white);
    font-size: 0.9em;
    margin-left: -50px; /* Ajuste para o texto 'Deputado Estadual' sobre a bandeira */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Navegação Principal (Desktop) --- */
nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end; /* Alinha os itens do menu à direita */
    padding: 0;
}

#menu a{

}

nav ul li {
    position: relative; /* Para os dropdowns */
}

nav ul li a {
    color: var(--color-text-white);
    text-decoration: none;
    padding: 20px 15px; /* Preenchimento dos itens do menu */
    display: block;
    font-weight: bold;
    transition: background-color 0.3s;
}

nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown Menu */
.dropdown-content {
    display: flex; /* Esconde por padrão */
    position: absolute;
    background-color: var(--color-header-green); /* Fundo do dropdown */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10; /* Garante que fique acima de outros elementos */
    top: 100%; /* Posiciona abaixo do item pai */
    left: 0;
}

.dropdown-content a {
    color: var(--color-text-white);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap; /* Impede que o texto quebre linha */
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.dropdown:hover .dropdown-content {
    display: block; /* Mostra o dropdown ao passar o mouse */
}

/* Botão de menu hamburguer (escondido por padrão no desktop) */
.menu-toggle {
    display: none;
}

/* --- Carrossel --- */
main {
    background-color: var(--color-main-blue); /* Fundo azul do carrossel */
    padding: 0;
    min-height: 400px; /* Altura mínima para o carrossel */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-container {
    position: relative;
    overflow: hidden; /* Esconde as partes das imagens que estão fora */
    width: 100%;
    max-width: 1200px; /* Largura máxima para o carrossel */
    height: 500px; /* Altura do carrossel. Ajuste conforme suas imagens. */
}

.carousel-track {
    display: flex;
    /* Ajustado para ter 100% da largura VISÍVEL por slide. */
    /* Se você tem 3 slides, a largura total do track deve ser 300% do container */
    width: 300%; 
    height: 100%;
    transition: transform 0.5s ease-in-out; /* Transição suave para o slide */
}

.slide {
    /* Importante: Cada slide deve ocupar 100% da largura do contêiner visível */
    /* E como o track tem 300%, cada slide tem 100%/3 = 33.333% da largura do track */
    width: calc(100% / var(--total-slides, 3)); /* Ajuste dinâmico se tiver mais slides */
    flex-shrink: 0; /* Impede que os slides diminuam */
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir o espaço, cortando se necessário */
    object-position: center top; /* Alinha a parte superior da imagem ao topo */
}

/* Botões de navegação (setas) do carrossel */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente */
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    background-color: rgba(0,0,0,0.5); /* Fundo semi-transparente */
    border: none;
    user-select: none;
    z-index: 5;
}

.prev {
    left: 0;
    border-radius: 0 3px 3px 0;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* --- Rodapé --- */
footer {
    background-color: var(--color-main-blue); /* Fundo do rodapé */
    color: var(--color-text-white);
    padding: 20px 0;
    text-align: center;
    border-top: 5px solid var(--color-header-green); /* Borda superior verde */
}

.footer-buttons {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    gap: 10px; /* Espaço entre os botões */
    margin-bottom: 15px;
}

.btn-social {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--color-text-white);
    border-radius: 5px;
    font-weight: bold;
    transition: opacity 0.3s;
}

.btn-social i {
    margin-right: 8px; /* Espaço entre o ícone e o texto */
    font-size: 1.2em;
}

.btn-social:hover {
    opacity: 0.8; /* Efeito de opacidade ao passar o mouse */
}

.btn-facebook {
    background-color: var(--color-facebook);
}

.btn-instagram {
    background-color: var(--color-instagram);
}

.btn-whatsapp {
    background-color: var(--color-whatsapp);
}

footer p {
    font-size: 0.9em;
    opacity: 0.8;
}

/* --- Media Queries (Responsividade) --- */

/* Para telas menores que 900px (tablets e smartphones) */
@media (max-width: 900px) {
    header {
        padding: 0 15px;
    }

    .logo-texto h1 {
        font-size: 1.5em; /* Reduz o tamanho do título */
        margin-left: -30px; /* Ajuste fino do logo */
    }
    .logo-texto p {
        font-size: 0.8em; /* Reduz o tamanho do subtítulo */
        margin-left: -30px; /* Ajuste fino do logo */
    }

    /* Mostra o botão de menu hamburguer */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--color-text-white);
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
        order: 2; /* Move o botão para o final do cabeçalho */
    }

    /* Oculta o menu de navegação padrão e o transforma em vertical */
    nav {
        order: 3; /* Faz o menu aparecer abaixo do logo e botão */
        width: 100%;
        position: absolute;
        top: 90px; /* Posiciona abaixo do cabeçalho */
        left: 0;
        background-color: var(--color-header-green);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 9;
        display: none; /* Esconde o menu por padrão no mobile */
    }
    
    /* Mostra o menu quando a classe 'active' é adicionada via JS */
    nav ul.active {
        display: flex;
        flex-direction: column; /* Itens do menu em coluna */
        width: 100%;
        text-align: left;
        padding: 0;
    }

    nav ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    nav ul li a {
        padding: 15px 20px;
    }

    /* Dropdown no modo Mobile */
    .dropdown-content {
        position: static; /* Abre no fluxo normal do documento */
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        box-shadow: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Carrossel */
    .carousel-container {
        height: 300px; /* Reduz a altura do carrossel em mobile */
    }
    
    /* Rodapé */
    .footer-buttons {
        flex-direction: column; /* Botões em coluna no mobile */
        align-items: center;
    }

    .btn-social {
        width: 90%; /* Botões mais largos */
        max-width: 300px;
        justify-content: center;
    }
}
#carouselTrack {
  display: flex;
  transition: transform 0.6s ease; /* Faz a transição suave */
  width: 100%;
}

.slide {
  min-width: 100%; /* Cada slide ocupa 100% da largura */
  flex-shrink: 0;
}