/* ========================================= */
/*               PRELOADER                   */
/* ========================================= */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #121212; z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s 0.5s; }
#preloader.fade-out { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.preloader-content { text-align: center; }
#preloader img { max-width: 200px; animation: pulse-loader 1.5s ease-in-out infinite; }
@keyframes pulse-loader { 0% { transform: scale(0.95); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.7; } }
.preloader-bar-container { width: 220px; height: 4px; background-color: rgba(255, 255, 255, 0.2); border-radius: 2px; margin: 20px auto 0; overflow: hidden; }
#preloader-bar { width: 0%; height: 100%; background-color: var(--cor-destaque); border-radius: 2px; transition: width 0.4s ease-out; }

/* ========================================= */
/*          ESTILOS GERAIS (COMPARTILHADOS)  */
/* ========================================= */
:root {
    --cor-destaque: #d92525;
    --cor-texto: #f1f1f1;
}

/* --- Estilos Gerais --- */
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--cor-texto); background-image: url('../imagens/background.jpg');
    background-size: cover; background-attachment: fixed; background-position: center;
}
body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: -1;
}
.header { text-align: center; padding: 20px 0; }
.header img { max-width: 180px; }
.container {
    max-width: 100%; height: calc(100vh - 200px); margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: 20px;
}
.instrucao { text-align: center; margin-bottom: 20px; font-size: 1.2rem; }
/* Estilos dos botões, preloader, modais etc., continuam aqui... */
.botoes-topo-container { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 20px; }
.instagram-link { display: inline-flex; align-items: center; justify-content: center; background-color: var(--cor-destaque); color: white; padding: 10px 25px; border-radius: 8px; text-decoration: none; font-weight: bold; }


/* ==================================================================== */
/*   NOVO: LAYOUT ESTÁTICO COM EFEITO SANFONA (COVERFLOW) USANDO CSS    */
/* ==================================================================== */

/* O container dos slides (originalmente .swiper-container) agora é o nosso palco 3D */
.swiper-container, #prateleira-menus-swiper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Ativa o espaço 3D */
    perspective: 1200px;
    padding: 50px 0;
}

/* Os slides agora são posicionados manualmente para criar o efeito */
.swiper-slide {
    width: 250px;
    height: 360px;
    border-radius: 15px;
    overflow: hidden;
    position: relative; /* Mudado de absolute para um fluxo mais natural */
    transition: transform 0.4s ease-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    flex-shrink: 0; /* Impede que os slides encolham */
    transform-style: preserve-3d;
}

/* Interação no Hover */
.swiper-slide:hover {
    transform: translateY(-15px) scale(1.05);
    z-index: 10;
}

/* Posicionamento e Rotação dos Slides para criar o efeito "sanfona" */
/* Slide central */
.swiper-slide:nth-child(3) {
    transform: translateZ(0); /* Fica na frente */
    z-index: 5;
}
/* Slides imediatamente ao lado do central */
.swiper-slide:nth-child(2),
.swiper-slide:nth-child(4) {
    transform: translateX(-120px) translateZ(-150px) rotateY(35deg);
}
.swiper-slide:nth-child(4) {
    transform: translateX(120px) translateZ(-150px) rotateY(-35deg);
}
/* Slides mais distantes */
.swiper-slide:nth-child(1),
.swiper-slide:nth-child(5) {
    transform: translateX(-240px) translateZ(-300px) rotateY(45deg);
    opacity: 0.8;
}
.swiper-slide:nth-child(5) {
    transform: translateX(240px) translateZ(-300px) rotateY(-45deg);
}

/* Oculta slides extras se houver mais de 5 */
.swiper-slide:nth-child(n+6) {
    display: none;
}


/* Estilo interno do card (permanece o mesmo) */
.swiper-slide a {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    text-decoration: none;
    color: var(--cor-texto);
    background-color: #2c2c2c;
}
.swiper-slide img {
    width: 100%;
    height: calc(100% - 60px);
    object-fit: cover;
    border-bottom: 5px solid var(--cor-destaque);
}
.swiper-slide p {
    margin: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}
/* ===== TRIPADVISOR RESPONSIVO ===== */
.tripadvisor-section { text-align: center; padding-bottom: 1vh; flex-shrink: 0; }
.tripadvisor-img-btn img { 
    width: clamp(80px, 8vw, 100px); /* Ícone do Trip Advisor também é responsivo */
    height: auto; 
    display: block; 
}
.tripadvisor-img-btn { display: inline-block; transition: transform 0.2s ease-in-out; }
.tripadvisor-img-btn:hover { transform: scale(1.1); }

/* --- Resto do CSS (Modais e Zoom) --- */
@keyframes pulse-background {0%{background-color:#4a4a4a}50%{background-color:#5a5a5a}100%{background-color:#4a4a4a}}
.modal-page img { cursor: zoom-in; transition: transform 0.3s ease; }
.modal-page.zoomed img { cursor: zoom-out; transform: scale(2); }
.modal-container{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.95);flex-direction:column;justify-content:center;align-items:center}
.modal-content{position:relative; display:flex;flex-direction:column;width:100%;height:100%;max-width:100vw;max-height:100vh}
.fechar-modal{position:absolute;top:5px;right:10px;color:#fff;font-size:50px;font-weight:700;cursor:pointer;z-index:1002;text-shadow:0 0 8px #000}
#imagem-container { flex-grow: 1; width: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
#imagem-container::-webkit-scrollbar { display: none; }
.modal-page { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; position: relative; display: flex; justify-content: center; align-items: center; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
#imagem-container .modal-page img { flex-shrink: 0; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.navegacao{text-align:center;padding:15px 0 10px;flex-shrink:0;z-index: 1001;}
.navegacao button{background-color:var(--cor-destaque);color:#fff;border:none;padding:12px 25px;font-size:16px;cursor:pointer;border-radius:5px;margin:0 10px;transition:background-color .2s}
.navegacao button:hover:not(:disabled){background-color:var(--cor-destaque-hover)}.navegacao button:disabled{background-color:#555;cursor:not-allowed;opacity:.6}
#contador-pagina{font-size:18px;font-weight:700;margin:0 20px;display:inline-block;vertical-align:middle}
.loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; color: white; font-size: 1.2rem; }
.progress-bar-container { width: 80%; max-width: 400px; height: 20px; background-color: #555; border-radius: 10px; overflow: hidden; margin-top: 15px; border: 2px solid #666; }
.progress-bar { width: 0%; height: 100%; background-color: var(--cor-destaque); border-radius: 8px; transition: width 0.3s ease-out; }

.modal-container-instagram{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.85);justify-content:center;align-items:center;padding:15px;box-sizing:border-box}
.modal-content-instagram { max-width: 420px; padding: 25px 30px; background-color:#2c2c2c;color:var(--cor-texto);border-radius:12px;border:1px solid #555;text-align:center;position:relative;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:fadeInModal .3s ease-out }
@keyframes fadeInModal{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.modal-content-instagram h2{margin-top:0;margin-bottom:10px;font-size:1.8rem}
.modal-content-instagram p{font-size:1rem;line-height:1.5;margin-bottom:25px}
.fechar-modal-instagram{position:absolute;top:5px;right:15px;color:#aaa;font-size:40px;font-weight:bold;cursor:pointer;transition:color .2s}
.fechar-modal-instagram:hover{color:#fff}
.social-icons { display: flex; justify-content: center; gap: 30px; margin: 25px 0; }
.social-icons a { color: #f1f1f1; font-size: 40px; transition: color 0.2s, transform 0.2s; }
.social-icons a:hover { color: var(--cor-destaque); transform: scale(1.1); }
.other-links { margin-top: 20px; border-top: 1px solid #444; padding-top: 20px; }
.other-links h3 { margin: 0 0 15px 0; font-weight: 500; font-size: 1.1rem; color: #ccc; }
.other-links a { display: block; background-color: #3f3f3f; color: #f1f1f1; padding: 12px; border-radius: 8px; text-decoration: none; margin-bottom: 10px; transition: background-color 0.2s; }
.other-links a:hover { background-color: #555; }
/* =========================================== */
/*      ESTILO PARA OS BOTÕES LADO A LADO      */
/* =========================================== */

.botoes-topo-container {
    display: flex; /* A mágica acontece aqui: alinha os itens horizontalmente */
    justify-content: center; /* Centraliza o grupo de botões */
    align-items: center; /* Alinha verticalmente, caso um seja maior que o outro */
    gap: 20px; /* Cria um espaço de 20px entre os botões */
    margin: 15px 0; /* Margem para separar dos outros elementos */
    flex-wrap: wrap; /* Permite que os botões quebrem para a linha de baixo em telas muito estreitas */
}

/* Um pequeno ajuste no seu estilo de link existente, para funcionar bem no flexbox */
.instagram-link {
    display: inline-flex; /* Melhor para alinhar ícone e texto */
    align-items: center;
    justify-content: center;
}