/**
 * Paleta de Cores CONSIGAS
 * Identidade visual oficial da marca Consigas
 * 
 * @author Roka Digital - https://rokadigital.com.br/contato/
 * @version 1.0
 * 
 * PALETA CONSIGAS:
 * #002D72 - Azul Principal
 * #02235A - Azul Secundário
 * #D90E21 - Vermelho
 * #FFFFFF - Branco
 * #000000 - Preto
 * #F5F5F5 - Cinza Claro (Background)
 * #EFF4F9 - Azul Claro de Fundo (Contato)
 * #122762 - Azul Escuro Footer
 * #061942 - Azul Pós-Footer
 */

:root {
    --consigas-azul-principal: #002D72;
    --consigas-azul-secundario: #02235A;
    --consigas-vermelho: #D90E21;
    --consigas-branco: #FFFFFF;
    --consigas-preto: #000000;
    --consigas-cinza-claro: #F5F5F5;
    --consigas-azul-claro-fundo: #EFF4F9;
    --consigas-azul-footer: #122762;
    --consigas-azul-pos-footer: #061942;
}

/* ========================================
   SEÇÃO HERO - ULTRAGAZ
   ======================================== */

.hero {
    background: url('/assets/img/hero-classic.webp') no-repeat center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    min-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Overlay escuro para legibilidade - 45% */
.hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    z-index: 1 !important;
    display: block !important;
}

.hero-title {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7) !important;
    font-weight: 700 !important;
}

.hero-subtitle {
    color: #FFFFFF !important;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.7) !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

/* ========================================
   SEÇÃO "GÁS PARA SUA CASA E SEU NEGÓCIO"
.produtos {
    background-color: var(--consigas-cinza-claro) !important;
}

/* Etiqueta "Disponível" nos cards de produtos */
.produto-badge,
.produto-status {
    background: #000FFF !important;
    color: #FFFFFF !important;
}

/* Botão "Pedido Detalhado" */
.btn-pedido-detalhado,
.btn-pedido-detalhado:not(:hover) {
    background: linear-gradient(90deg, #000FFF, #00FFFF) !important;
    border-color: #000FFF !important;
    color: #FFFFFF !important;
}

.btn-pedido-detalhado:hover {
    background: linear-gradient(90deg, #00FFFF, #000FFF) !important;
    border-color: #000FFF !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 15, 255, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   SEÇÃO "ENTRE EM CONTATO"
{{ ... }}
   ======================================== */

.contato {
    background: linear-gradient(90deg, #000FFF, #00FFFF) !important;
    background-color: transparent !important;
}

/* Ícones com círculo colorido */
.phone-card .contato-card-icon {
    background: var(--consigas-azul-principal) !important;
    color: var(--consigas-branco) !important;
}

.location-card .contato-card-icon {
    background: var(--consigas-vermelho) !important;
    color: var(--consigas-branco) !important;
}

.schedule-card .contato-card-icon {
    background: var(--consigas-azul-principal) !important;
    color: var(--consigas-branco) !important;
}

/* Botão "Abrir no GPS" */
.btn-gps {
    background: var(--consigas-vermelho) !important;
    border-color: var(--consigas-vermelho) !important;
    color: var(--consigas-branco) !important;
}

.btn-gps:hover {
    background: #B00C1C !important;
    border-color: #B00C1C !important;
    color: var(--consigas-branco) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(217, 14, 33, 0.4) !important;
}

/* ========================================
   CARD "NOSSA LOCALIZAÇÃO"
   ======================================== */

.map-header {
    background: var(--consigas-vermelho) !important;
    color: var(--consigas-branco) !important;
}

.map-header h3 {
    color: var(--consigas-branco) !important;
}

.map-header p {
    color: var(--consigas-branco) !important;
}

.map-header i {
    color: var(--consigas-branco) !important;
}

/* ========================================
   FOOTER
   ======================================== */

.footer,
footer,
.footer-section,
section.footer,
.site-footer {
    background: var(--consigas-azul-footer) !important;
    background-color: var(--consigas-azul-footer) !important;
    background-image: none !important;
    color: var(--consigas-branco) !important;
}

/* Linha Pós-Footer */
.footer-bottom,
.footer-copyright {
    background: var(--consigas-azul-pos-footer) !important;
    background-color: var(--consigas-azul-pos-footer) !important;
    color: var(--consigas-branco) !important;
    border-top: 2px solid var(--consigas-azul-pos-footer) !important;
}

/* ========================================
   ELEMENTOS ADICIONAIS
   ======================================== */

/* Header */
.header {
    background: linear-gradient(90deg, #00FF00, #00FFFF) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Navegação do Header */
.nav-link {
    color: #000000 !important;
}

.nav-link:hover {
    color: #000000 !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.logo {
    color: #000000 !important;
}

.mobile-menu-btn {
    color: #000000 !important;
}

/* Botões Hero */
.btn-phone,
.hero-buttons .btn-phone {
    background: var(--consigas-vermelho) !important;
    border-color: var(--consigas-vermelho) !important;
    color: var(--consigas-branco) !important;
}

.btn-phone:hover,
.hero-buttons .btn-phone:hover {
    background: #B00C1C !important;
    border-color: #B00C1C !important;
}

/* Botão WhatsApp - VERDE-CIANO ULTRAGAZ */
.btn-whatsapp,
.hero-buttons .btn-whatsapp {
    background: linear-gradient(90deg, #00FF00, #00FFFF) !important;
    border: 3px solid transparent !important;
    color: #000000 !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(0, 255, 0, 0.4) !important;
}

.btn-whatsapp:hover,
.hero-buttons .btn-whatsapp:hover {
    background: #00FF00 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(0, 255, 0, 0.6) !important;
    border: 3px solid #FFFFFF !important;
    color: #000000 !important;
}

/* Cards de produtos hover */
.produto-card:hover {
    border-color: var(--consigas-azul-principal) !important;
    box-shadow: 0 20px 40px rgba(0, 45, 114, 0.15) !important;
}

/* Títulos de seção */
.section-title {
    color: var(--consigas-azul-principal) !important;
}

/* Links e elementos de destaque */
.ver-detalhes:hover {
    color: #000FFF !important;
}

.produto-preco {
    color: var(--consigas-vermelho) !important;
}

/* Footer - Ícones de contato */
.footer-contact-item i {
    background: var(--consigas-branco) !important;
    color: var(--consigas-azul-footer) !important;
}

.footer-contact-item:hover {
    color: var(--consigas-branco) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(217, 14, 33, 0.3) !important;
}

.footer-contact-item:hover i {
    background: var(--consigas-vermelho) !important;
    color: var(--consigas-branco) !important;
}

/* Títulos do footer */
.footer-title {
    color: var(--consigas-branco) !important;
}

.footer-title i {
    color: var(--consigas-vermelho) !important;
}

/* Links do footer */
.contact-link {
    color: var(--consigas-branco) !important;
}

.contact-link:hover {
    color: var(--consigas-vermelho) !important;
}

.location-link {
    color: var(--consigas-vermelho) !important;
}

.location-link:hover {
    color: #FF1A2E !important;
}

/* Ícones de contato do footer */
.contact-icon.phone-icon {
    background: var(--consigas-azul-principal) !important;
}

.contact-icon.whatsapp-icon {
    background: #25D366 !important;
}

.location-icon {
    background: var(--consigas-vermelho) !important;
}

/* Tags de tipo de contato */
.contact-type {
    color: var(--consigas-vermelho) !important;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 768px) {
    /* Hero mobile */
    .hero {
        min-height: 500px !important;
        background: url('/assets/img/hero-classic.webp') no-repeat center center !important;
        background-size: cover !important;
        background-attachment: scroll !important;
    }
    
    .hero-title {
        color: #FFFFFF !important;
        text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7) !important;
    }
    
    .hero-subtitle {
        color: #FFFFFF !important;
        text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.7) !important;
    }
}

/* ========================================
   OVERRIDE DE ESTILOS ANTIGOS
   ======================================== */

/* Remover gradientes antigos */
/* .hero::before - REMOVIDO para permitir overlay escuro */
.contato::before {
    background: none !important;
    opacity: 0 !important;
}

/* Garantir que os fundos sejam sólidos */
body {
    background-color: var(--consigas-branco) !important;
}

/* Texto dos cards de contato */
.contato-card h3 {
    color: var(--consigas-azul-principal) !important;
}

.contato-value a {
    color: var(--consigas-preto) !important;
}

.contato-value a:hover {
    color: var(--consigas-azul-principal) !important;
}

.contato-label {
    color: #64748b !important;
}

/* Descrição do footer */
.footer-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Links de privacidade e créditos */
.dev-link,
.privacy-link {
    color: var(--consigas-branco) !important;
}

.dev-link:hover,
.privacy-link:hover {
    color: var(--consigas-vermelho) !important;
}

/* Copyright */
.footer-copyright p,
.footer-credits p,
.footer-privacy p {
    color: rgba(255, 255, 255, 0.8) !important;
}