/* ------------------------------------------- */
/* Estilos para o Botão Customizado na Navbar   */
/* ------------------------------------------- */

/* Classe customizada que adicionamos ao botão */
.nav-btn-scale {
    /* Garante que a transição seja suave */
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out; 
    /* Adiciona margem à esquerda para separá-lo dos links em telas grandes */
    margin-left: 1rem; 
}

/* Efeito de Aumento (Scale) ao passar o mouse */
.nav-btn-scale:hover {
    /* Aumenta o tamanho do botão em 5% */
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); 
    /* Adiciona uma leve sombra para destacar o efeito */
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Ajuste de Margem em Telas Pequenas */
@media (max-width: 991.98px) {
    .nav-btn-scale {
        margin-left: 0;
        margin-top: 0.5rem; /* Adiciona um pequeno espaçamento do link acima */
    }
}

/* ---------------------------------------------------- */
/* --- NOVOS ESTILOS PARA A SEÇÃO DE APRESENTAÇÃO DARK --- */
/* ---------------------------------------------------- */

/* 🔑 CLASSE DO GRADIENTE (O NOVO FUNDO) */
.bg-dark-gradient {
    /* Gradientes com prefixos para maior compatibilidade */
    background: -webkit-linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    background: -moz-linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    background: -o-linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    background: linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    /* Define uma cor de fallback sólida para navegadores mais antigos */
    background-color: #1C2833; 
}

.hero-section {
    min-height: 80vh; 
    display: flex; 
    align-items: center; 
    /* Garante que o texto dentro da section seja branco por padrão */
    color: #f8f9fa;
}

.hero-section .container {
    max-width: 1200px;
}

/* Estilização para a imagem da pessoa - Aumentando o destaque no tema escuro */
.hero-img-custom {
    max-width: 100%;
    height: auto;
    /* Sombra mais clara com prefixos */
    -webkit-box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
    -moz-box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15); 
    object-fit: cover; 
    /* Transição com prefixos */
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out; 
    
    /* Adiciona uma borda sutil para realçar o círculo no fundo escuro */
    border: 3px solid #ffc107; /* Cor do botão warning (amarelo) */
}

/* Correção: Mover a media query para fora do bloco .hero-img-custom */
@media (min-width: 992px) {
    .hero-img-custom {
        max-width: 450px; 
    }
}

/* Efeito de leve zoom na imagem ao passar o mouse */
.hero-img-custom:hover {
    /* Transform com prefixos */
    -webkit-transform: scale(1.03);
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03); 
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 15px 40px rgba(255, 255, 255, 0.25);
    -moz-box-shadow: 0 15px 40px rgba(255, 255, 255, 0.25);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.25);
}

/* Efeito de zoom para os botões da seção */
.custom-btn-zoom {
    /* Transição com prefixos */
    -webkit-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
}

.custom-btn-zoom:hover {
    /* Transform com prefixos */
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.2);
}

/* Ajustes de responsividade */
@media (max-width: 991.98px) {
    .hero-section .display-3 {
        font-size: 2.5rem; 
    }
    .hero-section .lead {
        font-size: 1.1rem; 
    }
    .hero-section .d-grid {
        display: grid !important; 
        gap: 1rem;
    }
}

/* ---------------------------------------------------- */
/* --- NOVOS ESTILOS PARA A SEGUNDA SEÇÃO (CARDS) ---   */
/* ---------------------------------------------------- */

.cards-section {
    min-height: 70vh; 
    display: flex;
    align-items: center;
    background-color: #212529; /* Fundo da section continua Dark */
    padding-bottom: 7rem; 
}

/* Estilo para as imagens arredondadas dentro dos cards */
.card-img-person {
    width: 120px; 
    height: 120px; 
    object-fit: cover; 
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); 
    /* Transição com prefixos */
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.card-img-person:hover {
    /* Transform com prefixos */
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08); 
}

/* Sombra customizada para os cards (Escura para destacar no fundo dark da section) */
.custom-card-shadow {
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5); 
    border: none; 
    /* Transição com prefixos */
    -webkit-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Efeito hover para os cards */
.custom-card-hover:hover {
    /* Transform com prefixos */
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); 
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7); 
}

/* Ajustes de responsividade para os cards */
@media (max-width: 767.98px) { /* Telas menores que medium (mobile) */
    .cards-section .col-lg-6.d-flex {
        flex-direction: column !important; /* Em mobile, os cards ficam um abaixo do outro */
        align-items: center; /* Centraliza os cards */
    }
    .cards-section .card {
        width: 85%; /* Cards um pouco mais largos em mobile para preencher o espaço */
    }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* Telas médias (tablets) */
    .cards-section .card {
        width: 45%; /* Dois cards lado a lado com um pouco de margem */
    }
}
@media (min-width: 992px) { /* Laptops e desktops */
    .cards-section .card {
        max-width: 280px; /* Limita a largura do card em telas grandes */
    }
}

/* ------------------------------------------------------------- */
/* --- NOVOS ESTILOS PARA A TERCEIRA SEÇÃO (VÍDEO E CONTEÚDO) --- */
/* ------------------------------------------------------------- */

.video-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background-color: #212529; /* Cor de fundo Dark */
    /* Reaproveitando a classe bg-dark-gradient, apenas garantindo o padding */
    padding-top: 7rem; 
    padding-bottom: 7rem;
}

/* Ajustes visuais para o card que envolve o vídeo */
.video-section .card {
    border-radius: 0.75rem; /* Bordas levemente arredondadas */
}

/* Sombra mais suave para o card do vídeo */
.video-section .custom-card-shadow {
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Título pequeno em letras maiúsculas */
.custom-subtitle-video {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Responsividade do Título Grande em Telas Pequenas */
@media (max-width: 991.98px) {
    .video-section .display-4 {
        font-size: 2.5rem; /* Reduz o tamanho do título principal em mobile/tablet */
    }
    .video-section .d-grid {
        display: block !important; /* Mantém o botão em linha no centro em mobile */
        text-align: center;
    }
}

/* ------------------------------------------------------------- */
/* --- NOVOS ESTILOS PARA A QUARTA SEÇÃO (CARDS VAZADOS) ---     */
/* ------------------------------------------------------------- */

.features-section {
    background-color: #171b21; /* Fundo da section continua Dark */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* 1. Estilo da Imagem (Retângulo em pé) */
.custom-img-vazada {
    display: block;
    width: 80%;
    max-height: 200px; 
    object-fit: cover;
    border-radius: 0.5rem;
    
    margin-top: -60px;
    
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); 
    /* Transição com prefixos */
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

/* 2. Ajuste do Container do Card */
.features-section .card {
    border-radius: 1rem;
    padding-top: 60px; /* Padding de compensação */
    border: none; /* Garante que não haja bordas estranhas */
}

/* 3. Efeito Hover no Card */
.custom-card-hover:hover .custom-img-vazada {
    /* Transform com prefixos */
    -webkit-transform: translateY(-5px); 
    -moz-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px); 
}

/* Sombra customizada para o CARD (Deve ser escura, pois o card é branco) */
.custom-card-shadow {
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); 
    border: none; 
    /* Transição com prefixos */
    -webkit-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.custom-card-hover:hover {
    /* Transform com prefixos */
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px); 
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); 
}

/* Ajustes de responsividade */
@media (max-width: 991.98px) {
    /* Em telas pequenas, a imagem vazada precisa ser menor */
    .custom-img-vazada {
        max-height: 180px;
        margin-top: -40px; /* Ajusta o vazamento para não ser muito grande */
    }
    .features-section .card {
        padding-top: 40px; /* Ajusta o padding de compensação */
    }
}

/* ------------------------------------------------------------- */
/* --- NOVOS ESTILOS PARA A QUINTA SEÇÃO (GRID DE VÍDEOS) ---    */
/* ------------------------------------------------------------- */

.ratio-portrait {
    position: relative;
    width: 100%;
    height: 0;
    /* A chave para o formato portrait (3:4) */
    padding-bottom: 133.33%; 
}

/* Garante que o conteúdo (o vídeo) preencha o novo container */
.ratio-portrait > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* --- ESTILOS PARA A QUINTA SEÇÃO (GRID DE VÍDEOS) --- */

.video-grid-section {
    background-color: #0d141b; 
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Efeito de Hover nos Vídeos */
.custom-video-hover {
    /* Transição com prefixos */
    -webkit-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer; 
    overflow: hidden; 
}

.custom-video-hover:hover {
    /* Transform com prefixos */
    -webkit-transform: scale(1.03); 
    -moz-transform: scale(1.03);
    -o-transform: scale(1.03);
    transform: scale(1.03); 
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 12px 20px rgba(255, 255, 255, 0.15) !important; 
    -moz-box-shadow: 0 12px 20px rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 12px 20px rgba(255, 255, 255, 0.15) !important; 
}

/* Se você quiser que o próprio elemento <video> seja arredondado */
.video-grid-section .rounded {
    border-radius: 0.5rem !important;
    width: 100%;
    height: 100%;
}

/* Responsividade do Grid de Vídeos */
@media (min-width: 992px) {
    /* Em telas grandes (lg), 4 vídeos por linha: col-lg-3 */
}
@media (max-width: 991.98px) {
    /* Em tablets (md), 2 vídeos por linha: col-md-6. O espaçamento já é tratado pelo mb-4 e o col-md-6 */
}
@media (max-width: 575.98px) {
    /* Em mobile (sm), 1 vídeo por linha: O Bootstrap já faz isso por padrão */
}

/* ---------------------------------------------------------- */
/* --- NOVOS ESTILOS PARA A SEXTA SEÇÃO (FORMULÁRIO) ---      */
/* ---------------------------------------------------------- */

.custom-input-dark {
    background-color: #3b424c; 
    border: 1px solid #5a6268;
    color: #f8f9fa; 
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

/* Placeholder (Texto de exemplo) - CLARO */
.custom-input-dark::placeholder {
    color: #ced4da; 
    opacity: 0.8; 
}

.contact-section {
    /* Gradientes com prefixos */
    background: -webkit-linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    background: -moz-linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    background: -o-linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    background: linear-gradient(135deg, #1C2833 0%, #0D1B2A 100%);
    background-color: #1C2833; 
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.custom-form-card {
    border-radius: 1rem; 
    /* Sombra com prefixos */
    -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    background-color: #2b3035 !important;
}

/* Estilo para os inputs (Campos de texto) */
.custom-input-dark {
    /* Fundo escuro */
    background-color: #3b424c; 
    border: 1px solid #5a6268;
    
    /* Cor do texto digitado: CLARA (Branco do Bootstrap) */
    color: #f8f9fa; 
    
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

/* Placeholder (Texto de exemplo) - Também CLARO */
.custom-input-dark::placeholder {
    /* Cor do placeholder: Cinza claro */
    color: #ced4da; 
    opacity: 0.8; /* Garante que seja bem visível */
}

/* Efeito de Foco (Ao clicar no campo) */
.custom-input-dark:focus {
    color: #f8f9fa;
    background-color: #3b424c;
    border-color: #ffc107; 
    /* Sombra de foco com prefixos */
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    -moz-box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
}

/* ---------------------------------------------------------- */
/* --- ESTILOS PARA A SÉTIMA SEÇÃO (RODAPÉ MODERNO) ---       */
/* ---------------------------------------------------------- */

.footer-modern {
    background-color: #1a1e22 !important; /* Um cinza bem escuro, quase preto */
    color: #f8f9fa;
}

/* Links de navegação */
.footer-link-text {
    color: #ced4da; /* Cinza claro suave */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link-text:hover {
    color: #ffc107; /* Amarelo de destaque (warning) no hover */
    text-decoration: none;
}

/* Ícones Sociais */
.footer-icon-link {
    color: #f8f9fa; /* Ícones brancos */
    transition: color 0.3s ease;
    font-size: 1.2rem; /* Tamanho dos ícones */
}

.footer-icon-link:hover {
    color: #ffc107; /* Amarelo de destaque no hover */
}

/* Informações de Contato */
.contact-info p {
    color: #ced4da;
}

/* Estilo do Botão do WhatsApp */
.whatsapp-button {
    /* Posição Fixa no canto inferior direito */
    position: fixed;
    bottom: 20px; /* Distância da borda inferior */
    right: 20px; /* Distância da borda direita */
    
    /* Design */
    background-color: #25D366; /* Verde do WhatsApp */
    color: white; /* Cor do ícone */
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Transforma o botão em círculo */
    
    /* Centralizar o Ícone */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px; /* Tamanho do ícone */
    text-decoration: none; /* Remove sublinhado do link */
    
    /* Sombra e Efeito Visual com prefixos */
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Garante que fique acima de outros elementos */
    
    /* Transições de Estilo */
    -webkit-transition: background-color 0.3s, box-shadow 0.3s;
    -moz-transition: background-color 0.3s, box-shadow 0.3s;
    -o-transition: background-color 0.3s, box-shadow 0.3s;
    transition: background-color 0.3s, box-shadow 0.3s; 
    
    /* ANIMAÇÃO DE VIBRAÇÃO (Adicionada) com prefixos */
    -webkit-animation-name: shake-whatsapp;
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 5s; 
    
    -moz-animation-name: shake-whatsapp;
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-delay: 5s; 
    
    animation-name: shake-whatsapp;
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
    animation-delay: 5s; 
}

/* Efeito ao passar o mouse */
.whatsapp-button:hover {
    -webkit-animation-play-state: paused; /* Pausa a vibração quando o mouse está em cima */
    -moz-animation-play-state: paused;
    animation-play-state: paused; 
    background-color: #1DA851; 
    
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05); 
    
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Keyframes da Animação com prefixos */
@-webkit-keyframes shake-whatsapp {
    0%, 100% {
        -webkit-transform: translateX(0) scale(1.0);
        transform: translateX(0) scale(1.0);
    }
    20%, 60% {
        -webkit-transform: translateX(-2px) scale(1.05);
        transform: translateX(-2px) scale(1.05);
    }
    40%, 80% {
        -webkit-transform: translateX(2px) scale(1.05);
        transform: translateX(2px) scale(1.05);
    }
}

@-moz-keyframes shake-whatsapp {
    0%, 100% {
        -moz-transform: translateX(0) scale(1.0);
        transform: translateX(0) scale(1.0);
    }
    20%, 60% {
        -moz-transform: translateX(-2px) scale(1.05);
        transform: translateX(-2px) scale(1.05);
    }
    40%, 80% {
        -moz-transform: translateX(2px) scale(1.05);
        transform: translateX(2px) scale(1.05);
    }
}

@keyframes shake-whatsapp {
    0%, 100% {
        transform: translateX(0) scale(1.0);
    }
    20%, 60% {
        transform: translateX(-2px) scale(1.05);
    }
    40%, 80% {
        transform: translateX(2px) scale(1.05);
    }
}

/* Ajuste para telas menores (Responsividade) */
@media (max-width: 600px) {
    .whatsapp-button {
        width: 50px;
        height: 50px;
        font-size: 25px;
        bottom: 15px;
        right: 15px;
    }
}