/* =====================================================
   VARIÁVEIS BASE (CORES DO DESIGN)
===================================================== */
:root {
    --verde: #a8cf45;
    --marrom: #9c7a3c;
    --marrom-escuro: #7b5a2b;
    --texto-marrom: #5a3b1d;
    --texto-claro: #ffffff;
    --texto-suave: #e6dcc5;
}

/* Configuração da Seção */
.home-hero {
    background-color: #927a3d; /* Tom de marrom do modelo */
    position: relative;
    min-height: 680px;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    height: 600px; /* Altura fixa para controle dos absolutos */
}

/* Texto de introdução (Vem aí...) */
.hero-intro {
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
}

.hero-intro h2 {
    color: #3e2b16; /* Marrom escuro */
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

/* Título do Evento (Lado Direito em Branco) */
.hero-event-title {
    position: absolute;
    right: 0;
    top: 180px;
    text-align: center;
    z-index: 10;
    color: #ffffff;
    max-width: 380px;
}

.hero-event-title span {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #c4ce5b;
}

.hero-event-title h1 {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 0.95;
    margin: 0;
}

/* Bloco de Data (Verde) */
.hero-date-box {
    position: absolute;
    left: 0;
    bottom: 80px;
    background-color: #a3d339;
    padding: 15px 20px;
    color: #ffffff;
    z-index: 10;
    min-width: 180px;
    display: flex;              /* Ativa o Flexbox */
    flex-direction: column;     /* Mantém os itens um embaixo do outro (caso tenha dia/mês separados) */
    align-items: center;        /* Centraliza horizontalmente os blocos */
    justify-content: center;    /* Centraliza verticalmente (se houver altura sobrando) */
    text-align: center;         /* Garante que o texto dentro dos blocos também fique centralizado */
}

.hero-date-box .date-main { font-size: 2.5rem; font-weight: 900; line-height: 1; }
.hero-date-box .date-sub { font-size: 1.4rem; font-weight: 700; }
.hero-date-box .date-year { font-size: 1.8rem; font-weight: 900; }
.hero-date-box .date-location {
    color: var(--texto-marrom);
    font-weight: 700;
    margin-top: 10px;
    font-size: 1rem;
}

/* Ilustração Central (FIG01) */
.hero-illustration {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 600px; /* Ajuste conforme FIG01.png */
}

.hero-illustration img {
    width: 100%;
    height: auto;
}

.hero-whatsapp {
    position: fixed;        /* Altera de absolute para fixed */
    right: 30px;           /* Distância da borda direita da tela */
    bottom: 30px;          /* Distância da borda inferior da tela */
    background-color: #a3d339; /* Cor oficial do WhatsApp (opcional, atualizei o verde) */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;         /* Z-index bem alto para ficar acima de todos os elementos */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease; /* Efeito suave ao passar o mouse */
    text-decoration: none; /* Remove sublinhado se for um link <a> */
}

/* Efeito de destaque ao passar o mouse */
.hero-whatsapp:hover {
    transform: scale(1.1);
    background-color: #128c7e;
}

.hero-whatsapp i { font-size: 40px; color: #3e2b16; }

/* Responsivo básico */
@media (max-width: 1100px) {
    .hero-event-title { right: 20px; font-size: 0.8em; }
    .hero-date-box { left: 20px; }
    .hero-illustration { width: 90%; }
}

@media (max-width: 768px) {
    /* 1. Container Principal */
    .home-hero {
        height: auto !important;
        min-height: 100vh; /* Ocupa a tela toda no mobile */
        padding: 40px 0;
    }

    .hero-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto !important;
        padding: 0 20px;
    }

    /* 2. [Vem aí...] - Primeiro da sequência */
    .hero-intro {
        position: static !important;
        margin-bottom: 20px;
        order: 1; /* Garante a ordem no flexbox */
    }

    .hero-intro h2 {
        font-size: 2.2rem;
        text-align: center;
    }

    /* 3. [FIG01] - Segundo da sequência */
    .hero-illustration {
        position: static !important;
        transform: none !important;
        width: 100%;
        max-width: 350px;
        margin: 20px auto;
        order: 2;
        display: flex;
        justify-content: center;
    }

    /* 4. [Título do Evento] - Terceiro da sequência */
    .hero-event-title {
        position: static !important;
        text-align: center !important;
        max-width: 100% !important;
        margin-bottom: 30px;
        order: 3;
    }

    .hero-event-title span {
        font-size: 1.1rem;
        color: #ffffff;
    }

    .hero-event-title h1 {
        font-size: 2.4rem;
        color: #ffffff;
        line-height: 1;
        margin-top: 10px;
    }

    /* 5. [Caixa de Data] - Quarto da sequência */
    .hero-date-box {
        position: static !important;
        margin: 0 auto 40px 0 !important; /* Alinhado à esquerda como no modelo */
        order: 4;
        width: fit-content;
        min-width: 160px;
    }

    /* Ajuste para o quadro verde ocupar a largura total */
    .hero-date-box {
        width: 100vw !important; /* Ocupa 100% da largura da janela visual */
        max-width: none !important;

        /* Remove o arredondamento se houver e garante que encoste nas bordas */
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;

        padding: 20px 0 !important; /* Espaçamento interno vertical */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centraliza o texto da data dentro do latrgo quadro verde */
        border-radius: 0 !important; /* Garante que as pontas sejam quadradas para preencher a tela */
    }

    .hero-date-box .date-location {
        margin-top: 5px;
        border-top: 1px solid rgba(62, 43, 22, 0.2);
        padding-top: 5px;
        width: 80%; /* Linha decorativa interna */
        text-align: center;
    }

    /* 6. WhatsApp */
    .hero-whatsapp {
        position: fixed; /* Mantém flutuante para facilitar o contato */
        right: 20px;
        bottom: 20px;
        width: 65px;
        height: 65px;
        z-index: 999;
    }
}

.home-beneficios {
    background-color: #7a5c2d; /* Cor marrom de fundo do modelo */
    background-image: url('../img/FIG03.webp');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 850px auto;
    padding: 80px 0 250px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ajuste específico para Mobile */
@media (max-width: 768px) {
    .home-beneficios {
        /* No mobile, a imagem ocupa a largura da tela sem ultrapassar */
        background-size: 100% auto;
        /* Reduzimos o padding inferior para a imagem não ficar longe do conteúdo */
        padding-bottom: 150px;
    }
}

.home-beneficios h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem; /* Aumentado para dar o impacto do modelo */
    font-weight: 900;   /* Peso máximo para ficar "bold" como na imagem */
    line-height: 1.1;
    color: #403018;    /* Tom de marrom escuro/preto do texto */
    text-align: center;
    margin-bottom: 30px;
    text-transform: none;
}

/* Regra para Desktop: forçar 3 linhas e centralizar */
@media (min-width: 992px) {
    .home-beneficios h3 {
        max-width: 850px; /* Ajuste este valor para o texto quebrar em 3 linhas exatas */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Grid de Benefícios */
.beneficios-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.beneficio {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
}

/* O Círculo Bicolor */
.beneficio-icon {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin-bottom: 15px;
    /* Cria o efeito de metade marrom escuro e metade verde claro */
    background: linear-gradient(to bottom, #4a3319 50%, #a6ce39 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Placeholder para os ícones (você pode substituir por <img> ou FontAwesome) */
.beneficio-icon::after {
    content: '';
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1); /* Deixa o ícone branco */
}

.beneficio span {
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 1.1;
    color: #ffffff; /* Ajuste conforme a visibilidade sobre o marrom */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Botão de Inscrição */
.btn-home {
    display: inline-block;
    background-color: #d4d977; /* Amarelo esverdeado claro */
    color: #4a3319;
    padding: 18px 45px;
    border-radius: 4px;
    font-weight: 900;
    text-decoration: none;
    font-size: 1.2rem;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-home:hover {
    background-color: #c2c75d;
    transform: translateY(-2px);
    text-decoration: none;
    color: #4a3319;
}

/* Responsividade para celulares */
@media (max-width: 768px) {
    .beneficios-grid {
        gap: 15px;
    }
    .beneficio {
        width: 45%;
    }
}

/* Centraliza o ícone e define o estilo */
.beneficio-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem; /* Tamanho do ícone */
    color: #ffffff;    /* Cor branca do ícone */

    /* Mantendo o fundo bicolor que criamos antes */
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #4a3319 55%, #a6ce39 55%);
    margin-bottom: 15px;
}

/* Ajuste fino: o ícone precisa subir um pouco para ficar na metade marrom */
.beneficio-icon i {
    margin-top: -20px;
}

/* Estilo do texto abaixo do círculo */
.beneficio span {
    display: block;
    color: #ffffff;
    font-weight: bold;
    font-size: 0.95rem;
    line-height: 1.2;
    max-width: 120px;
    text-align: center;
}

.beneficios-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 40px 0;
}

.beneficio-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;

    /* CONFIGURAÇÃO DO FUNDO */
    /* 1. Definimos o gradiente e a imagem juntos */
    background-image: url('../img/FIG02.webp');

    /* 2. Ajustamos como eles se misturam */
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; /* Faz a cor 'tingir' a imagem */

    border: none;
}

/* Centralização do Ícone */
.beneficio-circle i {
    color: white;
    font-size: 2.8rem;
    z-index: 2;
    margin-top: 10px;
    height: 40%;
    display: flex;
    align-items: center;
}

.beneficio-label {
    /* 1. Use !important para forçar a redução se houver conflito */
    font-size: 0.55rem !important;

    /* 2. Remova ou reduza a altura fixa para o texto não "esticar" */
    height: auto;
    min-height: 40px;
    margin-top: 20px;

    /* 3. Ajuste a largura para o texto quebrar em mais linhas se necessário */
    width: 85%;

    /* Outras propriedades mantidas */
    color: white;
    font-family: 'Arial Black', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    z-index: 2;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12px; /* Aumentado para subir um pouco o texto do limite inferior */
}

/* Efeito de destaque */
.beneficio-circle:hover {
    transform: scale(1.05);
    background-blend-mode: normal; /* Revela a imagem original levemente ao passar o mouse */
}

/* =====================================================
   SEÇÃO VÍDEO (image_8c576e.png)
===================================================== */
.home-video {
    background-color: #d4d977; /* Verde claro do fundo */
    padding: 80px 0;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
}

.home-video h3 {
    color: #5a3b1d; /* Marrom escuro */
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 50px;
    text-align: center;
}

/* Estilo para a imagem da linha ondulada */
.video-divider {
    width: 250px; /* Largura da imagem, ajuste conforme a proporção real */
    margin: -10px auto 40px auto; /* Centraliza e ajusta margens */
    position: relative;
    z-index: 2; /* Garante que fique acima do fundo */
}

.video-divider img {
    width: 100%;
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* Container do Vídeo para manter proporção 16:9 */
.video-wrapper {
    position: relative;
    max-width: 850px;
    margin: 0 auto;
    padding-bottom: 480px; /* Altura do vídeo */
    height: 0;
    border: 8px solid #000; /* Borda preta simulando o monitor no print */
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Responsividade */
@media (max-width: 768px) {
    .home-video h3 {
        font-size: 1.6rem;
    }
    .video-wrapper {
        padding-bottom: 56.25%; /* 16:9 padrão no mobile */
    }
}

/* Seção Principal */
.home-conteudos {
    background-color: #a8cf45; /* Verde limão exato do fundo */
    padding: 80px 0;
}

/* Cabeçalho */
.conteudos-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 60px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.logo-fbe {
    height: 100px; /* Logo maior como no modelo */
    width: auto;
}

.conteudos-title {
    color: #4b3621;
    font-family: 'Univia', sans-serif; /* Fonte Univia para o título */
    font-weight: 900;
    font-size: 2.4rem;
    line-height: 1.1;
    text-align: left;
    margin: 0;
    letter-spacing: -1px;
}

/* Ajuste o wrapper para garantir que ele tenha largura suficiente para os 3 */
.slider-wrapper-conteudos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Reduzi levemente o gap para ganhar espaço interno */
    position: relative;
    margin-bottom: 50px;
    width: 100%;
    max-width: 1100px; /* Largura ideal para 3 cards de ~300px + gaps */
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste no grid para não quebrar linha */
.conteudos-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap; /* Impede que o terceiro card vá para baixo */
    overflow: hidden;   /* Importante para o funcionamento do slider */
}

/* Ajuste fino no tamanho do card */
.conteudo-card {
    background-color: #5d401a;
    /* Calculando a largura para 3 colunas: (100% / 3) - gap */
    width: 320px;
    min-width: 280px; /* Garante que não fiquem magros demais */
    height: 420px;
    padding: 40px 20px;
    border-radius: 10px;
    flex-shrink: 0; /* Impede que o flexbox "esmague" os cards */

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ícones dos Cards */
.card-icon {
    height: 120px; /* Espaço fixo para o ícone */
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.card-icon i {
    font-size: 6rem; /* Ícones bem grandes como no print */
    color: #D5D887; /* Cor bege/verde claro */
    line-height: 1;
}

/* Texto dentro do Card */
.conteudo-card .card-text {
    color: #ffffff;
    font-family: 'Lindau', sans-serif; /* Fonte Lindau conforme modelo */
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

/* Setas do Slider */
.slider-arrow {
    background: none;
    border: none;
    color: #4b3621;
    font-size: 3rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.slider-arrow:hover {
    opacity: 0.6;
}

/* Botão de Inscrição Inferior */
.btn-container {
    margin-top: 40px;
}

.btn-home-dark {
    background-color: #4b3621;
    color: #D5D887;
    font-family: 'Balto', sans-serif; /* Fonte Balto para o botão */
    font-weight: 900;
    font-size: 1.5rem;
    padding: 20px 50px;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-home-dark:hover {
    filter: brightness(1.2);
    transform: translateY(-3px);
    color: #ffffff;
}

/* Responsividade */
@media (max-width: 991px) {
    .conteudos-header { flex-direction: column; text-align: center; }
    .conteudos-title { text-align: center; font-size: 1.8rem; }
    .conteudo-card { width: 260px; height: 380px; }
}

@media (max-width: 768px) {
    .home-conteudos {
        padding: 40px 0;
    }

    /* 1. Ajuste do Cabeçalho (Logo acima do Texto) */
    .conteudos-header {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .logo-fbe {
        height: 70px; /* Reduz um pouco no mobile */
    }

    .conteudos-title {
        text-align: center;
        font-size: 1.5rem; /* Fonte menor para telas pequenas */
        line-height: 1.2;
    }

    /* 2. Ajuste do Slider (Mostra 1 card centralizado) */
    .slider-wrapper-conteudos {
        gap: 10px;
        overflow: hidden;
    }

    .conteudos-grid {
        display: flex;
        overflow-x: auto; /* Permite scroll manual se o JS falhar */
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 10px 0;
        justify-content: flex-start; /* Alinha à esquerda para o scroll funcional */
    }

    .conteudo-card {
        width: 85vw; /* Ocupa quase a largura toda da tela */
        height: auto; /* Deixa crescer conforme o texto */
        min-height: 350px;
        padding: 30px 20px;
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .card-icon i {
        font-size: 4rem; /* Ícone menor no mobile */
    }

    .card-text {
        font-size: 1.1rem;
    }

    /* 3. Setas (Opcional: Esconder no mobile se usar touch scroll) */
    .slider-arrow {
        font-size: 2rem;
        display: none; /* Geralmente em mobile usa-se o dedo, mas pode manter se preferir */
    }

    /* 4. Botão Final */
    .btn-home-dark {
        width: 90%;
        font-size: 1.2rem;
        padding: 15px 20px;
    }
}

/* ESTRUTURA DO SLIDER */
.slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.slider-arrow {
    background: none;
    border: none;
    color: #5a3b1d;
    font-size: 3rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.conteudos-grid {
    display: flex;
    gap: 20px;
}

/* CARDS MARRONS */
.conteudo-card {
    background-color: #5a3b1d;
    color: #ffffff;
    width: 280px;
    padding: 30px 20px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card-icon {
    position: relative;
    font-size: 5rem;
    color: #d4d977; /* Cor do ícone (verde claro) */
    margin-bottom: 20px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sobreposição de ícones para ficar idêntico ao print */
.check-overlay {
    position: absolute;
    font-size: 1.5rem;
    top: 10px;
    right: 25px;
    color: #ffffff;
}

.star-overlay {
    position: absolute;
    font-size: 1.5rem;
    color: #5a3b1d; /* Fundo do ícone da estrela é a cor do card */
}

.conteudo-card p {
    font-weight: 700;
    line-height: 1.3;
    font-size: 1rem;
}

/* BOTÃO ESCURO */
.btn-home-dark {
    display: inline-block;
    background-color: #5a3b1d;
    color: #D5D887;
    padding: 18px 40px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.2rem;
    border-radius: 4px;
    transition: background 0.3s;
}

.btn-home-dark:hover {
    background-color: #432b15;
    color: #fff;
}

/* RESPONSIVIDADE */
@media (max-width: 992px) {
    .conteudos-grid .conteudo-card:nth-child(3) { display: none; } /* Simula o slider escondendo itens */
    .conteudos-header { flex-direction: column; text-align: center; }
    .conteudos-title { text-align: center; }
}

.home-paineis {
    background-color: #9c7a3c; /* Tom de marrom de fundo */
    padding: 80px 0;
    color: #ffffff;
    font-family: Arial, sans-serif;
}

/* Faixa do Título Superior */
.paineis-header {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.paineis-header h3 {
    background-color: #5a3b1d; /* Marrom mais escuro da faixa */
    color: #D5D887;
    padding: 15px 60px;
    font-weight: 900;
    font-size: 1.6rem;
    position: relative;
    display: inline-block;
    /* Efeito de recorte nas pontas da faixa */
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}

/* Lista de Itens */
.paineis-list {
    max-width: 900px;
    margin: 0 auto;
}

.painel-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 45px;
}

/* Círculo com o Número */
.painel-number {
    background-color: #a8cf45; /* Verde vibrante */
    color: #ffffff;
    width: 90px;
    height: 90px;
    min-width: 90px; /* Garante que o círculo não achate */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 900;
}

/* Conteúdo do Texto */
.painel-content h4 {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.painel-content p {
    font-size: 0.95rem;
    line-height: 1.3;
    max-width: 650px;
    opacity: 0.9;
}

/* Responsividade */
@media (max-width: 768px) {
    .painel-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .painel-content h4 {
        font-size: 1.6rem;
    }
}

.home-visitas {
    background-color: #a8cf45; /* Verde vibrante de fundo */
    padding: 80px 0;
    font-family: Arial, sans-serif;
}

/* Faixa do Título */
.visitas-header {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.visitas-header h3 {
    background-color: #5a3b1d;
    color: #D5D887;
    padding: 12px 50px;
    font-weight: 900;
    font-size: 1.4rem;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}

.visitas-subtitle {
    color: #5a3b1d;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 40px;
}

/* Grid de Locais */
.visitas-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.visita-card {
    background-color: #5a3b1d;
    color: #ffffff;
    padding: 20px;
    width: calc(50% - 10px); /* Dois por linha */
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
}

/* Card Final centralizado */
.visita-card.full-width {
    width: 60%;
}

.visita-card small {
    color: #d4d977; /* Amarelo esverdeado */
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.visita-card h4 {
    font-weight: 900;
    font-size: 1.3rem;
    line-height: 1.1;
    margin: 0;
}

.visita-card span {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 5px;
    display: block;
}

/* Responsividade */
@media (max-width: 768px) {
    .visita-card, .visita-card.full-width {
        width: 100%;
    }
    .visitas-subtitle {
        font-size: 1.1rem;
    }
}

.home-galeria {
    background-color: #9c7a3c; /* Fundo marrom médio */
    padding: 60px 0;
    font-family: Arial, sans-serif;
}

.galeria-title {
    color: #5a3b1d;
    font-weight: 900;
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.foto-principal {
    max-width: 800px;
    margin: 0 auto 20px;
    border: 5px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.foto-principal img {
    width: 100%;
    display: block;
}

.galeria-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.miniaturas {
    display: flex;
    gap: 15px;
}

.miniaturas img {
    width: 180px;
    height: 120px;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border 0.3s;
    cursor: pointer;
}

.miniaturas img:hover {
    border-color: #a8cf45; /* Destaque verde no hover */
}

.nav-arrow {
    background: none;
    border: none;
    color: #5a3b1d;
    font-size: 2.5rem;
    cursor: pointer;
}

.home-palestrantes {
    background-color: #9c7a3c; /* Marrom de fundo */
    padding: 60px 0;
    font-family: Arial, sans-serif;
}

.header-divider {
    display: flex;            /* Transforma em container flexível */
    justify-content: center;   /* Centraliza horizontalmente */
    align-items: center;       /* Alinha verticalmente se necessário */
    width: 100%;               /* Garante que ocupe a largura total do container */
    margin: -10px auto 40px auto; /* Ajusta distância do título acima e conteúdo abaixo */
}

.header-divider img {
    max-width: 350px;         /* Mantém o tamanho proporcional ao seu design */
    height: auto;             /* Mantém a proporção da imagem */
    display: block;           /* Remove espaços em branco indesejados abaixo da imagem */
}

.palestrantes-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Janela de visualização */
.slider-container-wrapper {
    overflow: hidden;
    width: 820px; /* 3 cards */
    margin: 0 10px;
    z-index: 1; /* Fica abaixo das setas */
}

/* Grid de cards */
.palestrantes-grid {
    display: flex;
    gap: 20px;
    will-change: transform;
}

/* O Card */
.palestrante-card {
    flex: 0 0 260px; /* Largura fixa obrigatória */
    margin: 0 !important; /* Remove margens que podem quebrar o cálculo do JS */
}

/* Ajuste das setas para garantir que fiquem clicáveis */
/* Z-index altíssimo e pointer-events garantidos */
.slider-arrow {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: all !important;
    cursor: pointer !important;
}

.slider-container-wrapper {
    z-index: 1 !important;
    overflow: hidden;
}

.slider-arrow, .slider-arrow i {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Responsividade para manter o preenchimento */
@media (max-width: 992px) {
    .slider-container-wrapper { width: 540px; } /* 2 cards */
}
@media (max-width: 600px) {
    .slider-container-wrapper { width: 260px; } /* 1 card */
}

.palestrantes-grid {
    display: flex;
    gap: 20px;
    will-change: transform;
    width: max-content; /* Importante para o slide não quebrar */
}

.palestrante-card {
    flex: 0 0 260px; /* Não permite encolher nem crescer */
    background-color: #5a3b1d;
    border-radius: 4px; /* Opcional: leve arredondamento */
}

/* Responsividade */
@media (max-width: 992px) {
    .slider-container-wrapper { width: 540px; } /* 2 cards */
}

@media (max-width: 600px) {
    .slider-container-wrapper { width: 260px; } /* 1 card */
}

.palestrante-photo {
    height: 200px;
    padding: 10px;
}

.palestrante-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* 👈 mantém o rosto visível */
}

.palestrante-name {
    background-color: #a8cf45; /* Faixa verde do nome */
    padding: 15px 10px;
}

.palestrante-name h4 {
    color: #ffffff;
    font-weight: 900;
    margin: 0;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.palestrante-info {
    padding: 15px 10px;
    min-height: 80px;
}

.palestrante-info p {
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
}

/* Container da Seção para dar o respiro necessário */
.programacao-section {
    padding: 100px 0; /* Espaço grande para a logo não bater em outros elementos */
    background-color: #4b3621; /* Cor de fundo da seção anterior para continuidade */
}

.programacao-link {
    text-decoration: none !important;
    display: block;
    max-width: 950px;
    margin: 0 auto;
}

.programacao-banner {
    background-color: #a8cf45; /* Verde limão vibrante do modelo */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 35px 60px; /* Altura interna da barra */
    position: relative;
    border-radius: 0;
    /* IMPORTANTE: Não pode ter overflow: hidden aqui */
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 5;
}

.banner-content i {
    font-size: 3.5rem;
    color: #4b3621;
    transform: rotate(-10deg);
}

.banner-content span {
    font-size: 2.8rem;
    font-weight: 900;
    color: #4b3621;
    text-transform: lowercase;
    letter-spacing: -1.5px;
    line-height: 1;
    font-family: 'Montserrat', sans-serif; /* Ou sua fonte bold */
}

/* A LOGO GIGANTE QUE VAZA */
.banner-logo {
    position: absolute;
    right: -40px; /* Faz ela sair pela lateral direita */
    top: 50%;
    transform: translateY(-50%); /* Centralização vertical exata */
    height: 240px; /* Aumente aqui até ela ficar do tamanho desejado */
    width: auto;
    z-index: 10; /* Fica acima de tudo */
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.2)); /* Sombra para destacar o relevo */
}

/* Ajustes para telas menores */
@media (max-width: 991px) {
    .banner-logo {
        height: 180px;
        right: -20px;
    }
    .banner-content span {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .programacao-banner {
        padding: 20px;
    }
    .banner-logo {
        height: 140px;
        right: -10px;
    }
    .banner-content i {
        font-size: 2.5rem;
    }
    .banner-content span {
        font-size: 1.5rem;
    }
}

/* Título Principal */
.lote-title {
    color: #D5D887;
    font-size: clamp(2rem, 5vw, 3.5rem); /* Tamanho responsivo */
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 40px;
    letter-spacing: -1px;
}

/* Section Principal */
.home-ingressos {
    background-color: #4b3621;
    position: relative;
    padding: 80px 0 0 0;
    margin-bottom: 0 !important;
    overflow: hidden; /* Garante que nada escape das laterais */
}

/* Layout Container */
.ingressos-layout-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Conteúdo Central (Countdown + Grid) */
.ingressos-center-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 900px; /* Mantém os cards próximos */
    padding-bottom: 40px;
}

/* Imagens dos Personagens */
.person-image {
    position: absolute;
    bottom: -10px; /* Cola e sobrepõe levemente a seção de baixo */
    z-index: 15; /* Fica por cima de partes dos cards */
    pointer-events: none; /* Permite clicar nos botões se a imagem sobrepor */
}

.person-left {
    left: -50px; /* Ajuste para aproximar ou afastar do card esquerdo */
}

.person-right {
    right: -50px; /* Ajuste para aproximar ou afastar do card direito */
}

.person-image img {
    height: clamp(400px, 45vw, 680px); /* Tamanho proporcional à tela */
    width: auto;
    display: block;
}

/* Estilo dos Cards de Ingresso */
.ingresso-card {
    background-color: #D5D887; /* Bege claro do fundo do card */
    border-radius: 12px;
    padding: 40px 30px;
    color: #4b3621;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Estilo do Preço (Gigante como na imagem) */
.preco-wrapper {
    display: flex;
    align-items: baseline;
    margin: 20px 0;
    font-weight: 900;
    line-height: 1;
}

.preco-wrapper .moeda {
    font-size: 1.8rem;
    margin-right: 5px;
}

.preco-wrapper .valor {
    font-size: 6rem; /* Valor bem grande */
    letter-spacing: -3px;
}

/* Botão de Inscrição */
.btn-inscrever {
    background-color: #4b3621;
    color: #D5D887;
    border: none;
    padding: 15px 30px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.2s;
    width: 100%;
    text-align: center;
}

.btn-inscrever:hover {
    transform: scale(1.05);
    color: #fff;
}

/* Legenda Inferior */
.legenda-descontos {
    color: #D5D887;
    font-size: 0.9rem;
    margin-top: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
}

/* Responsividade */
@media (max-width: 1100px) {
    .person-left { left: -100px; }
    .person-right { right: -100px; }
}

@media (max-width: 991px) {
    .person-image { display: none; } /* Remove as fotos no mobile para focar nos ingressos */
    .ingressos-center-content { padding: 0 20px 40px 20px; }
}

/* 4. Cards de Preço */
.ingressos-grid {
    display: flex;
    gap: 20px;
}

.ingresso-card {
    background-color: #dae38a; /* Amarelo esverdeado claro */
    flex: 1;
    padding: 40px 20px;
    border-radius: 4px;
    color: #4a3319;
}

.categoria-label {
    background-color: #5d4029;
    color: #a8cf45;
    display: inline-block;
    padding: 4px 20px;
    font-weight: 900;
    margin-bottom: 25px;
}

.ingresso-card h4 {
    font-size: 1.4rem;
    font-weight: 900;
    min-height: 3.5rem;
    margin-bottom: 20px;
}

/* Tipografia do Valor (O segredo do modelo) */
.preco-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #937b41; /* Cor bronzeada/marrom do valor */
    margin-bottom: 10px;
}

/* 6. Ajuste dos Cards (Valor) */
.valor {
    font-size: 7.5rem; /* Valor R$ bem grande e impactante */
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -4px;
    color: #937b41;
}

.moeda {
    font-size: 1.8rem;
    font-weight: 900;
    margin-right: 5px;
    color: #937b41;
}

.desconto-info {
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 25px;
}

.btn-inscrever {
    background-color: #5d4029;
    color: #a8cf45;
    padding: 12px 30px;
    font-weight: 900;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
}

/* Responsividade */
@media (max-width: 1100px) {
    .person-image { display: none; } /* Esconde as fotos em telas menores */
    .ingressos-grid { flex-direction: column; }
}

@media (max-width: 768px) {
    /* 1. Ajuste no container pai para evitar scroll lateral e desalinhamento */
    .home-ingressos .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        overflow: hidden; /* Garante que nada 'vaze' para a direita */
    }

    /* 2. Reset do Grid para bloco simples */
    .ingressos-grid {
        display: block !important; /* Muda de grid/flex para bloco para facilitar centralização */
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* 3. Ajuste do Card - Centralização Real */
    .ingresso-card {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important; /* Margem apenas embaixo entre um card e outro */
        box-sizing: border-box !important; /* ESSENCIAL: padding não soma à largura */
        text-align: center;
    }

    /* 4. Countdown ocupando a largura total centralizado */
    .countdown-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 30px 0 !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .countdown-container p {
        text-align: center !important;
        margin-bottom: 15px !important;
        width: 100%;
    }

    /* 5. Ajuste de escala para os valores não quebrarem o layout */
    .valor {
        font-size: 5rem !important;
        display: inline-block;
    }

    .moeda {
        font-size: 1.2rem !important;
    }
}

/* Container da Seção */
.home-local {
    background-color: #927a3d; /* Marrom base conforme o modelo */
    width: 100%;
    overflow: hidden;
}

/* Container Principal */
.home-local {
    position: relative;
    background-color: #927a3d;
    width: 100%;
    overflow: hidden;
}

/* 1. Fazendo os Títulos flutuarem sobre a parte azul da imagem */
.local-header {
    position: absolute;
    top: 40px; /* Aumentado de -20px para 40px para descer o bloco */
    left: 0;
    right: 0;
    z-index: 25;
    color: #ffffff;
    pointer-events: none;
}

.local-logo-top {
    width: 110px;
    height: auto;
}

.local-titles-group {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px; /* Alinha com o padrão do site */
    margin: 0 auto;
    padding: 0 20px;
}

.local-titles-group h2 {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1.2; /* Aumentado levemente para não cortar ascendentes/descendentes */
    margin: 0;
    max-width: 400px; /* Aumentado para o nome do evento caber melhor */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    white-space: normal; /* Garante que o nome quebre linha se necessário */
    overflow: visible;
}

.title-divider {
    width: 2px;
    height: 55px;
    background-color: rgba(255, 255, 255, 0.6);
}

/* 2. Área da Imagem */
.local-hero-wrapper {
    position: relative;
    width: 100%;
    line-height: 0; /* Remove espaços fantasmas abaixo da imagem */
    display: block;
}

.local-img-main {
    width: 100%;
    height: auto;
    display: block;
}

/* 1. Ajuste do Botão (Base) */
/* 1. Botão Base */
.btn-hospedagem {
    background-color: #a8cf45;
    display: inline-flex;
    align-items: center;

    /* Espaço na direita (100px) reservado para a logo que ficará por cima */
    padding: 15px 100px 15px 80px;

    border-radius: 12px;
    text-decoration: none;
    position: relative; /* Necessário para posicionar a logo de forma absoluta */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    min-height: 80px; /* Garante uma altura mínima para o botão */
}

@media (max-width: 768px) {
    .btn-hospedagem {
        display: flex;             /* Muda para flex total para ocupar a largura disponível */
        padding: 15px 60px 15px 20px; /* Reduz drasticamente os paddings */
        margin: 0 15px;            /* Margem lateral para não encostar na borda da tela */
        min-height: 60px;          /* Altura um pouco menor para mobile */
        justify-content: center;   /* Centraliza o texto */
    }

    /* Caso você tenha um span de texto dentro do botão */
    .btn-hospedagem span,
    .btn-hospedagem {
        font-size: 0.95rem;        /* Fonte levemente menor */
        text-align: center;
        line-height: 1.2;
    }

    /* Ajuste da Logo que fica por cima (exemplo de classe) */
    .btn-hospedagem .logo-overlay {
        width: 50px;               /* Diminui a logo no mobile */
        right: 5px;                /* Aproxima da borda direita */
    }
}

/* 2. Texto Amarelo (600px centralizado) */
.local-text-overlay p {
    width: 600px;
    margin: 0 auto 40px auto;
    color: #f7eda3;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 3. A Logo Flutuante no Final */
.btn-logo {
    height: 140px;
    width: 140px;

    /* Posicionamento Absoluto no Final */
    position: absolute;
    right: -50px; /* Faz ela "sair" um pouco para a direita do botão */
    top: 50%;
    transform: translateY(-50%); /* Centraliza verticalmente em relação ao botão */

    z-index: 2;
    object-fit: contain;
}

/* Ajuste do conteúdo de texto dentro do botão */
.btn-content {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #434c28;
}

.btn-content span {
    font-size: 1.8rem;
    font-weight: 900;
}

/* Ajuste do ícone de mão */
.btn-content i {
    font-size: 3rem;
    color: #4a3319;
}

/* Responsividade */
@media (max-width: 992px) {
    .local-header { position: relative; background: #4a3319; top: 0; padding: 20px 0; }
    .local-titles-group { flex-direction: column; text-align: center; gap: 10px; }
    .title-divider { display: none; }
    .local-text-overlay { bottom: 5%; }
    .local-text-overlay p { font-size: 1rem; }
}

/* =====================================================
   GALERIA E EDIÇÕES ANTERIORES
===================================================== */
.home-galeria {
    padding: 60px 0;
    background-color: #937341;
}

.foto-principal {
    max-width: 800px;
    margin: 0 auto 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.foto-principal img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.galeria-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Máscara para mostrar apenas 4 miniaturas */
.miniaturas-mask {
    overflow: hidden;
    width: 500px; /* (110px largura + 20px gap) * 4 - último gap */
}

.miniaturas-grid {
    display: flex;
    gap: 20px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumb-item {
    flex: 0 0 110px; /* Largura fixa da miniatura */
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s;
    border: 3px solid transparent;
}

.thumb-item.active, .thumb-item:hover {
    filter: grayscale(0);
    opacity: 1;
    border-color: #a8cf45;
    transform: scale(1.05);
}

.nav-arrow {
    background: none;
    border: none;
    color: #5a3b1d;
    font-size: 2rem;
    cursor: pointer;
    transition: 0.2s;
}

.nav-arrow:hover {
    color: #a8cf45;
}

/* =====================================================
   PALESTRANTES (Cards Tricolores)
===================================================== */
.palestrantes-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.palestrante-card {
    width: 260px;
    background-color: #5a3b1d;
    overflow: hidden;
}

.palestrante-photo {
    height: 200px;
    padding: 10px;
}

.palestrante-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.palestrante-name {
    background-color: #a8cf45;
    padding: 15px 10px;
}

.palestrante-name h4 {
    color: #ffffff;
    font-weight: 900;
    margin: 0;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.palestrante-info {
    padding: 15px 10px;
    min-height: 80px;
}

.palestrante-info p {
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
}

.btn-palestrantes {
    display: inline-block;
    background-color: #5a3b1d;
    color: #a8cf45;
    padding: 15px 40px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.2rem;
    margin-bottom: 50px;
}

/* =====================================================
   INGRESSOS (Cronômetro e Preços)
===================================================== */

.countdown-container {
    background-color: #a8cf45; /* Cor exata do banner de hospedagem */
    color: #4b3621; /* Marrom profundo dos ícones */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 2px 40px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.countdown-container p {
    font-weight: 800;
    font-size: 0.85rem;
    text-align: right;
    margin: 0;
    max-width: 250px;
    line-height: 1.2;
    text-transform: uppercase;
}

.timer {
    display: flex;
    align-items: center;
    gap: 15px;
}

.timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.9;
}

.timer span {
    font-size: 3.5rem; /* Números em destaque conforme imagem */
    font-weight: 900;
}

.timer small {
    font-size: 0.65rem;
    font-weight: 800;
    margin-top: 5px;
}

.timer-divider {
    font-size: 2.5rem;
    font-weight: 300;
    opacity: 0.4;
    margin-bottom: 10px;
}

.ingresso-card {
    background-color: #d4d977;
    color: #5a3b1d;
    padding: 30px;
    width: 300px;
    border-radius: 4px;
}

.preco-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 15px 0;
}

.valor { font-size: 4.5rem; font-weight: 900; line-height: 1; }

.btn-inscrever {
    background-color: #5a3b1d;
    color: #a8cf45;
    padding: 10px 25px;
    font-weight: 900;
    text-decoration: none;
    display: inline-block;
}

/* =====================================================
   LOCAL E HOSPEDAGEM (Banners)
===================================================== */
/* Container Base */
.local-hero-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0; /* Remove espaços indesejados abaixo da imagem */
}

/* Imagem Principal */
.local-img-main {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Overlay de Texto */
.local-text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Degradê para garantir leitura sem tapar a foto inteira */
    padding: 40px 20px 20px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.local-text-overlay p {
    color: #ffffff;
    font-family: 'Lindau', sans-serif; /* Usando sua fonte Lindau */
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    margin: 0;
    line-height: 1.4;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* --- AJUSTES MOBILE --- */
@media (max-width: 768px) {
    .local-img-main {
        min-height: 250px; /* Garante que a imagem não fique muito "fina" */
        object-position: center; /* Mantém o foco da foto no meio */
    }

    .local-text-overlay {
        padding: 30px 15px 15px 15px;
    }

    .local-text-overlay p {
        font-size: 1rem;
        max-width: 90%; /* Evita que o texto encoste nas bordas da tela */
    }
}

/* Container do Herói */
.local-hero-wrapper {
    position: relative;
    width: 100%;
}

.local-img-main {
    width: 100%;
    display: block;
    height: auto;
}

/* Título acima do botão (Centralizado em 6 colunas no Desktop) */
.local-text-overlay {
    position: absolute;
    /* 1. Posicionamento vertical sobre a imagem */
    bottom: 22%;

    /* 2. Centralização Horizontal Infalível */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    /* 3. Largura do bloco de texto */
    width: 100%; /* Ocupa quase toda a largura em telas pequenas */
    max-width: 780px; /* Trava o tamanho máximo igual ao seu modelo */

    text-align: center;
    z-index: 20;
}

.local-text-overlay p {
    margin: 0;
    color: #f7eda3;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    font-family: 'Montserrat', sans-serif;
}

/* Ajuste do Footer e Botão */
.local-footer {
    background-color: #9c7a3c; /* Tom de marrom da imagem */
    padding: 40px 0;
    margin-top: -5px; /* Remove gaps entre imagem e footer */
}

/* --- Desktop --- */
.hospedagem-banner {
    background-color: #a8cf45;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 40px; /* Padding generoso apenas na esquerda no desktop */
    max-width: 850px;
    margin: -40px auto 40px;
    border-radius: 0 100px 100px 0;
    position: relative;
    z-index: 10;
    text-decoration: none;
    transition: transform 0.3s ease;
    min-height: 120px;
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #4a3319;
}

.btn-content i {
    font-size: 3.5rem;
}

.btn-content span {
    font-size: 1.9rem;
    font-weight: 900;
    text-transform: lowercase;
    letter-spacing: -1px;
}

.btn-logo {
    height: 160px;
    width: auto;
    margin-right: -20px;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.1));
}

/* --- Mobile (Ajuste Fino de Margens) --- */
@media (max-width: 768px) {
    .hospedagem-banner {
        width: 92%; /* Ajuste leve para não colar nas bordas do browser */
        margin: -20px auto 30px; /* Centraliza o banner no mobile */

        /* AJUSTE SOLICITADO: Margem interna reduzida */
        padding: 10px 15px;

        min-height: 80px; /* Altura mais compacta */
        border-radius: 15px; /* Arredondamento uniforme para melhor encaixe no mobile */
        justify-content: center;
        gap: 10px;
    }

    .btn-content {
        gap: 8px; /* Espaço menor entre ícone e texto */
        flex: 1;
        justify-content: center;
    }

    .btn-content i {
        font-size: 2rem; /* Ícone menor para economizar espaço */
    }

    .btn-content span {
        font-size: 1.15rem; /* Texto menor para evitar quebra de linha excessiva */
        line-height: 1.1;
        text-align: left;
    }

    .btn-logo {
        height: 85px; /* Logo proporcional à nova altura do botão */
        margin-right: 0;
        margin-top: 0;
        position: relative;
    }
}

/* Telas muito pequenas (ex: iPhone SE) */
@media (max-width: 380px) {
    .hospedagem-banner {
        padding: 8px 10px;
    }

    .btn-content span {
        font-size: 1rem;
    }

    .btn-logo {
        height: 70px;
    }

}

.banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5a3b1d;
    font-weight: 900;
    font-size: 1.5rem;
}

.banner-logo { height: 70px; }

/* Permite que os itens fiquem em linha e rolem horizontalmente */
.conteudos-grid, .palestrantes-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* Esconde barra no IE */
    scrollbar-width: none;     /* Esconde barra no Firefox */
    padding: 10px 0;
}

/* Esconde a barra de rolagem no Chrome/Safari */
.conteudos-grid::-webkit-scrollbar,
.palestrantes-grid::-webkit-scrollbar {
    display: none;
}

/* Garante que os cards não encolham */
.conteudo-card, .palestrante-card {
    flex: 0 0 auto;
}