/* ============================================= */
/* 0. CSS GLOBAL E COMPONENTES */
/* ============================================= */

/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif, Arial;
    line-height: 1.6;
    color: #A3A3A3; /* Cinza Texto */
    background-color: #FFFFFF; /* Branco */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.3;
    color: #1D1D1B; /* Preto Texto */
}

img {
    max-width: 100%;
    height: auto;
}

/* Componentes Globais */
.midias-pagas-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 140px 20px;
}

.midias-pagas-secao {
    width: 100%;
}

.midias-pagas-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 100px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A3A3A3; /* Cinza Texto */
    font-size: 0.9rem;
}

.midias-pagas-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Faz a imagem cobrir a caixa, mantendo a proporção */
}

.midias-pagas-btn {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 5px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    background-color: #f9b000; /* Primario */
    color: #1D1D1B; /* Preto Texto */
    text-transform: uppercase;
}
.midias-pagas-btn:hover {
    filter: brightness(0.9);
}

/* Responsividade Global */
@media (max-width: 768px) {
    .midias-pagas-container {
        padding: 40px 20px;
    }
}

/* ============================================= */
/* 1. SEÇÃO HERO (COM IMAGEM INJETADA) */
/* ============================================= */
.midias-pagas-secao-1-hero {
    background-color: #1D1D1B; /* Preto (Fallback) */
    color: #FFFFFF; /* Branco */
    height: 75vh;
    
    /* Ajustes para centralizar e posicionar */
    display: flex; 
    align-items: center; 
    position: relative; /* Essencial */
    overflow: hidden; /* Garante que a imagem não vaze */

    /* A propriedade 'background-image' foi removida daqui */
}

/* NOVA REGRA PARA A IMAGEM INJETADA */
.pagas-hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Camada 1 (Fundo) */
}

/* NOVA REGRA PARA O OVERLAY */
.pagas-hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Camada 2 (Acima da imagem) */
}

/* AJUSTE NO CONTAINER (para ficar na frente de tudo) */
.midias-pagas-secao-1-hero .midias-pagas-container {
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative; /* Para respeitar o z-index */
    z-index: 3; /* Camada 3 (Conteúdo) */
    width: 100%; /* Garante que o container ocupe o espaço */
}

/* --- O RESTO DO CSS DA SEÇÃO 1 CONTINUA IGUAL --- */

.midias-pagas-secao-1-headline {
    font-size: 2.8rem;
    font-weight: 700;
    color: #FFFFFF; /* Branco */
    max-width: 800px;
    margin-bottom: 1.5rem;
}
.midias-pagas-secao-1-headline span {
    color: #f9b000; /* Primario */
}
.midias-pagas-secao-1-subheadline {
    font-size: 1.1rem;
    color: #ffffff; /* Cinza Texto */
    max-width: 650px;
}

/* Responsividade */
@media (max-width: 768px) {
    .midias-pagas-secao-1-headline {
        font-size: 2.2rem;
    }
}
@media (max-width: 480px) {
    .midias-pagas-secao-1-headline {
        font-size: 1.8rem;
    }
}

/* ============================================= */
/* 2. SEÇÃO PROBLEMA */
/* ============================================= */
.midias-pagas-secao-2-problema {
    background-color: #F3F3F5; /* Cinza Fundo */
    text-align: center;
}
.midias-pagas-secao-2-problema .midias-pagas-image-placeholder {
    margin: 0 auto 2.5rem auto;
}
.midias-pagas-secao-2-title {
    font-size: 1.8rem;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    color: #1D1D1B; /* Preto Texto */
}
.midias-pagas-secao-2-title strong {
    font-weight: 700;
}
.midias-pagas-secao-2-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;
    max-width: 700px;
    margin: 1.5rem auto 0 auto;
    text-align: left;
}
.midias-pagas-secao-2-box-1 p {
    font-size: 1.3rem;
    font-weight: 400;
    text-align: center;
    color: #1D1D1B; /* Cinza Texto */
    margin-bottom: 0;
}
.midias-pagas-secao-2-box-1 p span:nth-child(1) {
    color: #1D1D1B; /* Preto Texto */
}
.midias-pagas-secao-2-box-1 p span:nth-child(2) {
    color: #f9b000; /* Primario */
    margin-left: 8px;
}
.midias-pagas-secao-2-box-2 p {
    font-weight: 400;
    text-transform: uppercase;
    color: #1D1D1B; /* Preto Texto */
    text-align: center;
    padding: 0 55px;
}
.midias-pagas-secao-2-box-2 ul {
    list-style: none;
    margin-top: 1rem;
}
.midias-pagas-secao-2-box-2 li {
    color: #f9b000; /* Primario */
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
}
.midias-pagas-secao-2-conclusao {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1D1D1B; /* Preto Texto */
    max-width: 700px;
    margin: 2.5rem auto 0 auto;
}

/* Responsividade */
@media (max-width: 480px) {
    .midias-pagas-secao-2-title {
        font-size: 1.5rem;
    }
    .midias-pagas-secao-2-box-1 p span {
        display: block;
        margin-left: 0;
    }
}

/* ============================================= */
/* 3. SEÇÃO SOLUÇÃO/PLATAFORMAS */
/* ============================================= */
.midias-pagas-secao-3-solucao {
    background-color: #FFFFFF; /* Branco */
    text-align: center;
}
.midias-pagas-secao-3-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #f9b000; /* Primario */
    max-width: 850px;
    margin: 0 auto 1.5rem auto;
}
.midias-pagas-secao-3-subtitle {
    font-size: 1.1rem;
    color: #1D1D1B; /* Preto Texto */
    font-weight: 500;
    margin-bottom: 2.5rem;
}
.midias-pagas-secao-3-plataformas {
    display: flex;
    justify-content: center;
    gap: 70px;
    flex-wrap: wrap;
}
.midias-pagas-secao-3-plataforma-item {
    text-align: center;
}
.midias-pagas-secao-3-plataforma-item .midias-pagas-image-placeholder {
    width: 150px;
    height: 50px;
    border-radius: 25px; /* Pílula */
}
.midias-pagas-secao-3-plataforma-item span {
    display: block;
    margin-top: 0.5rem;
    font-weight: 700;
    color: #1D1D1B; /* Preto Texto */
}

/* Responsividade */
@media (max-width: 768px) {
    .midias-pagas-secao-3-plataformas {
        gap: 15px;
    }
    .midias-pagas-secao-3-plataforma-item .midias-pagas-image-placeholder {
        width: 100px;
        height: 35px;
    }
}

/* ============================================= */
/* 4. SEÇÃO PORQUE / INCLUSO */
/* ============================================= */
.midias-pagas-secao-4-porque-incluso {
    background-color: #f3f3f5; /* Branco */
}
.midias-pagas-secao-4-porque-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.midias-pagas-secao-4-porque-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #f9b000; /* Primario */
}
.midias-pagas-secao-4-porque-texto ul {
    list-style: none;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.midias-pagas-secao-4-porque-texto li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 0.75rem;
    color: #1D1D1B; /* Cinza Texto */
    font-weight: 400;
}
.midias-pagas-secao-4-porque-texto li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #f9b000; /* Primario */
    font-weight: 700;
}
.midias-pagas-secao-4-porque-texto p strong {
    color: #1D1D1B; /* Preto Texto */
}

.midias-pagas-secao-4-incluso-wrapper {
    margin-top: 4rem;
}
.midias-pagas-secao-4-incluso-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #f9b000; /* Primario */
    text-align: center;
}
.midias-pagas-secao-4-incluso-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.midias-pagas-secao-4-incluso-grid ul {
    list-style: none;
    border-radius: 8px;
    padding: 50px 25px;
    max-width: 700px;
    margin: 1.5rem auto 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 4px 4px rgb(0 0 0 / 5%);
}
.midias-pagas-secao-4-incluso-grid li {
    font-weight: 500;
    color: #1D1D1B; /* Preto Texto */
    margin-bottom: 1rem;
}
.midias-pagas-secao-4-incluso-grid li small {
    display: block;
    font-style: italic;
    color: #A3A3A3; /* Cinza Texto */
    font-weight: 400;
}

/* Responsividade */
@media (max-width: 768px) {
    .midias-pagas-secao-4-porque-grid {
        grid-template-columns: 1fr;
    }
    .midias-pagas-secao-4-porque-grid .midias-pagas-image-placeholder {
        order: -1; /* Imagem vem antes no mobile */
        margin-bottom: 2rem;
    }
    .midias-pagas-secao-4-incluso-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ============================================= */
/* 5. SEÇÃO DIFERENCIAL (COM IMAGEM INJETADA) */
/* ============================================= */
.midias-pagas-secao-5-diferencial {
    background-color: #1D1D1B; /* Fundo Preto (Fallback) */
    /* background-image: url(...); <-- REMOVIDO DAQUI */
    color: #FFFFFF;
    text-align: center; /* Mantido do seu original */
    
    /* Adicionado para posicionamento */
    position: relative;
    overflow: hidden;
}

/* NOVA REGRA PARA A IMAGEM INJETADA */
.pagas-diferencial-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Camada 1 (Fundo) */
}

/* NOVA REGRA PARA O OVERLAY */
.pagas-diferencial-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay escuro 60% */
    z-index: 2; /* Camada 2 (Acima da imagem) */
}

/* AJUSTE NO CONTAINER (para ficar na frente de tudo) */
.midias-pagas-secao-5-diferencial .midias-pagas-container {
    position: relative; /* Para respeitar o z-index */
    z-index: 3; /* Camada 3 (Conteúdo) */
}


/* --- O RESTO DO CSS DA SEÇÃO 5 CONTINUA IGUAL --- */

.midias-pagas-secao-5-title {
    font-size: 1.8rem;
    font-weight: 300;
    color: #FFFFFF; /* Branco */
    max-width: 800px;
    text-align: right;
}
.midias-pagas-secao-5-title span {
    color: #f9b000; /* Primario */
    font-weight: 400;
}
.midias-pagas-secao-5-subtitle {
    font-size: 1.1rem;
    color: #ffffff; /* Cinza Texto */
    max-width: 650px;
    text-align: right;
}
.midias-pagas-secao-5-list {
    list-style: none;
    max-width: 650px;
    text-align: right;
}
.midias-pagas-secao-5-list li {
    position: relative;
    padding-right: 25px;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: #FFFFFF;
}
.midias-pagas-secao-5-list li::after {
    content: '🔹';
    font-size: 0.8rem;
    position: absolute;
    right: 0;
    top: 4px;
}
#secao-5-diferencial {
    justify-items: end; 
    padding-left: 28em;
    /* As regras de z-index já foram aplicadas acima */
}

/* ============================================= */
/* 6. SEÇÃO RESULTADOS */
/* ============================================= */
.midias-pagas-secao-6-resultados {
    background-color: #F3F3F5; /* Cinza Fundo */
    text-align: center;
}
.midias-pagas-secao-6-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #f9b000; /* Primario */
    text-align: center;
    margin-bottom: 2.5rem;
}

/* --- ESTA É A MUDANÇA PRINCIPAL --- */
.midias-pagas-secao-6-grid {
    display: flex; /* MUDADO de grid para flex */
    flex-wrap: wrap; /* Permite que os itens quebrem a linha */
    justify-content: center; /* ESTA É A MÁGICA: Centraliza os itens na linha */
    
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    
    /* Regras de grid removidas */
}

.midias-pagas-secao-6-card {
    background-color: #f9b000; /* Primario */
    color: #ffffff; /* Preto Texto */
    
    padding: 15px 20px; /* Deixa o retângulo "fino" (menos altura) */
    
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
    
    white-space: nowrap; /* <-- ISSO FORÇA "sem quebra de linhas" */
    overflow: hidden; /* Garante que o texto não vaze */
    text-overflow: ellipsis; /* Bônus: adiciona "..." se o texto for muito grande */

    /* O flex é bom para centralizar o ícone e o texto verticalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre o ✅ e o texto */
}
.midias-pagas-secao-6-conclusao {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1D1D1B; /* Preto Texto */
    max-width: 1200px;
    margin: 2.5rem auto 0 auto;
}

/* Responsividade */
@media (max-width: 768px) {
    /* Em telas menores, os cards ocuparão ~45% cada (2 colunas) */
    .midias-pagas-secao-6-card {
        flex-basis: 45%;
    }
}
@media (max-width: 600px) {
    /* Em telas bem pequenas, ocuparão 100% (1 coluna) */
    .midias-pagas-secao-6-card {
        flex-basis: 100%;
    }
}

/* ============================================= */
/* 7. SEÇÃO PROVA SOCIAL */
/* ============================================= */
.midias-pagas-secao-7-confianca-numeros {
    background-color: #f9b000; /* Primario */
    background-image: url('[CAMINHO_PARA_SEU_BANNER_HERO.jpg]');
    text-align: center;
}
.midias-pagas-secao-7-confianca-numeros .midias-pagas-container:not(.midias-pagas-secao-7-legenda) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    
    /* AJUSTADO: Padding para a linha */
    padding-bottom: 40px; 
    margin: 0 auto;

    /* * ADICIONADO: A linha fina que faltava
     * A cor branca (#FFFFFF) parece ser a correta pela imagem
    */
    border-bottom: 1px solid #FFFFFF;
}

.midias-pagas-secao-7-item h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #FFFFFF; /* Branco */
}
.midias-pagas-secao-7-item p {
    font-size: 1.1rem;
    font-weight: 500;
    color: #FFFFFF; /* Branco */
    opacity: 0.8; /* Deixa o subtítulo um pouco mais leve, como na imagem */
}
.midias-pagas-secao-7-legenda {
    padding-top: 40px; /* Espaço acima (abaixo da linha) */
    /* padding-bottom: 40px;  ADICIONADO: Espaço abaixo (dentro do amarelo) */
    text-align: center;
}
.midias-pagas-secao-7-legenda p {
    font-size: 1.2rem;
    font-weight: 600; 
    color: #FFFFFF; /* Corrigido para Branco (como na imagem) */
    margin-bottom: 0; /* <-- ESTA É A CORREÇÃO PRINCIPAL */
}

/* Logos (sem mudança) */
.midias-pagas-secao-7-confianca-logos {
    background-color: #ffffffff; /* Preto Texto (fundo) */
}
.midias-pagas-secao-7-confianca-logos .midias-pagas-image-placeholder {
    max-width: 75%;
    min-height: 400px;
    margin: 0 auto;
    border-radius: 0;
}

/* Responsividade (corrigido para o seletor novo) */
@media (max-width: 768px) {
    .midias-pagas-secao-7-confianca-numeros .midias-pagas-container:not(.midias-pagas-secao-7-legenda) {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ============================================= */
/* 8. SEÇÃO FORMULÁRIO */
/* ============================================= */
.midias-pagas-secao-8-cta {
    background-color: #F3F3F5; /* Cinza Fundo */
    text-align: center;
    padding-bottom: 180px;
}
.midias-pagas-secao-8-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #f9b000; /* Primario */
    margin-bottom: 0.5rem;
}
.midias-pagas-secao-8-subtitle {
    font-size: 1.1rem;
    color: #1D1D1B; /* Preto Texto */
    font-weight: 500;
    margin-bottom: 2.5rem;
}
.midias-pagas-secao-8-form {
    max-width: 600px;
    margin: 0 auto;
}
.midias-pagas-secao-8-form-group {
    margin-bottom: 1rem;
}
.midias-pagas-secao-8-form-group input {
    width: 100%;
    padding: 14px;
    border-radius: 5px;
    border: none;
    background-color: #E7E7E7; /* Cinza claro dos campos */
    font-family: 'Poppins', sans-serif, Arial;
    font-size: 1rem;
    font-weight: 500;
    color: #1D1D1B; /* Preto Texto */
}
.midias-pagas-secao-8-form-group input::placeholder {
    color: #A3A3A3; /* Cinza Texto */
    font-weight: 500;
}
.midias-pagas-secao-8-form-group button {
    width: 100%;
    max-width: 300px; /* Como na imagem */
}

/* ============================================= */
/* 9. SEÇÃO FOOTER */
/* ============================================= */
.midias-pagas-secao-9-footer {
    background-color: transparent;
    text-align: center;

    /* Configuração para imagem de fundo absoluta */
    position: relative;
    overflow: hidden;
}

/* NOVA REGRA PARA A IMAGEM DE FUNDO DO FOOTER */
.pagas-footer-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Camada 1 (Fundo) */
    opacity: ;
}

/* NOVA REGRA PARA O OVERLAY DO FOOTER (Opcional, se quiser escurecer a imagem) */
.pagas-footer-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
}

/* AJUSTE NO CONTAINER DO FOOTER (para ficar na frente de tudo) */
.midias-pagas-secao-9-footer .midias-pagas-container {
    position: relative; /* Para respeitar o z-index */
    z-index: 3; /* Camada 3 (Conteúdo de texto) */
}

/* --- O RESTO DOS ESTILOS DO TEXTO DO FOOTER --- */
.midias-pagas-secao-9-footer p {
    font-size: 1.1rem;
    color: #FFFFFF; /* Branco */
    max-width: 700px;
    margin: 0 auto 1.5rem auto;
}
.midias-pagas-secao-9-footer h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF; /* Branco */
    letter-spacing: 11px;
}

.ix-popup-paga {justify-self:center;}
#form-text {padding: 120px 20px 0 0;}