/* Paleta de Cores Moderna */
/* Paleta de Cores Moderna */
:root {
    --cor-primaria: #085bb3; /* Azul Vibrante */
    --cor-secundaria: #6c757d;
    --cor-fundo: #f8f9fa;
    --cor-texto: #343a40;
}

/* ------------------------------------- */
/* ESTILIZAÇÃO DO CABEÇALHO E NAVEGAÇÃO  */
/* ------------------------------------- */

.header {
    background-color: white;
    padding: 15px 5%; /* Padding lateral para afastar das bordas */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    /* Propriedades Flexbox para posicionamento: */
    display: flex; /* Alinha os itens (logo e nav) horizontalmente */
    justify-content: space-between; /* Empurra o logo para a esquerda e o menu para a direita */
    align-items: center; /* Centraliza verticalmente o logo e o menu */
}

/* Estilo do Nome do Blog "Destinando" */
.logo a {
    font-size: 1.8em; /* Tamanho maior para destaque */
    font-weight: bold;
    color: var(--cor-primaria); /* Aplicando o Azul Moderno */
    text-decoration: none; /* Remove o sublinhado do link */
}

/* Estilo dos Links do Menu */
.menu-principal a {
    text-decoration: none;
    color: var(--cor-texto); /* Usa a cor de texto padrão */
    margin-left: 25px; /* Espaço entre os links do menu */
    font-size: 1em;
    transition: color 0.3s; /* Transição suave para o efeito hover */
}

/* Efeito ao passar o mouse */
.menu-principal a:hover {
    color: var(--cor-primaria); /* Fica azul ao passar o mouse */
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    margin: 0;
    padding: 0;
}

header {
    background-color: white;
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav a {
    text-decoration: none;
    color: var(--cor-primaria);
    margin: 0 15px;
}

/* ---------------------------------- */
/* ESTILIZAÇÃO DA SEÇÃO HERO (CAPA)   */
/* ---------------------------------- */

.hero-section {
    /* Define o container pai como relativo para que o conteúdo absoluto (texto) se posicione dentro dele */
    position: relative;
    width: 100%;
    /* Altura da seção. Ajuste o valor (ex: 70vh ou 450px) para a altura desejada */
    height: 400px; 
    overflow: hidden; /* Garante que nada saia do container */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra toda a área sem distorcer */
    display: block;
    /* Adiciona uma sobreposição escura para o texto branco se destacar (opcional, mas recomendado) */
    opacity: 0.8; 
}

.hero-content {
    /* Define o container de texto como absoluto para flutuar sobre a imagem */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 10%; /* Espaçamento interno */
    
    /* Configurações Flexbox para Centralizar o Texto (Horizontal e Vertical) */
    display: flex;
    flex-direction: column; /* Organiza os itens (h1, p, a) verticalmente */
    justify-content: center; /* Centraliza no eixo vertical */
    align-items: flex-start; /* Alinha o texto à esquerda (como na imagem de referência) */
    
    /* Cor de Fundo Escura Semi-Transparente (opcional: alternativa ao opacity na imagem) */
    background-color: rgba(0, 0, 0, 0.4); 
}

.hero-content h1 {
    color: white; /* Texto Branco para contraste */
    font-size: 3em;
    margin-bottom: 10px;
}

.hero-content p {
    color: white;
    font-size: 1.2em;
    max-width: 600px;
    margin-bottom: 25px;
}

/* Estilização do Botão de CTA (Chamada para Ação) */
.btn-cta {
    display: inline-block;
    background-color: var(--cor-primaria); /* Usa o azul moderno */
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-cta:hover {
    background-color: #0056b3; /* Um tom de azul mais escuro ao passar o mouse */
}

/* ------------------------------------- */
/* 4. SEÇÃO DESTAQUES (GRID DE 3 COLUNAS)*/
/* ------------------------------------- */

.container-principal {
    width: 90%; /* Largura do conteúdo principal */
    max-width: 1200px; /* Limite máximo de largura */
    margin: 40px auto; /* Centraliza e adiciona margem em cima/baixo */
}

.destaques {
    display: grid;
    /* Define 3 colunas de largura igual (1 fração de espaço) */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Espaço entre as colunas */
}

.destaque-item {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra suave para profundidade */
    text-align: center;
}

.destaque-item h2 {
    color: var(--cor-primaria);
    font-size: 1.5em;
    margin-top: 0;
}

/* Estilo do Botão Secundário */
.btn-secundario {
    display: inline-block;
    color: var(--cor-primaria);
    border: 2px solid var(--cor-primaria);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s;
    margin-top: 15px;
}

.btn-secundario:hover {
    background-color: var(--cor-primaria);
    color: white;
}

/* ------------------------------------- */
/* 5. RESPONSIVIDADE (PARA CELULARES)  */
/* ------------------------------------- */
@media (max-width: 768px) {
    /* Em telas menores que 768px, as colunas viram 1 só */
    .destaques {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------- */
/* 6. SEÇÃO POSTS RECENTES (CARDS)       */
/* ------------------------------------- */

.posts-recentes {
    width: 90%;
    max-width: 1200px;
    margin: 60px auto; /* Espaçamento da seção */
}

.section-title {
    text-align: center;
    font-size: 2.5em;
    color: var(--cor-texto);
    margin-bottom: 40px;
}

/* Configuração da Grade de Cartões */
.posts-grid {
    display: grid;
    /* 3 colunas, mas o tamanho mínimo de cada coluna é 300px. Isso garante que a grade quebre em telas menores */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.post-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden; /* Garante que a imagem fique dentro da borda arredondada */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
    transform: translateY(-5px); /* Efeito sutil de levantar ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.post-image {
    width: 100%;
    height: 200px; /* Altura fixa para as imagens */
    object-fit: cover; /* Recorta a imagem para preencher o espaço sem distorção */
    display: block;
}

.post-content {
    padding: 20px;
}

.post-content h3 a {
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 1.3em;
    margin-top: 0;
    display: block;
    margin-bottom: 10px;
}

.post-content h3 a:hover {
    color: var(--cor-primaria);
}

.post-content p {
    font-size: 0.95em;
    color: var(--cor-secundaria);
}

.post-data {
    display: block;
    margin-top: 15px;
    font-size: 0.85em;
    color: #999;
}

.ver-mais {
    text-align: center;
    margin-top: 50px;
}

/* ---------------------------------- */
/* 7. ESTILIZAÇÃO DO RODAPÉ (FOOTER)  */
/* ---------------------------------- */

footer {
    background-color: var(--cor-texto); /* Fundo escuro (cinza escuro ou preto) */
    color: white;
    padding-top: 40px;
    font-size: 0.9em;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    padding-bottom: 20px;
    border-bottom: 1px solid #444; /* Linha divisória suave */
}

.footer-col {
    width: 30%;
    padding: 0 15px;
}

.footer-col h4 {
    color: var(--cor-primaria); /* Títulos em azul moderno */
    font-size: 1.2em;
    margin-bottom: 15px;
}

.footer-col p {
    line-height: 1.6;
}

.footer-col ul {
    list-style: none; /* Remove bolinhas */
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 8px;
}

.footer-col a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: var(--cor-primaria);
}

.footer-copyright {
    text-align: center;
    padding: 15px;
    background-color: #212529; /* Uma cor ainda mais escura para o copyright */
}

/* Responsividade do Rodapé */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Empilha as colunas verticalmente */
    }
    .footer-col {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* ---------------------------------- */
/* 8. ESTILIZAÇÃO DA PÁGINA DE POST   */
/* ---------------------------------- */

.post-page-container {
    width: 90%;
    max-width: 900px; /* Conteúdo mais estreito para facilitar a leitura */
    margin: 0 auto 50px auto;
}

.post-hero {
    position: relative;
    margin-bottom: 40px;
}

.post-capa-img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.post-titulo-overlay {
    /* Pode ser removido se você não quiser o título em overlay */
    /* Se usar, adicione position: absolute ao .post-hero */
    text-align: center; 
    margin-top: 30px;
}

.post-titulo-overlay h1 {
    font-size: 2.8em;
    color: var(--cor-texto);
}

.post-meta {
    color: var(--cor-secundaria);
    font-style: italic;
    margin-bottom: 20px;
}

/* Corpo do Conteúdo */
.post-content-body {
    line-height: 1.8;
    font-size: 1.1em;
}

.post-content-body h2 {
    color: var(--cor-primaria);
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-top: 30px;
}

.introducao {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--cor-texto);
    margin-bottom: 30px;
}

/* ---------------------------------- */
/* 9. ESTILIZAÇÃO DOS BLOCOS AFILIADOS */
/* ---------------------------------- */

.afiliado-bloco {
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    margin: 30px 0;
}

.destaque-reserva {
    background-color: #e0f7fa; /* Fundo azul claro suave */
    border: 1px solid #00bcd4;
}

.destaque-reserva h2 {
    color: #00796b;
    border-bottom: none;
}

.btn-afiliado {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    margin: 10px;
    transition: opacity 0.3s;
}

.booking-btn {
    background-color: #007bff; /* Azul do Booking */
}
.booking-btn:hover {
    background-color: #0056b3;
}

.agencia-btn {
    background-color: #ff9800; /* Laranja/Amarelo */
}
.agencia-btn:hover {
    background-color: #e65100;
}

/* Chamada para o E-book */
.ebook-cta-bloco {
    background-color: #fff9e6; /* Fundo amarelo claro */
    border-left: 5px solid #ffeb3b;
    padding: 20px;
    margin: 30px 0;
    text-align: left;
}

.ebook-cta-bloco h3 {
    color: var(--cor-texto);
    margin-top: 0;
}

/* ------------------------------------- */
/* 10. ESTILIZAÇÃO DA LANDING PAGE (NOVO DESIGN - COLUNA ÚNICA) */
/* ------------------------------------- */

/* ------------------------------------- */
/* 10.1 ESTILIZAÇÃO DO CABEÇALHO DA LANDING PAGE */
/* ------------------------------------- */

.landing-header {
    text-align: center;
    padding: 15px;
    background-color: white; /* Garante que o fundo seja branco se o body for colorido */
    border-bottom: 2px solid var(--cor-primaria); /* Adiciona uma linha de destaque azul */
    position: sticky; /* Mantém o header fixo no topo ao rolar (opcional) */
    top: 0;
    z-index: 1000;
}
.logo-pequeno {
    font-size: 1.8em; /* Aumenta o tamanho da fonte */
    font-weight: 800; /* Deixa o logo mais negrito */
    color: var(--cor-texto); /* Usa a cor escura principal */
    text-decoration: none;
    letter-spacing: 1px;
}
.logo-pequeno:hover {
    color: var(--cor-primaria); /* Efeito ao passar o mouse */
}

.vendas-container-novo {
    width: 95%;
    max-width: 800px; /* Coluna única e centralizada */
    margin: 30px auto;
    text-align: center;
}

/* 10.1 HERO e PREÇO */
.vendas-hero-novo {
    padding: 20px 0 40px 0;
}
.headline-novo {
    font-size: 2.8em;
    color: var(--cor-texto); /* Título principal mais escuro */
    line-height: 1.2;
    margin-bottom: 10px;
}
.sub-headline-novo {
    font-size: 1.5em;
    color: var(--cor-secundaria);
    margin-bottom: 30px;
}
.preco-cta-topo {
    background-color: #e6f7ff; /* Fundo suave para destaque */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.preco-atual {
    font-size: 3em;
    font-weight: bold;
    color: #28a745; /* VERDE para preço */
}

/* 10.2 SEÇÃO BENEFÍCIOS (Capa + Lista) */
.secao-beneficios-novo {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 50px 0;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
.beneficio-imagem {
    width: 40%;
}
.beneficio-lista {
    width: 60%;
}
.ebook-cover-novo {
    max-width: 100%;
    height: auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.lista-beneficios-novo {
    list-style: none;
    padding: 0;
}
.lista-beneficios-novo li {
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.15em;
    color: var(--cor-texto);
    /* Usando emoji como marcador para simplicidade e destaque */
    list-style: none;
    position: relative; 
}
.lista-beneficios-novo li::before {
    content: "✔️"; /* Ícone de check moderno */
    position: absolute;
    left: 0;
    color: #28a745;
}

/* 10.3 PREVIEW DE VALOR (Teaser) */
.preview-valor {
    padding: 40px 0;
}
.preview-subtitle-novo {
    font-size: 1.8em;
    color: var(--cor-primaria);
    margin-bottom: 30px;
}
.preview-grid {
    display: flex;
    gap: 30px;
    text-align: left;
}
.preview-item {
    width: 50%;
    background-color: #fffde7; /* Fundo amarelo suave para o teaser */
    padding: 20px;
    border-radius: 8px;
    border: 1px dashed #ffd700;
}
.custos-tabela-preview {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.9em;
}
.custos-tabela-preview td {
    padding: 5px 0;
}
.teaser-text {
    font-style: italic;
    font-size: 0.8em;
    color: #999;
    margin-top: 15px;
}

/* 10.4 CTA FINAL (Repetição do botão) */
.cta-pergunta {
    font-size: 2em;
    color: var(--cor-texto);
    margin-top: 50px;
}
.cta-urgencia {
    font-size: 1.2em;
    color: #cc0000;
    font-weight: bold;
    margin-bottom: 20px;
}

/* ---------------------------------- */
/* Botão de Compra - Super Destaque */
/* Aplicado em .btn-compra-final */
/* ---------------------------------- */

.btn-compra-final {
    display: inline-block; /* Permite que o botão se ajuste ao conteúdo, mas aceite largura total se definido */
    padding: 15px 30px;
    background-color: #ff9800; /* Laranja forte */
    color: white;
    text-decoration: none;
    font-size: 1.4em; /* Tamanho da fonte grande */
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.5); /* Sombra suave para profundidade */
    transition: background-color 0.3s, transform 0.1s;
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn-compra-final:hover {
    background-color: #e65100; /* Laranja mais escuro ao passar o mouse */
    transform: translateY(-2px); /* Efeito de 'levantar' */
    box-shadow: 0 6px 18px rgba(255, 152, 0, 0.6);
}

/* Ajustes de largura para a versão mobile ou topo */
.preco-cta-topo .btn-compra-final {
    width: 80%;
    margin-top: 15px;
}

.cta-final-vendas .btn-compra-final {
    width: 70%;
    margin-top: 15px;
}

/* Ajuste para telas pequenas */
@media (max-width: 600px) {
    .preco-cta-topo .btn-compra-final,
    .cta-final-vendas .btn-compra-final {
        width: 100%; /* Ocupa a largura total em celulares */
        font-size: 1.2em;
        padding: 15px 10px;
    }
}

/* 10.5 RESPONSIVIDADE */
@media (max-width: 768px) {
    .secao-beneficios-novo {
        flex-direction: column;
        text-align: center;
    }
    .beneficio-imagem, .beneficio-lista {
        width: 100%;
    }
    .preview-grid {
        flex-direction: column;
    }
    .preview-item {
        width: 100%;
    }
    .headline-novo {
        font-size: 2.2em;
    }
}

/* ------------------------------------- */
/* 11. ESTILIZAÇÃO DA PÁGINA DE ARQUIVO  */
/* ------------------------------------- */

.post-archive-container {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto 60px auto;
}

.archive-title {
    text-align: center;
    font-size: 3em;
    color: var(--cor-texto);
    margin-bottom: 5px;
}

.archive-description {
    text-align: center;
    font-size: 1.2em;
    color: var(--cor-secundaria);
    margin-bottom: 50px;
}

/* Reutilizando a grade de posts que já criamos para o index */
.posts-archive-grid {
    display: grid;
    /* Faz as colunas se ajustarem (adaptáveis) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* ---------------------------------- */
/* 12. ESTILO PARA LINK AFILIADO INLINE */
/* ---------------------------------- */

.afiliado-inline {
    margin: 10px 0 10px 10px; /* Recuo para destacar o bloco */
    padding: 5px;
    background-color: #f0f8ff; /* Fundo azul bem clarinho (light cyan) */
    border-left: 3px solid var(--cor-primaria); /* Uma pequena borda */
    font-size: 0.95em;
}

/*LANDING PAGE*/

/* --- VÁRIÁVEIS E ESTILOS GERAIS --- */
:root {
    --jampa-blue: #00a8e8; /* Azul do Oceano/Céu de Jampa */
    --sand-white: #f5f5f5; /* Fundo suave, quase branco */
    --dark-text: #333333;
    --light-text: #555555;
    --accent-color: #ff9900; /* Laranja do Sol para destaque */
    --price-highlight: #e71d36; /* Vermelho/Pink para preço (urgência) */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    background-color: white;
    color: var(--dark-text);
    line-height: 1.6;
}

/* --- HEADER e LOGO --- */
.lp-header {
    padding: 20px 5%;
    background-color: white;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05); /* Sombra mais suave */
}

.lp-logo {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--jampa-blue);
    text-decoration: none;
}

/* --- BOTÃO CTA (Mais agressivo e focado em Venda) --- */
.lp-btn-cta {
    display: block; /* Ocupa a largura total do container */
    background-color: var(--price-highlight); /* Usa a cor de urgência */
    color: white;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 50px; 
    font-weight: 700; /* Mais peso */
    font-size: 1.2em;
    letter-spacing: 0.5px;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 5px 15px rgba(231, 29, 54, 0.5); /* Sombra mais intensa */
    text-align: center;
    border: none;
    cursor: pointer;
}

.lp-btn-cta:hover {
    background-color: #c71b30;
    transform: translateY(-2px); 
}

.lp-btn-cta.large {
    font-size: 1.5em;
    padding: 20px 50px;
    width: 100%;
}


/* --- HERO SECTION --- */
.lp-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px 5%;
    gap: 50px;
}

.hero-content-text {
    flex: 1;
}

.tagline {
    color: var(--price-highlight); /* Tagline em destaque/urgência */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1em;
}

.hero-content-text h1 {
    font-size: 3em;
    margin: 10px 0 20px 0;
    line-height: 1.1;
}

.hero-content-text p {
    font-size: 1.2em;
    color: var(--light-text);
    margin-bottom: 30px;
}

/* Estilo da Caixa de Preço */
.price-box-hero {
    margin-top: 30px;
    padding: 25px;
    background-color: var(--sand-white);
    border-radius: 10px;
    border: 2px dashed var(--jampa-blue);
    text-align: center;
}

.price-call {
    font-size: 1.1em;
    margin-bottom: 5px;
    text-decoration: line-through;
    color: var(--light-text);
}

.price-value {
    display: block;
    font-size: 3em;
    font-weight: 700;
    color: var(--price-highlight);
    margin-bottom: 20px;
    line-height: 1;
}

.lp-disclaimer {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: var(--light-text);
    margin-top: 15px;
}

/* Placeholder da Capa do Ebook (Mantido) */
.hero-image-area {
    flex: 0 0 400px; 
    display: flex;
    justify-content: center;
}
.ebook-cover-placeholder {
    width: 100%;
    max-width: 300px;
    height: 400px;
    background-color: var(--jampa-blue); 
    border-radius: 8px;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.2);
    transform: rotate(3deg); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 20px;
    font-size: 1.2em;
    font-weight: 700;
}
.ebook-cover-placeholder span {
    font-size: 1.5em;
}
.ebook-cover-placeholder p {
    font-size: 0.9em;
    font-weight: 400;
    margin-top: 10px;
}

/* --- BARRA DE URGÊNCIA --- */
.lp-urgency-bar {
    text-align: center;
    background-color: var(--accent-color); /* Laranja forte */
    color: white;
    padding: 15px 5%;
    font-size: 1.1em;
}

/* --- BENEFITS SECTION (Foco na Dor) --- */
.lp-benefits {
    padding: 60px 5%;
    background-color: var(--sand-white);
    text-align: center;
}

.lp-benefits h2 {
    font-size: 2em;
    margin-bottom: 40px;
    color: var(--dark-text);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.benefit-card {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
    text-align: left;
    border-top: 5px solid var(--price-highlight); /* Linha de destaque */
}

.benefit-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.benefit-card h3 {
    color: var(--price-highlight);
    font-size: 1.3em;
    margin-bottom: 10px;
}

/* --- GARANTIA --- */
.lp-guarantee {
    padding: 80px 5%;
    text-align: center;
    background-color: #e6f7ff; /* Azul muito claro */
}

.guarantee-box {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.guarantee-icon {
    font-size: 4em;
    margin-bottom: 15px;
}

.guarantee-box h3 {
    font-size: 1.8em;
    color: var(--jampa-blue);
    margin-bottom: 10px;
}

.guarantee-box p {
    font-size: 1em;
    margin-bottom: 30px;
    color: var(--dark-text);
}

/* --- FINAL CTA --- */
.lp-final-cta {
    text-align: center;
    padding: 80px 5%;
    background: var(--dark-text); 
    color: white;
}

.lp-final-cta h2 {
    font-size: 2.5em;
    margin-bottom: 15px;
    font-weight: 700;
    color: white;
}

.lp-final-cta p {
    font-size: 1.1em;
    max-width: 700px;
    margin: 0 auto 30px auto;
}

.small-info {
    margin-top: 15px;
    display: block;
    color: #ccc;
    font-size: 0.9em;
}


/* --- FOOTER --- */
.lp-footer {
    text-align: center;
    padding: 20px;
    background-color: #222;
    color: var(--sand-white);
    font-size: 0.85em;
}

.footer-link {
    color: var(--sand-white);
    text-decoration: none;
    margin: 0 5px;
}

/* --- Responsividade --- */
@media (max-width: 900px) {
    .lp-hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-content-text h1 {
        font-size: 2.5em;
    }
    
    .hero-image-area {
        order: -1; 
        margin-bottom: 30px;
    }

    .lp-btn-cta.large {
        font-size: 1.3em;
    }
}

/*Seção imagem da Landing Page*/
.ebook-cover {
    max-width: 100%; /* Garante que a imagem não ultrapasse a largura da div */
    height: auto;    /* Mantém a proporção da imagem */
    display: block;  /* Remove espaços indesejados abaixo da imagem */
    margin: 0 auto;  /* Centraliza a imagem */
    border-radius: 8px; /* Opcional: deixa as bordas arredondadas */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Opcional: dá profundidade (sombra) */
}