/* /assets/css/pages/lgpd.css */

/* --- Estilo do Cabeçalho da Página --- */
.page-header-lgpd {
    position: relative;
    padding: 10px 0;
    
    /* 1. Cor de fundo base */
    background-color: var(--verde-principal, #00938E);

    /* 2. Imagens de fundo em camadas */
    background-image: 
        url('/assets/images/lgpd/background_header_left.png'), 
        url('/assets/images/lgpd/background_header_right.png');
    
    /* 3. Posição de cada imagem */
    background-position: 
        left center, 
        right center;
    
    /* 4. Garante que as imagens não se repitam */
    background-repeat: 
        no-repeat,
        no-repeat;

    /* 5. Ajusta o tamanho das imagens para se encaixarem bem */
    background-size: contain;
}

.page-header-lgpd h1, .page-header-lgpd span {
    font-family: 'Magistral', sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/*
==============================================
ESTILOS DAS SEÇÕES DE CONTEÚDO (LGPD)
==============================================
*/

/* Estilo para os títulos das seções de conteúdo */
#lgpd-intro h3,
#lgpd-importancia h3 {
    font-family: 'Magistral', sans-serif;
    text-transform: uppercase;
}

/*
==============================================
ESTILOS DA SEÇÃO 'TERMOS LGPD'
==============================================
*/
.terms-section {
    position: relative; /* Essencial para os detalhes */
    background-color: var(--verde-principal);
    padding: 100px 0; /* Aumenta o padding para dar espaço aos detalhes */
    
    /* Imagens de fundo em camadas */
    background-image: 
        url('/assets/images/lgpd/background_termos_left.png'), 
        url('/assets/images/lgpd/background_termos_right.png');
    
    /* Posição de cada imagem */
    background-position: 
        left center, 
        right center;
    
    /* Garante que as imagens não se repitam */
    background-repeat: no-repeat;

    /* Ajusta o tamanho das imagens */
    background-size: contain;
}

/* Detalhe Superior: '/-----\' */
.terms-section::before {
    content: ''; 
    position: absolute;
    left: 50%;
    top: -16px; /* Posiciona para CIMA */
    transform: translateX(-50%);
    width: 600px; 
    height: 20px;
    background-color: var(--verde-principal, #00938E);
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

/* Detalhe Inferior: '\______/' */
.terms-section::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -16px; /* Posiciona para BAIXO */
    transform: translateX(-50%);
    width: 600px;
    height: 20px;
    background-color: var(--verde-principal, #00938E);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}


.terms-section .section-title h2 {
    font-family: 'Magistral', sans-serif;
    text-transform: uppercase;
}

.feature-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 80px;
    min-height: 80px;
    margin-right: 10px;
    background-image: url('/assets/images/lgpd/backgroundIcone.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.feature-icon img {
    max-width: 40px;
    height: auto;
}

.term-card h5 {
    font-weight: 700;
    color: white;
}

.term-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

.term-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}


/*
==============================================
ESTILOS DAS SEÇÕES DE FEATURES (LGPD)
==============================================
*/

/* O container que ancora o detalhe - já está correto */
.lgpd-feature-section {
    position: relative;
}

/* O detalhe superior '/-----\', aplicado à section (wrapper) */
.lgpd-feature-section::before {
    content: ''; 
    position: absolute;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    width: 200px; 
    height: 20px;
    background-color: #1B1B1B;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
    z-index: 2; /* Para ficar acima do bloco principal */
}

/* A div interna com a forma principal */
.lgpd-feature-block {
    background-color: #1B1B1B;
    color: white;
    padding: 2.5rem;
    position: relative; 
    z-index: 1;
    clip-path: polygon(5% 0, 95% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
}



/* ==============================================
   ATUALIZAÇÃO: SEÇÃO DIVISÓRIA 'RECURSO' 
   ==============================================
*/

.recurso-divider {
    /* Mantemos o padding alto para mostrar a imagem */
    padding: 160px 0;
    position: relative;
    background-image: url('/assets/images/lgpd/Agrupar38.png');
    background-position: center center;
    background-size: cover; 
    background-repeat: no-repeat;
    background-color: transparent;
}

/* --- AJUSTE 1: Puxar o texto superior para CIMA --- */
.recurso-divider .recurso-title {
    font-family: 'Magistral', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: -90px;
    margin-bottom: 1rem;
}

/* Removemos pseudo-elementos antigos */
.recurso-divider::before,
.recurso-divider::after {
    display: none !important;
    content: none;
}


/* ==============================================
   ESTILOS DO AVISO LEGAL (NOTICE BOX)
   ==============================================
*/

/* --- AJUSTE 2: Empurrar o aviso para BAIXO --- */
.notice-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 7rem; 
}

.notice-box {
    background-color: white;
    color: var(--preto);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.9rem;
    clip-path: polygon(
        5% 0,
        100% 0,
        100% 70%,
        95% 100%,
        0 100%,
        0 30%
    );

}

.notice-box strong {
    color: #9e9e9e;
    text-transform: uppercase;
    margin-right: 5px;
}



/*
==============================================
ESTILOS DO BLOCO DE DPO
==============================================
*/

/* Container principal que ancora tudo */
.dpo-block {
    position: relative; /* Essencial para o posicionamento do conteúdo */
}

/* A imagem de fundo, que agora é um elemento na página */
.dpo-block .dpo-background-img {
    width: 100%;
    height: auto;
    display: block; /* Remove qualquer espaço extra abaixo da imagem */
}

/* O conteúdo que fica sobre a imagem **/
.dpo-content {
    position: absolute; /* 'Desprende' o conteúdo para flutuar sobre a imagem */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Usa flexbox para centralizar o conteúdo perfeitamente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Adiciona padding para que o texto não cole nas bordas da forma */
    padding: 2rem 4rem;
}

/* Estilo dos 'botões' de contato (reutilizado e ajustado) */
.dpo-contact-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.dpo-contact-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.dpo-contact-btn i {
    font-size: 1.2rem;
    color: var(--cor-icone);
}

.dpo-contact-btn span {
    margin: 0 10px;
}

.dpo-contact-btn .arrow-icon {
    font-size: 0.8rem;
    color: #fff;
}