html {
    height: 100%; /* <--- ADICIONE ESTA LINHA */
    overflow-x: hidden; /* Garante que não haverá rolagem horizontal indesejada */
}

/* Variáveis de Cores */
:root {
    --primary-green: #387D20; /* Verde escuro do logo */
    --secondary-green: #6DA34D; /* Verde mais claro do logo */
    --light-green: #D6E6CC; /* Um verde bem suave para fundos */
    --text-color-dark: #333;
    --text-color-light: #666;
    --background-light: #F9F9F9;
    --background-white: #FFFFFF;
    --border-color: #E0E0E0;
    --accent-color: #A0C49D; /* Um verde acinzentado suave */
    --button-hover: #2e6b1d;

    /* NOVAS VARIAVEIS PARA O NATAL */
    --christmas-red: #D9462F; /* Um vermelho sutil */
    --christmas-gold: #FFD700; /* Dourado */
    --christmas-dark-green: #1F4F19; /* Um verde mais escuro/festivo */
}

/* Base Geral */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0; /* Base, será sobrescrito pelas media queries */
    padding-bottom: 60px; /* Espaço para a barra de navegação inferior */
    color: var(--text-color-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Pinheiros laterais (PESQUERDA e PDIREITO) que rolam com a página e se repetem */
    background-image: 
        url('img/PESQUERDA.webp'), /* Imagem para o lado esquerdo */
        url('img/PDIREITO.webp');  /* Imagem para o lado direito */
    background-repeat: repeat-y, repeat-y; /* Repetir verticalmente */
    background-position: left top, right top; /* Posicionar à esquerda e à direita */
    background-attachment: scroll, scroll; /* Rolam com o conteúdo da página */
    background-size: 130px auto, 130px auto; /* Mobile-first: 40px de largura para cada pinheiro */
    background-color: var(--background-light); /* Cor de fundo caso as imagens não carreguem ou em telas muito pequenas */
    min-height: 100vh; /* Garante que o body tenha no mínimo 100% da altura da viewport */
    display: flex; /* Habilita o Flexbox */
    flex-direction: column; /* Organiza os filhos (header, main, footer) em coluna */
}
main {
    flex-grow: 1; /* Permite que o main se expanda para preencher o espaço disponível */
}

/* Media queries para garantir padding no body e ajustar o tamanho dos pinheiros */

/* Mobile (até 767px): padding mínimo para pinheiros serem visíveis */
@media (max-width: 767px) {
    body {
        padding-left: 15px; /* Garante 15px de espaço para o pinheiro esquerdo */
        padding-right: 15px; /* Garante 15px de espaço para o pinheiro direito */
    }
}
/* Tablets (768px a 1023px) */
@media (min-width: 768px) {
    h1 { font-size: 2.8em; }
    h2 { font-size: 2.2em; }
    .hero {
        padding: 120px 0; /* Apenas ajuste o padding vertical aqui */
        min-height: 350px;
        width: 100vw; /* Ocupa 100% da largura da viewport */
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        margin: 0;
    }
    .bottom-nav {
        display: none; /* Oculta a barra de navegação inferior em telas maiores */
    }
    body {
        padding-bottom: 0; /* Remove o padding extra para a nav bar inferior */
    }
}
@media (min-width: 768px) {
    /* ... (suas outras regras para desktop, como .hero padding) ... */

    /* Ajustes para o h1 dentro do hero em telas maiores */
    .hero h1 {
        font-size: 2.8em; /* Tamanho original para desktop. Pode diminuir para 2.5em se preferir */
        padding-inline: 40px; /* Mais espaçamento lateral para telas maiores */
    }

    /* Ajustes para o p dentro do hero em telas maiores */
    .hero p {
        font-size: 1.1em; /* Se quiser um tamanho diferente do padrão aqui */
        padding-inline: 40px; /* Mais espaçamento lateral para telas maiores */
    }
}
/* Laptops pequenos (1024px a 1199px) */
@media (min-width: 1024px) {
    body {
        background-size: 130px auto, 130px auto; /* Pinheiros de 80px */
        padding-left: 80px;
        padding-right: 80px;
    }
}
/* Desktops (1200px a 1399px) */
@media (min-width: 1200px) {
    body {
        background-size: 150px auto, 150px auto; /* Pinheiros de 100px */
        padding-left: 100px;
        padding-right: 100px;
    }
}
/* Desktops grandes (a partir de 1400px) */
@media (min-width: 1400px) {
    body {
        background-size: 220px auto, 220px auto; /* Pinheiros de 120px */
        padding-left: 120px;
        padding-right: 120px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-green);
    margin-top: 0;
}

h1 { font-size: 2.2em; text-align: center; color: var(--background-white); margin-bottom: 15px;}
h2 { font-size: 1.8em; margin-bottom: 20px; text-align: center; }
h3 { font-size: 1.4em; margin-bottom: 10px; color: var(--secondary-green); }
h4 { font-size: 1.2em; margin-bottom: 8px; color: var(--text-color-dark); }

p {
    font-size: 1em;
        color: var(--text-color-dark);
    margin-bottom: 10px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin-bottom: 8px;
    color: var(--text-color-light);
}

a {
    color: var(--primary-green);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Seções */
.section-container {
    padding: 30px 20px;
    /* Mobile-first: 95% da largura disponível entre os paddings do body,
       mas não mais que 300px para garantir espaço para pinheiros. */
    max-width: min(95%, 300px); 
    margin: 0 auto; /* Centraliza a seção DENTRO da área com padding do body */
    background-color: var(--background-white); /* Mantém o fundo branco para os blocos de conteúdo */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

/* Media queries para limitar a largura máxima do conteúdo em telas maiores */
@media (min-width: 768px) { /* Tablets */
    .section-container {
        max-width: 700px; 
    }
}
@media (min-width: 1024px) { /* Laptops pequenos */
    .section-container {
        max-width: 800px;
    }
}
@media (min-width: 1200px) { /* Desktops */
    .section-container {
        max-width: 900px; 
    }
}
.section-subtitle {
    text-align: center;
    margin-bottom: 25px;
    font-style: italic;
    color: var(--text-color-light);
}

.bg-light {
    background-color: var(--light-green); /* Usa um verde mais suave para fundos "light" */
    box-shadow: none; /* Remove a sombra extra para um look mais leve */
}

/* Cards (blocos de informação) */
.card {
    background-color: var(--background-white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-3px);
}

.card ul {
    list-style: disc; /* Para listas de itens */
    padding-left: 20px;
}
.card ul li {
    margin-bottom: 5px;
    color: var(--text-color-dark);
}
.card ul li strong {
    color: var(--primary-green);
}


/* Botões */
.btn-primary {
    display: inline-block;
    background-color: var(--primary-green);
    color: var(--background-white);
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    text-align: center;
    margin-top: 20px;
}

.btn-primary:hover {
    background-color: var(--button-hover);
    text-decoration: none;
}

.hero {
    background: url('img/hero-background.webp') no-repeat center center/cover; /* Imagem de fundo do banner */
    color: var(--background-white);
    text-align: center;
    padding: 130px 0; /* Padding vertical, zero nas laterais */
    position: relative; /* Mantém o position: relative */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    width: 100vw; /* Ocupa 100% da largura da viewport */
    left: 50%; /* Move o início do elemento para 50% da tela */
    transform: translateX(-50%); /* Ajusta o elemento para que seu centro fique em 50%, centralizando-o */
    box-sizing: border-box; /* Garante que o padding não adicione largura extra */
    margin: 0; /* Remove margens externas, caso alguma esteja sendo aplicada */
       margin-bottom: 40px; 
}
.hero h1 {
    font-size: 2.2em; /* Tamanho original para mobile. Pode diminuir para 2em se preferir */
    text-align: center;
    color: var(--background-white);
    margin-bottom: 15px;
    max-width: 800px; /* Limita a largura máxima do título */
    margin-inline: auto; /* Centraliza o título quando a largura máxima é atingida */
    padding-inline: 20px; /* Adiciona 20px de espaçamento interno nas laterais */
}

.hero p {
    font-size: 1.1em; /* Tamanho original para mobile. Pode diminuir para 1em se preferir */
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px; /* Limita a largura máxima do parágrafo */
    margin-inline: auto; /* Centraliza o parágrafo quando a largura máxima é atingida */
    padding-inline: 20px; /* Adiciona 20px de espaçamento interno nas laterais */
}
.hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Escurece a imagem para o texto ser legível */
    z-index: 1;
}

.hero * {
    position: relative;
    z-index: 2;
}

.hotel-logo { /* AGORA CORRETO */
    max-width: 200px; /* Altere este valor para o que desejar */
    height: auto;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.9);
}

/* Ícones nas seções */
h2 .fas {
    margin-right: 10px;
    color: var(--secondary-green);
}

/* Programação do Dia */
.programacao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.programacao-item h3 {
    display: flex;
    align-items: center;
    color: var(--primary-green);
}

.programacao-item h3 .fas {
    margin-right: 8px;
    color: var(--secondary-green);
}

.programacao-item ul {
    list-style: none;
    padding: 0;
}
.programacao-item li {
    margin-bottom: 10px;
    color: var(--text-color-dark);
}
.programacao-item li strong {
    color: var(--primary-green);
}

.note {
    font-size: 0.9em;
    color: var(--text-color-light);
    font-style: italic;
    text-align: center;
    margin-top: 20px;
}

/* Cardápios - Abas */
.cardapio-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
    flex-wrap: wrap;
}

.tab-button {
    background-color: var(--background-white);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-green);
    transition: all 0.3s ease;
    flex: 1;
    max-width: 180px;
    text-align: center;
}

.tab-button:hover {
    background-color: var(--light-green);
    color: var(--primary-green);
}

.tab-button.active {
    background-color: var(--primary-green);
    color: var(--background-white);
    border-color: var(--primary-green);
}

.tab-content {
    display: none; /* Esconde o conteúdo das abas por padrão */
}

/* Atrações */
.atracoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.atracao-item {
    text-align: center;
}

.atracao-img {
    max-width: 100%;
    height: 180px; /* Altura fixa para as imagens */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.atracao-item h3 {
    margin-top: 10px;
    color: var(--primary-green);
}

.atracao-item p {
    font-size: 0.95em;
    color: var(--text-color-light);
}

/* Conectividade Wi-Fi */
.wifi-info {
    text-align: center;
}
.wifi-info p {
    font-size: 1.1em;
    margin-bottom: 10px;
}
.wifi-info .wifi-detail {
    font-weight: 700;
    color: var(--primary-green);
    background-color: var(--light-green);
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 5px;
}

/* Contato */
.contact-info ul {
    list-style: none;
    padding: 0;
}
.contact-info li {
    margin-bottom: 10px;
}
.contact-info li a {
    display: flex;
    align-items: center;
    color: var(--text-color-dark);
}
.contact-info li a .fas, .contact-info li a .fab {
    margin-right: 10px;
    color: var(--secondary-green);
    font-size: 1.2em;
}
.contact-info li a:hover {
    color: var(--primary-green);
    text-decoration: none;
}

/* Footer */
.footer {
    background-color: var(--primary-green);
    color: #FFFFFF !important;
    text-align: center;
    padding: 20px 0; /* Padding vertical, zero nas laterais */
    font-size: 1em;
    font-weight: 600;
    width: 100vw; /* Ocupa 100% da largura da viewport */
    position: relative; /* Necessário para 'left' e 'transform' funcionarem corretamente */
    left: 50%; /* Move o início do elemento para 50% da tela */
    transform: translateX(-50%); /* Ajusta o elemento para que seu centro fique em 50%, centralizando-o */
    box-sizing: border-box; /* Garante que o padding não adicione largura extra */
    margin: 0; /* Remove margens externas, caso alguma esteja sendo aplicada */
}

.footer p {
    color: #FFFFFF !important;  /* ← FORÇA BRANCO NO PARÁGRAFO */
    margin: 0;
}

.footer .social-links {
    margin-top: 15px;
}

.footer .social-links a {
    color: var(--background-white);
    font-size: 1.5em;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer .social-links a:hover {
    color: var(--light-green);
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-top: 2px solid var(--christmas-gold); /* Borda dourada para o natal */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: white;  /* ← JÁ ESTAVA BRANCO */
    padding: 8px 4px;
    border-radius: 8px;
    transition: all 0.3s ease;
    flex: 1;
    max-width: 80px;
}

.nav-item:hover,
.nav-item:active {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    color: white;  /* ← MANTÉM BRANCO NO HOVER */
}

.nav-item i {
    font-size: 18px;
    margin-bottom: 4px;
    color: white;  /* ← FORÇA BRANCO NOS ÍCONES */
}

.nav-item span {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    color: white;  /* ← FORÇA BRANCO NO TEXTO */
}

/* Responsividade Básica (já é mobile-first, mas para tablets/desktops maiores) */
@media (min-width: 768px) {
    h1 { font-size: 2.8em; }
    h2 { font-size: 2.2em; }
    .hero {
        padding: 120px 0px;
        min-height: 350px;
    }
    .bottom-nav {
        display: none; /* Oculta a barra de navegação inferior em telas maiores, ou pode ser ajustada para uma barra superior tradicional se preferir */
    }
    body {
        padding-bottom: 0; /* Remove o padding extra para a nav bar inferior */
    }
}

/* Para o caso de esconder a navegação inferior em desktop, pode-se adicionar uma navegação superior tradicional ou simplesmente deixar o site sem. */
/* Exemplo de uma navegação superior para desktop: */
/*
@media (min-width: 768px) {
    .main-nav-desktop {
        display: flex;
        justify-content: center;
        background-color: var(--primary-green);
        padding: 15px 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .main-nav-desktop a {
        color: var(--background-white);
        padding: 10px 20px;
        text-decoration: none;
        font-weight: 600;
        transition: background-color 0.3s ease;
        border-radius: 5px;
    }
    .main-nav-desktop a:hover {
        background-color: var(--button-hover);
        text-decoration: none;
    }
}
*/
/* Efeito de Folhas Voando - Versão Corrigida */
.falling-leaves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.leaf {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--secondary-green);
    border-radius: 0 100% 0 100%;
    opacity: 0.7;
    transform-origin: center;
}

.leaf:nth-child(odd) {
    background: var(--primary-green);
    opacity: 0.5;
}

.leaf:nth-child(3n) {
    background: var(--accent-color);
    opacity: 0.6;
}

.leaf:nth-child(4n) {
    background: var(--light-green);
    opacity: 0.8;
    width: 15px;
    height: 15px;
}

.leaf:nth-child(5n) {
    background: #8FBC8F;
    opacity: 0.4;
    width: 25px;
    height: 25px;
}

/* Diferentes formas de folhas */
.leaf.type-2 {
    border-radius: 50% 0 50% 0;
}

.leaf.type-3 {
    border-radius: 100% 0 100% 0;
    width: 18px;
    height: 18px;
}

.leaf.type-4 {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-radius: 0;
    width: 16px;
    height: 20px;
}

/* Animação principal - queda simples */
.leaf.fall-straight {
    animation: fallStraight linear infinite;
}

.leaf.fall-left {
    animation: fallLeft linear infinite;
}

.leaf.fall-right {
    animation: fallRight linear infinite;
}

@keyframes fallStraight {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) rotate(360deg);
        opacity: 0;
    }
}

@keyframes fallLeft {
    0% {
        transform: translateY(-100px) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    25% {
        transform: translateY(25vh) translateX(-20px) rotate(90deg);
    }
    50% {
        transform: translateY(50vh) translateX(-10px) rotate(180deg);
    }
    75% {
        transform: translateY(75vh) translateX(-30px) rotate(270deg);
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) translateX(-15px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes fallRight {
    0% {
        transform: translateY(-100px) translateX(0px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    25% {
        transform: translateY(25vh) translateX(20px) rotate(90deg);
    }
    50% {
        transform: translateY(50vh) translateX(10px) rotate(180deg);
    }
    75% {
        transform: translateY(75vh) translateX(30px) rotate(270deg);
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) translateX(15px) rotate(360deg);
        opacity: 0;
    }
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .leaf {
        width: 15px;
        height: 15px;
    }
    
    .leaf.type-4 {
        width: 12px;
        height: 15px;
    }
    
    .leaf:nth-child(4n) {
        width: 12px;
        height: 12px;
    }
    
    .leaf:nth-child(5n) {
        width: 18px;
        height: 18px;
    }
}

/* Reduzir animações em dispositivos com preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .falling-leaves {
        display: none;
    }
}
.programacao-item ul li strong,
.card ul li strong {
    color: inherit !important;
    font-weight: bold;
}

.programacao-item ul li em,
.card ul li em {
    color: inherit !important;
    font-style: italic;
}

/* Garantir que spans com cor funcionem corretamente */
.programacao-item ul li span[style*="color"],
.card ul li span[style*="color"] {
    font-weight: inherit !important;
}
/* Atrações - Layout Responsivo Melhorado */
.atracoes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.atracao-item {
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.atracao-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Carrossel de Imagens */
.carousel-container {
    position: relative;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
}

.carousel {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.atracao-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
}

.atracao-img.active {
    opacity: 1;
}

/* Controles do Carrossel - VERSÃO CORRIGIDA COM POSICIONAMENTO ABSOLUTO */
.carousel-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-green);
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    line-height: 1;
    user-select: none;
    z-index: 11;
}

.carousel-btn.prev {
    left: 15px;
}

.carousel-btn.next {
    right: 15px;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Melhorar visibilidade dos botões */
.carousel-container:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn {
    opacity: 0.8;
    transition: all 0.3s ease, opacity 0.3s ease;
}

/* Responsividade dos controles */
@media (max-width: 768px) {
    .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .carousel-btn.prev {
        left: 10px;
    }
    
    .carousel-btn.next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    .carousel-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .carousel-btn.prev {
        left: 8px;
    }
    
    .carousel-btn.next {
        right: 8px;
    }
}

/* Estados de foco para acessibilidade */
.carousel-btn:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    opacity: 1;
}

/* Garantir que os botões fiquem sempre visíveis em dispositivos touch */
@media (hover: none) and (pointer: coarse) {
    .carousel-btn {
        opacity: 1;
        background: rgba(255, 255, 255, 0.95);
    }
}

/* CSS adicional para os spans dos botões */
.carousel-btn span {
    display: block;
    line-height: 1;
    font-size: inherit;
    margin: 0;
    padding: 0;
}

/* ===== WI-FI SECTION NOVA E FUNCIONAL ===== */
.wifi-networks {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.wifi-network {
    background: var(--light-green);
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid var(--primary-green);
    transition: all 0.3s ease;
}

.wifi-network:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.wifi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.wifi-header h4 {
    color: var(--primary-green);
    margin: 0;
    font-size: 1.1em;
}

.wifi-signal {
    background: var(--primary-green);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
}

.wifi-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wifi-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px 15px;
    border-radius: 8px;
    flex-wrap: wrap;
}

.wifi-label {
    font-weight: 600;
    color: var(--text-color-dark);
    min-width: 50px;
}

.wifi-value {
    font-family: 'Courier New', monospace;
    background: white;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    flex: 1;
    min-width: 150px;
    font-weight: 600;
    color: var(--primary-green);
}

/* NOVO: Estilo para o botão de cópia do Wi-Fi */
.btn-copy {
    background: var(--primary-green);
    color: white;
    border: none;
    padding: 8px 15px; /* Ajusta o padding para caber o texto */
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    min-width: 90px; /* Garante espaço para o texto "Copiar" */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Espaçamento entre o ícone e o texto */
}

.btn-copy:hover {
    background: var(--button-hover);
    transform: scale(1.05);
}

.btn-copy:active {
    transform: scale(0.95);
}

.wifi-instructions {
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
    border: 1px dashed var(--primary-green);
}

.wifi-instructions h4 {
    color: var(--primary-green);
    margin-bottom: 12px;
    font-size: 1em;
}

.wifi-instructions ol {
    margin: 0;
    padding-left: 20px;
}

.wifi-instructions li {
    margin-bottom: 8px;
    color: var(--text-color-dark);
}

.wifi-instructions i {
    color: var(--primary-green);
    margin: 0 2px;
}

/* Responsividade Wi-Fi */
@media (max-width: 768px) {
    .wifi-info {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wifi-value {
        min-width: unset;
        text-align: center;
    }
    
    .btn-copy {
        align-self: center;
        width: 120px;
    }
    
    .wifi-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* Container dos botões do hero */
.hero-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* Botão Pet-Friendly - baseado no btn-primary original */
/* Botão Pet-Friendly - baseado no btn-primary original */
/* Botão Pet-Friendly - baseado no btn-primary original */
.btn-pet-friendly {
    display: inline-block;
    background-color: #4A9428; /* Verde médio */
    color: var(--background-white);
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    text-align: center;
    margin-top: 20px;
}

.btn-pet-friendly:hover {
    background-color: var(--primary-green); /* Escurece no hover */
    text-decoration: none;
}
/* Botão Avalie-nos */
.btn-avalie-nos {
    display: inline-block;
    background-color: #5CAB2F; /* Verde mais claro */
    color: var(--background-white);
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
    text-align: center;
    margin-top: 20px;
}

.btn-avalie-nos:hover {
    background-color: #4A9428; /* Escurece no hover */
    text-decoration: none;
}
/* Responsividade dos botões hero */
@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary, .btn-pet-friendly, .btn-avalie-nos {
    width: 200px;
}
}

/* Wi-Fi Grid */
.wifi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.wifi-info h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-green);
    margin-bottom: 15px;
}

.btn-wifi {
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-wifi:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(56, 125, 32, 0.3);
}

/* Contato */
.contact-main {
    text-align: center;
}

.contact-number {
    margin: 20px 0;
}

.phone-number {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--primary-green);
}

.contact-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.btn-contact {
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.btn-call {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.btn-contact:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

/* Pontos turísticos - adicionar classes que faltam */
.pontos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.ponto-item {
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.ponto-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ponto-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ponto-info {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.distancia {
    color: var(--text-color-light);
    font-size: 0.9em;
    font-weight: 600;
}

.nav-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-nav {
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-maps {
    background: #4285f4;
    color: white;
}

.btn-maps:hover {
    background: #3367d6;
    text-decoration: none;
}

.btn-waze {
    background: #00d4ff;
    color: white;
}

.btn-waze:hover {
    background: #00b8e6;
    text-decoration: none;
}

/* Carousel dots */
.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: white;
    transform: scale(1.2);
}

.dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.contact-info {
    margin-top: 20px;
}

.contact-info p {
    margin: 10px 0;
}

.contact-info a {
    color: var(--primary-green);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* ===== CHATBOT STYLES - ORIGINAL QUE FUNCIONAVA ===== */
#chatbot-widget {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1000;
    font-family: 'Open Sans', sans-serif;
}

#chat-button {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

#chat-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

#chat-button i {
    color: white;
    font-size: 24px;
}

.chat-notification {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

#chat-container {
    position: absolute;
    bottom: 80px;
    right: 80px !important; 
    width: 320px;
    height: 480px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.chat-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

#chat-header {
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    color: white;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    padding: 5px;
}

.chat-header-info h4 {
    margin: 0;
    font-size: 16px;
    color: white;
}

.chat-status {
    font-size: 12px;
    opacity: 0.8;
}

.chat-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.chat-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

#chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 80%;
    word-wrap: break-word;
}

.user-message {
    align-self: flex-end;
}

.bot-message {
    align-self: flex-start;
}

.message-content {
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 14px;
    line-height: 1.4;
}

.user-message .message-content {
    background: var(--primary-green);
    color: white;
    border-bottom-right-radius: 5px;
}

.bot-message .message-content {
    background: #f0f0f0;
    color: var(--text-color-dark);
    border-bottom-left-radius: 5px;
}

.message-time {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 5px;
    display: block;
}

.quick-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.quick-btn {
    background: var(--light-green);
    border: 1px solid var(--primary-green);
    color: var(--primary-green);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-btn:hover {
    background: var(--primary-green);
    color: white;
}

#chat-input-container {
    padding: 15px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
}

#chat-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    font-size: 14px;
}

#chat-input:focus {
    border-color: var(--primary-green);
}

#send-button {
    background: var(--primary-green);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    flex-shrink: 0; /* Garante que o botão não encolha em um flex container */
    box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho total */
}

/* Estilo para o ícone dentro do botão de enviar */
#send-button i {
    font-size: 20px; /* Reduz o tamanho do ícone para garantir que caiba bem */
    line-height: 1; /* Garante que o ícone esteja bem alinhado verticalmente */
}

#send-button:hover {
    background: var(--button-hover);
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 10px 15px;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: #999;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

/* Responsividade do chatbot */
/* Correção mobile chatbot */
@media (max-width: 768px) {
    #chatbot-widget {
        bottom: 100px !important;
    }
    
    #chat-container {
        position: fixed !important;
        bottom: 90px !important;
        right: 20px !important;
        left: 20px !important;
        width: auto !important;
        max-width: 300px !important;
        height: 480px !important;     /* Aumentado para 480px */
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    #chat-container {
        bottom: 80px !important;
        right: 15px !important;
        left: 15px !important;
        max-width: 280px !important;
        height: 420px !important;     /* Aumentado para 420px */
    }
}
/* ===== CANAIS DE TV ===== */
.canais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.canal-categoria h3 {
    color: var(--primary-green);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canais-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.canal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--light-green);
    border-radius: 8px;
    transition: background 0.3s ease;
}

.canal-item:hover {
    background: var(--accent-color);
}

.canal-numero {
    font-weight: bold;
    color: var(--primary-green);
    background: white;
    padding: 4px 8px;
    border-radius: 15px;
    min-width: 40px;
    text-align: center;
    font-size: 0.9em;
}

.canal-nome {
    color: var(--text-color-dark);
    font-weight: 500;
}

.tv-instructions {
    background: var(--light-green);
    padding: 20px;
    border-radius: 12px;
    margin-top: 25px;
    border-left: 4px solid var(--primary-green);
}

.tv-instructions h4 {
    color: var(--primary-green);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tv-instructions ul {
    list-style: none;
    padding: 0;
}

.tv-instructions li {
    margin-bottom: 8px;
    color: var(--text-color-dark);
    padding-left: 20px;
    position: relative;
}

.tv-instructions li:before {
    content: "▶";
    color: var(--primary-green);
    position: absolute;
    left: 0;
}

/* ===== FEEDBACK ===== */
.feedback-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-green);
}

.rating-stars {
    display: flex;
    gap: 5px;
    margin: 10px 0;
}

.star {
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: grayscale(100%);
}

.star:hover,
.star.active {
    transform: scale(1.2);
    filter: grayscale(0%);
}

.btn-feedback {
    background: linear-gradient(135deg, var(--primary-green), var(--secondary-green));
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}

.btn-feedback:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(56, 125, 32, 0.3);
}

.feedback-message {
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feedback-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.feedback-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.feedback-message i {
    font-size: 20px;
}

/* Responsividade */
@media (max-width: 768px) {
    .canais-grid {
        grid-template-columns: 1fr;
    }
    
    .canal-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .canal-numero {
        align-self: flex-end;
    }
    
    .rating-stars {
        justify-content: center;
    }
}
/* Estilos para as abas de TV */
.tv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: center;
}

.tv-tab-button {
    background: linear-gradient(135deg, #4a7c59, #2c5530);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tv-tab-button:hover {
    background: linear-gradient(135deg, #5a8c69, #3c6540);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.tv-tab-button.active {
    background: linear-gradient(135deg, #6b9b7a, #4a7c59);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transform: translateY(-1px);
}

.tv-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.tv-tab-content.active {
    display: block;
}

.tv-channel-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.tv-channel-list li {
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4a7c59;
    transition: all 0.2s ease;
}

.tv-channel-list li:hover {
    background: #e8f5e8;
    transform: translateX(5px);
}

.tv-channel-list li strong {
    color: #2c5530;
    margin-right: 8px;
    font-weight: 700;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
    .tv-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .tv-tab-button {
        width: 100%;
        max-width: 300px;
        padding: 15px 20px;
        font-size: 1em;
    }
    
    .tv-channel-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Natal Leve: Pinheiros Laterais */
.christmas-pine-left,
.christmas-pine-right {
    position: fixed;
    top: 0;
    height: 100%;
    background-image: url('img/pinheiros.png'); /* Caminho para sua imagem */
    background-size: contain; /* Ajusta a imagem dentro da div sem cortar */
    background-repeat: no-repeat;
    background-position: center bottom; /* Posiciona os pinheiros na parte inferior */
    z-index: -1; /* Fica atrás de todo o conteúdo */
    pointer-events: none; /* Não bloqueia interações com a página */
    opacity: 0.6; /* Deixa os pinheiros mais sutis */
    width: 200px; /* Largura padrão */
    display: none; /* Escondido por padrão, para telas menores */
}

.christmas-pine-left {
    left: 0;
}

.christmas-pine-right {
    right: 0;
    transform: scaleX(-1); /* Inverte a imagem horizontalmente para o lado direito */
}

/* Mostrar pinheiros apenas em telas maiores */
@media (min-width: 1200px) {
    .christmas-pine-left,
    .christmas-pine-right {
        display: block;
    }
}
@media (min-width: 1400px) {
    .christmas-pine-left,
    .christmas-pine-right {
        width: 250px; /* Aumenta a largura em telas maiores */
    }
}
@media (min-width: 1600px) {
    .christmas-pine-left,
    .christmas-pine-right {
        width: 300px; /* Aumenta ainda mais a largura em telas muito grandes */
    }
}
/* Efeito de Folhas Voando - Versão Corrigida */
/* Comentado para dar lugar ao efeito de neve
.falling-leaves {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.leaf {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--secondary-green);
    border-radius: 0 100% 0 100%;
    opacity: 0.7;
    transform-origin: center;
}
... (todo o código do falling-leaves e suas animações) ...
*/

/* Natal Leve: Efeito de Neve Caindo */
.falling-snow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* Fica acima do conteúdo, mas abaixo de popups importantes */
    overflow: hidden;
}

.snowflake {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0; /* Garante que o floco comece invisível por padrão via CSS */
    transform-origin: center;
    animation: fallSnow linear infinite;
    animation-fill-mode: backwards; /* Aplica o estado 0% da animação (incluindo opacity: 0) durante o animation-delay */
}

/* Animação para a queda da neve */
@keyframes fallSnow {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) rotate(360deg);
        opacity: 0;
    }
}

/* Reduzir animações em dispositivos com preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .falling-snow {
        display: none;
    }
}
/* Atrações - Layout Responsivo Melhorado */
.atracoes-grid,
.pontos-grid { /* Aplicando o mesmo estilo para ambos os grids */
    display: grid;
    /* minmax mais flexível para mobile: 180px para que 2 items possam caber em telas maiores, 
       mas 1fr para que possa diminuir em telas muito pequenas */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 20px; /* Gap ajustado para mobile */
    margin-top: 30px;
    justify-content: center; /* **CRUCIAL:** Centraliza as colunas do grid */
}

@media (min-width: 500px) { /* Para telas um pouco maiores que um mobile padrão */
    .atracoes-grid,
    .pontos-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Itens um pouco maiores */
        gap: 25px; /* Aumenta o gap */
    }
}

@media (min-width: 768px) { /* Tablets */
    .atracoes-grid,
    .pontos-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Itens maiores para desktop */
        gap: 30px; /* Aumenta o gap */
    }
}
/* ===== Estilos para o Pop-up de Aviso (popup-aviso-modal) ===== */
.popup-modal {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fixo na tela */
    z-index: 2000; /* Acima de tudo */
    left: 0;
    top: 0;
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    overflow: auto; /* Permite scroll se o conteúdo for grande */
    background-color: rgba(0,0,0,0.6); /* Fundo semi-transparente */
    justify-content: center; /* Centraliza o conteúdo */
    align-items: center; /* Centraliza o conteúdo */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-modal.show-popup {
    display: flex; /* Exibe como flex para centralizar */
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% do topo e centralizado */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 450px;
    position: relative;
    text-align: center;
    transform: scale(0.9); /* Começa menor */
    transition: transform 0.3s ease;
    animation: bounceIn 0.5s ease-out forwards;
}

@keyframes bounceIn {
    0% { transform: scale(0.7); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.popup-close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.popup-close-button:hover,
.popup-close-button:focus {
    color: var(--primary-green);
    text-decoration: none;
    outline: none;
}

.popup-icon {
    font-size: 3em;
    margin-bottom: 15px;
}

#popup-aviso-titulo {
    color: var(--primary-green);
    font-size: 1.6em;
    margin-bottom: 10px;
}

#popup-aviso-mensagem {
    font-size: 1.1em;
    color: var(--text-color-dark);
    line-height: 1.5;
    margin-bottom: 25px;
}

.popup-ok-button {
    background-color: var(--primary-green);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.popup-ok-button:hover {
    background-color: var(--button-hover);
    transform: translateY(-2px);
}

/* Responsividade para o pop-up */
@media (max-width: 600px) {
    .popup-content {
        margin: 10% auto;
        padding: 20px;
    }
    #popup-aviso-titulo {
        font-size: 1.4em;
    }
    #popup-aviso-mensagem {
        font-size: 1em;
    }
    .popup-icon {
        font-size: 2.5em;
    }
}

.footer > * { /* Seleciona todos os filhos diretos do .footer */
    margin-left: 0;
    margin-right: 0;
    max-width: 100%; /* Garante que os filhos não ultrapassem */
}

/* E para o h1 e p dentro do hero especificamente */
.hero h1,
.hero p {
    margin-left: 0;
    margin-right: 0;
}

/* E para o p dentro do footer */
.footer p {
    margin-left: 0;
    margin-right: 0;
}
/* Sino de Natal Flutuante */
#christmas-bell-widget {
    position: fixed;
    top: 20px; /* Posição superior da tela */
    right: 20px; /* Posição à direita da tela */
    z-index: 1000; /* Garante que fique acima da maioria dos elementos */
    transition: opacity 0.5s ease-in-out; /* Transição para aparecer suavemente */
    opacity: 0; /* Começa invisível */
    pointer-events: none; /* Não interfere com cliques antes de aparecer */
}

/* Para mostrar o sino */
#christmas-bell-widget.show-bell {
    opacity: 1;
    pointer-events: auto; /* Permite cliques quando visível */
}

#christmas-bell-button {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--christmas-red), var(--christmas-gold)); /* Cores de Natal */
    border-radius: 50%; /* Formato de círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    color: white; /* Cor do ícone do sino */
    font-size: 22px; /* Tamanho do ícone */
    animation: bellJingle 2s infinite ease-in-out; /* Animação sutil para chamar atenção */
}

#christmas-bell-button:hover {
    transform: scale(1.1) rotate(15deg); /* Aumenta um pouco e gira no hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Animação para o sino (um balanço sutil) */
@keyframes bellJingle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}

/* Ajuste para não colidir com outros elementos em dispositivos móveis */
@media (max-width: 768px) {
    #christmas-bell-widget {
        top: 80px; /* Abaixa um pouco para não ficar muito no topo */
    }
}
@media (max-width: 480px) {
    #christmas-bell-widget {
        top: 70px; /* Ajuste para telas menores */
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    #christmas-bell-button {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}
/* --- ESTILOS ADICIONAIS PARA O LAYOUT DO CARDÁPIO DA LANCHONETE --- */

/* Ajusta o espaçamento para os títulos principais dentro do card da lanchonete (CAFETERIA, BEBIDAS, COMIDAS) */
.tab-content .card h3 {
    font-size: 1.5em; /* Títulos de categoria principal */
    color: var(--primary-green);
    margin-top: 30px; /* Espaço generoso acima para separar categorias principais */
    margin-bottom: 10px; /* Espaço antes da primeira sub-categoria ou lista */
    text-align: left; /* Garante que esteja alinhado à esquerda */
    padding-left: 5px; /* Pequeno recuo para consistência */
}

/* Garante que o primeiro h3 em um card não tenha margem superior excessiva */
.tab-content .card h3:first-of-type {
    margin-top: 0;
}

/* Ajusta o espaçamento para os títulos de sub-categoria (DRINKS, VINHOS, CERVEJAS, PORÇÕES, LANCHES, AÇAÍ) */
.tab-content .card h4 {
    font-size: 1.2em;
    color: var(--text-color-dark);
    margin-top: 25px; /* Espaço para separar da lista anterior (ex: DRINKS de CAFETERIA) */
    margin-bottom: 8px; /* Mantém o título próximo à sua primeira sub-divisão ou lista */
    text-align: left;
    padding-left: 5px;
}

/* Ajusta o espaçamento para os títulos de subdivisão (LATA, LONG NECK, 600ML, LICORES, VODKAS, etc.) */
.tab-content .card h5 {
    font-size: 1.05em;
    color: var(--text-color-dark);
    margin-top: 15px; /* Espaço para separar da lista anterior (ex: LONG NECK de LATA) */
    margin-bottom: 5px; /* Mantém o subtítulo bem próximo à sua própria lista */
    text-align: left;
    padding-left: 5px;
}

/* Controla as margens verticais das listas (ul) dentro do card */
.tab-content .card ul {
    list-style: none; /* Já definido */
    padding: 0;      /* Já definido */
    margin-top: 0;   /* CRUCIAL: Remove a margem superior padrão do UL para que a margem do h5 funcione */
    margin-bottom: 15px; /* Espaço consistente após cada lista, antes do próximo título */
}

/* Refina a margem de cada item da lista para um espaçamento mais apertado */
.tab-content .card ul li {
    margin-bottom: 5px;
    color: var(--text-color-dark);
}

/* Ajusta a nota de descrição de item para um espaçamento adequado */
.tab-content .card .item-description-note {
    font-size: 0.9em;
    color: var(--text-color-light);
    font-style: normal;
    text-align: left;
    margin-top: -5px; /* Puxa para cima para ficar mais próximo do h4 */
    margin-bottom: 10px; /* Empurra para baixo antes da ul */
    padding-left: 5px;
}
.tab-content#restaurante .card h4 {
    color: var(--primary-green); /* Usa o verde principal da sua paleta */
}
/* --- ESTILO PARA BOLINHAS NO CARDÁPIO DO RESTAURANTE --- */
/* Garante que os itens das listas de almoço e jantar tenham bolinhas */
.tab-content#restaurante .card ul {
    list-style-type: disc; /* Adiciona as bolinhas */
    padding-left: 20px;    /* Adiciona um recuo para as bolinhas ficarem visíveis */
    margin-bottom: 15px;   /* Mantém o espaçamento após a lista, se já existir */
}

/* Garante um espaçamento adequado para cada item da lista */
.tab-content#restaurante .card ul li {
    margin-bottom: 5px;
}