/* ====================
   CONFIGURAÇÕES GERAIS E RESET
   ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Fonte Padrão (Poppins) */
    font-family: 'Poppins', sans-serif; 
}

/* Títulos das Seções (com a fonte limpa, como no Figma) */
.section-title {
    font-weight: 600;
}

body {
    background-color: #f4f4f4;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ====================
   1. HEADER (CABEÇALHO) - MOBILE FIRST
   ==================== */
.header {
    /* Estado inicial transparente */
    background-color: transparent;
    border-bottom: 1px solid transparent; /* MUDADO: Borda inicial transparente */
    
    position: fixed; /* MUDADO de 'sticky' para 'fixed' para sobrepor o hero */
    top: 0;
    width: 100%;
    z-index: 1000;
    
    /* Transição suave para a mudança de cor */
    transition: background-color 0.4s ease, border-bottom 0.4s ease, box-shadow 0.4s ease;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo {
    display: flex; 
    align-items: center; 
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff; /* MUDADO para branco */
    transition: color 0.4s ease; /* Transição da cor do texto */
}
/* Estilo para a logo dentro do cabeçalho */
.nav-logo {
    display: flex; /* Para alinhar a imagem e o texto lado a lado */
    align-items: center; /* Centraliza verticalmente a imagem e o texto */
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}
.nav-logo span {
    font-family: 'Poppins', cursive; /* Fonte do Logo */
    font-size: 1.9rem; /* Um pouco maior para a fonte script */
    font-weight: 400; /* Yellowtail só tem peso 400 */
    color: #ffffff;
    transition: color 0.4s ease;
    margin-top: 5px; /* Ajuste fino de alinhamento */
}
.logo-header {
    height: 30px; /* Altura da sua logo. Ajuste conforme necessário. */
    margin-right: 10px; /* Espaço entre a logo e o texto */
}

/* No mobile, o tamanho da logo pode precisar ser um pouco menor se for muito grande */
@media (max-width: 767px) {
    .logo-header {
        height: 25px; /* Um pouco menor para mobile, se preferir */
    }
}

/* Esconde o menu principal no mobile */
.nav-menu {
    display: none; 
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 60px; /* Ajuste se a altura do seu header mudou */
    background-color: #ffffff; /* Fundo branco QUANDO ABERTO */
    width: 100%;
    text-align: center;
    border-top: 1px solid #ddd;
}

/* Classe que o JS vai adicionar/remover */
.nav-menu.active {
    display: flex;
}

.nav-item {
    padding: 1rem 0;
}
    .nav-item-social {
    margin-right: 1.5rem; /* Espaço entre o ícone e "Início" */
    display: none; /* Escondido no mobile (vamos adicionar no menu hamburger) */
}

.nav-link-social img {
    height: 24px;
    width: 24px;
    transition: opacity 0.3s ease;
}

/* Esconde o ícone PRETO por padrão */
.nav-link-social .icon-black {
    display: none; 
}

/* Mostra o ícone BRANCO por padrão */
.nav-link-social .icon-white {
    display: block;
}

.nav-link-social:hover img {
    opacity: 0.7;
}

/* Quando o menu mobile está aberto, mostramos o ícone */
.nav-menu.active .nav-item-social {
    display: none; /* MUDADO DE 'block' PARA 'none' */
}

/* Quando o header está scrollado, a imagem NÃO muda de cor (é um PNG) */



.nav-link {
    font-size: 1.1rem;
    color: #ffffff; /* MUDADO para branco */
    transition: color 0.3s ease;
}
/* Cor do link no menu mobile QUANDO ABERTO 
.nav-menu .nav-link { // deu errado kkkllk
    color: #555;
}
*/

.nav-link:hover {
    color: #ddd; /* Hover no estado transparente */
}

/* Cor do hover no menu mobile QUANDO ABERTO */
.nav-menu .nav-link:hover {
    color: #007BFF;
}

/* Estilo do Menu Hambúrguer */
.hamburger {
    display: block; /* Mostra no mobile */
    cursor: pointer;
}
/* ====================
   NOVO: AGRUPADOR MOBILE
   ==================== */

.nav-right-mobile {
    display: flex; /* Padrão (Mobile): mostra o agrupador */
    align-items: center;
    gap: 1.2rem; /* Espaço entre o Insta e o Hamburger */
}

.nav-link-social-mobile {
    display: block;
}

.nav-link-social-mobile img {
    height: 24px;
    width: 24px;
    transition: opacity 0.3s ease;
}

/* Esconde o ícone preto por padrão */
.nav-link-social-mobile .icon-black { display: none; }
.nav-link-social-mobile .icon-white { display: block; }

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #ffffff; /* MUDADO para branco */
    transition: all 0.3s ease-in-out;
}

/* ====================
   ESTADO DO HEADER (SCROLLED / MENU ABERTO)
   ==================== */

/* Quando o header for rolado OU o menu mobile estiver aberto */

/* ... (regras existentes para .icon-white e .icon-black) ... */

/* ADICIONE ESTAS: Lógica de cor para o ícone MOBILE */
.header.scrolled .nav-link-social-mobile .icon-white,
.header.menu-open .nav-link-social-mobile .icon-white {
    display: none;
}
.header.scrolled .nav-link-social-mobile .icon-black,
.header.menu-open .nav-link-social-mobile .icon-black {
    display: block;
}

/* Inverte a visibilidade dos ícones no scroll ou menu-open */

.header.scrolled .nav-link-social .icon-white,
.header.menu-open .nav-link-social .icon-white {
    display: none; /* Esconde o ícone branco */
}

.header.scrolled .nav-link-social .icon-black,
.header.menu-open .nav-link-social .icon-black {
    display: block; /* Mostra o ícone preto */
}

.header.scrolled,
.header.menu-open {
    background-color: #ffffff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Textos e ícones voltam a ser escuros */
/* Textos e ícones voltam a ser escuros */
.header.scrolled .nav-logo,
.header.scrolled .nav-logo span, /* <-- ADICIONE ESTA LINHA */
.header.scrolled .nav-link,
.header.menu-open .nav-logo,
.header.menu-open .nav-logo span, /* <-- ADICIONE ESTA LINHA */
.header.menu-open .nav-link {
    color: #333; /* Cor escura original */
}

.header.scrolled .nav-link:hover,
.header.menu-open .nav-link:hover {
    color: #007BFF; /* Cor de hover original */
}

.header.scrolled .hamburger .bar,
.header.menu-open .hamburger .bar {
    background-color: #333; /* Cor escura original */
}

/* No estado transparente, o menu mobile precisa de textos brancos */
.nav-menu .nav-link {
    color: #ffffff; 
}
/* Mas quando o header fica branco (seja por scroll ou menu-open),
   os links DENTRO do menu mobile (que já era branco) devem ser escuros */
.nav-menu.active .nav-link {
    color: #555;
}

.nav-menu.active .nav-link:hover {
    color: #007BFF;
}
.header.scrolled .nav-menu .nav-link:hover,
.header.menu-open .nav-menu .nav-link:hover {
    color: #007BFF;
}

/* Classe que o JS vai adicionar/remover (para animação do 'X') */
.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ====================
   2. SEÇÃO HERO - MOBILE FIRST
   ==================== */
.hero {
    /* Imagem de fundo (placeholder) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470');
    background-size: cover;
    background-position: center;
    
    height: 60vh; /* 60% da altura da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem;
    color: #ffffff;
}

.hero-content {
    max-width: 600px;
}

.hero-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.btn-primary {
    background-color: #007BFF;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
}
/* ===================================
   Botão Secundário (Saiba Mais)
   =================================== */
.btn-secondary {
    display: inline-block; /* Permite espaçamento e altura */
    padding: 0.8rem 1.5rem;
    background-color: #007BFF; /* Azul principal */
    color: #ffffff; /* Texto branco */
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none; /* Remove borda padrão de link */
    cursor: pointer;
    font-size: 1rem; /* Tamanho da fonte */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Sombra para destaque */
}

.btn-secondary:hover {
    background-color: #0056b3; /* Azul mais escuro no hover */
    transform: translateY(-2px); /* Efeito de "subir" */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

.btn-secondary:active {
    transform: translateY(0); /* Volta ao normal no clique */
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
}

/* ==================== SEÇÃO DESTINOS POPULARES ==================== */
.destinos {
    padding: 3rem 1.5rem;
    text-align: center;
    background-color: #ffffff; /* Fundo branco para a seção */
}

.destinos-carousel-wrapper {
    /* Por padrão (PC), não faz nada */
    max-width: 1200px; /* Largura máxima para o carrossel no PC */
    margin: 0 auto;
}

.destinos-container {
    display: flex; /* PC: cards lado a lado */
    flex-wrap: wrap; /* PC: quebra linha se não couber */
    justify-content: center; /* PC: centraliza cards */
    gap: 1.5rem; /* Espaço entre os cards no PC */
}

.destino-card {
    background-color: #f8f8f8; /* Fundo claro para o card */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    flex: 0 0 calc(33.333% - 1rem); /* PC: 3 cards por linha, com espaçamento */
    max-width: 350px; /* Largura máxima para cada card no PC */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex; /* Para alinhar imagem e conteúdo */
    flex-direction: column; /* Conteúdo em coluna */
}

.destino-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.destino-card img {
    width: 100%;
    height: 200px; /* Altura fixa para as imagens */
    object-fit: cover;
    display: block;
}

.destino-card .card-content {
    padding: 1.2rem;
    text-align: left;
    display: flex; /* Para alinhar texto e botão */
    flex-direction: column;
    justify-content: space-between; /* Empurra o botão para baixo */
    flex-grow: 1; /* Faz o conteúdo ocupar todo o espaço disponível */
}

.destino-card h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.8rem;
}

.destino-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem; /* Espaço antes do botão */
    flex-grow: 1; /* Faz o parágrafo ocupar o espaço */
}

/* ===================================
   RESPONSIVIDADE - DESTINOS (MOBILE)
   =================================== */
@media (max-width: 767px) {
    .destinos {
        padding: 2rem 0; /* Remove padding lateral no mobile, o wrapper cuida disso */
    }

    .destinos-carousel-wrapper {
        overflow-x: auto; /* Permite rolagem horizontal */
        -webkit-overflow-scrolling: touch; /* Melhor rolagem em iOS */
        scroll-snap-type: x mandatory; /* Para "encaixar" os cards */
        padding: 0 1rem; /* Padding lateral para mostrar um pedaço do próximo card */
    }

    .destinos-container {
        flex-wrap: nowrap; /* Não quebra linha, força o carrossel */
        justify-content: flex-start; /* Alinha os cards ao início */
        gap: 1rem; /* Espaço menor entre cards no mobile */
    }

    .destino-card {
        flex: 0 0 85%; /* Mobile: Cada card ocupa 85% da largura da tela */
        scroll-snap-align: start; /* O card se alinha ao início da rolagem */
        max-width: none; /* Remove max-width para ocupar os 85% */
    }

    .destino-card img {
        height: 180px; /* Altura um pouco menor no mobile */
    }
    
    .destino-card .card-content {
        padding: 1rem;
    }

    .destino-card h3 {
        font-size: 1.3rem;
    }

    .destino-card p {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .btn-secondary {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
}
/* ====================
   4. SEÇÃO SOBRE NÓS - MOBILE FIRST
   ==================== */
.sobre {
    background-color: #f9f9f9; /* Fundo cinza claro */
    padding: 3rem 1.5rem;
}

.sobre-container {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.sobre-content {
    text-align: left;
}

.sobre-texto {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.sobre-texto.strong { /* Para o último parágrafo */
    font-weight: 600;
    color: #333;
}

.sobre-imagem img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ====================
   5. SEÇÃO CONTATO - MOBILE FIRST
   ==================== */
.contato {
    padding: 3rem 1.5rem;
    background-color: #ffffff; /* Fundo branco */
}

.contato-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.contato-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: Arial, sans-serif;
}

.form-group textarea {
    resize: vertical; /* Permite ao usuário redimensionar verticalmente */
}

/* Centraliza o botão do formulário */
.contato-form .btn-primary {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}


/* ====================
   6. RODAPÉ (FOOTER) - MOBILE FIRST
   ==================== */
.footer {
    background-color: #222; /* Cor escura para o rodapé */
    color: #ccc;
    padding: 3rem 1.5rem 0; /* 0 padding-bottom, pois o .footer-bottom terá o seu */
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna no mobile */
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-logo h3 {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.footer-logo p {
    font-size: 0.9rem;
    color: #aaa;
}

.footer-links h4,
.footer-social h4 {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.footer-links ul {
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #ccc;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #007BFF; /* Destaque azul */
}

.footer-social a {
    color: #ccc;
    font-size: 1.5rem;
    margin: 0 0.75rem;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: #007BFF; /* Destaque azul */
}

.footer-bottom {
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
    border-top: 1px solid #444;
    font-size: 0.9rem;
    color: #aaa;
}
/* =====================================
   RESPONSIVIDADE (PARA PC / Telas Maiores)
   ===================================== */

@media (min-width: 768px) {
    
    /* 1. Header no PC */
    .hamburger {
        display: none; /* Esconde o hambúrguer no PC */
    }

    .nav-menu {
        display: flex;
        flex-direction: row;
        position: static;
        width: auto;
        border-top: none;
        background-color: transparent; /* <-- ADICIONE ISTO */
    }

    .nav-item {
        padding: 0;
        margin-left: 2rem; /* Espaçamento entre os links */
    }

    /* 2. Hero no PC */
    .hero {
        height: 70vh; /* Um pouco mais alto no PC */
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }
    .sobre-container {
        grid-template-columns: 1fr 1fr; /* 2 colunas no PC */
    }
    .contato-form .btn-primary {
        width: auto; /* Botão não ocupa mais 100% */
        align-self: center; /* Centraliza o botão */
        padding: 0.75rem 2rem;
    }

    /* 6. Rodapé no PC */
    .footer-container {
        grid-template-columns: 2fr 1fr 1fr; /* 3 colunas (Logo, Links, Social) */
        text-align: left; /* Alinha à esquerda no PC */
    }

    .footer-social {
        text-align: right;
    }

    .footer-social a {
        margin: 0 0.5rem 0 0.5rem;
    }
    .nav-right-mobile {
        display: none;
    }
}
/* ====================
   3. SEÇÃO DESTINOS - MOBILE FIRST
   ==================== */

.destinos {
    padding: 3rem 1.5rem; /* 3rem em cima/baixo, 1.5rem dos lados */
    background-color: #ffffff; /* Fundo branco para destacar os cards */
}

.section-title {
    text-align: center;
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 2rem;
}

.destinos-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna por padrão (mobile) */
    gap: 1.5rem; /* Espaço entre os cards */
    max-width: 1200px;
    margin: 0 auto; /* Centraliza a grade */
}

.destino-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Para a imagem se ajustar ao border-radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.destino-card:hover {
    transform: translateY(-5px); /* Efeito de levantar ao passar o mouse */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.destino-img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
}

.destino-info {
    padding: 1.5rem;
}

.destino-titulo {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.destino-desc {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Botão secundário (para os cards) */
.btn-secondary {
    background-color: #f4f4f4;
    color: #333;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: #e9e9e9;
}


/* ====================
   BOTÃO FLUTUANTE WHATSAPP
   ==================== */
.whatsapp-flutuante {
    position: fixed; /* Fica fixo na tela */
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #25D366; /* Cor oficial do WhatsApp */
    color: #FFFFFF;
    border-radius: 50%; /* Deixa redondo */
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 2rem; /* Tamanho do ícone */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001; /* Garante que fique acima de outros elementos */
    transition: transform 0.3s ease;
}

.whatsapp-flutuante:hover {
    transform: scale(1.1); /* Efeito de zoom no hover */
}


/* =====================================
   RESPONSIVIDADE (PARA PC / Telas Maiores)
   ===================================== */
/* ====================
   NOVO STORY PLAYER (Etapa 1: Visual)
   ==================== */
.story-player-section {
    padding: 3rem 1.5rem;
    background-color: #f9f9f9; /* Fundo cinza claro */
    text-align: center;
}

.story-player-section .section-subtitle {
    margin-bottom: 2rem;
}

.story-player-mobile {
    max-width: 400px; /* Largura de um celular */
    margin: 0 auto; /* Centraliza */
    background-color: #1a1a1a; /* Fundo preto (como na base2.jpg) */
    
    /* Proporção 9:16 (altura de um story) */
    aspect-ratio: 9 / 16;
    
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    
    position: relative; /* ESSENCIAL para posicionar tudo dentro */
    overflow: hidden; /* Garante que a imagem não vaze */

    /* Container que segura as mídias (mobile) */
.story-media-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Estilo padrão para CADA mídia (img ou video) */
.story-media-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cobre o container */
    
    /* Esconde por padrão. JS vai mostrar o 'ativo' */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* O item ativo (que está visível) */
.story-media-item.active {
    opacity: 1;
    visibility: visible;
}

/* Estilo do botão de Mute */
.story-controls {
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    color: #ffffff;
}

/* Estilo para mídias no Carrossel do PC */
.carousel-item .carousel-media {
    position: relative;
    z-index: 2;
    width: auto;
    height: 95%; /* Imagem/video ocupa 95% da altura */
    object-fit: contain; /* <-- CORREÇÃO AQUI */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Garante que o item de fundo não apareça por cima */
.carousel-item .item-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Para manter o arredondamento */
    z-index: 1; /* Deve ficar abaixo da mídia */
}
}

/* 1. Barras de Progresso */
.story-progress-bars {
    position: absolute;
    top: 12px;
    left: 8px;
    right: 8px;
    z-index: 10;
    
    display: flex;
    gap: 4px;
}

.progress-bar {
    flex-grow: 1; /* Divide o espaço igualmente */
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3); /* Fundo da barra */
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    width: 0%; /* O JS vai animar isso */
    background-color: #ffffff;
    transition: width 0.1s linear; /* Transição suave */
}

/* 2. Cabeçalho do Story (vihtour) */
.story-header {
    position: absolute;
    top: 24px;
    left: 12px;
    right: 12px;
    z-index: 10;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
}

.story-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.story-user-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.story-controls {
    font-size: 1.2rem;
}


/* 4. Botões de Navegação */
.story-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    
    color: #ffffff;
    font-size: 1.8rem;
    
    /* 70% opaco, como você pediu */
    opacity: 0.7; 
    
    cursor: pointer;
    padding: 1rem; /* Aumenta a área de clique */
    transition: opacity 0.3s ease;
}

.story-nav:hover {
    opacity: 1;
}

.story-nav.prev {
    left: 5px;
}

.story-nav.next {
    right: 5px;
}
/* ====================
   NOVO CARROSSEL (VERSÃO PC)
   ==================== */

.story-carousel-pc {
    display: none; /* Escondido por padrão (Mobile-first) */
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    height: 600px; /* Altura do carrossel no PC */
    overflow: hidden;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-item {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    
    /* Configura o item (fundo + imagem) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Por padrão, fica invisível e pequeno */
    opacity: 0;
    transform: scale(0.7) translateX(0);
    transition: all 0.5s ease;
    
    /* Para a imagem não vazar */
    overflow: hidden;
    border-radius: 12px;
}

/* O Efeito de Fundo Desfocado */
.item-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    
    /* O "truque" do desfoque */
    filter: blur(20px) brightness(0.7);
    
    /* Garante que o desfoque cubra a borda */
    transform: scale(1.1); 
    z-index: 1;
}

/* A Imagem Principal (Retrato) */
.carousel-item img {
    position: relative;
    z-index: 2;
    width: auto;
    height: 95%; /* Imagem ocupa 95% da altura */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* ====================
   POSIÇÕES DO CARROSSEL
   ==================== */

/* A foto ANTERIOR (à esquerda) */
.carousel-item.prev {
    opacity: 0.6;
    transform: scale(0.8) translateX(-50%);
    z-index: 5;
}

/* A foto ATIVA (central, maior) */
.carousel-item.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    z-index: 10;
}

/* A foto SEGUINTE (à direita) */
.carousel-item.next {
    opacity: 0.6;
    transform: scale(0.8) translateX(50%);
    z-index: 5;
}


/* Navegação do Carrossel PC */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    color: #ffffff;
    font-size: 2.5rem;
    opacity: 0.7;
    cursor: pointer;
    padding: 1rem;
    transition: opacity 0.3s ease;
}
.carousel-nav:hover {
    opacity: 1;
}
.carousel-nav.prev { left: 15px; }
.carousel-nav.next { right: 15px; }

/* Ajuste de responsividade para o player */
@media (max-width: 480px) {
    .story-player-container {
        /* Remove a largura máxima e o raio em telas pequenas */
        max-width: 100%;
        border-radius: 0;
        aspect-ratio: 9 / 17; /* Um pouco mais alto em celulares */
    }
    
    .story-player-section {
        padding: 2rem 0; /* Remove padding lateral */
    }
}



@media (min-width: 768px) {
    
    /* ... (suas regras de @media para Header e Hero) ... */
.story-carousel-pc {
        display: block;
    }

    /* Esconde o player do celular */
    .story-player-mobile {
        display: none;
    }
}
    /* 3. Seção Destinos no PC */
    .destinos-grid {
        /* Muda para 3 colunas em telas maiores */
        grid-template-columns: repeat(3, 1fr); 
    }

    .section-title {
        font-size: 2.2rem;
    }
    /* Header - Mostrar ícone do Instagram no PC */
    .nav-item-social {
        display: block; /* Mostra o ícone no PC */
    }

    /* Ajuste para o link do ícone se alinhar verticalmente */
    .nav-link-social {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Nossos Clientes (Stories) no PC */
    .stories-container {
        /* Centraliza o container se não houver scroll */
        justify-content: center;
        padding: 1rem 2.5rem;
    }

    .story-image-wrapper {
        width: 100px;
        height: 100px;
    }

    .story-card span {
        width: 100px;
        font-size: 1rem;
    }


/* Ajuste opcional para telas bem pequenas, se o botão flutuante atrapalhar */
@media (max-width: 480px) {
    .whatsapp-flutuante {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        bottom: 20px;
        right: 20px;
    }
}
.story-carousel-pc .story-header {
    z-index: 20;
}