/* =========================================
   VARIÁVEIS DE CORES E FONTES PREMIUM (TEMA AZUL-MARINHO)
   ========================================= */
:root {
    --azul-marinho: #0A192F; /* Fundo principal corporativo */
    --azul-claro: #172A45;   /* Tom secundário para efeitos hover */
    --dourado: #C4A47C;      /* Detalhes, botões e ícones */
    --fundo: #F9F6F0;        /* Cor de fundo clara para blocos de texto */
    --texto: #2C2C2C;        /* Cor do texto para legibilidade */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; background-color: var(--fundo); color: var(--texto); line-height: 1.6; }
h1, h2, h3, .logo { font-family: 'Playfair Display', serif; }

/* =========================================
   CABEÇALHO (HEADER) E NAVEGAÇÃO DESKTOP
   ========================================= */
header { 
    background: var(--azul-marinho); color: #fff; padding: 15px 50px; 
    display: flex; justify-content: space-between; align-items: center; 
    position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.header-top { display: flex; justify-content: space-between; align-items: center; width: auto; }
.logo { font-size: 1.8rem; color: var(--dourado); }
.logo span { color: #fff; font-weight: 300; }

.menu-toggle { display: none; }

nav { display: flex; align-items: center; }
nav a { color: #fff; text-decoration: none; margin-left: 25px; font-weight: 600; transition: 0.3s; }
nav a:hover { color: var(--dourado); }

.btn-outline { border: 1px solid var(--dourado); padding: 8px 15px; border-radius: 5px; color: #fff; text-decoration: none; margin-left: 25px; }
.btn-outline:hover { background: var(--dourado); color: var(--azul-marinho); }

/* =========================================
   BOTÕES GERAIS (SEMPRE DOURADOS)
   ========================================= */
.btn-primary { 
    background-color: var(--dourado); 
    color: var(--azul-marinho); 
    padding: 15px 35px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 1.1rem;
    border-radius: 5px; 
    display: inline-block; 
    transition: 0.3s; 
    border: none; 
    cursor: pointer; 
}
.btn-primary:hover { 
    background-color: #d6b88e; 
    color: var(--azul-marinho); 
    transform: scale(1.02); 
    box-shadow: 0 5px 15px rgba(196, 164, 124, 0.3);
}

/* =========================================
   BANNER PRINCIPAL (HERO COM A IMAGEM 2)
   ========================================= */
.hero { 
    height: 100vh; 
    /* Mescla a imagem com o azul-marinho escuro para não atrapalhar o texto */
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.85) 0%, rgba(5, 13, 26, 0.95) 100%), url('imagem2.png') center/cover no-repeat; 
    display: flex; align-items: center; justify-content: center; 
    text-align: center; color: #fff; padding: 20px; 
}
.hero-content { max-width: 800px; }
.hero h1 { font-size: 4rem; color: #ffffff; margin-bottom: 15px; line-height: 1.1; }
.hero h2 { font-size: 1.8rem; font-weight: 300; margin-bottom: 25px; color: var(--dourado); }
.hero p { font-size: 1.2rem; margin-bottom: 40px; color: #f1f1f1;}

/* =========================================
   ESTRUTURAS DE SEÇÃO E GRIDS
   ========================================= */
.section-light { background-color: var(--fundo); }
.section-dark { background-color: #EAE5DE; }
.container { max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
.container h2 { text-align: center; font-size: 2.8rem; color: var(--azul-marinho); margin-bottom: 50px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }

/* =========================================
   CARDS (ÁREAS DE ATUAÇÃO E DIFERENCIAIS)
   ========================================= */
.card { 
    background: #fff; padding: 40px 30px; border-radius: 8px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); text-align: center; 
    border-bottom: 4px solid var(--dourado); transition: 0.3s; 
}
.card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.icon-large { font-size: 3.5rem; color: var(--dourado); margin-bottom: 25px; }
.card h3 { margin-bottom: 15px; color: var(--azul-marinho); font-size: 1.5rem; }

.btn-outline-small { 
    background: transparent; border: 2px solid var(--dourado); color: var(--texto); 
    padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; 
    margin-top: 25px; transition: 0.3s; width: 100%;
}
.btn-outline-small:hover { background: var(--dourado); color: var(--azul-marinho); }

/* =========================================
   FORMULÁRIO DE CONTATO (COM IMAGEM 1 NO FUNDO) E CHECKBOX LGPD
   ========================================= */
#contato {
    background: linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(5, 13, 26, 0.98) 100%), url('imgem1.png') center/cover no-repeat;
    color: #fff;
}
#contato h2, #contato p, #contato i, #contato .checkbox-lgpd {
    color: #fff; /* Texto claro para ler sobre o fundo escuro */
}

.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info p { margin-bottom: 20px; font-size: 1.1rem; display: flex; align-items: center; gap: 15px;}
.contact-info i { color: var(--dourado); font-size: 1.5rem; }
.contact-form { 
    display: flex; flex-direction: column; gap: 20px; background: rgba(255, 255, 255, 0.1); /* Fundo levemente transparente */
    padding: 40px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.2);
}
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { 
    padding: 15px; border: 1px solid rgba(255,255,255,0.3); border-radius: 5px; 
    font-family: 'Lato', sans-serif; font-size: 1rem; width: 100%; background: rgba(255,255,255,0.9); color: #333;
}
.contact-form input:not([type="checkbox"]):focus, .contact-form select:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--dourado); background: #fff;
}
.checkbox-lgpd { 
    font-size: 0.95rem; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; color: #fff;
}
.checkbox-lgpd input[type="checkbox"] { 
    width: 18px; height: 18px; margin-top: 2px; cursor: pointer; 
}
.checkbox-lgpd a { color: var(--dourado); font-weight: bold; text-decoration: none; transition: 0.3s; }
.checkbox-lgpd a:hover { text-decoration: underline; }

/* =========================================
   RODAPÉ E AVISO DE COOKIES
   ========================================= */
footer { background: var(--azul-marinho); color: #fff; text-align: center; padding: 50px 20px; }
footer p { margin-bottom: 10px; }
footer .disclaimer { font-size: 0.85rem; color: #aaa; margin-top: 30px; }

.cookie-banner { 
    position: fixed; bottom: 0; left: 0; width: 100%; 
    background: var(--azul-marinho); color: #fff; padding: 20px 40px; 
    display: none; justify-content: space-between; align-items: center; 
    z-index: 9999; box-shadow: 0 -5px 20px rgba(0,0,0,0.3);
}
.cookie-banner button { background: var(--dourado); color: var(--azul-marinho); border: none; padding: 12px 25px; cursor: pointer; border-radius: 5px; font-weight: bold;}

/* =========================================
   SISTEMA DE MODAIS (POP-UPS)
   ========================================= */
.modal-overlay { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(10, 25, 47, 0.9); z-index: 10000; 
    justify-content: center; align-items: center; padding: 20px; 
}
.modal-content { 
    background: var(--fundo); width: 100%; max-width: 750px; max-height: 85vh; 
    overflow-y: auto; padding: 50px; border-radius: 8px; position: relative; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.4); 
}
.modal-content h3 { color: var(--dourado); margin-bottom: 25px; font-size: 2rem; }
.modal-content ul { margin-left: 20px; margin-bottom: 20px; margin-top: 15px; }
.modal-content li { margin-bottom: 12px; }
.close-btn { 
    position: absolute; top: 15px; right: 25px; font-size: 2.5rem; 
    cursor: pointer; color: var(--azul-marinho); background: none; border: none; 
    font-weight: bold; transition: 0.3s; line-height: 1;
}
.close-btn:hover { color: var(--dourado); }

/* =========================================
   RESPONSIVIDADE (CELULARES)
   ========================================= */
@media (max-width: 900px) {
    header { flex-direction: column; padding: 15px 20px; align-items: stretch; }
    .header-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
    .logo { font-size: 1.4rem; }
    
    .menu-toggle { display: block; background: none; border: none; color: var(--dourado); font-size: 2rem; cursor: pointer; padding: 5px; }

    nav { 
        display: none; 
        width: 100%; 
        flex-direction: column; 
        margin-top: 15px;
        border-top: 1px solid rgba(196, 164, 124, 0.2); 
        padding-top: 10px;
    }
    
    nav.ativo { display: flex; } 
    nav a { margin: 0; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: center; width: 100%; }
    .btn-outline { margin: 20px auto 10px auto; width: 80%; display: block; text-align: center; }

    .hero h1 { font-size: 2.5rem; }
    .hero h2 { font-size: 1.4rem; }
    .contact-wrapper { grid-template-columns: 1fr; }
    .cookie-banner { flex-direction: column; text-align: center; gap: 20px; }
}