/* === ESTILO TEMA KARAOKÊ (Customizado) === */
body {
    font-family: 'Poppins', sans-serif; /* Fonte atualizada */
    color: #f5f5f5; /* Cor do texto principal (claro) */
    line-height: 1.6;
    /* Fundo escuro com gradiente radial (vibe de palco) */
    background: radial-gradient(circle at 20% 20%, #1a0033, #000);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* --- HEADER COM VIBE DE PALCO --- */
header {
    position: relative;
    width: 100%;
    height: 70vh; /* Altura ajustada */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 0;
    z-index: 1;
    /* Gradiente semi-transparente sobre o vídeo */
    background: linear-gradient(135deg, rgba(98,0,234,0.7), rgba(0,0,0,0.8));
}

header video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    /* Deixa o vídeo mais escuro e saturado para o efeito neon */
    filter: brightness(0.5) saturate(1.3);
}

header .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    /* Sombra suave no conteúdo */
    text-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* TÍTULO PRINCIPAL COM EFEITO NEON E ANIMAÇÃO - ATUALIZADO */
header h1 {
    font-size: 3.5em;
    font-weight: 800;
    color: #fff; /* ALTERADO: Novo Ciano */
    /* text-shadow ajustado para harmonizar com a nova cor */
    text-shadow: 
        0 0 8px #00e0ff,   /* Brilho principal suave */
        0 0 15px #00a0ff,  /* Brilho secundário (Azul) */
        0 0 25px #0066ff;  /* Brilho terciário (Azul mais escuro) */
    margin-bottom: 10px;
    letter-spacing: 1px;
    animation: glowText 3s ease-in-out infinite alternate;
}

@keyframes glowText {
    /* Ajustando a animação para o novo Ciano e sombras reduzidas */
    from { 
        text-shadow: 
            0 0 6px #00e0ff, /* ALTERADO */
            0 0 10px #00a0ff; /* Ajustado */
    }
    to { 
        text-shadow: 
            0 0 10px #00e0ff, /* ALTERADO */
            0 0 20px #0066ff; 
    }
}

header p {
    font-size: 1.4em;
    color: #ddd;
    margin-bottom: 25px;
}

header .button, .promo-card .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* NOVO GRADIENTE: Verde WhatsApp */
    background: linear-gradient(90deg, #25D366, #128C7E);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 1.1em;
    text-decoration: none;
    font-weight: bold;
    transition: 0.4s ease;
    /* Sombra Verde ajustada */
    box-shadow: 0 0 10px #25D366;
}

header .button:hover, .promo-card .button:hover {
    transform: scale(1.05);
    /* Brilho mais intenso no hover (Ajustado para Verde/Ciano) */
    box-shadow: 0 0 25px #128C7E, 0 0 45px #25D366;
}

.logoheader {
    max-width: 120px; /* Tamanho ajustado */
    filter: drop-shadow(0 0 8px #ff00e0); /* Brilho neon na logo */
}

.whats{
    max-width: 50px;
}
/* --- MENU FIXO (NAVBAR) --- */
.navbar {
    /* Fundo semi-transparente escuro com blur */
    background: rgba(10, 0, 20, 0.85);
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    box-shadow: 0 2px 8px rgba(255, 0, 200, 0.2);
}

.navbar .nav-link {
    color: #fff !important; /* Cor branca forçada */
    font-weight: 500;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* Atualiza a cor de destaque para combinar com o neon */
.navbar .nav-link:hover, .navbar .nav-link.active {
    color: #ff00e0 !important;
    text-shadow: 0 0 10px #ff00e0;
    border-bottom: none; /* Remove a borda preta */
}

.navbar-brand img {
    /* Brilho ciano na logo */
    filter: drop-shadow(0 0 6px #00e0ff); /* ALTERADO: Novo Ciano */
}

#navbar-placeholder {
    height: 56px;
    display: none;
}
.navbar-transition {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    transition: top 0.3s ease;
}
.navbar-hidden {
    top: -60px;
}

/* --- SEÇÕES ALTERNADAS --- */
.section-odd, .section-even {
    padding: 4em 2em; /* Padding ajustado */
    text-align: center;
    color: #f5f5f5; /* Cor do texto claro para seções escuras */
}

/* Seção Ímpar (Fundo escuro 1) */
.section-odd {
    background: radial-gradient(circle at 80% 20%, #120024, #000);
}
/* Seção Par (Fundo escuro 2) */
.section-even {
    background: linear-gradient(135deg, #1a0033, #30005a);
}

/* Títulos das Seções com brilho Ciano/Magenta - REDUZIDO */
h1, h2, .section-even h2, .section-odd h2 {
    font-size: 2.2em;
    font-weight: 700;
    color: #00e0ff; /* ALTERADO: Novo Ciano */
    text-shadow: 0 0 8px #00e0ff, 0 0 15px #ff00e0; /* Sombras reduzidas e ajustadas */
    margin-bottom: 1em;
}

.section-even li, section#contato, section#contato p, section#contato li{
    color: #f5f5f5 !important; /* Texto branco nas seções escuras */
}

/* --- GALERIA / CARDS --- */

/* 1. REVERTENDO O AJUSTE QUE QUEBROU O CARROSSEL SLICK */
/* Reestabelece a altura fixa para os elementos internos do Slick Carousel */
.slick-slide img, .slick-slide iframe {
    width: 100%;
    height: 260px; /* VALOR FIXO REESTABELECIDO PARA O SLICK CAROUSEL */
    object-fit: cover;
    border-radius: 10px;
    /* Borda e sombra magenta neon */
    border: 2px solid #ff00e0;
    box-shadow: 0 0 20px rgba(255, 0, 224, 0.5);
    transition: transform 0.3s ease;
}
.slick-slide img:hover {
    transform: scale(1.05);
}
.slick-slide{
    padding: 0 6px;
}

/* 2. APLICANDO FLEXBOX E ALTURA 100% APENAS NA SEÇÃO #LEVE-TAMBEM */
section#leve-tambem .row {
    display: flex;
    flex-wrap: wrap; 
    align-items: stretch; /* ESSENCIAL: Garante que os cards tenham a mesma altura */
}
section#leve-tambem .col-md-4 {
    display: flex;
    margin-bottom: 20px; 
}
section#leve-tambem .card {
    height: 100%; /* O card ocupa a altura total da coluna */
    width: 100%; 
    display: flex;
    flex-direction: column; 
}

/* 3. AJUSTANDO O CONTAINER DA IMAGEM E A PRÓPRIA IMAGEM DENTRO DOS CARDS */
section#leve-tambem .card-img-container {
    flex-grow: 1; /* Faz o container da imagem crescer e ocupar o espaço principal */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* Sombra magenta suave */
    box-shadow: 0 0 20px rgba(255, 0, 224, 0.3);
    border: 1px solid rgba(255, 0, 224, 0.3);
}

/* Seletor mais específico para as imagens dentro dos cards de 'Leve Também' */
section#leve-tambem .card-img-container img.card-img-top {
    width: 100%;
    height: 100%; /* Altura 100% garantida aqui! */
    object-fit: cover;
    /* Remover estilos de borda e sombra que já estão no .card-img-container ou no .slick-slide img */
    border: none;
    box-shadow: none;
}

.card-img-container:hover {
    /* Sombra ciano intensa no hover */
    box-shadow: 0 0 35px rgba(0, 224, 255, 0.7); /* ALTERADO: Novo Ciano na Sombra */
}

/* AJUSTE DO OVERLAY */
.card-text-overlay {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    background:rgb(98 55 155);
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 10px #ff00e0;
    padding: 10px; /* Adicionado padding para o texto */
    box-sizing: border-box; /* Garante que o padding não estoure o width: 100% */
}

/* --- MODAIS --- */

/* Modal de Vídeo */
div#videoContainer {
    position: fixed;
    z-index: 99999999999;
    left: 0;
    background: rgba(0, 0, 0, 0.79);
    top: 0;
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
}
button.closevideo{
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px;
    color: red;
    font-weight: bold;
}
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
}
.video-content {
    position: relative;
    background: white;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
}
.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

/* Modal de Promoção */
.modal-header {
    /* Gradiente Roxo para Magenta */
    background: linear-gradient(90deg, #6a00ff, #ff00e0);
    border: none;
    padding: 4px;
}

.modal-title {
    color: white;
    text-align: center;
    width: 100%;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0 0 10px #fff;
}
.promo-card {
    background-color: #1a0033; /* Fundo escuro na modal */
    padding: 0;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 0, 224, 0.5); /* Sombra neon */
    text-align: center;
    width: 100%;
    color: #fff; /* Texto claro no card */
    border: 1px solid #ff00e0;
}
div#promoModal p {
    font-size: 1.3rem;
    line-height: normal;
    color: #00e0ff; /* ALTERADO: Novo Ciano */
}
.italic-text {
    font-style: italic;
    color: #ff00e0;
}
.promoimg {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Botão de Fechar */
button.btn-close, button.btn-close:hover{
    background: none;
    color: #fff;
    opacity: 1;
    margin: 0 !important;
    margin-top: -30px !important;
}
button.btn-close:hover{
    text-shadow: #00e0ff 0px 0px 10px; /* ALTERADO: Novo Ciano na Sombra */
}

/* --- ELEMENTOS FLUTUANTES E RODAPÉ --- */

/* BOTÃO WHATSAPP FLUTUANTE */
#whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* Gradiente verde vibrante */
    background: linear-gradient(135deg, #00ff77, #00c853);
    border-radius: 100px;
    padding: 15px;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 255, 128, 0.6);
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}
#whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 35px rgba(0, 255, 128, 0.9);
}

/* BOTÃO VOLTAR AO TOPO */
.back-to-top {
    position: fixed;
    bottom: 90px;
    right: 29px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, 0.5s;
    text-decoration: none;
    /* Gradiente Magenta para Roxo */
    background: linear-gradient(135deg, #ff00e0, #6a00ff);
    box-shadow: 0 0 25px rgba(255,0,224,0.6);
    color: #fff;
    font-size: 24px;
    text-align: center;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    /* Gradiente Ciano para Magenta no hover */
    background: linear-gradient(135deg, #00e0ff, #ff00e0); /* ALTERADO: Novo Ciano */
    box-shadow: 0 0 35px rgba(0, 224, 255, 0.7); /* ALTERADO: Novo Ciano na Sombra */
}

/* RODAPÉ */
footer {
    background: #0a0014;
    color: #ccc;
    text-align: center;
    padding: 2em; /* Padding ajustado */
    border-top: 2px solid rgba(255, 0, 224, 0.4);
    text-shadow: 0 0 10px #6a00ff;
}
footer a {
    color: #00e0ff; /* ALTERADO: Novo Ciano */
    text-decoration: none;
}
footer a:hover {
    color: #ff00e0;
}

/* --- SCROLLBAR PERSONALIZADA --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    /* Gradiente Roxo para Magenta no thumb */
    background: linear-gradient(180deg, #6a00ff, #ff00e0);
    border-radius: 10px;
    border: none; /* Remove a borda azul/roxa antiga */
}
::-webkit-scrollbar-track {
    background: #1a0033; /* Roxo escuro */
}

/* --- ESTILOS DE LAYOUT / BOOTSTRAP (MANTIDOS) --- */
@media (max-width: 991px) {
    .navbar-collapse.collapse.show {
        background: rgb(99 55 155 / 98%);
    }
}
@media (min-width: 1200px) {
    .navbar {
        background: rgb(99 55 155 / 98%);
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 980px;
    }
    section, header{
        min-height: 540px;
    }
}
.promo-banner h2 {
    color: #00e0ff; /* ALTERADO: Novo Ciano */
    font-weight: bold;
    margin: 0;
}
.promo-banner p strong {
    font-size: 22px;
    color: #ff00e0; /* Atualizado para magenta neon */
}
.bg2 {
    background:#1a0033; /* Fundo escuro */
}
section {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    animation: fadeInUp 1s ease both; /* Adiciona a animação de entrada */
}
ul {
    list-style: none;
}
ul li {
    margin-bottom: 1em;
}
ul li a {
    color: #00e0ff; /* ALTERADO: Novo Ciano */
    text-decoration: none;
}
.depoimentos img {
    width: 100%;
    border: 2px solid #ff00e0;
    box-shadow: 0 0 15px #ff00e0;
}
img.contato-icon {
    width: 50px;
    margin: 6px;
    filter: drop-shadow(0 0 6px #00e0ff); /* ALTERADO: Novo Ciano na Sombra */
}

/* ANIMAÇÃO SUAVE DE ENTRADA */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}