/*
Theme Name: VIP SERRAS Theme
Theme URI: https://vipserras.com.br/
Author: Jarvis
Description: Tema super leve e limpo otimizado para Elementor - VIP' SERRAS.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vipserras
*/

/* ==========================================================================
   STYLE.CSS - VIP' SERRAS (Comércio e Afiação de Serras Ltda)
   Inspirado na estrutura de alta conversão da G4 Electric
   ========================================================================== */

/* 1. VARIÁVEIS DE CORES E IDENTIDADE VISUAL
   ========================================================================== */
:root {
    /* Um vermelho industrial muito mais vivo e com excelente contraste em fundos escuros */
    --vip-primary: #D32F2F;        
    --vip-primary-hover: #F44336;  /* Vermelho ainda mais brilhante para o hover */
    
    /* Mantemos os fundos elegantes */
    --vip-dark: #1E1E1E;           
    --vip-dark-bg: #121212;        
    --vip-light: #F8F9FA;          
    --vip-white: #FFFFFF;          
    --vip-text-dark: #2C2C2C;      
    --vip-text-muted: #A0A0A0;     /* Clareamos ligeiramente o texto secundário para ler melhor no escuro */
    --vip-text-light: #EAEAEA;     
    --vip-whatsapp: #25D366;       
    --vip-whatsapp-hover: #20ba5a;
}

/* O restante do CSS continua igual... */
.logo-nevoa img {
    background: radial-gradient(
        circle, 
        rgba(255, 255, 255, 0.35) 0%, 
        rgba(255, 255, 255, 0.15) 45%, 
        rgba(255, 255, 255, 0) 70%
    ) !important;
}

.logo-nevoa img:hover {
    transform: scale(1.03) !important;
}

.btn-vip {
    background-color: var(--vip-primary) !important;
    color: var(--vip-white) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 5px !important;
    padding: 15px 30px !important;
    transition: all 0.3s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}

.btn-vip:hover {
    background-color: var(--vip-primary-hover) !important;
    color: var(--vip-white) !important;
    box-shadow: 0 4px 15px rgba(128, 15, 17, 0.4) !important;
    transform: translateY(-2px) !important;
}

.btn-whatsapp {
    background-color: var(--vip-whatsapp) !important;
    color: var(--vip-white) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 5px !important;
    padding: 15px 30px !important;
    transition: all 0.3s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
}

.btn-whatsapp:hover {
    background-color: var(--vip-whatsapp-hover) !important;
    color: var(--vip-white) !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4) !important;
    transform: translateY(-2px) !important;
}

.card-servico {
    background-color: var(--vip-white) !important;
    border-bottom: 4px solid #E0E0E0 !important;
    border-radius: 8px !important;
    padding: 30px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease-in-out !important;
}

.card-servico:hover {
    border-bottom: 4px solid var(--vip-primary) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px) !important;
}

.card-servico .elementor-icon,
.card-servico i {
    color: var(--vip-primary) !important;
    font-size: 40px !important;
    margin-bottom: 20px !important;
    transition: transform 0.3s ease !important;
}

.card-servico:hover .elementor-icon,

.card-servico:hover i {
    transform: scale(1.1) rotate(5deg) !important;
}

.vip-form input,
.vip-form textarea,
.vip-form select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--vip-white) !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
}

.vip-form input:focus,
.vip-form textarea:focus {
    border-color: var(--vip-primary) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(128, 15, 17, 0.5) !important;
}

.vip-form button[type="submit"] {
    background-color: var(--vip-primary) !important;
    color: var(--vip-white) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.vip-form button[type="submit"]:hover {
    background-color: var(--vip-primary-hover) !important;
    box-shadow: 0 4px 12px rgba(128, 15, 17, 0.3) !important;
}

.titulo-decorado::after {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 3px !important;
    background-color: var(--vip-primary) !important;
    margin-top: 15px !important;
}

.titulo-decorado-centro::after {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 3px !important;
    background-color: var(--vip-primary) !important;
    margin: 15px auto 0 auto !important;
}

html {
    scroll-behavior: smooth !important;
}

.elementor-nav-menu a {
    transition: color 0.3s ease !important;
}

.elementor-nav-menu a:hover {
    color: var(--vip-primary) !important;
}
/* ==========================================================================
   ESTILO DO CABEÇALHO - VIP' SERRAS
   ========================================================================== */

.site-header {
    background-color: var(--vip-dark);
    padding: 10px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

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

/* Ajuste do Logo */
.site-logo img {
    max-height: 70px;
    width: auto;
}

/* Menu de Navegação */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

.main-navigation ul li a {
    color: var(--vip-white);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    transition: color 0.3s ease;
}

.main-navigation ul li a:hover {
    color: var(--vip-primary);
}

/* Botão WhatsApp no Header */
.btn-whatsapp-header {
    background-color: var(--vip-whatsapp);
    color: var(--vip-white);
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-whatsapp-header:hover {
    background-color: var(--vip-whatsapp-hover);
    transform: scale(1.05);
}

/* Mobile Menu Toggle (Escondido no Desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
}

/* Responsividade Celular */
@media (max-width: 768px) {
    .main-navigation ul {
        display: none; /* Aqui você pode implementar um menu mobile se desejar */
    }
    .btn-whatsapp-header span {
        display: none; /* Deixa só o ícone no mobile para poupar espaço */
    }
    .btn-whatsapp-header {
        padding: 10px 12px;
    }
}
/* ==========================================================================
   AJUSTE PARA A BARRA DE ADMINISTRAÇÃO DO WORDPRESS
   ========================================================================== */

/* Quando o usuário estiver logado, empurra o cabeçalho para baixo da barra */
.admin-bar .site-header {
    top: 32px !important;
}

/* Ajuste específico para telas menores (onde a barra do WordPress fica maior) */
@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px !important;
    }
}