/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.12.0.1767904234
Updated: 2026-01-08 17:30:34

*/

/* --- MENU BELINCE - ESTRUTURA GERAL --- */
.belince-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: transparent; /* Começa transparente */
    transition: background-color 0.4s ease, padding 0.3s ease;
    padding: 15px 0;
    font-family: 'Arial', sans-serif; /* Ajuste para a fonte do teu tema */
}

/* Estado ao Rolar (Sticky) */
.belince-header.scrolled {
    background-color: #002E50; /* Azul Escuro Solicitado */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    padding: 10px 0;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- LOGO --- */
.logo-area img {
    height: 50px; /* Ajuste conforme tamanho do logo real */
    width: auto;
    display: block;
    transition: all 0.3s;
}

/* --- MENU DESKTOP --- */
.desktop-nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: color 0.3s;
}

.desktop-nav a:hover {
    color: #00bfff; /* Um azul claro para destaque no hover */
}

/* --- ÍCONES SOCIAIS (Direita) --- */
.social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-icons a {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, opacity 0.3s;
}

.social-icons a:hover {
    transform: translateY(-3px);
    opacity: 0.8;
}

/* Tamanho dos SVGs */
.social-icons svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* --- MENU MOBILE (HAMBÚRGUER) --- */
.mobile-toggle {
    display: none; /* Escondido no Desktop */
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.mobile-toggle span {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #ffffff;
    transition: 0.3s;
}

/* Gaveta do Menu Mobile */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%; /* Escondido fora da tela */
    width: 280px;
    height: 100vh;
    background-color: #002E50; /* Fundo do menu mobile */
    padding: 80px 20px 20px;
    transition: right 0.4s ease;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    z-index: 9998;
}

.mobile-nav-drawer.active {
    right: 0; /* Entra na tela */
}

.mobile-nav-drawer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-drawer li {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.mobile-nav-drawer a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    display: block;
}

/* Animação do X no Hambúrguer */
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

/* --- RESPONSIVIDADE (Tablets e Telemóveis) --- */
@media (max-width: 992px) {
    .desktop-nav, .social-icons {
        display: none; /* Esconde menu desktop e ícones sociais */
    }
    .mobile-toggle {
        display: flex; /* Mostra o hambúrguer */
    }
    
    /* Mostrar ícones sociais dentro do mobile se quiseres */
    .mobile-socials {
        margin-top: 30px;
        display: flex;
        gap: 20px;
        justify-content: center;
    }
    .mobile-socials svg {
        width: 24px;
        height: 24px;
        fill: #fff;
    }
}

/* =========================================
   ESTILOS DO SISTEMA DE GALERIA POPUP
   ========================================= */

/* 1. O Overlay (Fundo escuro que cobre a tela) */
.popup-gallery-overlay {
    position: fixed;
    z-index: 999999; /* Acima de tudo, inclusive menus do Astra */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fundo bem escuro */
    backdrop-filter: blur(5px); /* Efeito de desfoque opcional no fundo */
    
    /* Flexbox para centralizar a caixa branca no meio exato da tela */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Espaço mínimo nas bordas em celulares */
}

/* 2. A Caixa de Conteúdo (Onde fica o carrossel) */
.popup-gallery-content {
    position: relative;
    width: 100%;
    max-width: 900px; /* Largura máxima do popup */
    background: transparent; /* Fundo transparente para destacar só a imagem */
    /* Se quiser um fundo branco estilo "card", mude transparent para #fff e adicione padding */
    
    /* Garante que não estoure a altura da tela */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* 3. O Botão de Fechar (X) */
.popup-gallery-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    padding: 5px;
}
.popup-gallery-close:hover { color: #ccc; }


/* 4. CORREÇÕES CRUCIAIS DO SWIPER DENTRO DO MODAL */

/* Força o container a ter uma altura definida para o swiper calcular */
.popup-gallery-content .swiper {
    width: 100%;
    height: 100%; /* Ocupa a altura disponível na caixa */
    min-height: 300px; /* Altura mínima para não colapsar se não houver imagem */
}

/* Estilo de cada slide individual */
.popup-gallery-content .swiper-slide {
    /* Centraliza a imagem dentro do slide */
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto; /* Deixe a altura automática */
}

/* A IMAGEM FINAL - O segredo para não quebrar o layout */
.popup-gallery-content .swiper-slide img {
    display: block;
    width: auto; /* Não force 100% de largura */
    height: auto; /* Não force 100% de altura */
    
    /* Estes dois são os mais importantes: */
    max-width: 100%; /* Garante que não vaze a largura do modal */
    max-height: 85vh; /* Garante que não vaze a altura da tela */
    
    object-fit: contain; /* Garante que a imagem inteira apareça sem cortes */
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra elegante na imagem */
}

/* 5. Ajustes nos Botões de Navegação do Swiper (Setinhas) */
.popup-gallery-content .swiper-button-next,
.popup-gallery-content .swiper-button-prev {
    color: #fff; /* Cor branca para destacar no fundo escuro */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Ajuste para que as setas não fiquem em cima da imagem em telas pequenas */
@media (max-width: 768px) {
   .popup-gallery-content .swiper-button-next,
   .popup-gallery-content .swiper-button-prev {
       display: none; /* Esconde setas no mobile, usa só o "arrastar" e paginação */
   }
}

.popup-gallery-content .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}
.popup-gallery-content .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Adicione ou verifique se existe no style.css */
.popup-gallery-content .swiper-wrapper {
    display: flex; /* Obrigatório para o slide funcionar */
    width: 100%;
    height: 100%;
    box-sizing: content-box;
}

/* Layout das Colunas (Telefone e Empresa) */
.form-row {
    display: flex;
    gap: 20px; /* Espaço entre os campos */
    flex-wrap: wrap;
}

.form-col {
    flex: 1; /* Faz os campos ocuparem tamanhos iguais */
    min-width: 200px; /* Garante que não fique muito pequeno no mobile */
}

/* Estilo Básico dos Inputs (para ficarem bonitos sem o fundo escuro) */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc; /* Borda cinza suave */
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 15px;
}

/* Estilização do Botão (Arredondado e Azul Claro) */
.form-submit-center {
    text-align: center; /* Centraliza o botão */
    margin-top: 20px;
}

.wpcf7 input[type="submit"] {
    background: linear-gradient(90deg, #8ED1FC 0%, #BBE8FA 100%); /* Gradiente azul claro */
    color: #000; /* Cor do texto do botão */
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 50px; /* Deixa o botão redondo (pílula) */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.wpcf7 input[type="submit"]:hover {
    transform: scale(1.02); /* Efeito suave ao passar o mouse */
    opacity: 0.9;
}

/* --- CSS DO RODAPÉ BELINCE --- */

/* Fundo e Estrutura */
.belince-footer {
    background: linear-gradient(180deg, #4b7a9c 0%, #083251 40%, #031625 100%);
    color: #fff;
    padding: 60px 20px 20px 20px;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    z-index: 10;
}

.belince-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Títulos */
.footer-top {
    text-align: center;
    margin-bottom: 40px;
}

.pre-title {
    font-size: 14px;
    font-style: italic;
    margin-bottom: 5px;
    opacity: 0.9;
    color: #fff;
}

.main-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-top: 0;
}

/* Formulário Transparente */
.footer-form-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.belince-footer .wpcf7 input[type="text"],
.belince-footer .wpcf7 input[type="email"],
.belince-footer .wpcf7 input[type="tel"] {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 10px;
}

.belince-footer .wpcf7 ::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.belince-footer .wpcf7 label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
    text-align: left;
}

/* Botão Centralizado */
.form-submit-center {
    text-align: center;
    margin-top: 20px;
}

/* Colunas Inferiores */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 50px;
    padding-top: 40px;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 280px;
}

/* Logo */
.logo-col img {
    max-width: 180px;
    height: auto;
}

/* Texto de Contato */
.info-col h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.info-col p {
    font-size: 14px;
    margin-bottom: 8px;
    color: #f0f0f0;
    line-height: 1.6;
}

.info-col a {
    color: #fff;
    text-decoration: none;
}

/* Vídeo */
.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Copyright */
.footer-copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 40px;
    padding-top: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

/* Mobile */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .video-col {
        width: 100%;
    }
}

footer{
    margin-top: -70px !important;
}

/* --- ESTILO DO FORMULÁRIO BELINCE --- */

/* Garante que os campos de texto ocupem 100% da largura disponível */
.belince-footer .wpcf7 input[type="text"],
.belince-footer .wpcf7 input[type="email"],
.belince-footer .wpcf7 input[type="tel"] {
    width: 100%;
    background-color: transparent !important; /* Fundo transparente */
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Borda fina branca */
    color: #fff !important; /* Texto branco */
    padding: 10px;
    border-radius: 2px;
    margin-bottom: 0; /* Remove margem padrão para controlar via label */
    box-sizing: border-box; /* Garante que o padding não aumente a largura */
}

/* Estilo das Labels (Nomes acima dos campos) */
.belince-footer .wpcf7 label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
    font-weight: 400;
}

/* Espaçamento entre os campos */
.belince-footer .wpcf7 p, 
.belince-form-structure > label {
    margin-bottom: 15px;
}

/* --- COLUNAS (TELEFONE E EMPRESA) --- */
.form-two-columns {
    display: flex;
    gap: 20px; /* Espaço entre Telefone e Empresa */
    margin-bottom: 20px;
}

.form-col {
    flex: 1; /* Faz as duas colunas terem o mesmo tamanho */
}

/* --- BOTÃO "ENTRE EM CONTATO" --- */
.form-submit-wrapper {
    text-align: center; /* Centraliza o botão */
    margin-top: 20px;
}

.belince-footer .wpcf7 input[type="submit"] {
    background: linear-gradient(90deg, #8ED1FC 0%, #BBE8FA 100%); /* Gradiente azul claro */
    color: #000; /* Cor do texto do botão */
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 50px; /* Borda bem redonda (estilo pílula) */
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s;
    width: auto; /* O botão não deve ser full width */
    display: inline-block;
}

.belince-footer .wpcf7 input[type="submit"]:hover {
    transform: scale(1.05); /* Leve aumento ao passar o mouse */
    opacity: 0.9;
}

/* --- AJUSTE PARA CELULAR --- */
@media (max-width: 600px) {
    .form-two-columns {
        flex-direction: column; /* Um embaixo do outro no celular */
        gap: 15px;
    }
}