/* style.css */

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

html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    color: #5C4033;
    background: #fff;
    width: 100%;
}

/* Container principal para centralizar o conteúdo e aplicar max-width */
.container {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container */
    padding: 0 20px; /* Adiciona padding lateral para telas menores */
    width: 100%;
    box-sizing: border-box;
}

/* Estilos para o vídeo de fundo no hero */
.hero {
    background: linear-gradient(to right, #FEF3C7, #FFF1DE);
    width: 100%;
    padding: 100px 0 40px; /* topo, lados, baixo */
    min-height: 700px; /* Definido um min-height para os slides */
    display: flex; /* Garante que o flexbox para alinhamento funcione */
    align-items: center; /* Centraliza verticalmente o conteúdo dentro do hero */
    position: relative; /* Necessário para posicionar o vídeo e o conteúdo */
    overflow: hidden; /* Garante que o vídeo não vaze */
}

/* Estilos para o vídeo de fundo no mobile */
    .hero-video-background {
        object-fit: cover; /* Garante que o vídeo cubra toda a área */
        width: 100%; /* Ocupa a largura total */
        height: 100%; /* Ocupa a altura total do container pai */
        min-width: 100%; /* Garante que o vídeo seja no mínimo 100% da largura */
        min-height: 100%; /* Garante que o vídeo seja no mínimo 100% da altura */
        position: absolute; /* Mantém o posicionamento absoluto para cobrir o hero */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centraliza */
        filter: brightness(0.7); /* Mantém o escurecimento */
        display: block; /* Garante que o display block funcione */
    }


@media (max-width: 768px) {
    .hero {
        height: 100vh; /* Tenta ocupar 100% da altura da viewport */
        min-height: 500px; /* Define uma altura mínima razoável para o vídeo no mobile, caso 100vh seja muito pequeno */
        padding: 0; /* Removido todo o padding para que o vídeo ocupe o máximo de espaço */
        display: flex; /* Mantido flexbox */
        align-items: center; /* Mantido centralização vertical */
        justify-content: center; /* Centraliza horizontalmente o conteúdo (se houver) */
    }
    .hero-flex { /* Se este div estiver no slide do vídeo, ele pode estar limitando. Vamos garantir que ele se estique. */
        height: 100%;
        width: 100%;
    }
    .hero-video-background {
        object-fit: cover; /* Garante que o vídeo cubra toda a área */
        width: 100%; /* Ocupa a largura total */
        height: 100%; /* Ocupa a altura total do container pai */
        min-width: 100%; /* Garante que o vídeo seja no mínimo 100% da largura */
        min-height: 100%; /* Garante que o vídeo seja no mínimo 100% da altura */
        position: absolute; /* Mantém o posicionamento absoluto para cobrir o hero */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Centraliza */
        filter: brightness(0.7); /* Mantém o escurecimento */
        display: block; /* Garante que o display block funcione */
    }
    /* ... (restante dos estilos responsivos) ... */
}

/* Garante que o conteúdo do hero fique acima do vídeo */
.hero .container {
    position: relative;
    z-index: 1;
}

/* Estilos para telas maiores (desktop) */
.hero h1 {
    font-size: 36px;
    color: #7A4E2C;
    margin-bottom: 10px;
}
.subtitle {
    font-size: 20px;
    margin-bottom: 30px;
}
.highlights span {
    background: #EEE4DA;
    margin: 5px;
    padding: 8px 16px;
    display: inline-block;
    border-radius: 20px;
    font-size: 14px;
}
.button {
    display: inline-block;
    background-color: #7A4E2C;
    color: #fff;
    padding: 12px 24px;
    margin-top: 20px;
    border-radius: 25px;
    text-decoration: none;
}
.small {
    font-size: 12px;
    margin-top: 10px;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.card {
    background: #FEF3C7;
    padding: 20px;
    border-radius: 10px;
    width: 260px;
    font-size: 14px;
}
.beneficios .card h3 {
    margin-top: 0;
    color: #7A4E2C;
}
.oferta .valor {
    font-size: 20px;
    margin: 10px 0;
}
.oferta ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.oferta li {
    margin-bottom: 8px;
}
.oferta .garantia {
    font-size: 12px;
    color: #333;
    margin-top: 10px;
}
footer {
    background-color: #EEE4DA;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #7A4E2C;
}

.hero-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.hero-texto {
    flex: 1 1 50%;
    max-width: 500px;
    text-align: left;
    position: relative;
    /* Ajustes para o texto e botão do slide 2 ficarem visíveis sobre o vídeo */
    color: #fff; /* Cor do texto para contraste com o vídeo */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra no texto para melhor legibilidade */
}

.hero-texto h1 {
    font-size: 72px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
    text-align: left;
}

.titulo-parte1 {
    color: #111827;
    display: block;
}

.titulo-parte2 {
    display: inline-block;
    background: linear-gradient(to right, #D97706, #EA580C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.hero-texto .destaque {
    color: #D97706;
}

.subtitulo {
    font-size: 20px;
    color: #374151;
    margin-top: 20px;
    margin-bottom: 24px;
    text-align: left;
    line-height: 1.5;
}

.tag-lancamento {
    background: linear-gradient(#F9E8A4, #F9E8A4) padding-box,
                conic-gradient(from 180deg, #FDE68A, #FBBF24, #D97706, #FDE68A) border-box;
    color: #92400E;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    border: 2px solid transparent;
}
.tag-lancamento img {
    width: 16px;
    height: 16px;
}

.destaques {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tag {
    background-color: #FFFFFF;
    color: #111827;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    width: fit-content;
    min-width: 100px;
}

.tag img {
    width: 20px;
    height: 20px;
}

.tag-texto {
    line-height: 1.2;
}

.btn-principal {
    background: linear-gradient(to right, #FBBF24, #FB923C);
    color: #FFFFFF;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    box-shadow: 0 8px 20px rgba(251, 146, 60, 0.35);
    font-family: 'Segoe UI', sans-serif;
}

.btn-principal i {
    color: white;
    font-size: 16px;
}

.btn-principal:hover {
    transform: scale(1.03);
}

.btn-principal img {
    width: 18px;
    height: 18px;
}

.feedback {
    margin-top: 20px;
    text-align: left;
}
.bolinhas {
    display: flex;
    margin-bottom: 6px;
    margin-left: -2px;
}

.bolinha {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #FDE68A, #FED7AA);
    margin-left: -3px; /* sobreposição */
    border: 1px solid #ffffff; /* bordinha branca fina */
}

.credibilidade {
    font-size: 14px;
    color: #374151;
}

.hero-imagem {
    flex: 1 1 40%;
    text-align: center;
    position: relative;
}

.hero-imagem img {
    max-width: 450px;
    transform: none;
    box-shadow: none;
}

.etiqueta-preco {
    background-color: #F59E0B;
    color: #FFFFFF;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    position: absolute;
    left: 400px; /* ou -20px, -50px, etc., conforme o efeito desejado */
    top: 100px; /* sobe mais */
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.hero-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Remove a imagem do hero-imagem3, já que será um vídeo */
.hero-imagem3 {
    display: none;
}

.hero-imagem3 img {
    max-width: 377px; /* ajuste conforme necessário */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); /* Sombra à direita e abaixo */
    border-radius: 30px; /* Borda arredondada */
}

.etiqueta-preco del {
    opacity: 0.8;
    margin-right: 4px;
}
.menu {
    background-color: #FEF9EB; /* cor que combina com o site */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 20px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.menu.transparente {
    background-color: rgba(255, 255, 255, 0.6); /* transparente */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* leve sombra para contraste */
    backdrop-filter: blur(8px); /* vidro fosco */
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}

.menu a {
    text-decoration: none;
    font-weight: 500;
    color: #6D603F;
    font-family: 'Segoe UI', sans-serif;
    transition: color 0.3s;
}

.menu a:hover {
    color: #D97706;
}
.menu a.ativo {
    color: #D97706;
    font-weight: bold;
    border-bottom: 2px solid #D97706;
    padding-bottom: 2px;
}
.beneficios-bloco {
    padding: 60px 0; /* Ajustado padding top/bottom */
    background-color: #FEF9EB;
}

.beneficios-titulo {
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

.sub-beneficio {
    font-size: 16px;
    color: #374151;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}
.container-beneficios {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: nowrap; /* impede quebra */
    padding: 0; /* Removido padding, o .container pai já tem */
}

.beneficio-card {
    background-color: #fff;
    border: 2px solid #FDE68A;
    border-radius: 16px;
    padding: 16px;
    width: 230px; /* diminuído de 300 */
    height: 180px; /* menor altura */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.beneficio-card img {
    width: 80px; /* diminuído de 48 */
    height: 80px;
    margin-bottom: 10px;
}

.beneficio-card h3 {
    font-size: 16px;
    font-weight: bold;
    color: #111827; /* nova cor */
    margin-bottom: 8px;
    font-family: 'Segoe UI', sans-serif;
}

.beneficio-card p {
    font-size: 13px;
    color: #4B5563; /* nova cor */
    line-height: 1.4;
    margin: 0;
}

.titulo-beneficio {
    font-family: 'Segoe UI', sans-serif;
    font-size: 28px;
    text-align: center;
    margin-bottom: 12px;
}

.titulo-beneficio-parte1 {
    color: #111827;
}

.titulo-beneficio-parte2 {
    background: linear-gradient(to right, #D97706, #EA580C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}
@media (max-width: 768px) {
    .container-beneficios {
        flex-direction: column;
        align-items: center;
    }

    .beneficio-card {
        width: 100%;
        max-width: 320px;
    }
}
.resumo-bloco {
    background-color: #FEF9EB;
    padding: 60px 0; /* Ajustado para 0 nas laterais */
    position: relative;
    overflow: hidden;
}

.resumo-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    padding: 0; /* Removido padding, o .container pai já tem */
}

.resumo-imagem {
    position: relative;
    width: 320px;      /* aumentei de 280px */
    min-width: 300px;
    margin-top: -30px; /* melhor alinhamento vertical */
    z-index: 2;
    
}

.resumo-imagem .livros-unica {
    width: 480px;
    height: auto;
    display: block;
    margin: 0;
    margin-left: -80px; /* Ajustado para um valor menor, ou considere remover */
    box-shadow: none;
    border-radius: 0;
}

.autora-foto {
    width: 180px;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    margin-left: 0; /* Removido margem fixa, será centralizado no mobile */
}

.resumo-texto {
    flex: 1;
    min-width: 300px;
    margin-left: 0; /* Removido margem fixa */
    text-align: justify;
}

.resumo-texto h2 {
    font-size: 26px;
    color: #111827;
    font-family: 'Segoe UI', sans-serif;
    margin-top: 50px;   /* <<< Aumenta o espaço acima */
    margin-bottom: 16px;
}

.resumo-texto p {
    color: #374151;
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Segoe UI', sans-serif;
}

.vaso-esquerdo, .vaso-direito {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: auto;
    opacity: 0.30;
    z-index: 1; /* atrás do conteúdo */
    pointer-events: none;
}

.vaso-esquerdo {
    left: 0; /* Posição ajustada */
    z-index: 0; /* atrás da imagem */
    transform: translateY(-50%) translateX(-50%); /* Ajuste para centralizar melhor */
}

.vaso-direito {
    right: 0; /* Posição ajustada */
    transform: translateY(-50%) translateX(50%); /* Ajuste para centralizar melhor */
}
@media (max-width: 768px) {
    .resumo-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
        padding: 0; /* Removido padding, o .container pai já tem */
    }
    .vaso-esquerdo {
        display: block;
        position: absolute;
        top: 10%;
        left: 50%; /* Centraliza no mobile */
        transform: translateX(-50%);
        width: 550px;
        z-index: 0;
    }

    .vaso-direito {
        display: none;
    }

    .autora-bloco .resumo-container {
        position: relative;
        z-index: 1;
    }

    .resumo-imagem {
        margin: 0 auto;
    }

    .resumo-imagem .livros-unica {
        width: 100%;         /* ou algo como 90%, depende do efeito desejado */
        max-width: 400px;    /* limite máximo para ela não ficar muito grande */
        margin-left: 0;      /* zera o deslocamento para a esquerda no mobile */
    }

    .resumo-texto {
        margin-left: 0;
        text-align: justify;
        padding: 0; /* O padding virá do .container */
    }

}
/* ==================== DEPOIMENTOS ==================== */
.depoimentos {
    background-color: #FEFFFF;
    padding: 60px 0; /* Ajustado padding top/bottom */
    position: relative;
    text-align: center;
    margin-bottom: 0; /* Removido margem inferior, o padding da seção já cria espaço */

}

.depoimentos .icone-feedback {
    width: 36px;
    margin: 0 auto 10px;
    display: block;
}

.depoimentos .titulo-depoimentos {
    font-family: 'Segoe UI', sans-serif;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

.depoimentos .titulo-depoimentos .parte1 {
    color: #111827;
}

.depoimentos .titulo-depoimentos .parte2 {
    background: linear-gradient(to right, #D97706, #F59E0B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container-depoimentos-interno { /* Novo container para os cards, com padding e max-width */
    max-width: 1100px; /* Ajuste conforme a sua necessidade */
    margin: 0 auto;
    padding: 0; /* Removido padding, o .container pai já tem */
}

.depoimentos .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.depoimentos .card-depoimento {
    background-color: #ffffff;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    flex: 1 1 300px;
}

.depoimentos .card-depoimento p {
    font-size: 15px;
    color: #4B5563;
    margin: 10px 0;
    font-style: italic;

}

.depoimentos .estrelas {
    color: #F59E0B;
    font-size: 16px;
}

.depoimentos .depoimento-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.depoimentos .depoimento-info strong {
    color: #111827;
    font-weight: bold;
    font-size: 15px;
}

.depoimentos .depoimento-info small {
    color: #4B5563;
    font-size: 13px;
}

.depoimentos .foto-leitor {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px #fff;
}

.depoimentos .vaso-depoimento {
    position: absolute;
    right: 0; /* Ajustado para a direita do container */
    top: 50%; /* Centraliza verticalmente */
    transform: translateY(-50%) translateX(50%); /* Ajuste para posicionar fora e centralizado */
    width: 130px;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    .depoimentos .vaso-depoimento {
        display: none;
    }
}

/* ==================== AUTORA ==================== */
.autora-bloco {
    background-color: #FEF9EB;
    padding: 60px 0; /* Ajustado padding top/bottom */
    position: relative;
    overflow: hidden;
    margin-top: 0; /* Removido margem superior, o padding da seção já cria espaço */
}

.autora-bloco .resumo-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    padding: 0; /* Removido padding, o .container pai já tem */
}

.autora-bloco .autora-foto {
    width: 150px;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    margin: 0 auto 20px; /* Centraliza a imagem no mobile */
    box-shadow: 0 20px 24px rgba(0, 0, 0, 0.4); /* sombra suave */
}

@media (max-width: 768px) {
    .autora-bloco .autora-foto {
        margin: 0 auto 20px;
        display: block;
    }
    .autora-bloco .resumo-texto {
        text-align: center; /* Centraliza o texto no mobile */
    }
}


.autora-bloco .resumo-texto h2 {
    margin-top: -40px; /* novo: sobe o título */
}

/* ==================== FOOTER ==================== */
footer {
    background-color: #EEE4DA;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #7A4E2C;
}
.estrelas-fa i {
    color: #F59E0B; /* ou qualquer cor */
    font-size: 14px; /* opcional, para ajustar o tamanho */
    margin-right: -1px; /* espaçamento entre estrelas */
}
.bloco-oferta {
    background: #fff;
    padding: 60px 0; /* Ajustado padding top/bottom */
    text-align: center;
}

.oferta-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0; /* Removido padding, o .container pai já tem */
}

.titulo-oferta {
    font-size: 28px;
    color: #111827;
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
    margin-bottom: 10px;
}

.titulo-oferta .destaque-laranja {
    background: linear-gradient(to right, #FBBF24, #FB923C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.subtitulo-oferta {
    font-size: 16px;
    color: #374151;
    margin-bottom: 30px;
}

.box-oferta {
    background-color: #111827;
    color: #fff;
    padding: 20px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.box-esquerda {
    flex: 1 1 45%;
    text-align: left;
}

.selo-oferta {
    color: #FBBF24;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px; /* espaço entre ícone e texto */
    font-family: 'Segoe UI', sans-serif;
    margin-right: 10px;
}

.preco {
    font-size: 20px;
    font-weight: bold;
}

.preco del {
    color: #6B7280;
    margin-right: 10px;
}

.preco-atual {
    color: #FFFFFF;
}

.pagamento-info {
    font-size: 14px;
    color: #cbd5e1;
    margin-top: 5px;
}

.box-direita {
    flex: 1 1 45%;
    text-align: left;
}

.box-direita p {
    margin-bottom: 10px;
    font-size: 15px;
}

p i.fa-circle-check {
    color: #22C55E; /* verde suave */
    margin-right: 8px;
    font-size: 16px;
}


.btn-comprar {
    background: linear-gradient(to right, #FBBF24, #FB923C);
    color: #FFFFFF;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px auto 10px;
    font-size: 14px;
    box-shadow: 0 10px 18px rgba(251, 146, 60, 0.3);
    transition: transform 0.2s ease;
}

.btn-comprar:hover {
    transform: scale(1.03);
}

.texto-garantia {
    font-size: 13px;
    color: #4B5563;
    margin-top: 10px;
}

/* Responsivo */
@media (max-width: 768px) {
    .box-oferta {
        flex-direction: column;
        text-align: center;
    }

    .box-esquerda,
    .box-direita {
        text-align: center;
    }
}
.contato-bloco {
    background-color: #FEF9EB;
    padding: 60px 0; /* Ajustado padding top/bottom */
}

.container-contato {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 0; /* Removido padding, o .container pai já tem */
}

.contato-info {
    flex: 1 1 300px;
}

.contato-info h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #111827;
    font-family: 'Segoe UI', sans-serif;
}

.contato-info p {
    color: #4B5563;
    font-size: 15px;
    margin-bottom: 30px;
}

.item-contato {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.04);
    padding: 15px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.item-contato .icone {
    background-color: #FEF3C7;
    padding: 12px;
    border-radius: 50%;
    color: #F59E0B;
    font-size: 18px;
}

.item-contato strong {
    font-weight: bold;
    color: #111827;
}

.item-contato p {
    margin: 0;
    font-size: 14px;
    color: #4B5563;
}

/* Formulário */
.contato-form {
    flex: 1 1 600px;
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.contato-form h3 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: bold;
    font-family: 'Segoe UI', sans-serif;
}

.form-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.form-grupo {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-grupo.full {
    width: 100%;
    margin-top: 20px;
}

label {
    font-size: 13px;
    margin-bottom: 4px;
    color: #374151;
}

input, textarea {
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    outline: none;
    transition: border 0.3s;
}

input:focus, textarea:focus {
    border-color: #F59E0B;
}

.btn-enviar {
    margin-top: 20px;
    background: linear-gradient(to right, #FBBF24, #FB923C);
    color: white;
    font-weight: bold;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    width: 100%;
}

.aviso {
    font-size: 12px;
    margin-top: 10px;
    color: #6B7280;
}

.aviso span {
    color: red;
}

@media (max-width: 768px) {
    .container-contato {
        flex-direction: column;
    }

    .contato-form {
        padding: 20px;
    }

    .form-linha {
        flex-direction: column;
    }
}

.hero-carousel {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hero-carousel .swiper-slide {
    width: 100%;
}

.hero-carousel .slide-banner {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.carrossel-lancamento img {
    max-height: 150vh;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .carrossel-lancamento img {
        max-height: 250px;
        height: auto;
        width: 100%;
        object-fit: contain;
    }
}
.btn-data {
    background: linear-gradient(to right, #FBBF24, #FB923C);
    color: #FFFFFF;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    box-shadow: 0 8px 20px rgba(251, 146, 60, 0.35);
    font-family: 'Segoe UI', sans-serif;
}

.btn-data {
    color: white;
    font-size: 30px;
}

.btn-data:hover {
    transform: scale(1.03);
}

/* Estilos para as bolinhas de paginação do Swiper */
.swiper-pagination {
    position: absolute;
    bottom: 20px !important; /* Posição das bolinhas */
    width: 100% !important; /* Faz com que o elemento da paginação ocupe 100% da largura */
    text-align: center; /* Centraliza as bolinhas dentro do seu container */
    z-index: 10;
}

.swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.4) !important; /* Cor das bolinhas inativas */
    opacity: 1 !important;
    width: 10px !important; /* Tamanho das bolinhas */
    height: 10px !important;
    margin: 0 5px !important; /* Espaçamento entre as bolinhas */
    transition: background-color 0.3s, width 0.3s;
}

.swiper-pagination-bullet-active {
    background: #D97706 !important; /* Cor da bolinha ativa */
    width: 25px !important; /* Alargamento da bolinha ativa */
    border-radius: 5px !important; /* Formato de pílula para a bolinha ativa */
}
/* Estilos para o novo título "Fale Conosco" */
.titulo-fale-conosco {
    text-align: center;
    margin-bottom: 20px; /* Espaço abaixo do título principal */
}

.titulo-fale-conosco-parte1 {
    font-family: 'Segoe UI', sans-serif; /* Ou sua fonte principal */
    font-size: 48px; /* Tamanho da fonte para "Fale" */
    color: #111827; /* Cor da primeira parte */
    display: inline-block; /* Para que as partes fiquem lado a lado */
    margin-right: 10px; /* Espaço entre "Fale" e "conosco" */
    font-weight: bold; /* Deixa em negrito */
}

.titulo-fale-conosco-parte2 {
    font-family: 'Segoe UI', sans-serif; /* Ou sua fonte principal */
    font-size: 48px; /* Mesmo tamanho da fonte para consistência */
    background: linear-gradient(to right, #FBBF24, #FB923C); /* Gradiente laranja */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Para que as partes fiquem lado a lado */
    font-weight: bold; /* Deixa em negrito */
}

.subtitulo-fale-conosco {
    text-align: center;
    font-size: 18px;
    color: #374151;
    margin-bottom: 40px; /* Espaço entre o subtítulo e o conteúdo do bloco */
    max-width: 700px; /* Limita a largura do subtítulo */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Ajustes para responsividade do título */
@media (max-width: 768px) {
    .titulo-fale-conosco-parte1,
    .titulo-fale-conosco-parte2 {
        font-size: 36px; /* Reduz o tamanho da fonte no mobile */
        display: block; /* Quebra a linha entre "Fale" e "conosco" no mobile */
        margin-right: 0; /* Remove a margem lateral */
    }
    .titulo-fale-conosco-parte2 {
        margin-top: 5px; /* Adiciona um pequeno espaço se quebrar a linha */
    }
    .subtitulo-fale-conosco {
        font-size: 16px;
        padding: 0 15px; /* Adiciona padding lateral no mobile para o subtítulo */
    }
}

/* Estilos para mensagens de status do formulário */
.form-status-message {
    margin-top: 15px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    display: none; /* Escondido por padrão */
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
}

.form-status-message.loading {
    background-color: #FFFBEB;
    color: #D97706;
    border: 1px solid #FBBF24;
    display: flex;
}

.form-status-message.success {
    background-color: #ECFDF5;
    color: #059669;
    border: 1px solid #34D399;
    display: flex;
}

.form-status-message.error {
    background-color: #FEF2F2;
    color: #EF4444;
    border: 1px solid #F87171;
    display: flex;
}

.form-status-message i {
    font-size: 16px;
}

/* Animação de rotação para o ícone de loading */
.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* NOVO: Estilos para o Bloco de Logos */
.logos-bloco {
    background-color: #FEFFFF; /* Fundo claro para o bloco */
    padding: 20px 0; /* Espaçamento vertical */
    text-align: center;
}

.logos-bloco .titulo-logos {
    font-family: 'Segoe UI', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #111827;
    margin-bottom: 30px; /* Espaço abaixo do título */
}

.logos-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0; /* AJUSTADO: Removido o espaçamento entre os logos */
    max-width: 900px; /* Limita a largura do container de logos */
    margin: 0 auto; /* Centraliza o container de logos */
    padding: 0 20px; /* Padding lateral para responsividade */
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* REMOVIDO: flex: 1 1 200px; e max-width: 250px; para um tamanho mais compacto */
    margin: 0 15px; /* ADICIONADO: Pequena margem horizontal para separar os logos */
}

.logo-item img {
    max-width: 80px; /* Tamanho máximo das imagens dos logos */
    height: auto;
    margin-bottom: 0;
    transition: transform 0.3s ease; /* Efeito de hover */
}

.logo-item img:hover {
    transform: scale(1.05); /* Pequeno zoom ao passar o mouse */
}

/* Responsividade para o bloco de logos */
@media (max-width: 768px) {
    .logos-bloco {
        padding: 20px 0; /* AJUSTADO: Diminuído o padding no mobile também */
    }
    .logos-bloco .titulo-logos {
        font-size: 24px;
        margin-bottom: 20px; /* AJUSTADO: Diminuído o margin-bottom no mobile */
    }

    .logos-container {
        flex-direction: column; /* Logos em coluna no mobile */
        align-items: center;
        gap: 20px; /* AJUSTADO: Diminuído o espaçamento vertical no mobile */
    }

    .logo-item {
        max-width: 100%; /* Permite que o item ocupe a largura total no mobile */
        margin: 0; /* REMOVIDO: Margem horizontal no mobile */
    }

    .logo-item img {
        max-width: 80px; /* Reduz o tamanho das imagens no mobile */
    }
}

/* Estilos para o rodapé (mantidos da última versão) */
footer {
    background-color: #EEE4DA;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: #7A4E2C;
}

.footer-subtext {
    font-size: 12px;
    color: #6D603F;
    margin-top: 5px;
    opacity: 0.8;
}

/* ==================== PÁGINA SAIBA MAIS ==================== */

.saiba-mais-hero {
    background: linear-gradient(to right, #FEF3C7, #FFF1DE);
    padding: 120px 0 60px; /* Espaçamento superior para o menu fixo */
    text-align: center;
}

/* Estilos para o título "A História por Trás do Livro" com gradiente */
.saiba-mais-titulo {
    font-family: 'Segoe UI', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #111827; /* Cor padrão para a primeira parte */
    margin-bottom: 15px;
    text-align: center; /* Garante que o título esteja centralizado */
}

.saiba-mais-titulo-parte1 {
    color: #111827; /* Cor da primeira parte */
    display: inline; /* Garante que fique na mesma linha */
}

.saiba-mais-titulo-parte2 {
    background: linear-gradient(to right, #D97706, #EA580C); /* Gradiente laranja, igual ao "Vaso de Barro" */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline; /* Garante que fique na mesma linha */
    font-weight: 700; /* Mantém o negrito */
}

/* Ajustes responsivos para o título "Saiba Mais" */
@media (max-width: 768px) {
    .saiba-mais-titulo {
        font-size: 36px;
    }
    .saiba-mais-titulo-parte1,
    .saiba-mais-titulo-parte2 {
        display: block; /* Quebra a linha entre as partes no mobile para melhor leitura */
        text-align: center;
    }
    .saiba-mais-titulo-parte1 {
        margin-right: 0; /* Remove a margem se quebrar a linha */
    }
    .saiba-mais-titulo-parte2 {
        margin-top: 5px; /* Pequeno espaço entre as linhas no mobile */
    }
}

.saiba-mais-subtitulo {
    font-size: 20px;
    color: #374151;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
}

.galeria-fotos,
.documentos-relevantes {
    background-color: #FEFFFF;
    padding: 60px 0;
    text-align: center;
}

.galeria-titulo,
.documentos-titulo {
    font-family: 'Segoe UI', sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: #111827;
    margin-bottom: 20px;
}

.galeria-descricao,
.documentos-descricao {
    font-size: 18px;
    color: #4B5563;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.5;
}

.fotos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Layout responsivo de grid */
    gap: 30px; /* Espaçamento entre as fotos */
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Padding lateral para o grid */
}

.foto-item {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Garante que a imagem arredondada não vaze */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.foto-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.foto-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;

    /* NOVO: Efeitos de filtro e transição */
    filter: grayscale(50%) sepia(20%) brightness(1.05); /* Exemplo: 50% cinza, 20% sépia, 5% mais brilho */
    transition: filter 0.5s ease-in-out; /* Transição suave para o efeito */
}

.foto-item img:hover {
    /* Opcional: Remover ou suavizar o filtro ao passar o mouse */
    filter: grayscale(0%) sepia(0%) brightness(1); /* Remove o filtro no hover, mostrando a cor original */
}

.foto-legenda {
    padding: 15px;
    font-size: 15px;
    color: #374151;
    line-height: 1.4;
    flex-grow: 1; /* Permite que a legenda ocupe o espaço restante */
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Estilos para a seção de Documentos */
.documentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.documento-item {
    background-color: #fff;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 10px; /* Reduzido o padding interno para dar mais espaço à imagem */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.document-lightbox-trigger {
    text-decoration: none; /* REMOVIDO: Sublinhado do link */
    color: inherit; /* Garante que a cor do texto seja herdada do pai */
}

.documento-item img {
    width: 100%;
    height: auto; /* Altura automática para evitar cortes */
    max-height: 200px; /* Define uma altura máxima para as miniaturas dos documentos */
    object-fit: contain; /* Garante que a imagem inteira seja visível */
    margin-bottom: 10px; /* Reduzido o espaçamento abaixo da imagem */
    border-radius: 8px; /* Pequeno arredondamento nas bordas da imagem */
    border: 1px solid #eee; /* Borda sutil para destacar */
}

.documento-icone {
    font-size: 48px;
    color: #D97706;
    margin-bottom: 15px;
}

.documento-item h3 {
    font-size: 20px;
    color: #111827;
    margin-bottom: 10px;
}

.documento-item p {
    font-size: 15px;
    color: #4B5563;
    line-height: 1.5;
}

/* Responsividade para a página Saiba Mais */
@media (max-width: 768px) {
    .hero {
        min-height: 400px; /* AJUSTADO: Altura mínima para o hero no mobile, dando mais espaço ao vídeo */
        padding: 40px 0 20px; /* Reduzido padding superior e inferior do hero para compactar mais */
    }
    .saiba-mais-hero {
        padding: 100px 20px 40px;
    }
    .saiba-mais-titulo {
        font-size: 36px;
    }
    .saiba-mais-subtitulo {
        font-size: 16px;
    }
    .galeria-titulo,
    .documentos-titulo {
        font-size: 28px;
    }
    .galeria-descricao,
    .documentos-descricao {
        font-size: 16px;
        margin-bottom: 30px;
    }
    .fotos-grid,
    .documentos-grid {
        grid-template-columns: 1fr; /* Uma coluna no mobile */
        padding: 0 15px;
    }
    .foto-item img {
        height: auto; /* Altura automática também no mobile */
    }
    /* Estilo para a referência de capítulo nas legendas das fotos */
    .foto-legenda .chapter-ref {
        display: block; /* Quebra a linha para a referência */
        font-size: 0.8em; /* Tamanho menor */
        color: #888; /* Cor mais suave */
        margin-top: 5px; /* Pequeno espaço acima */
    }

    .documento-item .chapter-ref {
        display: block; /* Quebra a linha para a referência */
        font-size: 0.8em; /* Tamanho menor */
        color: #888; /* Cor mais suave */
        margin-top: 5px; /* Pequeno espaço acima */
    }

    .documentos-descricao {
        padding: 0 15px; /* Ajuste de padding para mobile */
        font-size: 15px; /* Ajuste de fonte para mobile */
    }

    .documento-item img {
        height: auto; /* Altura automática no mobile para não cortar em telas pequenas */
        max-width: 100%; /* Garante que não exceda a largura do container */
        max-height: 180px; /* Altura máxima para documentos no mobile */

         /* NOVO: Efeitos de filtro e transição aplicados aos documentos */
        filter: grayscale(50%) sepia(20%) brightness(1.05); /* Mesmo filtro das fotos */
        transition: filter 0.5s ease-in-out; /* Transição suave para o efeito */
    }
}

/* Estilos para a Modal/Lightbox */
.lightbox-modal {
    display: none; /* Escondida por padrão */
    position: fixed; /* Fixa na tela */
    z-index: 2000; /* Acima de todo o conteúdo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita rolagem se a imagem for muito grande */
    background-color: rgba(0,0,0,0.9); /* Fundo preto semi-transparente */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%; /* Largura máxima da imagem na modal */
    max-height: 90vh; /* Altura máxima da imagem na modal (90% da altura da viewport) */
    object-fit: contain; /* Garante que a imagem inteira seja visível */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.lightbox-caption {
    margin-top: 15px;
    color: #f1f1f1;
    font-size: 18px;
    padding: 8px 20px;
    text-align: center; /* AJUSTADO: Garante que o texto esteja centralizado */
    max-width: 80%; /* Mantido para controlar a largura */
    background-color: rgba(0,0,0,0.6);
    border-radius: 8px;
    margin-left: auto; /* ADICIONADO: Centraliza o bloco da legenda */
    margin-right: auto; /* ADICIONADO: Centraliza o bloco da legenda */
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Animação da Modal */
.lightbox-content, .lightbox-caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* Responsividade da Modal */
@media only screen and (max-width: 768px) {
    .lightbox-content {
        max-width: 95%;
        max-height: 85vh;
    }
    .lightbox-caption {
        font-size: 16px;
        max-width: 90%;
        text-align: center; /* Garante centralização também no mobile */
        margin-left: auto; /* Garante centralização do bloco no mobile */
        margin-right: auto; /* Garante centralização do bloco no mobile */
    }
    .lightbox-close {
        top: 10px;
        right: 25px;
        font-size: 30px;
    }
}

/* Estilos para a nova seção de Nomeações Pastorais */
.nomeacoes-pastorais {
    background-color: #FEF9EB; /* Cor de fundo diferente para destacar a seção */
    padding: 60px 0;
    text-align: center;
}

/* Reutiliza os estilos de título e descrição da seção de documentos */
.nomeacoes-pastorais .documentos-titulo {
    /* Já estilizado por .documentos-titulo */
}

.nomeacoes-pastorais .documentos-descricao {
    /* Já estilizado por .documentos-descricao */
}

.nomeacoes-pastorais .documentos-grid {
    /* Reutiliza os estilos de grid de documentos */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ajustado para caber mais */
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nomeacoes-pastorais .documento-item {
    /* Reutiliza os estilos de item de documento */
    background-color: #fff;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.nomeacoes-pastorais .documento-item img {
    /* Reutiliza os estilos de imagem de documento */
    width: 100%;
    height: auto;
    max-height: 200px; /* Altura máxima para miniaturas */
    object-fit: contain;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #eee;

    /* Efeitos de filtro e transição */
    filter: grayscale(50%) sepia(20%) brightness(1.05);
    transition: filter 0.5s ease-in-out;
}

.nomeacoes-pastorais .documento-item img:hover {
    filter: grayscale(0%) sepia(0%) brightness(1);
}

.nomeacoes-pastorais .documento-item h3 {
    font-size: 18px; /* Ajustado para o título do item */
    color: #111827;
    margin-bottom: 5px; /* Menor margem para o período */
}

.nomeacoes-pastorais .documento-item p {
    font-size: 13px; /* Menor fonte para o período */
    color: #4B5563;
    line-height: 1.3;
}

/* Responsividade para a seção de Nomeações */
@media (max-width: 768px) {
    .nomeacoes-pastorais .documentos-grid {
        grid-template-columns: 1fr; /* Uma coluna no mobile */
        padding: 0 15px;
        gap: 20px;
    }

    .nomeacoes-pastorais .documento-item img {
        max-height: 150px; /* Altura máxima um pouco menor no mobile */
    }
}
/* Estilos para o Acordeão */
.accordion-header {
    cursor: pointer;
    padding: 20px;
    background-color: #f9f9f9; /* Fundo suave para o cabeçalho */
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 0; /* AJUSTADO: Removido margem inferior */
    margin-top: 5px; /* AJUSTADO: Pequena margem superior para separar do bloco anterior */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    color: #111827;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: #f0f0f0;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-icon.rotated {
    transform: rotate(180deg); /* Gira a seta quando expandido */
}

.accordion-content {
    background-color: #fff;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out; /* Transição suave */
    padding: 0 20px; /* Padding inicial zero para o colapso */
    max-height: 0; /* Inicia colapsado */
    border: 1px solid #eee; /* Borda sutil para o conteúdo */
    border-top: none; /* Remove a borda superior para conectar ao header */
    border-radius: 0 0 8px 8px; /* Arredonda apenas a parte inferior */
    margin-bottom: 0; /* AJUSTADO: Removido espaço após o conteúdo colapsado */
}

.accordion-content.expanded {
    max-height: 2000px; /* Um valor grande o suficiente para mostrar todo o conteúdo */
    padding: 20px; /* Padding quando expandido */
}

/* Ajustes para o título da seção quando é um cabeçalho de acordeão */
.galeria-titulo.accordion-header,
.documentos-titulo.accordion-header {
    margin-top: 20px; /* AJUSTADO: Margem superior maior para o primeiro cabeçalho de cada seção */
    margin-bottom: 0; /* Removido margem inferior */
    border-radius: 8px; /* Garante arredondamento completo */
    text-align: left; /* Alinha o texto do título à esquerda */
}

/* Ajuste para o padding da descrição dentro do acordeão */
.galeria-descricao,
.documentos-descricao {
    margin-bottom: 15px; /* Reduz a margem inferior para o contexto do acordeão */
}

/* Responsividade para o acordeão */
@media (max-width: 768px) {
    .accordion-header {
        font-size: 18px;
        padding: 15px;
        margin-bottom: 0; /* AJUSTADO: Removido margem inferior no mobile */
        margin-top: 3px; /* AJUSTADO: Pequena margem superior no mobile */
    }

    .accordion-content {
        margin-bottom: 0; /* AJUSTADO: Removido margem inferior no mobile */
    }

    .accordion-content.expanded {
        padding: 15px; /* Ajusta o padding no mobile */
    }

    .galeria-titulo.accordion-header,
    .documentos-titulo.accordion-header {
        margin-top: 15px; /* AJUSTADO: Margem superior para o primeiro cabeçalho no mobile */
        margin-bottom: 0; /* Removido margem inferior no mobile */
    }

    .galeria-descricao,
    .documentos-descricao {
        margin-bottom: 10px; /* Margem menor para a descrição no mobile */
    }
}

/* Estilos para a Modal de Pedido */
.order-modal {
    display: none; /* Escondida por padrão */
    position: fixed; /* Fixa na tela */
    z-index: 2000; /* Acima de todo o conteúdo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita rolagem se o conteúdo for muito grande */
    background-color: rgba(0,0,0,0.8); /* Fundo escuro semi-transparente */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
}

.order-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    max-width: 500px; /* Largura máxima da modal */
    width: 90%; /* Ocupa 90% da largura em telas menores */
    box-sizing: border-box;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Animação de entrada da modal */
@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.order-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.order-modal-close:hover,
.order-modal-close:focus {
    color: #333;
    text-decoration: none;
}

.order-modal-title {
    font-family: 'Segoe UI', sans-serif;
    font-size: 28px;
    color: #111827;
    margin-bottom: 10px;
    text-align: center;
}

.order-modal-subtitle {
    font-size: 16px;
    color: #4B5563;
    margin-bottom: 25px;
    text-align: center;
}

.order-modal-content .form-grupo {
    margin-bottom: 15px;
}

.order-modal-content label {
    font-size: 14px;
    color: #374151;
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
}

.order-modal-content input[type="text"],
.order-modal-content input[type="tel"],
.order-modal-content input[type="email"],
.order-modal-content textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box; /* Garante que padding não aumente a largura */
}

.order-modal-content textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}

.order-modal-content .btn-enviar {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    margin-top: 20px;
}

.order-info {
    font-size: 13px;
    color: #6B7280;
    margin-top: 15px;
    text-align: center;
    line-height: 1.4;
}

/* Responsividade da Modal de Pedido */
@media (max-width: 600px) {
    .order-modal-content {
        padding: 20px;
        width: 95%;
    }
    .order-modal-title {
        font-size: 24px;
    }
    .order-modal-subtitle {
        font-size: 14px;
    }
    .order-modal-content .btn-enviar {
        font-size: 16px;
        padding: 12px;
    }
}
/* Estilos para o Botão Flutuante "Saiba Mais" */
.floating-saiba-mais-btn {
    position: fixed; /* Fixa o botão na tela */
    bottom: 20px; /* Distância do fundo */
    right: 20px; /* Distância da direita */
    background: linear-gradient(to right, #D97706, #EA580C); /* Gradiente laranja */
    color: #FFFFFF;
    text-decoration: none;
    padding: 12px 20px; /* Padding interno */
    border-radius: 30px; /* Bordas arredondadas (formato de pílula) */
    font-weight: bold;
    font-size: 16px;
    display: flex; /* Para alinhar o ícone e o texto */
    align-items: center;
    gap: 8px; /* Espaçamento entre ícone e texto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Sombra para destaque */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
    z-index: 100; /* Garante que fique acima de outros elementos */
}

.floating-saiba-mais-btn:hover {
    transform: translateY(-3px); /* Pequeno efeito de "subir" ao passar o mouse */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35); /* Sombra mais intensa no hover */
}

.floating-saiba-mais-btn i {
    font-size: 18px; /* Tamanho do ícone */
}

/* Responsividade para o botão flutuante */
@media (max-width: 768px) {
    .floating-saiba-mais-btn {
        bottom: 15px; /* Ajusta a posição no mobile */
        right: 15px;
        padding: 10px 18px; /* Reduz o padding no mobile */
        font-size: 14px; /* Reduz o tamanho da fonte no mobile */
        gap: 6px;
    }
    .floating-saiba-mais-btn i {
        font-size: 16px; /* Ajusta o tamanho do ícone no mobile */
    }
}

/* Estilos para a Modal de Comentários (similar à modal de pedido) */
.comment-modal {
    display: none; /* Escondida por padrão */
    position: fixed; /* Fixa na tela */
    z-index: 2000; /* Acima de todo o conteúdo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita rolagem se o conteúdo for muito grande */
    background-color: rgba(0,0,0,0.8); /* Fundo escuro semi-transparente */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
}

.comment-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    max-width: 500px; /* Largura máxima da modal */
    width: 90%; /* Ocupa 90% da largura em telas menores */
    box-sizing: border-box;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.comment-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.comment-modal-close:hover,
.comment-modal-close:focus {
    color: #333;
    text-decoration: none;
}

.comment-modal-title {
    font-family: 'Segoe UI', sans-serif;
    font-size: 28px;
    color: #111827;
    margin-bottom: 10px;
    text-align: center;
}

.comment-modal-subtitle {
    font-size: 16px;
    color: #4B5563;
    margin-bottom: 25px;
    text-align: center;
}

.comment-modal-content .form-grupo {
    margin-bottom: 15px;
}

.comment-modal-content label {
    font-size: 14px;
    color: #374151;
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
}

.comment-modal-content input[type="text"],
.comment-modal-content input[type="email"],
.comment-modal-content textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box; /* Garante que padding não aumente a largura */
}

.comment-modal-content textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}

/* Reutiliza o estilo do botão de envio */
.comment-modal-content .btn-enviar {
    width: 100%;
    padding: 14px;
    font-size: 18px;
    margin-top: 20px;
}

/* Responsividade da Modal de Comentários */
@media (max-width: 600px) {
    .comment-modal-content {
        padding: 20px;
        width: 95%;
    }
    .comment-modal-title {
        font-size: 24px;
    }
    .comment-modal-subtitle {
        font-size: 14px;
    }
    .comment-modal-content .btn-enviar {
        font-size: 16px;
        padding: 12px;
    }
}

/* NOVO BOTÃO "DEIXE SEU COMENTÁRIO" */
/* Adicione ou ajuste esta regra no seu CSS */
.depoimentos .text-center { /* Seletor para o div que envolve o botão */
    margin-top: 40px; /* AJUSTADO: Aumentado para 40px para descer o botão. Ajuste este valor conforme necessário. */
}

/* ==================== PÁGINA ESBOÇOS ==================== */

.esbocos-hero {
    background: linear-gradient(to right, #FEF3C7, #FFF1DE);
    padding: 120px 0 60px; /* Espaçamento superior para o menu fixo */
    text-align: center;
}

.esbocos-titulo {
    font-family: 'Segoe UI', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
}

.esbocos-subtitulo {
    font-size: 20px;
    color: #374151;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
}

.pastas-bloco {
    background-color: #FEFFFF;
    padding: 60px 0;
    text-align: center;
}

.pastas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Layout de grid para as pastas */
    gap: 20px; /* Espaçamento entre as pastas */
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 40px; /* Espaço entre as pastas e os documentos */
}

.pasta-item {
    background-color: #fefefe;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #111827;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pasta-item:hover {
    background-color: #f0f0f0;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.pasta-icone {
    font-size: 48px;
    color: #F59E0B;
    margin-bottom: 10px;
}

.pasta-item p {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.documentos-soltos-bloco {
    text-align: center;
}

.documentos-soltos-titulo {
    font-family: 'Segoe UI', sans-serif;
    font-size: 28px;
    font-weight: bold;
    color: #111827;
    margin-bottom: 20px;
}

.documentos-grid-esbocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Layout de grid para os documentos */
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.documento-link {
    background-color: #fefefe;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #4B5563;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.documento-link:hover {
    background-color: #f0f0f0;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.documento-link .documento-icone {
    font-size: 24px;
    color: #6B7280;
    margin-bottom: 0;
    margin-right: 15px;
}

.documento-link p {
    font-size: 16px;
    margin: 0;
    text-align: left;
}


/* Responsividade para a página de Esboços */
@media (max-width: 768px) {
    .esbocos-titulo {
        font-size: 36px;
    }
    .esbocos-subtitulo {
        font-size: 16px;
    }
    .pastas-grid,
    .documentos-grid-esbocos {
        grid-template-columns: 1fr;
    }
}

/* Estilos para a Modal de Downloads */
.downloads-modal {
    display: none; /* AJUSTADO: Oculta por padrão em todos os tamanhos de ecrã */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

/* NOVO: Classe para exibir a modal, adicionada apenas pelo JavaScript */
.downloads-modal.show {
    display: flex; /* Exibe a modal apenas quando esta classe é adicionada */
}

.downloads-modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    max-width: 600px;
    width: 90%;
    box-sizing: border-box;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.downloads-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.downloads-modal-close:hover,
.downloads-modal-close:focus {
    color: #333;
    text-decoration: none;
}

.downloads-modal-title {
    font-family: 'Segoe UI', sans-serif;
    font-size: 24px;
    color: #111827;
    margin-bottom: 20px;
    text-align: center;
}

.downloads-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-item {
    background-color: #f0f0f0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #4B5563;
    transition: all 0.3s ease;
    text-align: left;
}

.download-item:hover {
    background-color: #e9e9e9;
    transform: translateX(5px);
}

.download-item .download-icone {
    font-size: 20px;
    color: #D97706;
    margin-right: 15px;
}

.download-item p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* Responsividade da Modal de Downloads */
@media (max-width: 600px) {
    .downloads-modal-content {
        padding: 20px;
    }
    .downloads-modal-title {
        font-size: 22px;
    }
    .downloads-modal-close {
        font-size: 24px;
    }
}