:root {
    --azul: #0a1f44;
    --dourado: #d4af37;
    --branco: #ffffff;
}

body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; color: #333; background: #f9f9f9; }
.container { padding: 20px; max-width: 600px; margin: 0 auto; }

/* Header */
.lp-header { background: var(--azul); color: var(--dourado); padding: 10px 0; border-bottom: 2px solid var(--dourado); text-align: center; }
.oab { display: block; font-size: 0.7rem; opacity: 0.8; }

/* Hero Section com Imagem de Fundo e Overlay */
.lp-hero {
    text-align: center;
    padding: 60px 20px; /* Aumentamos um pouco o padding para destacar a imagem */
    
    /* Configuração da Imagem de Fundo */
    background-image: linear-gradient(rgba(10, 31, 68, 0.85), rgba(10, 31, 68, 0.95)), /* Overlay Azul Marinho */
                      url('../img/direito_criminal.png'); /* Caminho para sua imagem na pasta img */
    background-size: cover; /* Garante que a imagem cubra toda a section */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat;
    
    /* Ajuste de cores do texto para contrastar com o fundo escuro */
    color: #ffffff; 
}

/* Ajustes nos elementos internos para o fundo escuro */
.lp-hero h1 {
    color: #ffffff; /* Título agora é branco */
    font-size: 2rem;
    margin: 25px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Sombra sutil para leitura */
}

.lp-hero p {
    line-height: 1.6;
    font-size: 1.15rem;
    color: #e0e0e0; /* Cinza muito claro para o parágrafo */
}

/* Mantemos a Tag Urgente e o Botão como estavam, pois já têm bom contraste */
.tag-urgente {
    background: #fff3cd;
    color: #856404;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-block; /* Garante o comportamento correto */
}

.small-text {
    font-size: 0.8rem;
    color: #b0b0b0; /* Cinza claro para o texto pequeno */
    margin-top: 10px;
}

/* Botão Magnético */
.btn-cta-principal {
    display: block;
    background: #25d366; /* Verde WhatsApp para confiança */
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 25px 0 10px;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    transition: 0.3s;
}

.btn-cta-principal:hover { transform: translateY(-3px); }

/* Stats */
.container-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--azul); color: #fff; padding: 20px 10px; text-align: center; font-size: 0.8rem; }
.stat-item strong { display: block; color: var(--dourado); font-size: 1.1rem; }

/* Content */
.card-venda { background: #fff; padding: 25px; border-radius: 10px; border-left: 5px solid var(--dourado); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.check-list { list-style: none; padding: 0; margin-top: 20px; }
.check-list li { margin-bottom: 10px; padding-left: 30px; position: relative; font-weight: 500; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--dourado); font-weight: bold; }

.lp-footer { text-align: center; padding: 20px; font-size: 0.8rem; color: #999; }

/* Seção em Full Width (Preenche a tela toda) */
.venda-civil {
    width: 100%;
    /* Imagem de fundo limpa e imersiva */
    background-image: url('../img/fundo.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efeito Parallax discreto para PC */
    padding: 50px 0; /* Mais respiro nas verticais */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container que mantém o conteúdo alinhado mas permite expansão */
.venda-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divisão 50/50 perfeita no PC */
    gap: 60px;
    align-items: center;
    width: 90%; /* Deixa uma margem elegante nas bordas da tela */
    max-width: 1400px; /* Limite máximo para não "espalhar" demais em monitores UltraWide */
    margin: 0 auto;
}

/* Coluna de Texto */
.venda-texto {
    padding: 20px;
}

.venda-texto h2 {
    font-size: 2.8rem; /* Título maior e mais imponente no PC */
    line-height: 1.2;
    color: #0a1f44;
}

/* Coluna do Carrossel (Visual) */
.venda-visual {
    position: relative;
    width: 100%;
    height: 500px; /* Altura maior para preencher bem a tela no PC */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
    border: 1px solid rgba(212, 175, 55, 0.3); /* Borda dourada sutil */
}

/* Ajuste Responsivo para Celular */
@media (max-width: 1024px) {
    .venda-grid {
        grid-template-columns: 1fr; /* Empilha no celular */
        width: 95%;
        gap: 40px;
    }

    .venda-texto {
        text-align: center;
        order: 2; /* Texto embaixo da imagem no mobile */
    }

    .venda-visual {
        height: 350px;
        order: 1; /* Imagem em cima no mobile */
    }

    .venda-texto h2 {
        font-size: 2rem;
		color: #0a1f44;
    }
}

.tag-especialista {
    /* Cor Azul Marinho Profundo para contraste máximo com o dourado */
    color: #0a1f44 !important; 
    
    font-weight: 800; /* Peso extra para a fonte "saltar" */
    text-transform: uppercase;
    letter-spacing: 2px; /* Espaçamento entre letras para ar de sofisticação */
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 15px;
    
    /* Opcional: Uma borda fina azul ajuda a definir o limite do texto no fundo claro */
    border-bottom: 2px solid #0a1f44; 
    padding-bottom: 5px;
}

/* Se o fundo dourado for muito vibrante, adicione um leve respiro branco por trás */
.venda-texto .tag-especialista {
    background: rgba(255, 255, 255, 0.15); /* Brilho sutil por trás do texto azul */
    padding: 5px 12px;
    border-radius: 4px;
}

.beneficios-venda {
    margin: 30px 0;
}

.beneficio-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid #d4af37;
}

/* Estilo do Carrossel Sobreposto */
.venda-visual {
    position: relative;
    height: 400px;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.img-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.img-fade.active {
    opacity: 1;
}

.btn-venda-contato {
    display: inline-block;
    background: #0a1f44;
    color: #d4af37;
    padding: 18px 35px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    border: 1px solid #d4af37;
}



/* Responsividade */
@media (max-width: 992px) {
    .venda-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .venda-visual { height: 300px; }
}

.lp-footer {
    background: #ffffff; /* Azul Marinho HRLM Sites */
    color: #0a1f44;
    padding: 20px 20px;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Mantém os 10px de distância entre os elementos */
}

.footer-container p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.footer-logo img {
    width: 40px; /* Tamanho miniatura conforme solicitado */
    height: auto;
    display: block;
    transition: 0.3s;
    
}

.designer-credits {
    font-size: 0.75rem !important;
    margin-top: 5px !important;
    color: #d4af37; /* Dourado para destaque do designer */
}