body{
    margin: 0;
    padding: 0;
    background-image: url('assets/images/FACE\ A\ FACE\ BG\ LISO.png'); /* Substitua pelo nome do seu arquivo de imagem */
    background-size: auto;
    background-position: center;
    background-repeat: repeat-y ;
}
h1, p {
    color: white;
    text-align: center;
    margin-top: 20%;
}

.Titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px;
}

.Titulo img {
    width: auto;
    height: 260px;
}


/*-------------------*/
/*-----Carrossel-----*/
/*-------------------*/


.carrossel {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    margin: 16px;
    margin-bottom: 32px;
    margin-top: 24px;;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
    position: relative;
    height: 450px;
}

.slides img {
    width: 100%;
    max-width: 100%;
    border-radius: 32px;
    margin: 8px;
    overflow: hidden;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.slides img.active {
    display: block;
    position: relative;
    opacity: 1;
}

.btn-carousel {
    position: absolute;
    top: 90%;
    transform: translateY(-50%);
    background-color: #299b2ecc; /* pink-200 with opacity */
    border-radius: 9999px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s ease;
    z-index: 10;
    border:#03741f solid 2px;
}

.btn-prev {
    left: 1.5rem;
}

.btn-next {
    right: 1.5rem;
}

/*----------------*/
/*----Contador----*/
/*----------------*/
.saveTheDate {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px; /* Limita a largura para melhor visualização */
    height: 400px;
    margin: 24px 0px 24px 0px;
}

.saveTheDate h1 {
    font-family: "Anton", sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #ecf5fd; 
    text-align: center;
    margin: 0px;
}
.saveTheDate h2 {
    font-family: "Anton", sans-serif;
    font-weight: 500;
    font-size: 48px;
    color: #ecc8a8; 
    text-align: center;
    margin-top: 0px;
    margin-bottom: 24px;
}

.counter {
    font-family: "Vidaloka", serif;
    text-align: center;
    margin: 34px ; 
    padding: 16px;
    max-width: 400px;
    border: 2px solid;
    border-color: #ecc8a8;
    border-radius: 8px;
}

.counter h2 {
    font-family: "Anton", sans-serif;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 8px;
    color: #ecf5fd;
}

.counter-grid {
    display: grid;
    /* MUDANÇA PRINCIPAL: Ajustado de 2 para 4 colunas */
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0;
    
}

.counter-box {
    border: 2px solid;
    border-color:#ecc8a8 ;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Melhora o alinhamento vertical */
    border-radius: 8px;
}

.counter-box span {
    font-family: "Anton", sans-serif;
    font-weight: 300;
    font-size: 24px;
    color: #ecf5fd;
}

.counter-box small {
    font-family: "Anton", sans-serif;
    font-size: 16px;
    color: #ecf5fd;
}


/*---------------*/
/*----Divisor----*/
/*---------------*/

.secao-verde-topo {
    height: 80px;
    background-color: #01452a; /* Um tom de verde */
    /* --- A MÁGICA ACONTECE AQUI --- */
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 100%);
}
.secao-verde-base {
    height: 80px;
    background-color: #01452a; /* Um tom de verde */
    /* --- A MÁGICA ACONTECE AQUI --- */
    clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}
/*polygon(): Estamos dizendo ao CSS que a nossa forma de recorte é um polígono.
0 0: Começa no ponto superior esquerdo (x=0, y=0).
100% 0: Vai até o ponto superior direito (x=100%, y=0).
100% 80%: Desce até um ponto na borda direita, mas a 80% da altura (x=100%, y=80%).
0 100%: Termina no ponto inferior esquerdo (x=0, y=100%).*/


/*-----------------*/
/*----Sobre Nos----*/
/*-----------------*/

.sobreNos {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px 24px 24px 24px;
    padding: 8px;
    border-radius: 16px;
    max-width: 800px;
}

.sobreNos h2 {
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 40px;
    color: #ecc8a8;
    margin-bottom: 16px;
    padding: 0;
    text-align: center;
    font-family: "Anton", sans-serif;
    font-weight: 400;

}

.sobreNos p {
    margin: 8px;
    font-size: 16px;
    color: #ecf5fd;
    line-height: 1.6;
    text-align: center;
    font-family: "Montserrat", sans-serif; 
    font-weight: 400; 

}

.sobreNos img {
    margin-top: 16px;
    width: auto;
    height: 140px;
}


/*-----------------------*/
/*-- Carrossel Camisas --*/
/*-----------------------*/

.camisas-secao {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px; /* Limita a largura para melhor visualização */
    height: 600px;
}

.camisas-secao h1 {
    font-family: "Anton", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #ecf5fd; 
    text-align: center;
    margin: 0px;
}
.camisas-secao h2 {
    font-family: "Anton", sans-serif;
    font-weight: 500;
    font-size: 48px;
    color: #ecc8a8; 
    text-align: center;
    margin-top: 0px;
    margin-bottom: 24px;
}

.carrossel-camisas {
    background-image: url('assets/images/fumaça/fumaca.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    margin: -50px auto 16px auto;
    border-radius: 16px;
    
}

.slides-camisas {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Transição suave */
    height: 450px; /* Altura fixa para os slides */
}

.camisa-item {
    min-width: 100%; /* Cada item ocupa 100% da largura do contêiner do slide */
    box-sizing: border-box; /* Garante que padding e border não aumentem a largura */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #ecf5fd;
    text-align: center;
}

.camisa-item img {
    max-width: 80%; /* Ajuste o tamanho da imagem da camisa */
    max-height: 300px; /* Altura máxima para as imagens */
    object-fit: contain; /* Redimensiona a imagem para caber sem cortar */
    margin-bottom: 15px;
}
/* Container para a animação do leão */
.leao-animado {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    height: 90px;
    width: auto;
    z-index: 5;
    pointer-events: none;
}

/* A imagem do leão, agora responsável APENAS pela animação */
.carrossel-camisas-leao {
    height: 100%; /* Garante que a imagem preencha o container */
    animation: leao-bounce 3s infinite ease-in-out;
}

@keyframes leao-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.btn-carousel-camisas {
    position: absolute;
    top: 90%;
    transform: translateY(-50%);
    background-color: #299b2ecc; 
    border-radius: 9999px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.3s ease;
    z-index: 10;
    border:#03741f solid 2px;
}
.btn-carousel-camisas img {
    
    height: 20px; /* Ajuste o tamanho da seta conforme necessário */
    width: auto;
}

/* Botão de navegação anterior do carrossel de camisas */
.btn-prev-camisas {
    left: 4.5rem;
}

/* Botão de navegação próximo do carrossel de camisas */
.btn-next-camisas {
    right: 4.5rem;
}

.nuvemTop {
    width: 100%; /* Garante que a imagem da nuvem ocupe a largura total */
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
    margin-bottom: -65px; /* Ajusta para que a nuvem se encaixe bem */
}

/*-------------------*/
/*-------Links-------*/
/*-------------------*/

.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 675px;
    max-width: 600px;
}
.links h1 {
    font-family: "Anton", sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #ecc8a8; 
    text-align: center;
    margin: 32px 0 0 0;
}
.links h2 {
    font-family: "Anton", sans-serif;
    font-weight: 500;
    font-size: 40px;
    color: #ecf5fd; 
    text-align: center;
    margin: -16px 0 16px 0;
}
.links img {
    width: auto;
    height: 64px;
    margin-bottom: 24px;
}


/*-------------------*/
/*-----Inscrição-----*/
/*-------------------*/

.inscricao {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 600px;
    max-height: 700px;
    max-width: 600px;
}
.inscricao h1 {
    font-family: "Anton", sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #ecc8a8; 
    text-align: center;
    margin: 32px 0 0 0;
}
.inscricao h2 {
    font-family: "Anton", sans-serif;
    font-weight: 500;
    font-size: 40px;
    color: #ecf5fd; 
    text-align: center;
    margin: -16px 0 16px 0;
}
.inscricao img {
    width: auto;
    height: 62px;
    margin-bottom: 24px;
}
.imgValor {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px 0px 0px 0px;
}

.imgValor img {
    max-width: 100%; /* ajuste o valor conforme necessário */
    width: 100%;
    height: auto;
    display: block;
}


/* Container principal para posicionar a seta */
.scroll-down-container {
    position: relative; /* Necessário para posicionar as setas dentro dele */
    width: 24px;
    height: 40px;
    cursor: pointer; /* Muda o cursor para indicar que é clicável */
    margin: 20px auto; /* Apenas para centralizar e dar espaço no exemplo */
}

/* Estilo base para cada seta (chevron) */
.chevron {
    position: absolute;
    width: 30px; /* Largura da seta */
    height: 10px; /* Espessura da linha da seta */
    opacity: 0;
    
    /* Aplica a animação */
    animation: bounce 2.2s infinite ease-in-out;
    
    /* Transforma dois retângulos (pseudo-elementos) em um "V" */
    transform: scale(1);
}

.chevron::before,
.chevron::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #ffffff; /* Cor da seta (branco) */
    border-radius: 3px; /* Bordas levemente arredondadas como na imagem */
}

.chevron::before {
    left: 0;
    transform: skew(0deg, 30deg); /* Inclina a parte esquerda */
}

.chevron::after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -30deg); /* Inclina a parte direita */
}

/* Posiciona a segunda seta um pouco abaixo da primeira */
.chevron:nth-child(2) {
    top: 12px; /* Espaçamento entre as duas setas */
    animation-delay: -0.3s; /* Faz a segunda seta animar um pouco depois da primeira */
}

/* Definição da Animação (Keyframes) */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-10px);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    70% {
        transform: translateY(10px);
        opacity: 0;
    }
}



/*-------------------*/
/*-------video-------*/ 
/*-------------------*/

/* Seu container principal, agora centralizado */
.video {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px; /* Aumentei para um bom tamanho de vídeo */
    margin: 20px auto; /* Centraliza na página */
    padding: 0 15px;
}

/* Seu estilo de título H1, sem alterações */
.video h1 {
    font-family: "Anton", sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #ecc8a8; 
    text-align: center;
    margin: 32px 0 0 0;
}

/* Seu estilo de título H2, sem alterações */
.video h2 {
    font-family: "Anton", sans-serif;
    font-weight: 500;
    font-size: 40px;
    color: #ecf5fd; 
    text-align: center;
    margin: -16px 0 16px 0;
}

/* Wrapper que terá a borda e posicionará o botão */
.video-wrapper {
    position: relative;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
}

/* Estilo do vídeo para preencher o wrapper */
.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

/* Esconde o botão por padrão */
.play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s; /* Adiciona uma transição para o efeito de fade */
    opacity: 0; /* Começa com o botão invisível */
}

/* Mostra o botão ao passar o mouse ou tocar na tela */
.video-wrapper:hover .play-pause-btn {
    opacity: 1;
}

/* Faz com que o botão desapareça quando o vídeo está tocando */
.video-wrapper.playing .play-pause-btn {
    opacity: 0;
}
\   
/* Estilo dos ícones SVG dentro do botão (sem alterações) */
.play-pause-btn svg {
    fill: #fff;
    width: 30px;
    height: 30px;
}

/* Lógica de CSS para mostrar/esconder ícones (sem alterações) */
.play-pause-btn .pause-icon {
    display: none;
}
.video-wrapper.playing .play-icon {
    display: none;
}
.video-wrapper.playing .pause-icon {
    display: block;
}

/* ===== ANIMAÇÕES ADICIONADAS ===== */
.hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 0.6s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}




/*-----------------------*/
/*------Localização------*/
/*-----------------------*/

.fumacaTop {
    width: 100%; /* Garante que a imagem da nuvem ocupe a largura total */
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
    margin-bottom: -200px; /* Ajusta para que a nuvem se encaixe bem */
    z-index: 5;
}

.localizacao {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px; /* Limita a largura para melhor visualização */
    height: 700px;
    margin: 0px 0px 24px 0px;
}

.localizacao h1 {
    font-family: "Anton", sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #ecf5fd; 
    text-align: center;
    margin: 0px;
    z-index: 10;
}
.localizacao h2 {
    font-family: "Anton", sans-serif;
    font-weight: 500;
    font-size: 48px;
    color: #ecc8a8; 
    text-align: center;
    margin-top: -16px;
    margin-bottom: 24px;
    z-index: 10;
}
/* Novo container para o mapa e o ícone */
.mapa-container {
    position: relative;
    margin-top: 16px;
    width: 100%;
    display: flex; /* Adicionado para centralizar a imagem do mapa */
    justify-content: center; /* Centraliza horizontalmente a imagem do mapa */
}

/* Garante que o ícone de localização fique na frente do mapa */
.mapa-container a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza o ícone */
    z-index: 15;
}

.mapa-container img {
    max-width: 100%; /* Ajuste a largura do mapa */
    height: auto;
}
.iconLocalizacao {
    width: 120px; /* Ajuste o tamanho do ícone conforme necessário */
    height: auto;
    cursor: pointer; /* Indica que é clicável */
}
.rodape {
    text-align: center;
    padding: 10px 0;
    margin-bottom: 60px;
}
.rodape img {
    height: auto;
    width: 240px;
    margin-top: 16px;
}