@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700;800;900&display=swap');

body,
html,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
div,
section,
article,
nav,
header,
footer,
main,
aside,
ul,
ol,
li,
table,
td,
tr,
th,
label,
input,
textarea,
button,
select,
option,
form,
fieldset,
legend,
blockquote,
code,
pre,
small,
strong,
em,
b,
i:not([class*="fa"]),
abbr,
cite,
del,
ins,
mark,
q,
s,
samp,
sub,
sup,
time,
u,
var {
    font-family: 'Kanit', sans-serif !important;
}

.negrito{
    font-weight: 800;
}

.light{
    font-weight: 300;
}

body {
    margin: 0;
    font-family: 'Kanit', sans-serif !important;
    background-color: #f0f2f5; /* Um fundo claro para contraste */
}

.language-selector img {
    transition: all 0.3s ease;
    opacity: 0.6;
}

.language-selector img.active {
    opacity: 1;
    transform: scale(1.2);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.language-selector img:hover {
    opacity: 0.9;
    cursor: pointer;
}

/* Estilo do cabeçalho */
.header {
    background-color: #031F5A;
    padding: 15px 0;
    color: white;
}

.header-content {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo */
    display: flex;
    justify-content: space-between; /* Espaça os elementos */
    align-items: center; /* Alinha verticalmente */
    padding: 0 20px; /* Padding horizontal para telas menores */
}

/* Estilo do logo */
.logo {
    color: white;
    text-decoration: none;
    font-size: 28px;
    font-weight: 700; /* "Imobfusion" parece ser mais encorpado */
    display: flex; /* Para alinhar o ícone e o texto */
    align-items: center;
    gap: 5px; /* Espaço entre o ícone e o texto */
    letter-spacing: -0.5px; /* Ajuste para parecer mais compacto */
}

/* Tentativa de recriar o ícone 'i' com CSS.
   Em um cenário real, um SVG seria o ideal para este logo. */
.logo-icon-cubes {
    display: inline-block;
    width: 25px; /* Largura do ícone */
    height: 25px; /* Altura do ícone */
    background:
        linear-gradient(to top right, #28a745 50%, transparent 50%), /* Verde superior */
        linear-gradient(to bottom left, #F0C42C 50%, transparent 50%); /* Amarelo lateral */
    background-size: 100% 50%, 50% 100%; /* Ajusta o tamanho das metades do gradiente */
    background-position: top left, bottom right; /* Posiciona os gradientes */
    background-repeat: no-repeat;
    position: relative;
    transform: rotate(45deg); /* Gira para fazer o formato de diamante */
    border-radius: 3px;
    margin-right: 5px;
    border: 2px solid white; /* Simula as bordas brancas dos cubos */
    box-shadow: 0 0 0 2px white; /* Borda externa branca para destacá-lo */
    /* A representação 3D exata é complexa apenas com CSS, esta é uma aproximação. */
}


/* Estilo da navegação principal */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* Espaço entre os itens do menu */
}

.main-nav a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400; /* Peso normal para os links */
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #ddd; /* Clareia no hover */
}

/* Estilo das ações do cabeçalho (carrinho, botão, bandeiras) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre os elementos */
}

.cart-link {
    font-size: 24px; /* Tamanho do ícone do carrinho */
    color: white;
    text-decoration: none;
    line-height: 1; /* Ajuda a alinhar o ícone baseado em texto */
}

/* Estilo do botão "entrar" */
.btn-primary {
    background-color: #28a745; /* Cor verde do print */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px; /* Bordas arredondadas */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #218838; /* Verde mais escuro no hover */
}

/* Estilo do seletor de idioma (bandeiras) */
.language-selector {
    display: flex;
    gap: 10px; /* Espaço entre as bandeiras */
}

.language-selector img {
    width: 30px; /* Tamanho das bandeiras */
    height: 30px; /* Tamanho das bandeiras */
    border-radius: 50%; /* Deixa as bandeiras circulares */
    object-fit: cover; /* Garante que a imagem preencha o círculo */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.language-selector img:hover {
    transform: scale(1.1); /* Pequeno zoom no hover */
}

/* Media Queries para responsividade básica (opcional) */
@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap; /* Permite que os itens quebrem a linha */
        justify-content: center; /* Centraliza os itens quando quebram */
        gap: 15px; /* Espaço entre os blocos quando quebram */
    }

    .main-nav ul {
        gap: 15px;
    }

    .logo, .main-nav, .header-actions {
        width: 100%; /* Ocupa a largura total */
        text-align: center; /* Centraliza o texto/itens dentro de cada bloco */
        justify-content: center; /* Para elementos flex */
    }

    .main-nav ul {
        justify-content: center;
    }
}

.footer {
    background-color: var(--color-dark-blue);
    color: var(--color-text-subtle);
    padding-top: 50px;
    font-size: 14px;
    /* background-image: url('../img/PREDIOS_RODAPÉ_HOME.png'); */
}

.footer-sections {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 50px;
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 30px;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-branding .footer-logo {
    font-size: 24px;
    margin-bottom: 10px;
}

.footer-slogan {
    font-size: 13px;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.4;
    margin-bottom: 20px; /* Adicionado espaço abaixo do slogan para as redes sociais */
}

/* Estilos para os ícones das redes sociais */
.social-icons {
    display: flex;
    gap: 15px; /* Espaço entre os ícones */
    margin-top: 15px; /* Espaço acima dos ícones */
    /* Se a coluna for centralizada no mobile, é bom que os ícones também fiquem */
    /* justify-content: center; */
}

.social-icons a {
    color: var(--color-text-light); /* Cor dos ícones */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: var(--color-white); /* Clareia no hover */
    transform: translateY(-3px); /* Pequeno efeito de elevação no hover */
}

.social-icons svg {
    width: 24px; /* Tamanho do ícone SVG */
    height: 24px;
    vertical-align: middle; /* Ajuda no alinhamento */
    stroke: currentColor; /* Usa a cor definida no 'a' parent */
}


.footer-heading {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.footer-links, .footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li, .footer-contact li {
    margin-bottom: 10px;
}

.footer-links a, .footer-contact a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover, .footer-contact a:hover {
    color: var(--color-white);
}

.footer-contact .text-contact {
    color: var(--color-text-light);
    display: block;
    margin-bottom: 10px;
}

/* --- Seção de Disclaimer e Legal Action Bar --- */
.footer-disclaimer-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-disclaimer-text {
    font-size: 12px;
    line-height: 1.8;
    color: var(--color-text-subtle);
    margin-bottom: 25px;
}

.footer-legal-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cvm-brand-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cvm-label {
    font-size: 13px;
    color: var(--color-text-subtle);
    font-weight: 400;
}

.cvm-main {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}

.cvm-sub {
    font-size: 10px;
    color: var(--color-text-light);
    font-weight: 500;
    line-height: 1.2;
    margin-left: 5px;
}

.btn-faq {
    background-color: var(--color-green-accent);
    color: var(--color-white);
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.btn-faq:hover {
    background-color: #218838;
}

/* --- Seção de Copyright --- */
.footer-copyright {
    background-color: var(--color-dark-blue);
    padding: 25px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-subtle);
}

/* --- Responsividade do Rodapé --- */
@media (max-width: 768px) {
    .footer-sections {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 30px;
    }

    .footer-col {
        align-items: center;
        text-align: center;
    }

    .footer-branding .footer-logo {
        margin-bottom: 5px;
    }

    .footer-slogan {
        margin-bottom: 15px; /* Ajusta o espaçamento do slogan para mobile */
    }

    .social-icons {
        justify-content: center; /* Centraliza os ícones no mobile */
        margin-top: 10px;
    }

    .footer-heading {
        margin-bottom: 10px;
    }

    .footer-legal-action-bar {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .cvm-brand-text {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .cvm-sub {
        margin-left: 0;
        text-align: center;
    }
}

/* --- Variáveis CSS (opcional, mas bom para manutenção) --- */
:root {
    /* CORRIGIDO: --color-dark-blue agora é igual a --color-header-blue */
    --color-dark-blue: #0B2559; /* Cor de fundo do rodapé (agora o mesmo azul do cabeçalho) */
    --color-header-blue: #031F5A; /* Cor de fundo do cabeçalho */
    --color-green-accent: #52923E; /* Cor verde para destaque */
    --color-text-light: #b0c4de; /* Cor de texto mais clara */
    --color-text-subtle: #8fa0c0; /* Cor de texto mais sutil */
    --color-white: #ffffff;
}

/* ... (o restante do seu CSS para o cabeçalho permanece o mesmo) ... */


/* --- Footer Styles (Corrigido para ser fiel ao desenho e com redes sociais) --- */
.footer {
    background-color: var(--color-dark-blue); /* Agora vai usar o azul característico */
    color: var(--color-text-subtle);
    padding-top: 50px;
    font-size: 14px;
}

/* ... (todo o resto do CSS do rodapé permanece o mesmo) ... */

/* --- Seção de Copyright --- */
.footer-copyright {
    background-color: var(--color-dark-blue); /* Agora vai usar o azul característico */
    padding: 25px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-subtle);
}

/* Import Google Fonts for better visual match (Optional, uncomment to use) */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;600&display=swap'); */

/* --- Hero Section Styles --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 500px; /* Adjust height as needed */
    background-image: url('../img/IMAGEM_HOME_MULHER_NO_SOFA.png'); /* **ATENÇÃO: Substitua pelo caminho da sua imagem e crie-a na pasta 'img'** */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: flex-end; /* Pushes the content wrapper to the right */
    align-items: center; /* Vertically centers the content wrapper if it's not full height */
    overflow: hidden; /* Ensures rounded corners don't show overflow */
}

/* Overall dark blue overlay for the background image */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 42, 75, 0.4); /* Dark blue with 40% opacity */
    z-index: 1; /* Ensures it's above the image but below the content */
}

.hero-content-wrapper {
    position: relative; /* Needed for z-index to work against ::before */
    z-index: 2; /* Ensures content is above the overlay */
    background-color: #1a2a4b; /* Solid dark blue for the content box */
    width: 45%; /* Adjust width of the content box as needed */
    height: 100%; /* Takes full height of the parent .hero-section */
    border-top-left-radius: 20px; /* Rounded top-left corner */
    border-bottom-left-radius: 20px; /* Rounded bottom-left corner */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers text content */
    padding: 0 40px; /* Horizontal padding, no vertical padding as it's centered */
    box-sizing: border-box; /* Include padding in width/height calculation */
    opacity: 0.7;
}

.hero-content-wrapper h1 {
    font-size: 2.5em; /* Adjust font size */
    font-weight: 700; /* Bold */
    color: #ffffff; /* White text */
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-content-wrapper p {
    font-size: 1.1em; /* Adjust font size */
    font-weight: 400; /* Regular */
    color: #ffffff; /* White text */
    line-height: 1.5;
    margin-bottom: 30px;
}

.hero-button {
    display: inline-block; /* Allows padding and width */
    background-color: #ffffff; /* White background */
    color: #1a2a4b; /* Dark blue text */
    font-size: 1em;
    font-weight: 600; /* Semi-bold */
    text-decoration: none; /* Remove underline */
    padding: 15px 30px;
    border-radius: 50px; /* Slightly rounded button corners */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.hero-button:hover {
    background-color: #e0e0e0; /* Slightly darker white on hover */
    cursor: pointer;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .hero-section {
        height: auto; /* Allow height to adjust */
        flex-direction: column; /* Stack content on smaller screens */
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 30px; /* Add some space below content */
    }

    .hero-section::before {
        background-color: rgba(26, 42, 75, 0.6); /* Slightly darker overlay for better text contrast */
    }

    .hero-content-wrapper {
        width: 90%; /* Wider content box on small screens */
        height: auto; /* Adjust height based on content */
        margin-top: 50px; /* Push content down from top */
        border-radius: 25px; /* Adjust border radius */
        text-align: center; /* Center text */
        padding: 30px 20px;
    }

    .hero-content-wrapper h1 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }

    .hero-content-wrapper p {
        font-size: 1em;
        margin-bottom: 20px;
    }

    .hero-button {
        padding: 12px 25px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .hero-content-wrapper h1 {
        font-size: 1.5em;
    }
    .hero-content-wrapper p {
        font-size: 0.9em;
    }
}

/* --- SEGUNDO BLOCO: Mensagem Simples com Fundo Azul --- */
.simple-message-section {
    background-color: var(--color-header-blue); /* Usando o azul característico do header/footer */
    padding: 80px 20px; /* Espaçamento interno vertical e horizontal */
    text-align: center; /* Centraliza o texto */
    display: flex;
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
}

.simple-message-section .container {
    max-width: 900px; /* Largura máxima para a frase não ficar muito longa */
    margin: 0 auto;
}

.simple-message-text {
    font-size: 2em; /* Tamanho da fonte grande para destaque */
    font-weight: 600; /* Semi-bold */
    color: var(--color-white); /* Texto em branco */
    line-height: 1.4; /* Espaçamento entre linhas */
    margin: 0; /* Remove margem padrão do parágrafo */
}

/* --- Responsividade da Mensagem Simples --- */
@media (max-width: 768px) {
    .simple-message-section {
        padding: 60px 15px;
        min-height: 200px;
    }
    .simple-message-text {
        font-size: 1.6em; /* Reduz tamanho da fonte em telas menores */
    }
}

@media (max-width: 480px) {
    .simple-message-section {
        min-height: 150px;
    }
    .simple-message-text {
        font-size: 1.3em; /* Reduz ainda mais em telas muito pequenas */
    }
}

/* --- TERCEIRO BLOCO: Oportunidades de Investimento --- */
.opportunity-section {
    background-image: url('../img/PREDIOS_HOME.png');
    background-color: var(--color-header-blue); /* Usando o azul característico do tema */
    background-size: cover; /* Garante que a imagem cubra toda a seção */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */

    display: flex;
    align-items: center; /* Centraliza o conteúdo verticalmente */
    padding: 80px 5%; /* Preenchimento superior/inferior e lateral */
    color: var(--color-white); /* Cor do texto claro para contraste com o fundo escuro */
    position: relative; /* Necessário para o overlay e z-index */
    overflow: hidden; /* Garante que nada transborde */
}

/* Overlay para melhorar a legibilidade do texto sobre a imagem de fundo (será mais visível com a imagem) */
.opportunity-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Overlay escuro semi-transparente */
    z-index: 1; /* Coloca o overlay abaixo do conteúdo */
}

/* Container do conteúdo principal (texto + botão) */
.opportunity-content-wrapper {
    display: flex;
    flex-direction: column; /* Empilha o texto e o botão em telas menores */
    align-items: flex-start; /* Alinha os itens à esquerda */
    width: 100%;
    max-width: 1200px; /* Largura máxima para o conteúdo dentro do bloco */
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
    z-index: 2; /* Garante que o conteúdo esteja acima do overlay */
    position: relative; /* Para garantir que esteja acima do overlay */
}

/* Estilos para o conteúdo de texto à esquerda */
.opportunity-text-content {
    flex: 2; /* Ocupa mais espaço em telas maiores */
    max-width: 600px; /* Limita a largura do texto para melhor legibilidade */
    text-align: left;
    margin-bottom: 40px; /* Espaço entre o texto e o botão em telas pequenas */
}

.opportunity-text-content h2 {
    font-size: 2.5em; /* Título maior */
    font-weight: 700; /* Negrito */
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--color-white); /* Título em branco */
}

.opportunity-text-content p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 0;
    color: var(--color-white); /* Parágrafo em branco */
}

/* Wrapper para o botão */
.opportunity-button-wrapper {
    flex: 1; /* Ocupa menos espaço */
    display: flex;
    justify-content: flex-start; /* Alinha o botão à esquerda por padrão (para telas pequenas) */
    width: 100%; /* Garante que o wrapper ocupe toda a largura para o alinhamento */
}

/* Estilos para o botão CTA secundário */
.btn-cta-secondary {
    display: inline-block;
    background-color: #ffffff; /* Fundo branco para o botão */
    color: var(--color-header-blue); /* Texto azul escuro para o botão */
    padding: 15px 30px;
    border-radius: 30px; /* Cantos arredondados */
    text-decoration: none;
    font-weight: 700; /* Negrito */
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave para hover */
    white-space: nowrap; /* Evita que o texto do botão quebre em várias linhas */
}

.btn-cta-secondary:hover {
    background-color: #e0e0e0; /* Fundo ligeiramente mais escuro no hover */
    color: var(--color-dark-blue); /* Texto mais escuro no hover (usando dark-blue para consistência) */
}

/* Ajustes responsivos para telas maiores (desktop) */
@media (min-width: 768px) {
    .opportunity-content-wrapper {
        flex-direction: row; /* Conteúdo lado a lado */
        align-items: center; /* Centraliza verticalmente o texto e o botão */
        justify-content: space-between; /* Empurra o texto para a esquerda e o botão para a direita */
    }

    .opportunity-text-content {
        margin-right: 50px; /* Espaço entre o texto e o botão */
        margin-bottom: 0; /* Remove a margem inferior quando lado a lado */
    }

    .opportunity-button-wrapper {
        flex-grow: 0; /* Impede que o wrapper do botão cresça desnecessariamente */
        width: auto; /* Permite que o botão se ajuste ao seu conteúdo */
        justify-content: flex-end; /* Empurra o botão para a direita */
    }
}

/* Ajustes responsivos para telas menores (mobile) */
@media (max-width: 767px) {
    .opportunity-section {
        padding: 60px 5%;
        min-height: auto; /* Permite que a altura se ajuste ao conteúdo */
    }
    .opportunity-text-content h2 {
        font-size: 1.8em; /* Ajusta o tamanho da fonte do título */
        text-align: center;
    }
    .opportunity-text-content p {
        font-size: 1em; /* Ajusta o tamanho da fonte do parágrafo */
        text-align: center;
    }
    .opportunity-button-wrapper {
        justify-content: center; /* Centraliza o botão em telas pequenas */
    }
    .btn-cta-secondary {
        width: auto; /* Deixa o botão se ajustar ao conteúdo */
        max-width: 100%; /* Garante que o botão não transborde */
        text-align: center;
        padding: 12px 20px;
        font-size: 1em;
    }
    .opportunity-text-content {
        margin-bottom: 30px; /* Ajusta espaço antes do botão no mobile */
    }
}

/* --- QUARTO BLOCO: Benefícios - REPLICAÇÃO EXATA DO MOCKUP --- */
.benefits-exact-section {
    margin: 0;
    background-color: #f2f2f2; /* Cor de fundo cinza claro, como no mockup */
    color: #0B2559; /* Cor do texto azul escuro/cinza, como no mockup */
    padding-top: 80px; /* Espaçamento superior do conteúdo */
    
    box-sizing: border-box; /* Garante que o padding seja incluído na largura/altura total */
    min-height: auto; /* Ajusta conforme o conteúdo, não mais 100vh */
    width: 100%; /* Garante que ocupe a largura total */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.benefits-main-title {
    font-size: 3.5em; /* Tamanho grande para o título "Benefícios" */
    font-weight: 700; /* Negrito */
    margin-top: 0; /* Remove a margem superior padrão do H1 */
    margin-bottom: 0.3em; /* Espaço entre o título principal e o subtítulo */
    line-height: 1.1; /* Altura de linha mais justa para títulos */
    max-width: 800px; /* Limita a largura para evitar que se estique demais em telas muito grandes */
    text-align: left; /* Alinha o título à esquerda */
    margin-left: 0; /* Garante alinhamento esquerdo */
}

.benefits-subtitle-exact {
    font-size: 1.9em; /* Tamanho ligeiramente menor que o título principal */
    font-weight: 700; /* Negrito */
    line-height: 1.3;
    margin-top: 0; /* Remove a margem superior padrão do H2 */
    margin-bottom: 2em; /* Espaço antes da grade de benefícios */
}

.benefits-grid-exact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em 20em;
    /* max-width: 1000px; */
}

.benefit-item-exact {
    /* Não possui background ou borda específicos, apenas o texto */
    text-align: left; /* Garante que o texto dentro do item esteja alinhado à esquerda */
}

.benefit-title-exact {
    font-size: 2em; /* Ligeiramente maior que o texto da descrição */
    font-weight: 700; /* Negrito */
    margin-top: 0; /* Remove a margem superior padrão do H3 */
    margin-bottom: 0.6em; /* Espaço entre o título do benefício e sua descrição */
    line-height: 1.4;
    color: inherit; /* Herda a cor do texto da seção pai */
}

.benefit-description-exact {
    font-size: 1.2em; /* Tamanho base da fonte para as descrições */
    line-height: 1.7; /* Altura de linha generosa para melhor legibilidade */
    margin-top: 0; /* Remove a margem superior padrão do parágrafo */
    margin-bottom: 0; /* Remove a margem inferior padrão do parágrafo */
    font-weight: 400; /* Peso da fonte regular */
    /* Adiciona uma largura máxima para garantir que as descrições quebrem as linhas de forma similar ao mockup */
    max-width: 400px; /* Largura estimada visualmente para a coluna da descrição */
    color: inherit; /* Herda a cor do texto da seção pai */
}

/* Responsividade básica para telas menores */
@media (max-width: 768px) {
    .benefits-exact-section {
        padding-left: 5%; /* Menos padding em telas menores */
        padding-right: 5%;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .benefits-main-title {
        font-size: 2.5em;
        max-width: 100%; /* Permite que o título use toda a largura disponível */
    }
    .benefits-subtitle-exact {
        font-size: 1.5em;
        max-width: 100%; /* Permite que o subtítulo use toda a largura disponível */
    }
    .benefits-grid-exact {
        grid-template-columns: 1fr; /* Empilha os benefícios verticalmente */
        gap: 2em; /* Ajusta o espaçamento vertical */
        max-width: 100%; /* Permite que a grade use toda a largura disponível */
    }
    .benefit-description-exact {
        max-width: 100%; /* Permite que as descrições usem toda a largura disponível */
    }
}

/* --- QUARTO BLOCO: Como Funciona? (Replicação Exata do Mockup) --- */
.how-it-works-original-section {
    position: relative; /* Necessário para posicionar o overlay e o WhatsApp icon */
    padding: 80px 5%; /* Espaçamento interno */
    overflow: hidden; /* Garante que a imagem de fundo não transborde */
    background-color: #f0f2f5; /* Cor de fundo substituta para a imagem */
    background-image: url('../img/ESTRUTURA_DE_CUBOS_HOME.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Se a imagem de fundo for muito escura ou colorida, 
       ajuste este overlay para ajudar na legibilidade do texto. */
    background-color: rgba(240, 242, 245, 0.7); /* Overlay sutil com a cor de fundo */
    z-index: 1;
}

.content-wrapper-original {
    position: relative;
    z-index: 2; /* Garante que o conteúdo esteja acima do overlay */
    max-width: 1200px;
    margin: 0 auto;
}

.main-title-original {
    font-size: 2.8em; /* Tamanho grande */
    font-weight: 700; /* Negrito */
    color: #0B2559; /* Cinza muito escuro */
    margin-bottom: 20px;
    margin-top: 0;
}

.whatsapp-icon-placeholder {
    position: absolute;
    top: 0px; /* Ajuste conforme a necessidade de espaçamento do topo */
    right: 0px; /* Ajuste conforme a necessidade de espaçamento da direita */
    width: 40px; /* Tamanho do ícone */
    height: 40px; /* Tamanho do ícone */
    background-color: #25D366; /* Verde do WhatsApp */
    border-radius: 50%; /* Circular */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Cor do "ícone" interno se for um texto/emoji */
    font-size: 1.5em;
    /* Você pode substituir este background-color por uma imagem de ícone de WhatsApp */
    /* background-image: url('img/whatsapp-icon.png'); */
    /* background-size: contain; background-repeat: no-repeat; */
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    /* Exemplo de texto/emoji dentro do placeholder, remova se for usar imagem */
    content: "💬"; 
    box-sizing: border-box; /* Garante que padding/border sejam incluídos na dimensão */
}


.description-paragraph-original {
    font-size: 1.4em;
    color: #0B2559;
    line-height: 1.6;
    margin-bottom: 40px;
    text-align: justify;
}

.description-paragraph-original strong {
    font-weight: 700; /* Garante que o negrito seja proeminente */
}

.feature-boxes-original {
    display: flex;
    justify-content: space-between; /* Espaço entre os cards */
    gap: 30px; /* Espaçamento adicional entre os boxes */
    margin-bottom: 50px;
}

.feature-box-original {
    flex: 1; /* Distribui o espaço igualmente entre os boxes */
    background-color: #1F2E52; /* Azul escuro profundo */
    border-radius: 10px; /* Cantos arredondados */
    padding: 30px;
    text-align: center; /* Título e texto centralizados dentro da caixa */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra sutil */
}

.feature-title-original {
    font-size: 1.5em;
    font-weight: 700; /* Negrito */
    color: #F0C42C; /* Laranja/Amarelo dourado */
    margin-bottom: 15px;
    margin-top: 0;
}

.feature-description-original {

    font-size: 1.2em;
    color: #FFFFFF; /* Branco puro */
    line-height: 1.5;
    margin-bottom: 0;
}

.cta-button-original {
    display: block; /* Ocupa a largura total para centralizar com margin: auto */
    width: fit-content; /* Se ajusta ao conteúdo do texto */
    margin: 0 auto; /* Centraliza o botão */
    background-color: #1F2E52; /* Azul escuro profundo */
    color: #F0C42C;
    padding: 15px 40px;
    border-radius: 25px; /* Cantos ligeiramente arredondados */
    text-decoration: none;
    font-weight: 700; /* Negrito */
    font-size: 1.1em;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button-original:hover {
    background-color: #2c3d64; /* Um azul um pouco mais claro no hover */
    transform: translateY(-2px);
}

/* --- Responsividade da Seção "Como Funciona?" --- */
@media (max-width: 992px) {
    .main-title-original {
        font-size: 2.4em;
    }
    .description-paragraph-original {
        font-size: 1em;
        text-align: left; /* Em telas menores, pode ser melhor alinhado à esquerda puro */
    }
    .feature-boxes-original {
        flex-direction: column; /* Empilha os boxes verticalmente em tablets */
        gap: 20px;
    }
    .feature-box-original {
        padding: 25px;
    }
    .feature-title-original {
        font-size: 1.3em;
    }
    .feature-description-original {
        font-size: 0.95em;
    }
}

@media (max-width: 768px) {
    .how-it-works-original-section {
        padding: 60px 20px; /* Reduz o padding em telas menores */
    }
    .main-title-original {
        font-size: 2em;
        text-align: center; /* Centraliza o título em mobile */
    }
    .description-paragraph-original {
        font-size: 0.95em;
        text-align: center; /* Centraliza o parágrafo em mobile */
        margin-bottom: 30px;
    }
    .feature-boxes-original {
        gap: 15px;
    }
    .feature-box-original {
        padding: 20px;
    }
    .feature-title-original {
        font-size: 1.2em;
    }
    .feature-description-original {
        font-size: 0.9em;
    }
    .cta-button-original {
        padding: 12px 30px;
        font-size: 1em;
    }
}

/* --- QUINTO BLOCO: Passo a Passo (Fidelidade ao Mockup dos 7 Pontos) --- */

.passo-a-passo-fiel-section {
    position: relative; /* Para a imagem de fundo */
    padding: 80px 20px;
    background-color: #f8f9fa; /* Um tom de cinza muito claro para o fundo da seção */
    overflow: hidden; /* Garante que o conteúdo e a imagem de fundo sejam contidos */
}

.passo-a-passo-fiel-section .container-fiel {
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* Para z-index sobre a imagem de fundo */
    z-index: 2;
}

/* Título Principal */
.main-title-fiel {
    font-size: 3em;
    font-weight: 700;
    color: var(--color-dark-blue); /* Usando sua variável de azul escuro */
    text-align: center;
    margin-bottom: 10px;
}

/* Subtítulo */
.subtitle-fiel {
    font-size: 1.15em;
    color: #555; /* Um cinza médio para o subtítulo */
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto; /* Espaçamento entre o subtítulo e os passos */
    line-height: 1.6;
}

/* Container dos 7 passos */
.steps-grid-fiel {
    display: grid;
    /* 3 colunas em telas grandes, com a 4ª ficando abaixo.
       grid-auto-rows: 1fr garante que todas as linhas terão a mesma altura */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    grid-auto-rows: 1fr; /* Garante que todas as caixas tenham a mesma altura */
    gap: 30px; /* Espaçamento entre as caixas de passo */
    margin-top: 40px;
    margin-bottom: 40px;
}

.step-item-fiel {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o conteúdo de cada passo à esquerda */
    padding: 25px; /* Espaçamento interno de cada item */
    background-color: #ffffff; /* Fundo branco para cada 'quadriculado' */
    border-radius: 8px; /* Borda levemente arredondada, como visto em elementos de UI modernos */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra sutil para destacar */
    text-align: left; /* Garante que todo o texto dentro do item seja alinhado à esquerda */
}

/* Número do passo */
.step-number-fiel {
    font-size: 2.5em; /* Tamanho grande para o número */
    font-weight: 700;
    color: var(--color-green-accent); /* A cor verde de destaque para o número */
    margin-bottom: 15px; /* Espaço entre o número e o título */
    line-height: 1; /* Ajuste para evitar espaço extra acima/abaixo do número */
    display: block; /* Para aplicar margin-bottom corretamente */
}

/* Título de cada passo */
.step-title-fiel {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--color-dark-blue); /* Azul escuro para o título do passo */
    margin-bottom: 10px; /* Espaço entre o título e a descrição */
    line-height: 1.3;
}

/* Descrição de cada passo */
.step-description-fiel {
    font-size: 0.95em;
    color: #666; /* Um cinza um pouco mais escuro para a descrição */
    line-height: 1.6;
    margin-bottom: 0; /* Remove margem inferior padrão */
}

/* Placeholder para a imagem de fundo diagonal */
.diagonal-background-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* PREPARAÇÃO PARA A IMAGEM DE FUNDO:
       Quando tiver sua imagem diagonal (PNG ou SVG), defina-a aqui.
       Por exemplo, um SVG de formas geométricas ou um PNG abstrato. */
    /* background-image: url('img/sua-imagem-de-fundo-diagonal.png'); */
    background-repeat: no-repeat;
    background-size: cover; /* Ajuste conforme a imagem */
    background-position: center; /* Ajuste conforme a imagem */
    opacity: 0.3; /* Opacidade sutil para não ofuscar o conteúdo */
    z-index: 1; /* Fica abaixo do conteúdo (.container-fiel) */
    /* Exemplo de uma cor temporária para ver o placeholder */
    /* background-color: #e0e0e0; */
}


/* --- Responsividade --- */
@media (max-width: 1200px) {
    .steps-grid-fiel {
        /* Em telas menores que 1200px, pode ter 2 ou 3 colunas, 
           auto-fit vai ajustar o número de colunas conforme o espaço */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .passo-a-passo-fiel-section {
        padding: 60px 15px;
    }
    .main-title-fiel {
        font-size: 2.2em;
    }
    .subtitle-fiel {
        font-size: 1em;
        margin-bottom: 40px;
    }
    .steps-grid-fiel {
        grid-template-columns: 1fr; /* Uma coluna em mobile */
        gap: 20px;
    }
    .step-item-fiel {
        padding: 20px;
    }
    .step-number-fiel {
        font-size: 2em;
    }
    .step-title-fiel {
        font-size: 1.2em;
    }
    .step-description-fiel {
        font-size: 0.9em;
    }
}

/* --- SEXTO BLOCO: Depoimentos (A Tokenização Veio Para Ficar) --- */
.testimonials-block {
    margin: 0;
    background-color: #f1f1f1; /* Light grey background */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Ajuste para a altura mínima da seção */
    padding: 60px 20px; /* Preenchimento para a seção */
    box-sizing: border-box;
    position: relative; /* Para os patterns de fundo */
    overflow: hidden;
}

.main-title-testimonials {
    color: #0B2559; /* Dark blue, similar to box color but for text */
    font-size: clamp(1.8rem, 5vw, 3.5rem); /* Responsive font size */
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    padding: 0 20px; /* Prevent title from touching edges on small screens */
    max-width: 1200px; /* Limita a largura do título */
}

.testimonials-container-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px; /* Spacing between testimonial boxes */
    max-width: 1200px; /* Limit overall width */
    margin-bottom: 50px;
}

.testimonial-box {
    background-color: #0B2559; /* Dark blue */
    border-radius: 20px; /* Rounded corners */
    padding: 30px;
    color: #ffffff;
    width: clamp(280px, 28vw, 350px); /* Responsive width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* To push name to top and text below */
    flex-grow: 1; /* Permite que as caixas cresçam para preencher o espaço disponível */
    max-width: 350px; /* Garante que não fiquem muito largas em telas grandes */
}

.testimonial-name {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem); /* Responsive font size for name */
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.testimonial-quote {
    font-size: clamp(0.85rem, 1.8vw, 1rem); /* Responsive font size for quote */
    font-style: italic;
    line-height: 1.6;
    text-align: left; /* Ensure text alignment */
}

.button-invest-testimonials {
    background-color: #0B2559; /* Dark blue */
    color: #F0C42C;
    padding: 15px 30px;
    border-radius: 30px; /* More rounded for button */
    text-decoration: none;
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* Responsive font size */
    font-weight: 700;
    text-align: center;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.button-invest-testimonials:hover {
    background-color: #3b4e72; /* Slightly lighter on hover */
}

/* Background geometric pattern */
.background-pattern-testimonials {
    position: absolute;
    bottom: -50px; /* Adjusted to be slightly off-screen */
    right: -50px; /* Adjusted to be slightly off-screen */
    width: 300px;
    height: 300px;
    opacity: 0.2; /* Subtle opacity */
    z-index: 0; /* Behind content */
    pointer-events: none; /* Do not interfere with clicks */
    overflow: hidden; /* Hide parts that go outside */
}

.background-pattern-testimonials::before,
.background-pattern-testimonials::after {
    content: '';
    position: absolute;
    background-color: #dcdcdc; /* Slightly darker grey for pattern */
    transform: rotate(45deg);
}

.background-pattern-testimonials::before {
    width: 150px;
    height: 150px;
    top: 50px;
    left: 50px;
    border-radius: 5px; /* Small corner radius for pattern elements */
}

.background-pattern-testimonials::after {
    width: 100px;
    height: 100px;
    top: 150px;
    left: 150px;
    border-radius: 5px;
}

/* Another set of triangles for the top left */
.background-pattern-top-left-testimonials {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transform: rotate(-45deg);
}

.background-pattern-top-left-testimonials::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #dcdcdc;
    top: 20px;
    left: 20px;
    border-radius: 5px;
}

/* Adjustments for smaller screens */
@media (max-width: 900px) {
    .testimonials-container-layout {
        flex-direction: column;
        align-items: center;
        max-width: 500px; /* Constrain width for a single column layout */
    }
    .testimonial-box {
        width: 90%; /* Take more width on smaller screens */
        max-width: 400px; /* But not too wide */
    }
    .main-title-testimonials {
        margin-bottom: 30px;
    }
    .button-invest-testimonials {
        margin-top: 30px;
    }
    .testimonials-block {
        min-height: auto; /* Permite que a altura se ajuste ao conteúdo em mobile */
        padding: 40px 15px;
    }
}

/* --- QUARTO BLOCO: Segurança e Certificações (REPLICAÇÃO EXATA DO MOCKUP) --- */
/* --- QUARTO BLOCO: Segurança e Certificações (REPLICAÇÃO EXATA DO MOCKUP) --- */

:root {
    --dark-blue-start-exact: #0E2140; /* Cor escura do gradiente */
    --dark-blue-end-exact: #1A355A;   /* Cor clara do gradiente */
    --text-color-exact: #FFFFFF;
    --badge-bg-exact: #808080; /* Cinza para os selos, como na imagem */
    --badge-text-dark-exact: #333333;
    --badge-text-light-exact: #FFFFFF;
}

.security-and-certifications-block-exact {
    position: relative;
    display: flex;
    align-items: center; /* Centraliza verticalmente o conteúdo principal */
    justify-content: center; /* Centraliza horizontalmente o conteúdo principal */
    background: linear-gradient(135deg, var(--dark-blue-start-exact) 0%, var(--dark-blue-end-exact) 100%);
    overflow: hidden; /* Garante que elementos absolutos não causem scroll */
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.security-cert-container-exact {
    position: relative; /* Contexto de posicionamento para o shield e badges */
    width: 100%;
    max-width: 950px; /* Ajuste para o tamanho geral do conteúdo */
    color: var(--text-color-exact);
    padding: 50px 70px; /* Espaçamento interno */
    box-sizing: border-box;
    z-index: 10; /* Garante que o conteúdo fique acima do padrão geométrico */
}

.content-area-exact {
    position: relative; /* Contexto para o shield */
    /* Este div agora apenas contém o H1 e o wrapper dos blocos de texto */
}

.content-area-exact h1 {
    font-size: 2.8em; /* Tamanho do título principal */
    font-weight: 700; /* Extra bold */
    margin-bottom: 35px;
    line-height: 1.2;
    text-align: center; /* O título centralizado */
}

/* NOVO: Wrapper para os blocos de texto que terão o alinhamento esquerdo consistente */
.aligned-text-blocks-wrapper {
    position: relative; /* Para o shield ser posicionado em relação ao seu topo */
    padding-left: 140px; /* A margem para os blocos de texto para dar espaço ao shield */
    padding-top: 20px; /* Pequeno ajuste para o shield verticalmente */
}

.section-exact {
    margin-bottom: 30px;
}

.section-exact h2 {
    font-size: 1.6em; /* Tamanho dos subtítulos */
    font-weight: 600; /* Semi-bold */
    margin-top: 0; /* Removido margin-top para controle mais preciso */
    margin-bottom: 15px;
}

.section-exact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-exact li {
    font-size: 1em; /* Tamanho do texto normal */
    line-height: 1.5;
    margin-bottom: 8px;
    font-weight: 400; /* Regular */
}

.section-exact li:last-child {
    margin-bottom: 0;
}

.section-exact strong {
    font-weight: 600; /* Destaque em semi-bold */
}

/* Padrão Geométrico Top-Right */
.geometric-pattern-exact {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px; /* Ajuste o tamanho conforme a imagem */
    height: 300px;
    color: rgba(255, 255, 255, 0.1); /* Branco com transparência para o padrão */
    z-index: 5; /* Fica abaixo do conteúdo principal */
}

/* Badges de certificação */
.badges-wrapper-exact {
    position: absolute;
    bottom: 40px; /* Posição na parte inferior */
    right: 70px; /* Posição na parte direita */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre os badges */
    z-index: 10;
}

.badge-pci-exact, .badge-iso-exact {
    width: 100px; /* Tamanho dos badges */
    height: 100px;
    border-radius: 50%;
    background-color: var(--badge-bg-exact); /* Fundo cinza */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative; /* Para o texto "COMPLIANT" */
}

/* Estilos específicos para o badge PCI-DSS */
.badge-pci-exact {
    border: 2px solid var(--badge-bg-exact); /* Borda sólida */
    box-sizing: border-box;
    background-color: #555; /* Fundo mais escuro para PCI-DSS */
}
.badge-pci-exact .main-text-exact {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--badge-text-light-exact);
    margin-bottom: 2px;
}
.badge-pci-exact .sub-text-exact {
    font-size: 0.5em;
    color: var(--badge-text-light-exact);
    line-height: 1;
    margin-bottom: 2px;
}
.badge-pci-exact .year-exact {
    font-size: 0.4em;
    color: var(--badge-text-light-exact);
    line-height: 1;
}
.badge-pci-exact .compliant-text-exact {
    font-size: 0.6em;
    color: var(--badge-text-light-exact);
    line-height: 1;
    transform: rotate(-90deg); /* Rotação conforme imagem */
    position: absolute;
    left: -35px; /* Ajuste para posicionar fora do círculo */
    top: 50%;
    transform-origin: center;
    white-space: nowrap; /* Previne quebra de linha */
}


/* Estilos específicos para o badge ISO 27001 */
.badge-iso-exact {
    border: 2px solid #EEE; /* Borda um pouco mais clara, conforme imagem */
    box-sizing: border-box;
    background-color: #FFF; /* Fundo branco */
    color: var(--badge-text-dark-exact);
}
.badge-iso-exact .main-text-exact {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--badge-text-dark-exact);
    margin-bottom: 2px;
}
.badge-iso-exact .sub-text-exact {
    font-size: 0.5em;
    color: var(--badge-text-dark-exact);
    line-height: 1;
}
.badge-iso-exact .certified-text-exact {
    font-size: 0.6em;
    color: var(--badge-text-dark-exact);
    line-height: 1;
    margin-top: 5px;
}

/* Shield posicionado absolutamente */
.shield-icon-absolute-exact {
    position: absolute;
    width: 100px; /* Tamanho do ícone como na análise original */
    height: 100px;
    color: var(--text-color-exact); /* Cor do ícone */
    left: 70px; /* Posição X: 180px do container de design (70px padding do container + 110px para fora) */
    top: 310px; /* Posição Y: alinhado verticalmente com o início do texto da conformidade */
    z-index: 11; /* Acima do conteúdo e padrões */
}

/* --- Responsividade --- */
@media (max-width: 1024px) {
    .security-cert-container-exact {
        max-width: 800px;
        padding: 40px 50px;
    }
    .content-area-exact h1 { font-size: 2.4em; }
    .section-exact h2 { font-size: 1.4em; }
    .badges-wrapper-exact {
        bottom: 30px;
        right: 50px;
    }
    .aligned-text-blocks-wrapper {
        padding-left: 100px; /* Ajuste para telas menores */
    }
    .shield-icon-absolute-exact {
        width: 80px;
        height: 80px;
        left: 50px; /* Ajuste do left */
        top: 290px; /* Ajuste do top */
    }
}

@media (max-width: 768px) {
    .security-and-certifications-block-exact {
        padding: 20px;
        align-items: flex-start; /* Não centraliza verticalmente em telas pequenas */
    }
    .security-cert-container-exact {
        padding: 30px;
        max-width: 100%;
    }
    .content-area-exact h1 { font-size: 2em; margin-bottom: 25px; }
    .section-exact h2 { font-size: 1.3em; margin-top: 30px; margin-bottom: 10px;}
    .section-exact li { font-size: 0.95em; }
    
    .aligned-text-blocks-wrapper {
        padding-left: 0; /* Remove o padding em telas muito pequenas */
    }
    .shield-icon-absolute-exact {
        position: relative; /* Volta para o fluxo normal em mobile */
        display: block;
        width: 60px;
        height: 60px;
        margin: 0 auto 20px auto; /* Centraliza o ícone e adiciona espaçamento */
        top: auto;
        left: auto;
    }
    /* Adaptação para o ícone em mobile: para aparecer antes do texto de Conformidade */
    #compliance-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #compliance-section h2, #compliance-section ul {
        text-align: left; /* Mantém o texto alinhado */
        width: 100%; /* Ocupa a largura total */
    }
    
    .geometric-pattern-exact {
        width: 150px;
        height: 150px;
    }
    .badges-wrapper-exact {
        position: relative; /* Posiciona os badges após o conteúdo em telas pequenas */
        flex-direction: row; /* Coloca lado a lado */
        justify-content: center;
        gap: 10px;
        bottom: auto;
        right: auto;
        margin-top: 40px;
        width: 100%;
    }
    .badge-pci-exact, .badge-iso-exact {
        width: 80px;
        height: 80px;
        font-size: 0.5em;
    }
    .badge-pci-exact .main-text-exact { font-size: 0.8em; }
    .badge-pci-exact .sub-text-exact { font-size: 0.4em; }
    .badge-pci-exact .year-exact { font-size: 0.3em; }
    .badge-pci-exact .compliant-text-exact {
        font-size: 0.5em;
        left: -28px;
    }
    .badge-iso-exact .main-text-exact { font-size: 0.8em; }
    .badge-iso-exact .sub-text-exact { font-size: 0.4em; }
    .badge-iso-exact .certified-text-exact { font-size: 0.5em; }
}

/* --- ABOUT.PHP: PRIMEIRO BLOCO - "A Nossa Missão..." (FIEL AO MOCKUP E CORREÇÕES) --- */

.about-mission-hero-exact {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Ocupa a altura total da tela */
    display: flex; /* Para centralizar o conteúdo, se necessário, mas aqui a imagem é full */
    justify-content: flex-end; /* Conteúdo principal (bloco azul) alinhado à direita na imagem */
    align-items: flex-end; /* Conteúdo principal (bloco azul) alinhado à base */
    overflow: hidden; /* Garante que a imagem de fundo não cause scroll */
    color: #FFFFFF; /* Cor do texto principal */
    padding: 0; /* Remover padding padrão para controle total */
}

/* Imagem de fundo (o senhor negro com computador) */
.background-image-about-exact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/IMAGEM_SOBRE_SENHOR_NO_SOFÁ.png'); /* <<<<< VOCÊ DEVE SUBSTITUIR ESTE CAMINHO! */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1; /* Fica abaixo dos outros elementos */
}

/* Bloco azul semi-transparente no canto inferior esquerdo */
.mission-overlay-box-exact {
    position: absolute; /* Posicionado absolutamente */
    bottom: 0; /* Alinhado ao fundo */
    left: 0; /* Alinhado à esquerda */
    width: 50%; /* Largura do bloco, ajuste conforme o mockup */
    height: 50%; /* Altura do bloco, ajuste conforme o mockup */
    background-color: rgba(26, 40, 80, 0.7); /* Azul marinho/teal escuro com 70% de opacidade */
    border-top-right-radius: 40px; /* Cantos arredondados, conforme a imagem */
    z-index: 2; /* Fica acima da imagem de fundo */
    padding: 30px; /* Preenchimento interno */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o texto verticalmente dentro do bloco */
    color: #FFFFFF; /* Texto branco */
    text-align: left; /* Texto alinhado à esquerda */
    
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
}

.mission-title-exact {
    font-size: 3.7em; /* Tamanho para "A nossa missão:" */
    font-weight: 400; /* Peso normal */
    margin: 0;
    margin-bottom: 10px;
    line-height: 1.2;
}

.mission-text-exact {
    font-size: 2.6em; /* Tamanho grande para as palavras principais */
    font-weight: 400; /* Peso normal para a maioria do texto */
    margin: 0;
    line-height: 1.2; /* Espaçamento entre as linhas */
}

.mission-text-exact b {
    font-weight: 700; /* Negrito para as palavras destacadas */
}

/* --- Responsividade --- */
@media (max-width: 1024px) {
    .mission-overlay-box-exact {
        width: 300px; /* Ajuste a largura */
        height: 330px; /* Ajuste a altura */
        padding: 25px;
        border-top-right-radius: 30px;
    }
    .mission-title-exact {
        font-size: 1.1em;
    }
    .mission-text-exact {
        font-size: 1.4em;
    }
}

@media (max-width: 768px) {
    .about-mission-hero-exact {
        min-height: 70vh; /* Ajusta a altura mínima para mobile */
        align-items: center; /* Centraliza o bloco azul verticalmente */
        justify-content: center; /* Centraliza o bloco azul horizontalmente */
    }
    .mission-overlay-box-exact {
        position: relative; /* Volta para o fluxo normal em mobile para ser centralizado */
        bottom: auto;
        left: auto;
        width: 90%; /* Ocupa mais largura em mobile */
        height: auto; /* Altura se ajusta ao conteúdo */
        padding: 20px;
        border-radius: 15px; /* Todos os cantos arredondados, ou apenas o superior direito */
        text-align: center; /* Centraliza o texto no mobile */
        background-color: rgba(26, 40, 80, 0.8); /* Aumenta a opacidade para melhor legibilidade */
    }
    .mission-title-exact {
        font-size: 1em;
        margin-bottom: 5px;
    }
    .mission-text-exact {
        font-size: 1.2em;
    }
    .background-image-about-exact {
        filter: brightness(0.4); /* Escurece mais a imagem para contraste com o bloco centralizado */
    }
}

@media (max-width: 480px) {
    .mission-overlay-box-exact {
        width: 95%;
        font-size: 0.9em;
    }
    .mission-title-exact {
        font-size: 0.9em;
    }
    .mission-text-exact {
        font-size: 1.1em;
    }
}

/* --- ABOUT.PHP: SEGUNDO BLOCO - Faixa Azul "Vamos viabilizar..." --- */
.about-viabilizar-block {
    position: relative;
    width: 100%;
    min-height: 250px; /* Altura mínima para o banner */
    display: flex;
    align-items: center;
    justify-content: center; /* <<< MUDANÇA AQUI: Centraliza o conteúdo horizontalmente */
    
    /* Gradiente diagonal (135deg) com as cores do mockup */
    background: linear-gradient(135deg, #12294A 0%, #1B4889 100%); 
    
    color: #FFFFFF;
    padding: 40px 0; /* Espaçamento vertical */
    overflow: hidden;
}

.about-viabilizar-content {
    max-width: 1200px; /* Largura máxima para o conteúdo */
    width: 100%; /* Ocupa a largura disponível até o max-width */
    margin: 0 auto; /* <<< MUDANÇA AQUI: Remove o margin-left e centraliza o bloco */
    padding-left: 20px; /* Adicionado padding-left para consistência */
    padding-right: 20px; /* Mantido padding à direita */
    text-align: center; /* <<< MUDANÇA AQUI: Centraliza o texto dentro do bloco */
    z-index: 2; /* Garante que o conteúdo fique acima de qualquer elemento de fundo */
}

.about-viabilizar-line {
    font-size: clamp(1.5em, 3.5vw, 3em); /* Tamanho de fonte responsivo (~48px em telas grandes) */
    line-height: 1.0;
	text-align: center;
    margin: 0; /* Remove margens padrão de parágrafos */
}

/* --- Responsividade para o Bloco "Vamos viabilizar..." --- */
@media (max-width: 768px) {
    .about-viabilizar-block {
        min-height: 200px;
        padding: 30px 0;
    }
    .about-viabilizar-content {
        margin-left: 5%; /* Ajusta o padding esquerdo em telas menores */
        padding-right: 5%;
        text-align: center; /* Centraliza o texto no mobile para melhor leitura */
    }
    .about-viabilizar-line {
        font-size: clamp(1.2em, 4vw, 1.8em);
    }
}

@media (max-width: 480px) {
    .about-viabilizar-block {
        min-height: 150px;
    }
    .about-viabilizar-line {
        font-size: clamp(1em, 4.5vw, 1.5em);
    }
}

/* --- ABOUT.PHP: TERCEIRO BLOCO - Nossa Visão e Nossa História --- */
:root {
    --about-bg-color: #e7eaf2; /* Cor de fundo principal */
    --about-heading-color: #0B2559; /* Azul escuro para títulos */
    --about-text-color: #4a576d; /* Azul acinzentado para o texto */
}

.about-vision-history-wrapper {
    background-color: var(--about-bg-color); /* Fundo da seção */
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    color: var(--about-text-color);
}

.about-vision-history-container {
    width: 100%;
    max-width: 900px; /* Largura máxima para legibilidade */
    box-sizing: border-box;
}

.about-vision-section,
.about-history-section {
    margin-bottom: 50px; /* Espaço entre as seções Visão e História */
}

.about-history-section:last-child {
    margin-bottom: 0; /* Remove a margem da última seção */
}

.about-section-title {
    font-size: clamp(1.8em, 3vw, 2.2em); /* Tamanho do título da seção */
    font-weight: 700; /* Negrito */
    color: var(--about-heading-color);
    margin-bottom: 25px; /* Espaço abaixo do título */
}

.about-vision-section p,
.about-history-section p {
    font-size: 1.5em;
    line-height: 1.6; /* Espaçamento entre linhas padrão */
    margin-bottom: 20px; /* Espaço entre parágrafos */
    color: var(--about-heading-color);
}

.about-history-section p:last-of-type {
    margin-bottom: 0; /* Remove a margem do último parágrafo da história */
}

.about-vision-section em,
.about-history-section em {
    font-style: italic; /* Para o texto em itálico */
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .about-vision-history-wrapper {
        padding: 50px 15px;
    }
    .about-section-title {
        font-size: clamp(1.6em, 5vw, 2em);
        margin-bottom: 20px;
    }
    .about-vision-section p,
    .about-history-section p {
        font-size: clamp(0.95em, 2.5vw, 1.1em);
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .about-vision-history-wrapper {
        padding: 30px 10px;
    }
    .about-section-title {
        font-size: clamp(1.4em, 6vw, 1.8em);
    }
    .about-vision-section p,
    .about-history-section p {
        font-size: clamp(0.9em, 3vw, 1em);
        margin-bottom: 10px;
    }
}

/* --- ABOUT.PHP: QUARTO BLOCO - Nosso Diferencial e Nossa Tecnologia --- */

/* Reutilizando as classes de wrapper e container do bloco anterior */
.about-differential-technology-wrapper {
    background-color: var(--about-bg-color); /* Fundo da seção */
    padding: 40px 20px; /* Espaçamento vertical e lateral */
    display: flex;
    justify-content: center;
    color: var(--about-text-color);
}

.about-differential-technology-wrapper p 
{
    font-size: 1.5em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--about-heading-color);
}

/* As seções individuais herdam do estilo base de .about-vision-section e .about-history-section */
.about-differential-section,
.about-technology-section {
    margin-bottom: 50px; /* Espaço entre as seções */
}

.about-technology-section:last-child {
    margin-bottom: 0; /* Remove a margem da última seção */
}

/* Os títulos e parágrafos já herdam de .about-section-title e .about-vision-section p, etc. */

/* --- Responsividade (já coberta pelas classes genéricas, mas pode ser ajustada se necessário) --- */
@media (max-width: 768px) {
    .about-differential-technology-wrapper {
        padding: 50px 15px;
    }
}

@media (max-width: 480px) {
    .about-differential-technology-wrapper {
        padding: 30px 10px;
    }
}

/* Variáveis de Cores (para a página de Contato) */
:root {
    --bg-color: #f8f8f8;
    --card-bg-color: #ffffff;
    --primary-text-color: #ffffff;
    --secondary-text-color: #0B2559;
    --green-accent: #52923E;
    --blue-accent: #2979ff;
    --input-bg-color: #f0f2f5;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --green-light: #e6f6e8; /* Cor de fundo para o cabeçalho do formulário */
}

/* Reset Básico & Fontes (certifique-se que já esteja no seu style.css) */
/*
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-text-color);
    line-height: 1.6;
    padding: 40px 20px;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    color: var(--primary-text-color);
    font-weight: 700;
}
*/

/* Wrapper principal da página de Contato */
.contact-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--card-bg-color); /* Fundo branco para a seção principal */
    border-radius: 10px;
    box-shadow: 0 4px 20px var(--shadow-color);
    padding: 40px;
}

/* Cabeçalho da página de Contato */
.contact-header {
    text-align: center;
    margin-bottom: 40px;
}

.contact-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--about-heading-color);
}

.contact-header p {
    font-size: 1.7rem;
    color: var(--secondary-text-color);
    max-width: 700px;
    margin: 0 auto;
}

/* Layout de Conteúdo (Formulário e Informações) */
.contact-content {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* Permite quebrar linha em telas menores */
}

/* Estilo para cards/blocos */
.card {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--shadow-color);
    padding: 25px;
    border: 1px solid var(--border-color); /* Borda sutil como no design */
}

/* Coluna do Formulário */
.contact-form-container {
    flex: 2; /* Ocupa mais espaço */
    min-width: 300px; /* Garante tamanho mínimo */
}

.form-intro {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--green-light);
    border: 1px solid #d4edda; /* Borda mais clara para o bloco verde */
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 30px;
    color: var(--green-accent);
}

.form-intro i {
    font-size: 1.8rem;
    color: var(--green-accent);
}

.form-intro h2 {
    font-size: 1.1rem;
    font-weight: 400; /* Texto normal para a maior parte */
    color: var(--green-accent);
}

.form-intro .bold-text {
    font-weight: 600; /* Apenas partes específicas em negrito */
}

/* Grupos de Formulário */
.form-group {
    margin-bottom: 20px;
	display:flex;
	flex-direction: column;
}

.form-group label {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--about-heading-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    font-size: 1rem;
    color: var(--primary-text-color);
    transition: border-color 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--secondary-text-color);
    opacity: 0.7;
}

.form-group input:focus,
.form-group textarea:focus,
.custom-select select:focus {
    outline: none;
    border-color: var(--green-accent);
    box-shadow: 0 0 0 3px rgba(61, 168, 73, 0.2);
}

.form-group textarea {
    resize: vertical; /* Permite redimensionar apenas verticalmente */
    min-height: 120px;
}

/* Custom Select Dropdown */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select select {
    appearance: none; /* Remove a seta padrão do select */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: var(--input-bg-color);
    font-size: 1rem;
    color: var(--about-heading-color);
    cursor: pointer;
    padding-right: 40px; /* Espaço para a seta customizada */
}

.custom-select .select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-text-color);
    pointer-events: none; /* Garante que o clique passe para o select */
}


/* ReCAPTCHA */
.recaptcha-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 30px;
    font-size: 0.95rem;
    color: var(--primary-text-color);
}

.recaptcha-group input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg-color);
    cursor: pointer;
    position: relative;
    flex-shrink: 0; /* Impede que o checkbox encolha */
}

.recaptcha-group input[type="checkbox"]:checked {
    background-color: var(--green-accent);
    border-color: var(--green-accent);
}

.recaptcha-group input[type="checkbox"]:checked::before {
    content: '\f00c'; /* Font Awesome check icon */
    font-weight: 900;
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.recaptcha-group .recaptcha-refresh-icon {
    font-size: 1.1rem;
    color: var(--secondary-text-color);
    cursor: pointer;
    margin-left: 5px;
}

.recaptcha-group label {
    margin-bottom: 0; /* Remover margin-bottom do label do form-group */
}

/* Botão de Enviar */
.submit-button {
    display: block;
    width: fit-content;
    padding: 12px 60px;
    background-color: var(--green-accent);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 20px auto 0;
}

.submit-button:hover {
    background-color: #328c3d; /* Um tom de verde um pouco mais escuro */
    transform: translateY(-2px);
}

/* Coluna de Informações de Contato */
.contact-info-column {
    flex: 1; /* Ocupa menos espaço que o formulário */
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 280px; /* Garante tamanho mínimo */
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.contact-card .card-icon {
    font-size: 1.8rem;
    color: var(--green-accent);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
}

.contact-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-card .card-content h3 {
    font-size: 1.1rem;
    margin: 0 0 5px 0;
    font-weight: 600;
    color: var(--green-accent);
}

.contact-card .card-content .main-info {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--about-heading-color);
    margin: 0 0 2px 0;
}

.contact-card .card-content .main-info a {
    color: inherit;
    text-decoration: none;
}

.contact-card .card-content .main-info a:hover {
    text-decoration: underline;
}

.contact-card .card-content .sub-info {
    font-size: 1.1rem;
    color: var(--secondary-text-color);
    margin: 0;
}

/* Estilo específico para o card de FAQ */
.faq-card .card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; /* Para ocupar o espaço restante */
}

.faq-card .card-content h3 {
    margin-bottom: 10px;
}

.read-more-button {
    display: inline-block;
    padding: 8px 18px;
    background-color: var(--about-heading-color);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    align-self: flex-start; /* Alinha o botão à esquerda */
}

.read-more-button:hover {
    background-color: #1a5ac9;
    transform: translateY(-1px);
}

/* Seção de Redes Sociais */
.social-media-section {
    text-align: center;
    margin-top: 10px;
    padding: 10px 0;
}

.social-media-section p {
    font-size: 1.2rem;
    color: var(--primary-text-color);
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons a {
    color: var(--primary-text-color);
    font-size: 1.8rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: var(--green-accent); /* Mudar cor no hover */
    transform: translateY(-3px);
}

/* Responsividade */
@media (max-width: 992px) {
    .contact-content {
        flex-direction: column;
    }
    .contact-form-container,
    .contact-info-column {
        flex: auto; /* Ocupam a largura total */
    }
    .contact-page-wrapper {
        padding: 30px 15px;
    }
    .contact-header h1 {
        font-size: 2rem;
    }
    .contact-header p {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .contact-page-wrapper {
        padding: 20px;
    }
    .contact-header h1 {
        font-size: 1.8rem;
    }
    .form-intro {
        flex-direction: column;
        text-align: center;
    }
    .form-intro i {
        margin-bottom: 5px;
    }
    .submit-button {
        width: 100%;
    }
}

/* --- OPORTUNIDADES.PHP: PRIMEIRA SESSÃO - Hero --- */

/* Estilos para a sessão "Oportunidades Hero" */
.oportunidades-hero {
    position: relative;
    min-height: 600px; /* Altura mínima para o layout */
    display: flex;
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: flex-end; /* Alinha o conteúdo à direita */
    padding: 80px 40px; /* Espaçamento interno */

    /* Preparação para a imagem de fundo e overlay */
    /* A cor de fundo base e o gradiente linear simulam o overlay escuro da imagem. */
    background-color: #0F1E3A; /* Cor de fundo escura, base para o overlay */
    background-image: linear-gradient(rgba(15, 30, 58, 0.75), rgba(15, 30, 58, 0.75)); /* Overlay escuro */
    background-size: cover;
    background-position: center;

    /* Para adicionar a imagem de fundo real, descomente a linha abaixo e substitua o caminho: */
     background-image: linear-gradient(rgba(15, 30, 58, 0.75), rgba(15, 30, 58, 0.75)), url('../img/PREDIOS_HOME.png');
}

.oportunidades-content {
    position: relative; /* Para garantir que o conteúdo fique acima do overlay */
    z-index: 2; /* Garante que o conteúdo esteja acima de qualquer pseudo-elemento de overlay */
    width: 100%;
    max-width: 600px; /* Largura máxima para o bloco de texto */
    color: #fff; /* Cor do texto principal */
    text-align: right; /* Alinhamento do texto à direita */
    /* Sem padding-right aqui para evitar conflito com o padding do .oportunidades-hero em telas pequenas */
}

.oportunidades-content h1 {
    font-size: 3.5em; /* Tamanho da fonte para o título principal */
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700; /* Negrito */
}

.oportunidades-content p {
    font-size: 1.5em; /* Tamanho da fonte para o subtítulo */
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 400; /* Normal */
}

.oportunidades-content .highlight {
    color: #FFD700; /* Cor amarela/dourada para o texto destacado */
    font-weight: 700; /* Negrito para o destaque */
}

.btn-primary:hover {
    background-color: #eee; /* Cor de fundo levemente mais escura no hover */
    color: #0F1E3A;
}

/* Media Queries para responsividade */
@media (max-width: 992px) {
    .oportunidades-hero {
        padding: 60px 30px;
        justify-content: center; /* Centraliza o conteúdo em telas menores */
        text-align: center; /* Alinha o texto ao centro */
    }
    .oportunidades-content {
        max-width: 80%; /* Aumenta a largura em telas médias */
        text-align: center; /* Alinha o texto ao centro */
    }
    .oportunidades-content h1 {
        font-size: 2.8em;
    }
    .oportunidades-content p {
        font-size: 1.3em;
    }
}

@media (max-width: 768px) {
    .oportunidades-hero {
        padding: 50px 20px;
    }
    .oportunidades-content {
        max-width: 90%; /* Aumenta a largura em telas menores */
    }
    .oportunidades-content h1 {
        font-size: 2.2em;
    }
    .oportunidades-content p {
        font-size: 1.1em;
    }
    .btn-primary {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .oportunidades-hero {
        min-height: 450px;
        padding: 40px 15px;
    }
    .oportunidades-content h1 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    .oportunidades-content p {
        font-size: 1em;
        margin-bottom: 25px;
    }
    .btn-primary {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}

/* --- OPORTUNIDADES.PHP: SEGUNDA SESSÃO - Invista em projetos imobiliários selecionados --- */

.oportunidades-investimento-selecionado {
    position: relative;
    width: 100%;
    min-height: 200px; /* Altura mínima da seção */
    display: flex;
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    text-align: center;
    overflow: hidden;
    
    /* FUNDO AZUL COM GRADIENTE, conforme solicitado e visto nos outros blocos principais */
    background: linear-gradient(to right, #1b305a, #2a5796); /* Exemplo de gradiente azul */
    /* Alternativa de gradiente mais vibrante se preferir: */
    /* background: linear-gradient(135deg, #0F1E3A 0%, #1B4889 100%); */ 
}

/* O overlay não é mais necessário para um fundo de gradiente de cor */
/* .oportunidades-investimento-overlay {
    display: none;
} */

.oportunidades-investimento-content {
    position: relative;
    z-index: 2; /* Garante que o texto fique acima do fundo */
    padding: 0 20px; /* Padding lateral */
}

.oportunidades-investimento-content h2 {
    font-size: 3.0em;
    font-weight: 700; /* Negrito */
    color: #FFFFFF; /* Texto branco */
    line-height: 1.2;
    margin: 0; /* Remover margem padrão */
}

/* --- Responsividade --- */
@media (max-width: 768px) {
    .oportunidades-investimento-selecionado {
        min-height: 300px; /* Reduz altura em telas menores */
    }
    .oportunidades-investimento-content h2 {
        font-size: clamp(2em, 6vw, 3.5em); /* Ajusta o tamanho da fonte */
    }
}

@media (max-width: 480px) {
    .oportunidades-investimento-selecionado {
        min-height: 250px;
    }
    .oportunidades-investimento-content h2 {
        font-size: clamp(1.8em, 7vw, 2.5em);
    }
}

/* --- OPORTUNIDADES.PHP: TERCEIRA SESSÃO - Equipe e Parceiros --- */
/* (Este CSS é o mesmo utilizado na página 'about.php' para garantir consistência visual) */

.equipe-parceiros-section {
    background: linear-gradient(to right, #0F1F3D, #1E3A6B);
    padding: 80px 20px;
    color: white;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.content-wrapper {
    /* Define a largura máxima para o bloco de conteúdo (texto e área das imagens) */
    max-width: 1200px;
    /* Centraliza o wrapper de conteúdo na página, garantindo que não exceda a largura máxima */
    margin: 0 auto;
}

.equipe-parceiros-section h2 {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.equipe-parceiros-section p {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 650px;
}

.image-placeholder-area {
    width: 100%;
    min-height: 120px;
    margin-top: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;  /* Ajuste este valor conforme necessário */
}

/* Responsividade: Ajustes para telas menores */
@media (max-width: 992px) {
    .equipe-parceiros-section h2 {
        font-size: 2.8rem;
    }
    .equipe-parceiros-section p {
        font-size: 1.15rem;
        /* Permite que o parágrafo ocupe mais largura em telas menores */
        max-width: 100%;
    }
    .image-placeholder-area {
        /* Centraliza as imagens em telas menores se elas precisarem de mais espaço ou para melhor layout */
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .equipe-parceiros-section {
        padding: 60px 15px;
    }
    .equipe-parceiros-section h2 {
        font-size: 2.2rem;
        margin-bottom: 20px;
    }
    .equipe-parceiros-section p {
        font-size: 1rem;
    }
    .image-placeholder-area {
        margin-top: 40px;
        min-height: 100px;
    }
}

@media (max-width: 480px) {
    .equipe-parceiros-section {
        padding: 40px 10px;
    }
    .equipe-parceiros-section h2 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    .equipe-parceiros-section p {
        font-size: 0.9rem;
    }
    .image-placeholder-area {
        margin-top: 30px;
        min-height: 80px;
    }
}

/* --- OPORTUNIDADES.PHP: QUARTA SESSÃO - Vitrine de Oportunidades --- */

/* Variáveis para cores */
:root {
    --primary-blue-vitrine: #0B2559; /* Azul escuro para títulos e textos principais */
    --accent-green-vitrine: #52923E; /* Verde para destaques e botões de ação "aberta" */
    --accent-dark-green-vitrine: #52923E; /* Verde mais escuro para hover */
    --card-bg-vitrine: #ffffff; /* Fundo branco para os cartões */
    --light-grey-bg-vitrine: #eef2f6; /* Fundo geral da seção */
    --text-color-dark-vitrine: #0B2559; /* Cor de texto geral */
    --text-color-light-vitrine: #0B2559; /* Cor de texto secundária/detalhes */
    --border-light-vitrine: #e0e0e0; /* Cor de borda leve */
    --closed-button-bg-vitrine: #4a678d; /* Azul mais escuro para botão "encerrada" */
    --closed-button-hover-bg-vitrine: #3b506e; /* Azul ainda mais escuro para hover */
    --whatsapp-green-vitrine: #52923E; /* Verde do WhatsApp */
}

.investment-opportunities-section {
    background-color: var(--light-grey-bg-vitrine);
    padding: 60px 0; /* Ajuste o padding conforme necessário */
    text-align: center;
    position: relative; /* Para o botão fixo do WhatsApp */
}

.accept-terms-payment
{
    color: var(--about-heading-color);
}

.investment-opportunities-title {
    font-size: 2.5rem;
    color: var(--primary-blue-vitrine);
    margin-bottom: 40px;
    font-weight: 700;
}

/* Contêiner do Carrossel (para os cartões e setas) */
.carousel-container-vitrine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Espaçamento entre setas e cards */
    max-width: 1200px; /* Largura máxima para 3 cards + gaps */
    margin: 0 auto 40px auto;
    position: relative; /* Para posicionamento absoluto das setas */
    padding: 0 40px; /* Espaço para as setas laterais */
    overflow: hidden; /* Esconde o que excede a largura */
}

/* Estilo das setas de navegação */
.nav-arrow-vitrine {
    background-color: transparent;
    border: none; /* Removido a borda para ficar igual ao mockup */
    /* border: 1px solid var(--border-light-vitrine); */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary-blue-vitrine); /* Cor do ícone */
    transition: background-color 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    outline: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.nav-arrow-vitrine:hover {
    color: var(--accent-green-vitrine); /* Mudar a cor do ícone no hover */
    /* background-color: var(--primary-blue-vitrine); */
    /* color: #fff; */
    /* border-color: var(--primary-blue-vitrine); */
}

.left-arrow-vitrine {
    left: 0;
}

.right-arrow-vitrine {
    right: 0;
}

/* Estilo para os SVGs dentro das setas */
.nav-arrow-vitrine svg {
    width: 24px;
    height: 24px;
    stroke: currentColor; /* Faz o SVG usar a cor do pai */
}


/* Wrapper para os cartões de investimento */
.investment-cards-wrapper-vitrine {
    display: flex;
    gap: 30px; /* Espaçamento entre os cartões */
    overflow-x: scroll; /* ATENÇÃO: ESSA LINHA É CRUCIAL PARA HABILITAR A ROLAGEM */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
    scrollbar-width: none; /* Esconde a scrollbar no Firefox */
    -ms-overflow-style: none; /* Esconde a scrollbar no IE/Edge */
    width: auto; /* Permite que o conteúdo determine a largura, se exceder */
    flex-wrap: nowrap; /* Garante que os cards não quebrem linha */
    /* Removemos width: 100%; para que o conteúdo possa exceder o contêiner e rolar */
}

/* Esconde a scrollbar para Webkit browsers (Chrome, Safari) */
.investment-cards-wrapper-vitrine::-webkit-scrollbar {
    display: none;
}

/* Estilo individual do cartão de investimento */
.investment-card-vitrine {
    background-color: var(--card-bg-vitrine);
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: calc(33.333% - 20px); /* Para 3 cards com 30px de gap, (30*2)/3 */
    min-width: 320px; /* Garante um tamanho mínimo para o card */
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0; /* Impede que os cartões encolham */
    /* scroll-snap-align: start; */
}

.investment-card-vitrine:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.card-image-vitrine {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--border-light-vitrine);
}

.card-content-vitrine {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
}

.card-title-vitrine {
    font-size: 1.8rem;
    color: var(--accent-green-vitrine);
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
}

.card-detail-vitrine {
    font-size: 1.3rem;
    margin-bottom: 1px;
    line-height: 1.1;
    color: var(--text-color-dark-vitrine);
}

.card-detail-vitrine strong {
    font-weight: 600;
    color: var(--primary-blue-vitrine);
}

.features-list-vitrine {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    margin-bottom: 25px;
    flex-grow: 1; /* Empurra o botão para a parte inferior */
    color: var(--text-color-dark-vitrine);
}

.features-list-vitrine li {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--text-color-light-vitrine);
}

.icon-vitrine {
    color: var(--accent-green-vitrine); /* Cor do ícone unicode/emoji */
    margin-right: 12px;
    font-size: 1.1rem;
    min-width: 20px;
}

.arrow-icon-vitrine {
    margin-left: auto; /* Empurra a seta para a direita */
    color: var(--accent-green-vitrine);
    font-size: 0.8rem;
}

.investors-vitrine {
    font-weight: 300; /* Para o texto de investidores */
    color: var(--primary-blue-vitrine) !important; /* Mais forte */
}

/* Estilo dos botões de ação nos cartões */
.cta-button-vitrine {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.3;
    text-align: center;
    box-sizing: border-box;
    outline: none;
}

.status-open-vitrine {
    background-color: var(--accent-green-vitrine);
    color: #fff;
}

.status-open-vitrine:hover {
    background-color: var(--accent-dark-green-vitrine);
}

.status-closed-vitrine {
    background-color: var(--closed-button-bg-vitrine);
    color: #fff;
}

.status-closed-vitrine:hover {
    background-color: var(--closed-button-hover-bg-vitrine);
}

/* Botão principal abaixo dos cartões */
.bottom-main-button-vitrine {
    background-color: var(--accent-green-vitrine);
    color: #fff;
    padding: 18px 40px;
    border: none;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 40px;
    outline: none;
}

.bottom-main-button-vitrine:hover {
    background-color: var(--accent-dark-green-vitrine);
}

/* Botão flutuante do WhatsApp (fixo na tela) */
.whatsapp-button-fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--whatsapp-green-vitrine);
    color: #fff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-button-fixed:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.whatsapp-button-fixed svg {
    width: 30px;
    height: 30px;
    fill: currentColor; /* Usa a cor do pai (branco) */
}


/* ============================
   Media Queries para Responsividade (Vitrine)
   ============================ */

/* Telas médias (e.g., tablets em modo paisagem, desktops menores) */
@media (max-width: 1200px) {
    .carousel-container-vitrine {
        max-width: 800px; /* Reduz largura para 2 cards */
        padding: 0 20px; /* Ajusta padding */
    }
    .investment-card-vitrine {
        width: calc(50% - 15px); /* Para 2 cards com 30px de gap */
        min-width: 300px;
    }
    .investment-cards-wrapper-vitrine {
        gap: 20px; /* Reduz o gap */
    }
    .nav-arrow-vitrine {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

/* Telas menores (e.g., tablets em modo retrato, laptops pequenos) */
@media (max-width: 900px) {
    .carousel-container-vitrine {
        max-width: 400px; /* Para 1 card */
        padding: 0 10px; /* Menor padding */
    }
    .investment-card-vitrine {
        width: 100%; /* Ocupa largura total */
        min-width: unset; /* Remove min-width para flexibilidade */
        max-width: 350px; /* Limita a largura em telas muito grandes para 1 card */
    }
    .investment-cards-wrapper-vitrine {
        justify-content: center; /* Centraliza o card */
        gap: 0; /* Remove gap quando só tem 1 card */
    }
    .investment-opportunities-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    .nav-arrow-vitrine {
        font-size: 1.1rem;
    }
}

/* Telas muito pequenas (e.g., smartphones) */
@media (max-width: 576px) {
    .investment-opportunities-section {
        padding: 40px 0;
    }
    .investment-opportunities-title {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }
    .carousel-container-vitrine {
        padding: 0 5px; /* Padding mínimo */
    }
    .investment-card-vitrine {
        width: 95%; /* Ocupa quase toda a largura */
    }
    .card-content-vitrine {
        padding: 20px;
    }
    .card-title-vitrine {
        font-size: 1.2rem;
    }
    .card-detail-vitrine, .features-list-vitrine li {
        font-size: 0.85rem;
    }
    .cta-button-vitrine {
        font-size: 0.9rem;
        padding: 12px 15px;
    }
    .bottom-main-button-vitrine {
        font-size: 1rem;
        padding: 15px 30px;
        margin-top: 30px;
    }
    .whatsapp-button-fixed {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-button-fixed svg {
        width: 25px;
        height: 25px;
    }
}

/* --- OPORTUNIDADES.PHP: SEXTA SESSÃO - Últimas Notícias --- */

.news-section {
    width: 100%;
    max-width: 1200px; /* Largura máxima para o conteúdo da seção */
    margin: 60px auto; /* Centraliza a seção e adiciona margem superior/inferior */
    padding: 40px 20px; /* Espaçamento interno */
    box-sizing: border-box; /* Garante que padding seja incluído na largura */
    background-color: #f7f9fc; /* Cor de fundo da seção */
    color: #1a202c; /* Cor de texto padrão */
    border-radius: 15px; /* Bordas arredondadas para a seção */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Sombra suave para destacar a seção */
}

.news-header h1 {
    font-size: 2.8em;
    font-weight: 700;
    margin-bottom: 10px;
    color: #0B2559; /* Cor azul escuro para o título */
    text-align: center; /* Centraliza o título */
}

.news-header p {
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 40px;
    color: #0B2559; /* Azul ligeiramente mais claro para o subtítulo */
    text-align: center; /* Centraliza o subtítulo */
}

.news-grid {
    display: grid;
    /* Adaptação para exibir 3 cards em telas maiores, 2 em médias e 1 em pequenas */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Espaçamento entre os cards */
}

.news-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

.news-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
}

.news-date {
    font-size: 0.85em;
    color: #0B2559;
    margin-bottom: 10px;
}

.news-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #0B2559;
    margin-bottom: 10px;
    line-height: 1.3;
}

.news-description {
    font-size: 1em;
    color: #0B2559;
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1; /* Permite que a descrição ocupe o espaço disponível */
}

.read-more-button {
    display: inline-block;
    background-color: #0B2559;
    color: white;
    padding: 10px 20px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    text-align: center;
    transition: background-color 0.2s ease-in-out;
    margin: auto auto 0;
    margin-top:10px;
}

.read-more-button:hover {
    background-color: #45a049; /* Verde mais escuro no hover */
}

/* --- Responsividade para a seção de Últimas Notícias --- */
@media (max-width: 992px) {
    .news-section {
        max-width: 900px;
        margin: 50px auto;
        padding: 30px 15px;
    }
    .news-header h1 {
        font-size: 2.2em;
    }
    .news-header p {
        font-size: 1.1em;
        margin-bottom: 30px;
    }
    .news-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2 colunas em telas médias */
        gap: 25px;
    }
    .news-card img {
        height: 180px;
    }
    .news-content {
        padding: 18px;
    }
    .news-title {
        font-size: 1.1em;
    }
    .news-description {
        font-size: 0.95em;
    }
    .read-more-button {
        padding: 9px 18px;
        font-size: 0.85em;
    }
}

@media (max-width: 768px) {
    .news-section {
        max-width: 100%;
        margin: 40px 0;
        padding: 25px 10px;
    }
    .news-header h1 {
        font-size: 1.8em;
    }
    .news-header p {
        font-size: 1em;
        margin-bottom: 25px;
    }
    .news-grid {
        grid-template-columns: 1fr; /* 1 coluna em telas pequenas */
        gap: 20px;
    }
    .news-card img {
        height: 160px;
    }
    .news-content {
        padding: 15px;
    }
    .news-title {
        font-size: 1em;
    }
    .news-description {
        font-size: 0.9em;
    }
    .read-more-button {
        padding: 8px 15px;
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    .news-section {
        margin: 30px 0;
    }
    .news-header h1 {
        font-size: 1.5em;
    }
    .news-header p {
        font-size: 0.9em;
        margin-bottom: 20px;
    }
    .news-card img {
        height: 140px;
    }
    .news-content {
        padding: 12px;
    }
}

/* --- OPORTUNIDADES.PHP: SÉTIMA SESSÃO - FAQ Interativo --- */

.faq-section-interactive {
    background-color: #f0f2f5; /* Cor de fundo similar à imagem */
    color: #2c3e50; /* Cor do texto principal */
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

.faq-container-interactive {
    background-color: #ffffff; /* Fundo do container para destacar */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
}

.header-title-faq {
    font-size: 2.5em;
    font-weight: bold;
    color: #0B2559;
    margin-bottom: 5px;
    text-align: center;
}

.header-subtitle-faq {
    font-size: 1.6em;
    color: #0B2559;
    margin-bottom: 30px;
    font-weight: 600;
    text-align: center;
}

.faq-item-interactive {
    margin-bottom: 15px;
    border-radius: 10px; /* Arredondamento dos "balozinhos" */
    overflow: hidden; /* Garante que o border-radius funcione bem com a resposta */
    background-color: #ffffff; /* Fundo branco para os itens */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil para os itens */
    transition: box-shadow 0.3s ease;
}

.faq-item-interactive:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.faq-question-interactive {
    background-color: #ffffff; /* Cor de fundo do "balão" da pergunta */
    padding: 18px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
    font-weight: 500;
    color: #0B2559;
    border-bottom: 1px solid #eee; /* Linha sutil entre pergunta e resposta se estiver aberta */
    transition: background-color 0.3s ease;
}

.faq-question-interactive:hover {
    background-color: #f8f8f8; /* Leve mudança ao passar o mouse */
}

.faq-question-interactive i {
    margin-left: 15px;
    transition: transform 0.3s ease;
    color: #555;
}

.faq-question-interactive.active i {
    transform: rotate(180deg); /* Gira a seta para cima quando a resposta está aberta */
}

.faq-answer-interactive {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: #fdfdfd; /* Cor de fundo da resposta */
    color: #555;
    line-height: 1.6;
}

.faq-answer-interactive.open {
    max-height: 200px; /* Altura máxima arbitrária para permitir transição (ajuste se necessário) */
    padding: 15px 25px 20px; /* Padding quando a resposta está aberta */
    color: #0B2559;
}

/* --- Responsividade para a seção de FAQ Interativo --- */
@media (max-width: 768px) {
    .faq-section-interactive {
        padding: 40px 15px;
    }
    .faq-container-interactive {
        padding: 20px;
    }
    .header-title-faq {
        font-size: 2em;
    }
    .header-subtitle-faq {
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    .faq-question-interactive {
        padding: 15px 20px;
        font-size: 1em;
    }
    .faq-answer-interactive {
        padding: 0 20px;
    }
    .faq-answer-interactive.open {
        padding: 10px 20px 15px;
    }
}

@media (max-width: 480px) {
    .faq-section-interactive {
        padding: 30px 10px;
    }
    .faq-container-interactive {
        padding: 15px;
    }
    .header-title-faq {
        font-size: 1.6em;
    }
    .header-subtitle-faq {
        font-size: 1em;
        margin-bottom: 15px;
    }
    .faq-question-interactive {
        padding: 12px 15px;
        font-size: 0.9em;
    }
    .faq-answer-interactive {
        padding: 0 15px;
    }
    .faq-answer-interactive.open {
        padding: 8px 15px 12px;
    }
}

/* --- ESTILOS GERAIS PARA A PÁGINA DO CARRINHO --- */

.shopping-cart-page-section {
    background-color: var(--light-grey-bg-vitrine); /* Fundo cinza claro */
    padding: 60px 20px;
    color: var(--text-color-dark-vitrine);
}

.cart-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: var(--card-bg-vitrine); /* Fundo branco para o container principal */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    padding: 40px;
}

.cart-header-area {
    text-align: center;
    margin-bottom: 40px;
    display: flex; /* Adicionado display flex para os elementos do cabeçalho */
    flex-direction: column; /* Coloca os itens em coluna */
    align-items: center; /* Centraliza os itens */
}

.cart-main-title {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-blue-vitrine);
    margin-bottom: 10px;
}

/* Novo contêiner para os botões de cabeçalho */
.cart-header-buttons-container {
    display: flex;
    gap: 10px; /* Espaço entre os botões */
    margin-bottom: 20px; /* Margem entre os botões e a descrição */
}

.cart-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 20px; /* Borda arredondada */
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    color: white; /* Texto branco para todos os botões de cabeçalho */
}

.cart-btn-green {
    background-color: #52923E; /* Verde específico do modelo */
}

.cart-btn-green:hover {
    background-color: #52923E;
}

.cart-btn-dark-blue {
    background-color: #2c3e50; /* Azul escuro específico do modelo */
}

.cart-btn-dark-blue:hover {
    background-color: #23313f;
}

.cart-description-text {
    font-size: 1.1em;
    color: var(--text-color-light-vitrine);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
}

/* --- TABELA DE ITENS DO CARRINHO --- */
.cart-table-container {
    overflow-x: auto; /* Permite rolagem horizontal em telas pequenas se a tabela for muito larga */
    margin-bottom: 30px;
    border: 1px solid var(--border-light-vitrine);
    border-radius: 8px;
}

.cart-items-display-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px; /* Garante que a tabela não fique muito estreita em telas pequenas */
    font-size: 1.2em;
}

.cart-items-display-table th,
.cart-items-display-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light-vitrine);
}

.cart-items-display-table th {
    background-color: #2c3e50; /* COR AZUL PARA O HEADER DA TABELA, CONFORME SOLICITADO */
    color: white; /* Cor do texto do cabeçalho */
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 600;
}

.cart-items-display-table tbody tr:last-child td {
    border-bottom: none; /* Remove a borda inferior da última linha */
}

.product-info-cell {
    font-weight: 500;
    color: var(--primary-blue-vitrine);
}

.product-name-link {
    color: var(--accent-green-vitrine);
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-name-link:hover {
    color: var(--accent-dark-green-vitrine);
}

.product-price,
.product-purchase-price,
.product-subtotal-value {
    font-weight: 500;
    color: var(--text-color-dark-vitrine);
}

.product-subtotal-value {
    font-weight: 700; /* Mais negrito para o subtotal */
}

.product-fees {
    color: var(--text-color-light-vitrine);
}

/* --- ALINHAMENTO GERAL DE TEXTO NA TABELA --- */
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}

/* --- RESUMO DO CARRINHO E BOTÃO CONTINUAR COMPRANDO --- */
.cart-summary-area {
    display: flex;
    justify-content: flex-end; /* Alinha o conteúdo à direita */
    align-items: center;
    gap: 30px; /* Espaço entre o total e o botão */
    margin-bottom: 50px;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha em telas pequenas */
}

.cart-total-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.cart-total-label {
    font-size: 1.1em;
    color: var(--text-color-light-vitrine);
    margin-bottom: 5px;
    font-weight: 600;
}

.cart-total-value {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent-green-vitrine);
}

.continue-shopping-button {
    background-color: #52923E; /* COR VERDE PARA O BOTÃO, CONFORME SOLICITADO */
    color: white;
    border: none; /* Removido a borda para ficar igual ao modelo */
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.continue-shopping-button:hover {
    background-color: #45a049; /* Verde mais escuro no hover */
    color: white;
}

/* --- PAINEL DE FATORES DE RISCO --- */
.cart-risk-factors-panel {
    background-color: #fdfcee; /* Fundo amarelo claro para destaque (atenção) */
    border: 1px solid #ffeeba; /* Borda amarela */
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 50px;
    text-align: left;
}

.risk-factors-panel-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #856404; /* Cor escura para o título (alerta) */
    margin-bottom: 15px;
}

.risk-factors-panel-text {
    font-size: 0.95em;
    line-height: 1.6;
    color: #856404; /* Cor de texto para o alerta */
    margin-bottom: 20px;
}

.risk-factors-acceptance {
    display: flex;
    align-items: flex-start;
    font-size: 1em;
    color: #856404;
}

.acceptance-checkbox {
    margin-right: 10px;
    margin-top: 3px; /* Alinha o checkbox com o texto */
    accent-color: var(--accent-green-vitrine); /* Cor do checkbox */
}

/* --- RODAPÉ DE AÇÕES (BOTÃO FINALIZAR) --- */
.cart-actions-footer {
    text-align: center;
}

.confirm-payment-button {
    background-color: var(--accent-green-vitrine);
    color: var(--card-bg-vitrine);
    padding: 18px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%; /* Ocupa a largura total para ser bem visível */
    max-width: 400px; /* Limita a largura em telas muito grandes */
    border-radius: 60px;
}

.confirm-payment-button:hover {
    background-color: var(--accent-dark-green-vitrine);
}

/* --- RESPONSIVIDADE PARA O CARRINHO --- */
@media (max-width: 992px) {
    .cart-container {
        padding: 30px;
    }
    .cart-main-title {
        font-size: 2em;
    }
    .cart-description-text {
        font-size: 1em;
    }
    .cart-items-display-table th,
    .cart-items-display-table td {
        padding: 12px 15px;
    }
    .cart-summary-area {
        flex-direction: column; /* Pilha em telas menores */
        align-items: flex-end; /* Alinha à direita */
        gap: 20px;
    }
    .continue-shopping-button {
        width: 100%;
        max-width: 250px; /* Limita a largura do botão continuar comprando */
    }
    .cart-risk-factors-panel {
        padding: 25px;
    }
    .confirm-payment-button {
        font-size: 1.1em;
        padding: 15px 30px;
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .shopping-cart-page-section {
        padding: 40px 15px;
    }
    .cart-container {
        padding: 20px;
    }
    .cart-main-title {
        font-size: 1.8em;
    }
    .cart-description-text {
        font-size: 0.9em;
    }
    .cart-items-display-table {
        min-width: 500px; /* Permite mais quebras de linha em células pequenas */
    }
    .quantity-input {
        width: 50px;
        padding: 6px 3px;
    }
    .cart-risk-factors-panel {
        padding: 25px;
    }
    .risk-factors-panel-title {
        font-size: 1.3em;
    }
    .risk-factors-panel-text,
    .risk-factors-acceptance {
        font-size: 0.9em;
    }
    .confirm-payment-button {
        font-size: 1em;
        padding: 12px 25px;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .shopping-cart-page-section {
        padding: 30px 10px;
    }
    .cart-container {
        padding: 15px;
        box-shadow: none; /* Remove sombra em telas muito pequenas para mais espaço */
    }
    .cart-header-area {
        margin-bottom: 30px;
    }
    .cart-main-title {
        font-size: 1.5em;
    }
    .cart-description-text {
        font-size: 0.85em;
    }
    .cart-items-display-table {
        min-width: 400px; /* Para garantir que o conteúdo da tabela ainda seja legível */
    }
    .cart-items-display-table th,
    .cart-items-display-table td {
        padding: 10px;
        font-size: 0.8em;
    }
    .product-name-link {
        font-size: 0.9em;
    }
    .quantity-input {
        width: 45px;
    }
    .cart-summary-area {
        gap: 15px;
    }
    .cart-total-label {
        font-size: 1em;
    }
    .cart-total-value {
        font-size: 1.5em;
    }
    .continue-shopping-button {
        font-size: 0.9em;
        padding: 10px 20px;
    }
    .cart-risk-factors-panel {
        padding: 15px;
    }
    .risk-factors-panel-title {
        font-size: 1.2em;
    }
    .risk-factors-panel-text,
    .risk-factors-acceptance {
        font-size: 0.8em;
    }
    .confirm-payment-button {
        font-size: 0.9em;
        padding: 10px 20px;
        max-width: 250px;
    }
}

.quantity-input {
    width: 60px;
    padding: 8px 5px;
    border: 1px solid var(--border-light-vitrine);
    border-radius: 5px;
    text-align: center;
    font-size: 0.9em;
}

/* --- OITAVA SESSÃO: TELA DE PAGAMENTO --- */

/* Variáveis de cores baseadas na imagem fornecida e suas variáveis globais */
:root {
    /* Mapeando as variáveis globais para a seção de pagamento, para consistência */
    --primary-blue-payment: var(--color-dark-blue); /* Azul escuro para títulos e textos principais */
    --light-gray-bg-payment: #f8f9fa; /* Um cinza muito claro para o background da seção */
    --dark-gray-text-payment: #34495e; /* Para a maioria do texto do corpo */
    --medium-gray-text-payment: #0B2559; /* Para texto secundário/descrições */
    --green-accent-payment: var(--color-green-accent); /* Para elementos ativos e botões principais */
    --green-accent-dark-payment: #218838; /* Verde mais escuro para hover */
    --input-bg-light-payment: #e9ecef; /* Cinza claro para fundos de input */
    --border-color-payment: #dee2e6; /* Cor padrão para bordas */
    --link-blue-payment: var(--color-dark-blue); /* Usando o azul primário para links */
    --header-dark-blue-payment: #0B2559; /* Azul mais escuro para a seção de resumo do pedido (novo) */
    --bitcoin-orange-payment: #F7931A; /* Laranja específico do Bitcoin (novo) */
}

.payment-screen-section {
    background-color: var(--light-gray-bg-payment);
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    color: var(--dark-gray-text-payment);
}

.payment-main-container {
    background-color: #fff;
    padding: 40px 50px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 800px; /* Largura máxima do container principal */
    width: 100%;
    box-sizing: border-box;
}

.payment-header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.payment-main-title {
    color: var(--primary-blue-payment);
    font-size: 2.2em;
    margin: 0; /* Remover margem padrão */
    font-weight: 700;
}

.payment-qa-button {
    background-color: var(--primary-blue-payment);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.payment-qa-button:hover {
    background-color: #3f556b;
}

.payment-intro-text {
    color: var(--medium-gray-text-payment);
    margin-bottom: 30px;
    line-height: 1.5;
    font-size: 1.3em;
}

/* --- Seção de Resumo do Pedido --- */
.payment-order-summary {
    background-color: var(--header-dark-blue-payment); /* Azul escuro específico do resumo */
    color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    font-size: 1.3em;
}

.payment-summary-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1.05em;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.payment-summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95em;
}

.payment-product-link {
    color: #fff;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.payment-product-link:hover {
    color: var(--green-accent-payment);
}

.payment-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-weight: 700;
    font-size: 1.1em;
}

.payment-summary-total .payment-total-label {
    color: var(--green-accent-payment);
    text-transform: uppercase;
}

.payment-return-button {
    background-color: var(--green-accent-payment);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9em;
    min-width: 180px;
    transition: background-color 0.2s ease;
    display: block;
    margin: 0 auto;
}

.payment-button-container
{
    margin-top: 50px;
}

.payment-button-container a {
    text-decoration: none;
}

.payment-return-button:hover {
    background-color: var(--green-accent-dark-payment);
}

/* --- Seção de Métodos de Pagamento --- */
.payment-methods-selection {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.payment-method-card {
    flex: 1;
    border: 2px solid var(--border-color-payment);
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120px; /* Altura fixa para alinhar */
    box-sizing: border-box;
}

.payment-method-card.payment-card-selected {
    border-color: var(--green-accent-payment);
}

.payment-method-card:hover {
    border-color: var(--green-accent-payment);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-method-card svg {
    width: 45px; /* Tamanho dos ícones */
    height: 45px;
    margin-bottom: 10px;
    fill: var(--primary-blue-payment); /* Cor padrão dos ícones */
    transition: fill 0.2s ease;
}
/* Estilização específica para o ícone de Bitcoin dentro da carteira crypto */
.payment-method-card[data-payment-type="crypto"] svg .payment-bitcoin-b {
    fill: var(--bitcoin-orange-payment);
}
/* Para o contorno da carteira, usar a cor padrão */
.payment-method-card[data-payment-type="crypto"] svg .payment-wallet-outline {
    stroke: currentColor; /* Usa a cor do elemento pai */
}

.payment-method-card.payment-card-selected svg {
    fill: var(--green-accent-payment); /* Ícone fica verde quando selecionado */
}

.payment-method-card span {
    font-weight: 600;
    color: var(--dark-gray-text-payment);
    font-size: 0.95em;
}

/* --- Seção de Detalhes do Pagamento (campos dinâmicos) --- */
.payment-details-section {
    display: flex;
    gap: 30px; /* Espaço entre os blocos (para desktop) */
}

.payment-details-block {
    flex: 1; /* Faz cada bloco ocupar espaço igual */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: opacity 0.3s ease;
}

.payment-details-block.payment-details-active {
    opacity: 1; /* Opacidade total para o bloco ativo */
    pointer-events: all; /* Permite interação */
}

.payment-details-block label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-gray-text-payment);
    font-size: 0.9em;
    text-transform: uppercase; /* Como no modelo */
}

.payment-details-block input[type="text"],
.payment-details-block input[type="number"],
.payment-details-block select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color-payment);
    border-radius: 5px;
    background-color: var(--input-bg-light-payment);
    font-size: 0.95em;
    color: var(--dark-gray-text-payment);
    box-sizing: border-box;
}

.payment-details-block input:focus,
.payment-details-block select:focus {
    outline: none;
    border-color: var(--primary-blue-payment);
    box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.2);
}

.payment-details-block .payment-input-group-inline {
    display: flex;
    gap: 10px;
}

.payment-details-block .payment-input-group-inline > div {
    flex: 1;
}

/* Estilos específicos para PIX */
.payment-qr-code-text {
    text-align: center;
    margin-bottom: 10px;
    color: var(--medium-gray-text-payment);
    font-size: 0.85em;
    text-transform: uppercase;
}

.payment-qr-code-placeholder {
    width: 150px;
    height: 150px;
    background-color: #f0f0f0;
    border: 1px dashed var(--border-color-payment);
    margin: 10px auto;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--medium-gray-text-payment);
    font-size: 0.8em;
    text-align: center;
}

.payment-copy-input-group {
    display: flex;
    align-items: center;
}
.payment-copy-input-group input {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.payment-copy-input-group .payment-copy-button {
    padding: 12px 15px;
    background-color: var(--input-bg-light-payment);
    border: 1px solid var(--border-color-payment);
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 1.2em;
    color: var(--primary-blue-payment);
    transition: background-color 0.2s ease;
}
.payment-copy-input-group .payment-copy-button:hover {
    background-color: var(--border-color-payment);
}

/* Checkbox de Salvar Cartão */
.payment-save-card-checkbox {
    margin-top: 15px;
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: var(--dark-gray-text-payment);
}

.payment-save-card-checkbox input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2); /* Aumenta um pouco o checkbox */
    accent-color: var(--primary-blue-payment); /* Cor azul quando marcado */
}

/* Termos e Condições */
.payment-terms-conditions {
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    color: var(--dark-gray-text-payment);
    justify-content: center;
}

.payment-terms-conditions input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    accent-color: var(--primary-blue-payment);
}

.payment-terms-conditions a {
    color: var(--accent-green-vitrine);
    text-decoration: none;
    font-weight: 500;
}

.payment-terms-conditions a:hover {
    text-decoration: underline;
}

/* Botão Finalizar Pagamento */
.payment-final-button {
    width: 100%;
    padding: 15px;
    background-color: var(--green-accent-payment);
    color: #fff;
    border: none;
    border-radius: 40px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.payment-final-button:hover {
    background-color: var(--green-accent-dark-payment);
}

/* --- RESPONSIVIDADE PARA A SEÇÃO DE PAGAMENTO --- */
@media (max-width: 768px) {
    .payment-main-container {
        padding: 30px 20px;
    }
    .payment-main-title {
        font-size: 1.8em;
    }
    .payment-qa-button {
        padding: 6px 15px;
        font-size: 0.8em;
    }
    .payment-intro-text {
        font-size: 0.9em;
    }
    .payment-order-summary {
        padding: 20px;
    }
    .payment-summary-header,
    .payment-summary-item,
    .payment-summary-total {
        font-size: 0.9em;
    }
    .payment-return-button {
        min-width: unset;
        padding: 8px 15px;
        font-size: 0.8em;
    }
    .payment-methods-selection {
        flex-direction: column; /* Pilha os métodos de pagamento em telas menores */
        gap: 15px;
    }
    .payment-method-card {
        height: auto; /* Altura automática */
        padding: 15px 10px;
        flex-direction: row; /* Ícone e texto lado a lado */
        justify-content: center;
        gap: 15px;
    }
    .payment-method-card svg {
        width: 35px;
        height: 35px;
        margin-bottom: 0;
    }
    .payment-method-card span {
        font-size: 0.9em;
    }
    .payment-details-section {
        flex-direction: column; /* Pilha os blocos de detalhes */
        gap: 20px;
    }
    .payment-details-block label {
        font-size: 0.8em;
    }
    .payment-details-block input,
    .payment-details-block select {
        padding: 10px;
        font-size: 0.9em;
    }
    .payment-save-card-checkbox,
    .payment-terms-conditions {
        font-size: 0.85em;
    }
    .payment-final-button {
        padding: 12px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .payment-screen-section {
        padding: 10px;
    }
    .payment-main-container {
        padding: 25px 15px;
    }
    .payment-main-title {
        font-size: 1.6em;
    }
    .payment-qa-button {
        padding: 5px 10px;
        font-size: 0.75em;
    }
    .payment-intro-text {
        font-size: 0.85em;
        margin-bottom: 20px;
    }
    .payment-order-summary {
        padding: 15px;
        margin-bottom: 20px;
    }
    .payment-summary-header,
    .payment-summary-item,
    .payment-summary-total {
        font-size: 0.8em;
    }
    .payment-return-button {
        padding: 6px 12px;
        font-size: 0.75em;
    }
    .payment-methods-selection {
        gap: 10px;
    }
    .payment-method-card {
        padding: 12px 8px;
        gap: 10px;
    }
    .payment-method-card svg {
        width: 30px;
        height: 30px;
    }
    .payment-method-card span {
        font-size: 0.8em;
    }
    .payment-details-block label {
        font-size: 0.75em;
    }
    .payment-details-block input,
    .payment-details-block select {
        padding: 8px;
        font-size: 0.85em;
    }
    .payment-qr-code-placeholder {
        width: 120px;
        height: 120px;
        font-size: 0.7em;
    }
    .payment-copy-input-group .payment-copy-button {
        padding: 8px 10px;
        font-size: 1em;
    }
    .payment-save-card-checkbox,
    .payment-terms-conditions {
        font-size: 0.8em;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .payment-final-button {
        padding: 10px;
        font-size: 0.9em;
    }
}

/* --- NONA SESSÃO: Minha Conta --- */

/* Estilos globais para a seção Minha Conta e cores */
:root {
    --my-account-primary-dark-blue: #2F3B66;
    --my-account-primary-green: #52923E;
    --my-account-light-grey-bg: #F8F9FA;
    --my-account-input-bg: #EEE;
    --my-account-input-border: #CCC;
    --my-account-text-dark: #333;
    --my-account-text-medium: #555;
    --my-account-text-light: #888;

    --step-number-font-size: 2rem;
    --step-size: 6rem;
    --steps-column-gap: 4rem;
    --green-100: #039333;
    --green-200: #007c3c;
    --green-300: #016c42;
    --green-400: #015a48;
    --green-500: #02494b;
    --green-600: #013952;
    --green-700: #031f59;
}

.my-account-section {
    padding: 30px 0 80px; /* Mais espaço abaixo */
    background-color: var(--my-account-light-grey-bg);
    color: var(--my-account-text-dark);
    line-height: 1.6;
}

.my-account-container {
    max-width: 1100px; /* Ajustado para um container que se parece com a largura da imagem */
    margin: 0 auto;
    padding: 40px 20px;
}

.my-account-title {
    font-size: 2.5em; /* 40px */
    color: var(--about-heading-color);
    margin-bottom: 10px;
    font-weight: 600;
}

.my-account-subtitle {
    font-size: 1.1em; /* 18px */
    color: var(--about-heading-color);
    margin-bottom: 40px;
}

/* Wrapper para as duas colunas de formulário */
.my-account-forms-wrapper {
    display: flex;
    gap: 40px; /* Espaço entre as colunas */
    align-items: flex-start; /* Alinha o topo dos elementos */
    flex-wrap: wrap; /* Permite que as colunas se quebrem em telas menores */
}

/* Estilos Gerais para Botões */
.button-wrapper {
    text-align: center;
    margin-bottom: 25px;
}

.my-account-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    font-weight: 600;
}

.my-account-btn-primary-green {
    background-color: var(--my-account-primary-green);
    color: white;
}

.my-account-btn-primary-green:hover {
    background-color: #2e8b57; /* Verde um pouco mais escuro ao passar o mouse */
}

.my-account-btn-full-width {
    width: 100%;
    margin-bottom: 25px;
}

.my-account-btn-small-width {
    width: auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* Estilos da Seção Esquerda: Login e Conectar Carteira */
.my-account-login-connect-wallet-area {
    flex: 1;
    min-width: 300px;
}

/* Separador "OU" */
.my-account-separator-ou {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 30px 0;
    color: var(--my-account-text-light);
}

.my-account-separator-ou .my-account-line {
    flex-grow: 1;
    height: 1px;
    background-color: var(--my-account-input-border);
}

.my-account-separator-ou .my-account-text {
    padding: 0 15px;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Área do Formulário de Login */
.my-account-form-title {
    font-size: 1.3em;
    margin-bottom: 25px;
    font-weight: 600;
}

.my-account-form-title.my-account-green-text {
    color: var(--my-account-primary-green);
}

.my-account-login-form-area label {
    display: block;
    font-size: 0.9em;
    color: var(--my-account-text-medium);
    margin-bottom: 8px;
    text-transform: lowercase;
    margin-top: 10px;
}

.my-account-input-field {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--my-account-input-border);
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box; /* Inclui padding e borda na largura/altura total */
    background-color: var(--my-account-input-bg);
    color: var(--my-account-text-dark);
}

.my-account-input-field::placeholder {
    color: var(--my-account-text-light);
}

/* Container para Checkboxes */
.my-account-checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 0.9em;
    color: var(--my-account-text-medium);
}

.my-account-checkbox-container input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--my-account-input-border);
    border-radius: 4px;
    appearance: none; /* Remove estilo padrão do navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: white;
    flex-shrink: 0; /* Evita que o checkbox encolha */
}

.my-account-checkbox-container input[type="checkbox"]:checked {
    background-color: var(--my-account-primary-green);
    border-color: var(--my-account-primary-green);
}

.my-account-checkbox-container input[type="checkbox"]:checked::after {
    content: '✓'; /* Símbolo de check */
    color: white;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.my-account-forgot-password-link {
    display: block;
    text-align: center;
    color: var(--my-account-primary-green);
    text-decoration: none;
    margin-top: 20px;
    font-size: 0.9em;
    font-weight: 600;
}

.my-account-forgot-password-link:hover,
.my-account-create-account-link:hover,
.my-account-terms-link:hover,
.my-account-privacy-link:hover {
    text-decoration: underline;
}

.my-account-no-account-text {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
    color: var(--my-account-text-medium);
}

.my-account-no-account-text .my-account-create-account-link {
    color: var(--my-account-primary-green);
    text-decoration: none;
    font-weight: bold;
}


/* Estilos da Seção Direita: Criar Conta (Card) */
.my-account-create-account-area {
    flex: 1.5; /* Ocupa mais espaço que a coluna da esquerda */
    min-width: 400px; /* Largura mínima para o card */
    background-color: white; /* Fundo branco para o card */
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    padding: 30px;
}

.my-account-create-account-area label {
    display: block;
    font-size: 0.9em;
    color: var(--my-account-text-medium);
    margin-bottom: 8px;
}

/* Grupo de Input de Telefone */
.my-account-phone-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border: 1px solid var(--my-account-input-border);
    border-radius: 8px;
    background-color: var(--my-account-input-bg);
}

.my-account-country-code-select {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    border-right: 1px solid var(--my-account-input-border);
    flex-shrink: 0; /* Impede que ele encolha */
}

.my-account-country-flag {
    width: 24px;
    height: auto;
    margin-right: 8px;
    border: 1px solid #EEE;
    border-radius: 2px;
}

.my-account-dropdown-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--my-account-text-medium); /* Seta para baixo */
    margin-left: 8px;
}

.my-account-country-code {
    font-size: 1em;
    color: var(--my-account-text-dark);
    font-weight: 600; /* Mais negrito */
}

.my-account-phone-number-input {
    flex-grow: 1; /* Ocupa o restante do espaço */
    border: none; /* Remove borda, pois o pai já tem */
    background-color: transparent; /* Fundo transparente */
    margin-bottom: 0; /* Remove margem inferior interna */
    padding-left: 10px;
}

/* Grupo de Input de Senha com Ícone de Olho */
.my-account-password-input-group {
    position: relative;
    margin-bottom: 20px;
}

.my-account-password-input-group .my-account-input-field {
    padding-right: 40px; /* Espaço para o ícone */
    margin-bottom: 0; /* Remove margem inferior interna */
}

.my-account-password-toggle-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--my-account-text-light);
    font-size: 1.2em;
    user-select: none; /* Evita seleção do texto do ícone */
}

/* Requisitos de Senha */
.my-account-password-requirements {
    font-size: 0.85em;
    color: var(--my-account-text-medium);
    margin-top: 10px;
    margin-bottom: 25px;
}

.my-account-password-requirements ul {
    list-style: none; /* Remove bullet points padrão */
    padding-left: 0;
    margin-top: 10px;
}

.my-account-password-requirements ul li {
    position: relative;
    padding-left: 15px; /* Espaço para bullet customizado */
    margin-bottom: 5px;
}

.my-account-password-requirements ul li::before {
    content: '•'; /* Bullet point customizado */
    position: absolute;
    left: 0;
    color: var(--my-account-text-light);
}

/* Checkbox de Termos e Condições */
.my-account-checkbox-container.my-account-terms-checkbox {
    margin-bottom: 30px;
}

.my-account-checkbox-container.my-account-terms-checkbox label {
    display: inline; /* Mantém o label alinhado com o checkbox */
    font-size: 0.9em;
    color: var(--my-account-text-medium);
    margin-bottom: 0;
}

.my-account-checkbox-container.my-account-terms-checkbox a {
    color: var(--my-account-primary-green);
    text-decoration: none;
    font-weight: bold;
}

/* Media Queries para Responsividade */
@media (max-width: 900px) {
    .my-account-forms-wrapper {
        flex-direction: column; /* Coloca as colunas uma abaixo da outra */
    }

    .my-account-login-connect-wallet-area,
    .my-account-create-account-area {
        width: 100%; /* Largura total */
        min-width: unset; /* Remove a largura mínima */
        padding-top: 0; /* Reseta o padding */
    }

    .my-account-create-account-area {
        margin-top: 40px; /* Adiciona espaço entre as seções empilhadas */
    }
}

@media (max-width: 600px) {
    .my-account-container {
        padding: 20px 15px;
    }

    .my-account-title {
        font-size: 2em;
    }

    .my-account-subtitle {
        font-size: 1em;
    }

    .my-account-create-account-area {
        padding: 20px;
    }

    .my-account-btn-small-width {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* --- ESTILOS PARA A PRIMEIRA ETAPA DO FLUXO: Confirme seu Email --- */

/* Variáveis CSS para cores e consistência, adaptadas do modelo */
:root {
    --email-confirm-bg-color: #F8FAFC; /* Fundo muito claro, quase branco */
    --email-confirm-primary-text-color: #2D3748; /* Azul escuro quase preto para títulos */
    --email-confirm-secondary-text-color: #4A5568; /* Cinza escuro para textos de parágrafo */
    --email-confirm-accent-green: #52923E; /* Verde vibrante para botões e destaques */
    --email-confirm-border-color: #E2E8F0; /* Cinza claro para bordas e barras de progresso */
    --email-confirm-white-color: #FFFFFF; /* Branco para texto do botão */
}

/* Link para a fonte Inter do Google Fonts (adicione ao seu HEAD se ainda não tiver) */
/*
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
*/

.email-confirm-section {

    background-color: var(--email-confirm-bg-color); /* Cor de fundo definida */
    display: flex; /* Para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    min-height: 100vh; /* Ocupa a altura total da viewport */
    margin: 0; /* Remove margens padrão do corpo */
    color: var(--email-confirm-primary-text-color); /* Cor de texto padrão */
    line-height: 1.5; /* Espaçamento de linha para melhor legibilidade */
    padding: 20px; /* Adiciona um pequeno padding para telas menores */
    box-sizing: border-box; /* Garante que padding não aumente o tamanho total */
}

/* Container principal do formulário */
.email-confirm-container {
    width: 100%; /* Ocupa a largura total disponível */
    max-width: 450px; /* Limita a largura máxima para legibilidade */
    padding: 40px 20px; /* Preenchimento interno */
    text-align: center; /* Centraliza o texto e elementos inline/inline-block */
    box-sizing: border-box;
}

/* Título principal */
.email-confirm-title {
    font-size: 2.5rem; /* Tamanho de fonte grande (aprox. 40px) */
    font-weight: 700; /* Negrito */
    margin-bottom: 15px; /* Espaçamento abaixo */
    color: var(--about-heading-color);
}

/* Subtítulo ou descrição */
.email-confirm-subtitle {
    font-size: 1rem; /* Tamanho de fonte padrão (aprox. 16px) */
    margin-bottom: 30px; /* Espaçamento abaixo */
    color: var(--about-heading-color);
}

/* Destaque para o email no subtítulo */
.email-confirm-subtitle .email-confirm-email {
    font-weight: 600; /* Mais negrito */
    color: var(--email-confirm-primary-text-color); /* Cor do título */
}

/* Título do campo de verificação */
.email-confirm-verification-code-title {
    font-size: 1.5rem; /* Tamanho de fonte médio (aprox. 24px) */
    font-weight: 700; /* Negrito */
    margin-bottom: 20px; /* Espaçamento abaixo */
    color: var(--about-heading-color);
}

/* Container dos campos de input do código */
.email-confirm-code-inputs {
    display: flex; /* Usa flexbox para organizar os inputs */
    justify-content: center; /* Centraliza os inputs */
    gap: 10px; /* Espaçamento entre os inputs */
    margin-bottom: 20px; /* Espaçamento abaixo */
}

/* Estilo para cada campo de input do código */
.email-confirm-code-input {
    width: 48px; /* Largura para fazer um quadrado */
    height: 48px; /* Altura para fazer um quadrado */
    border: 1px solid var(--email-confirm-border-color); /* Borda fina e clara */
    border-radius: 8px; /* Cantos arredondados */
    text-align: center; /* Texto centralizado */
    font-size: 1.5rem; /* Tamanho de fonte grande dentro do input */
    font-weight: 700; /* Negrito */
    color: var(--email-confirm-primary-text-color);
    outline: none; /* Remove a borda de foco padrão do navegador */
    box-sizing: border-box; /* Inclui borda e padding no width/height */
}
/* Remove setas de incremento/decremento para inputs numéricos no Webkit (Chrome, Safari) */
.email-confirm-code-input::-webkit-outer-spin-button,
.email-confirm-code-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Estilo de foco para os inputs */
.email-confirm-code-input:focus {
    border-color: var(--email-confirm-accent-green); /* Borda verde no foco */
    box-shadow: 0 0 0 2px rgba(47, 133, 90, 0.2); /* Sombra suave verde no foco */
}

/* Link "enviar novamente" */
.email-confirm-resend-link {
    display: block; /* Para aplicar margens e quebrar linha */
    font-size: 0.875rem; /* Tamanho de fonte menor (aprox. 14px) */
    color: var(--email-confirm-secondary-text-color);
    text-decoration: none; /* Sem sublinhado padrão */
    margin-top: 5px; /* Espaçamento acima */
    margin-bottom: 40px; /* Espaçamento generoso abaixo */
}

.email-confirm-resend-link:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Botão Confirmar */
.email-confirm-confirm-button {
    background-color: var(--accent-dark-green-vitrine); /* Fundo verde */
    color: var(--email-confirm-white-color); /* Texto branco */
    padding: 14px 40px; /* Preenchimento interno */
    border: none; /* Sem borda */
    border-radius: 8px; /* Cantos arredondados */
    font-size: 1.125rem; /* Tamanho de fonte maior (aprox. 18px) */
    font-weight: 600; /* Semi-negrito */
    cursor: pointer; /* Cursor de mão ao passar */
    transition: background-color 0.3s ease; /* Transição suave na cor de fundo */
    width: 100%; /* Ocupa a largura total disponível */
    max-width: 250px; /* Limita a largura máxima do botão */
    display: block; /* Transforma em elemento de bloco para margin auto funcionar */
    margin: 0 auto 30px auto; /* Centraliza horizontalmente e adiciona margem inferior */
    box-sizing: border-box;
}

.email-confirm-confirm-button:hover {
    background-color: #2C7A5A; /* Verde um pouco mais escuro ao passar o mouse */
}

/* Texto de termos e privacidade */
.email-confirm-terms-privacy {
    font-size: 0.875rem; /* Tamanho de fonte menor */
    color: var(--email-confirm-secondary-text-color);
    margin-bottom: 50px; /* Espaçamento generoso abaixo */
}

/* Destaque verde para textos específicos (como "Confirmar") */
.email-confirm-highlight-green {
    color: var(--email-confirm-accent-green);
    font-weight: 600;
}

/* Links para Termos de Uso e Política de Privacidade */
.email-confirm-terms-link, .email-confirm-privacy-link {
    text-decoration: none; /* Remove sublinhado padrão */
    color: var(--email-confirm-accent-green); /* Cor verde */
}

.email-confirm-terms-link:hover, .email-confirm-privacy-link:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Seção de progresso (ex: "etapa 1 de 3") */
.email-confirm-progress-section {
    margin-top: 20px;
}

/* Texto da etapa de progresso */
.email-confirm-progress-text {
    font-size: 0.875rem; /* Tamanho de fonte menor */
    color: var(--email-confirm-accent-green);
    font-weight: 600;
    margin-bottom: 10px;
}

/* Barra de progresso (fundo) */
.email-confirm-progress-bar {
    width: 80px; /* Largura da barra de progresso */
    height: 5px; /* Altura da barra */
    background-color: var(--email-confirm-border-color); /* Fundo claro para a parte "não preenchida" */
    border-radius: 5px; /* Cantos arredondados */
    margin: 0 auto; /* Centraliza a barra */
    overflow: hidden; /* Garante que o preenchimento não saia da barra */
}

/* Preenchimento da barra de progresso */
.email-confirm-progress-fill {
    width: 33.33%; /* Representa 1 de 3 etapas */
    height: 100%; /* Ocupa a altura total da barra */
    background-color: var(--email-confirm-accent-green); /* Cor verde para a parte preenchida */
    border-radius: 5px; /* Cantos arredondados */
}

/* --- Responsividade para a seção de Confirmação de Email --- */
@media (max-width: 480px) {
    .email-confirm-container {
        padding: 30px 15px;
    }
    .email-confirm-title {
        font-size: 2rem;
    }
    .email-confirm-subtitle {
        font-size: 0.9rem;
    }
    .email-confirm-verification-code-title {
        font-size: 1.3rem;
    }
    .email-confirm-code-inputs {
        gap: 5px;
    }
    .email-confirm-code-input {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }
    .email-confirm-confirm-button {
        max-width: 200px;
        padding: 12px 30px;
        font-size: 1rem;
    }
    .email-confirm-terms-privacy {
        font-size: 0.8rem;
    }
    .email-confirm-progress-text {
        font-size: 0.8rem;
    }
}

/* --- ESTILOS PARA A SEGUNDA ETAPA DO FLUXO: Criar PIN --- */

/* Variáveis de cores (consistentes com o design original do PIN) */
:root {
    --pin-creation-primary-blue: #2c3e50; /* Um azul escuro para os títulos */
    --pin-creation-secondary-green: #52923E; /* O verde do botão */
    --pin-creation-light-grey: #e0e0e0; /* Cinza claro para os inputs e barra de progresso */
    --pin-creation-text-grey: #52923E; /* Cinza para textos menores */
    --pin-creation-warning-red: #dc3545; /* Vermelho para avisos, embora o ícone seja amarelo no design, o texto é informativo */
    --pin-creation-bg-color: #f8f9fa; /* Um cinza bem clarinho para o fundo */
    --pin-creation-card-bg: #fff; /* Fundo do card */
}

.pin-creation-section {
    margin: 0;
    padding: 20px;
    background-color: var(--pin-creation-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--pin-creation-primary-blue);
    box-sizing: border-box;
}

.pin-creation-container {
    background-color: var(--pin-creation-card-bg);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 450px;
    width: 100%;
    box-sizing: border-box;
}

.pin-creation-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--about-heading-color);
}

.pin-creation-subtitle {
    font-size: 0.95em;
    color: var(--about-heading-color);
    margin-bottom: 30px;
}

.pin-creation-form-title {
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 25px;
    color: var(--about-heading-color);
}

.pin-creation-fields {
    display: flex;
    justify-content: center;
    gap: 12px; /* Espaçamento entre os inputs */
    margin-bottom: 30px;
}

.pin-creation-input {
    width: 48px;
    height: 48px;
    font-size: 1.5em;
    text-align: center;
    border: 1px solid var(--pin-creation-light-grey);
    border-radius: 8px;
    background-color: #f0f2f5; /* Fundo dos inputs ligeiramente mais escuro que o container */
    color: var(--pin-creation-primary-blue);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s; /* Remove setas em Firefox */
    box-sizing: border-box;
}

.pin-creation-input:focus {
    border-color: var(--pin-creation-secondary-green);
    box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.2);
}
/* Oculta as setas de incremento/decremento em navegadores WebKit (Chrome, Safari, etc.) */
.pin-creation-input::-webkit-outer-spin-button,
.pin-creation-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pin-creation-warning-message {
    display: flex;
    align-items: flex-start; /* Alinha o ícone e o texto ao topo */
    gap: 10px;
    background-color: #fff3cd; /* Cor de fundo suave para o aviso */
    border: 1px solid #ffeeba; /* Borda suave */
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
    text-align: left;
    color: #856404; /* Cor do texto do aviso */
    font-size: 0.85em;
}

.pin-creation-warning-icon {
    font-size: 1.4em;
    line-height: 1;
    color: #F0C42C; /* Cor do ícone de aviso */
    flex-shrink: 0; /* Impede que o ícone encolha */
    padding-top: 2px; /* Ajuste fino para alinhar com o texto */
}

.pin-creation-button {
    background-color: var(--pin-creation-secondary-green);
    color: #fff;
    border: none;
    border-radius: 10px; /* Bordas arredondadas como na imagem */
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    max-width: 250px; /* Largura fixa para o botão, como na imagem */
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.pin-creation-button:hover {
    background-color: #2b8e45; /* Um verde um pouco mais escuro no hover */
}

.pin-creation-agreement-text {
    font-size: 0.8em;
    color: var(--pin-creation-text-grey);
    margin-top: 25px;
    line-height: 1.5;
}

.pin-creation-agreement-text a {
    color: var(--pin-creation-secondary-green);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pin-creation-agreement-text a:hover {
    color: #2b8e45;
    text-decoration: underline;
}

.pin-creation-progress-section {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pin-creation-progress-text {
    font-size: 1.3em;
    color: var(--pin-creation-text-grey);
    margin-bottom: 10px;
}

.pin-creation-progress-bars {
    display: flex;
    gap: 6px;
}

.pin-creation-progress-bar {
    width: 45px; /* Largura de cada barra */
    height: 8px;
    background-color: var(--pin-creation-light-grey);
    border-radius: 4px;
}

.pin-creation-progress-bar.pin-creation-filled {
    background-color: var(--pin-creation-secondary-green);
}

/* Responsividade básica */
@media (max-width: 500px) {
    .pin-creation-container {
        padding: 30px 20px;
    }
    .pin-creation-input {
        width: 40px;
        height: 40px;
        font-size: 1.3em;
    }
    .pin-creation-fields {
        gap: 8px;
    }
    .pin-creation-title {
        font-size: 1.6em;
    }
    .pin-creation-form-title {
        font-size: 1.2em;
    }
    .pin-creation-button {
        max-width: 100%;
    }
}

/* --- ESTILOS PARA A TERCEIRA ETAPA DO FLUXO: Vamos conectar --- */

/* Variáveis de cores (consistentes com as etapas anteriores do fluxo) */
:root {
    --connect-wallet-bg-color: #F8FAFC; /* Fundo muito claro, quase branco */
    --connect-wallet-primary-text-color: #2D3748; /* Azul escuro quase preto para títulos */
    --connect-wallet-secondary-text-color: #4A5568; /* Cinza escuro para textos de parágrafo */
    --connect-wallet-accent-green: #2F855A; /* Verde vibrante para botões e destaques */
    --connect-wallet-border-color: #E2E8F0; /* Cinza claro para bordas e barras de progresso */
    --connect-wallet-white-color: #FFFFFF; /* Branco para texto do botão */
    --connect-wallet-input-bg: #EDF2F7; /* Cor de fundo do campo de telefone */
}

/* Garanta que a fonte 'Inter' esteja carregada no seu HEAD, se ainda não estiver: */
/* <link rel="preconnect" href="https://fonts.googleapis.com"> */
/* <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> */

.connect-wallet-section {
    background-color: var(--connect-wallet-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: var(--connect-wallet-primary-text-color);
    line-height: 1.5;
    padding: 20px;
    box-sizing: border-box;
}

.connect-wallet-container {
    /* ESTES SÃO OS ESTILOS DO "BALÃOZINHO" (CARD) */
    background-color: var(--connect-wallet-white-color); /* Fundo branco */
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Sombra */
    
    width: 100%;
    max-width: 450px;
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box;
}

.connect-wallet-title {
    font-size: 2.5rem; /* ~40px */
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--about-heading-color);
}

.connect-wallet-subtitle {
    font-size: 1rem; /* ~16px */
    margin-bottom: 30px;
    color: var(--about-heading-color);
}

.connect-wallet-form-title {
    font-size: 1.5rem; /* ~24px */
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--about-heading-color);
}

/* Grupo de Input de Telefone */
.connect-wallet-phone-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 40px; /* Espaçamento antes do botão */
    border: 1px solid var(--connect-wallet-border-color);
    border-radius: 8px;
    background-color: var(--connect-wallet-input-bg);
    overflow: hidden; /* Para garantir que o border-radius funcione */
}

/* ESTILOS PARA O "COMBOZINHO" (+55) */
.connect-wallet-country-code-display {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer; /* Indica que é clicável */
    border-right: 1px solid var(--about-heading-color);
    flex-shrink: 0; /* Impede que ele encolha */
    background-color: var(--connect-wallet-input-bg);
    transition: background-color 0.2s ease; /* Efeito ao passar o mouse */
}

.connect-wallet-country-code-display:hover {
    background-color: #e2e6eb; /* Leve alteração de cor ao passar o mouse */
}

.connect-wallet-country-flag {
    width: 24px;
    height: auto;
    margin-right: 8px;
    border: 1px solid #EEE;
    border-radius: 2px;
}

.connect-wallet-dropdown-arrow {
    font-size: 0.7em; /* Ajusta o tamanho da seta Unicode */
    color: var(--connect-wallet-secondary-text-color);
    margin-left: 8px;
}

.connect-wallet-country-code {
    font-size: 1em;
    color: var(--connect-wallet-primary-text-color);
    font-weight: 600;
}

.connect-wallet-input-field {
    flex-grow: 1; /* Ocupa o restante do espaço */
    border: none;
    background-color: transparent;
    padding: 12px 15px;
    font-size: 1em;
    color: var(--about-heading-color);
    outline: none;
    box-sizing: border-box;
}

.connect-wallet-input-field::placeholder {
    color: var(--connect-wallet-secondary-text-color);
}

/* Botão Criar */
.connect-wallet-create-button {
    background-color: var(--accent-dark-green-vitrine);
    color: var(--connect-wallet-white-color);
    padding: 14px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1.125rem; /* ~18px */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
    max-width: 250px;
    display: block;
    margin: 0 auto 30px auto;
    box-sizing: border-sizing;
}

.connect-wallet-create-button:hover {
    background-color: #2C7A5A;
}

/* Texto de termos e privacidade */
.connect-wallet-terms-privacy {
    font-size: 0.875rem; /* ~14px */
    color: var(--connect-wallet-secondary-text-color);
    margin-bottom: 50px;
}

/* Destaque verde para textos específicos (como "Criar") */
.connect-wallet-highlight-green {
    color: var(--accent-dark-green-vitrine);
    font-weight: 600;
}

/* Links para Termos de Uso e Política de Privacidade */
.connect-wallet-terms-link, .connect-wallet-privacy-link {
    text-decoration: none;
    color: var(--accent-dark-green-vitrine);
}

.connect-wallet-terms-link:hover, .connect-wallet-privacy-link:hover {
    text-decoration: underline;
}

/* Seção de progresso (ex: "etapa 3 de 3") */
.connect-wallet-progress-section {
    margin-top: 20px;
}

/* Texto da etapa de progresso */
.connect-wallet-progress-text {
    font-size: 1.3rem;
    color: var(--accent-dark-green-vitrine);
    font-weight: 600;
    margin-bottom: 10px;
}

/* Barras de progresso (container) */
.connect-wallet-progress-bars {
    display: flex;
    justify-content: center; /* Centraliza as barras */
    gap: 6px;
}

/* Cada barra de progresso */
.connect-wallet-progress-bar {
    width: 45px; /* Largura de cada barra */
    height: 8px;
    background-color: var(--connect-wallet-border-color);
    border-radius: 4px;
}

/* Barra de progresso preenchida */
.connect-wallet-progress-bar.connect-wallet-filled {
    background-color: var(--accent-dark-green-vitrine);
}

/* --- Responsividade para a seção "Vamos conectar" --- */
@media (max-width: 480px) {
    .connect-wallet-container {
        padding: 30px 15px;
    }
    .connect-wallet-title {
        font-size: 2rem;
    }
    .connect-wallet-subtitle {
        font-size: 0.9rem;
    }
    .connect-wallet-form-title {
        font-size: 1.3rem;
    }
    .connect-wallet-create-button {
        max-width: 200px;
        padding: 12px 30px;
        font-size: 1rem;
    }
    .connect-wallet-terms-privacy {
        font-size: 0.8rem;
    }
    .connect-wallet-progress-text {
        font-size: 0.8rem;
    }
}

/* --- ESTILOS PARA SEÇÃO: Detalhes do Empreendimento - Residencial Geribá (FIEL AO MODELO) --- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); /* Usando Montserrat como na referência */

.geriba-details-project-section {
    margin: 0;
    padding: 20px; /* Padding ao redor do container principal */
    background-color: #f0f0f0; /* Fundo leve para contraste */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha o conteúdo ao topo */
    min-height: 100vh;
    box-sizing: border-box;
}

.geriba-details-container {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 8px; /* Levemente arredondado, se o design permitir */
}

.geriba-details-top-section {
    position: relative;
    width: 100%;
    height: 300px; /* Altura da imagem de cabeçalho */
    background-image: url('https://via.placeholder.com/600x300/406A8C/FFFFFF?text=Modern+High-Rise+Building'); /* Placeholder para a imagem de fundo */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end; /* Alinha o texto na parte inferior */
    justify-content: center;
    color: #fff;
    text-align: center;
    padding-bottom: 20px; /* Espaço para o texto na parte inferior */
}

/* Gradiente de overlay na imagem de fundo */
.geriba-details-top-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(30, 60, 90, 0.6) 0%, rgba(30, 60, 90, 0.3) 50%, rgba(30, 60, 90, 0) 100%); /* Gradiente azul escuro */
}

.geriba-details-top-section h1 {
    position: relative; /* Para trazer o texto acima do overlay */
    font-size: 2.2em;
    font-weight: 700;
    margin: 0;
    padding: 0 20px;
    z-index: 1; /* Garante que o texto esteja acima do gradiente */
    white-space: nowrap; /* Impede quebra de linha se o container for muito pequeno */
}

.geriba-details-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.geriba-details-info-bar .geriba-details-left-text {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--about-heading-color); /* Azul escuro/preto */
}

.geriba-details-info-bar .geriba-details-right-text {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--accent-dark-green-vitrine);
    white-space: nowrap;
}

.geriba-details-map-section {
    width: 100%;
    padding: 0 20px; /* Padding para corresponder à imagem */
    box-sizing: border-box;
    background-color: #fff;
    padding-bottom: 15px; /* Espaçamento abaixo do mapa */
}

.geriba-details-map-section img {
    width: 100%;
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
    border: 1px solid #ddd; /* Borda sutil para o mapa */
    border-radius: 4px; /* Levemente arredondado */
}

.geriba-details-info-section {
    padding: 15px 20px 25px; /* Ajusta padding para corresponder ao espaçamento original */
    background-color: #fff;
}

.geriba-details-info-section p {
    margin: 0 0 10px 0; /* Ajusta espaçamento entre linhas */
    font-size: 0.95em;
    color: #1A2B4D; /* Azul escuro/preto */
    line-height: 1.4;
}

.geriba-details-info-section p:last-of-type {
    margin-bottom: 0;
}

.geriba-details-info-section strong {
    font-weight: 600;
}

/* Container da barra de progresso */
.geriba-details-progress-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
    gap: 10px; /* Espaçamento entre o label e a barra */
}

.geriba-details-progress-label {
    font-size: 0.95em;
    color: #1A2B4D;
    font-weight: 600;
    white-space: nowrap; /* Mantém o label em uma linha */
}

/* Estilo da barra de progresso externa (vazia) */
.geriba-details-progress-bar-outer {
    width: 180px; /* Largura fixa para a barra, como no visual */
    height: 22px;
    background-color: #D3D3D3; /* Cor cinza claro para a parte não preenchida */
    border-radius: 12px;
    position: relative;
}

/* Estilo da barra de progresso interna (preenchida) */
.geriba-details-progress-bar-fill {
    height: 100%;
    width: 30%; /* A porcentagem de preenchimento (ajuste conforme necessário) */
    background-color: #34496D; /* Cor azul escuro para a parte preenchida */
    border-radius: 12px 0 0 12px; /* Apenas os cantos esquerdos são arredondados */
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o texto "30%" dentro do preenchimento */
}

.geriba-details-progress-bar-fill span {
    color: #fff;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    left: 5px; /* Ajuste fino para o "30%" para corresponder ao original */
}

/* --- Responsividade --- */
@media (max-width: 600px) {
    .geriba-details-container {
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .geriba-details-top-section {
        height: 200px;
        padding-bottom: 10px;
    }
    .geriba-details-top-section h1 {
        font-size: 1.8em;
        padding: 0 10px;
    }
    .geriba-details-info-bar {
        padding: 12px 15px;
        flex-direction: column;
        align-items: flex-start;
    }
    .geriba-details-info-bar .geriba-details-left-text,
    .geriba-details-info-bar .geriba-details-right-text {
        font-size: 1em;
        margin-bottom: 5px;
    }
    .geriba-details-map-section {
        padding: 0 15px;
        padding-bottom: 10px;
    }
    .geriba-details-info-section {
        padding: 15px;
    }
    .geriba-details-info-section p {
        font-size: 0.9em;
    }
    .geriba-details-progress-label {
        font-size: 0.9em;
    }
    .geriba-details-progress-bar-outer {
        width: 140px;
        height: 20px;
    }
    .geriba-details-progress-bar-fill span {
        font-size: 0.75em;
    }
}

@media (max-width: 400px) {
    .geriba-details-project-section {
        padding: 0; /* Remove padding externo para telas muito pequenas */
    }
    .geriba-details-top-section {
        height: 150px;
    }
    .geriba-details-top-section h1 {
        font-size: 1.5em;
    }
    .geriba-details-info-bar {
        padding: 10px;
    }
    .geriba-details-info-bar .geriba-details-left-text,
    .geriba-details-info-bar .geriba-details-right-text {
        font-size: 0.9em;
    }
    .geriba-details-map-section {
        padding: 0 10px;
    }
    .geriba-details-info-section {
        padding: 10px;
    }
    .geriba-details-info-section p {
        font-size: 0.85em;
    }
    .geriba-details-progress-label {
        font-size: 0.85em;
    }
}

/* ===== NOVO: Botão Conectar com Carteira ===== */

.my-account-btn-connect-wallet {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
}

.my-account-wallet-icon {
    width: 20px;
    height: 20px;
}

/* ===== NOVO: Divisor "ou" ===== */

.my-account-or-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 10px;
}

.my-account-or-divider span {
    color: #0f2137;
    font-weight: 700;
    font-size: 14px;
    padding: 0 10px;
}

.my-account-or-divider::before,
.my-account-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #c9d4df;
}

#passoapasso {
  width: fit-content;
  padding: 1rem;
  margin: 0 auto;
}

#passoapasso>h2,
#passoapasso>p {
  color: #0b2559;
  line-height: 1.25;
}

#passoapasso>h2 {
  font-size: 2.5rem;
}

#passoapasso>p {
  font-size: 1.5rem;
}

.steps {
  display: flex;
  column-gap: var(--steps-column-gap);
  margin-top: 3rem;
}

.step {
  position: relative;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: var(--step-size);
  top: calc(var(--step-size) / 2);
  transform: translateY(-50%);
  width: var(--steps-column-gap);
  height: 4px;
}

.step-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--step-size);
  height: var(--step-size);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.step-title,
.step-description {
  width: var(--step-size);
}

.step-number {
  text-align: center;
  font-size: var(--step-number-font-size);
}

.step-title {
  font-size: 1.25rem;
  line-height: 1;
}

.step-description {
  margin-top: 1rem;
  line-height: 1;
}

.green-700 .step-icon,
.green-700.step:not(:last-child)::after {
  background-color: var(--green-700);
}

.green-600 .step-icon,
.green-600.step:not(:last-child)::after {
  background-color: var(--green-600);
}

.green-500 .step-icon,
.green-500.step:not(:last-child)::after {
  background-color: var(--green-500);
}

.green-400 .step-icon,
.green-400.step:not(:last-child)::after {
  background-color: var(--green-400);
}

.green-300 .step-icon,
.green-300.step:not(:last-child)::after {
  background-color: var(--green-300);
}

.green-200 .step-icon,
.green-200.step:not(:last-child)::after {
  background-color: var(--green-200);
}

.green-100 .step-icon,
.green-100.step:not(:last-child)::after {
  background-color: var(--green-100);
}

.green-700 .step-number,
.green-700>.step-title {
  color: var(--green-700);
}

.green-600 .step-number,
.green-600>.step-title {
  color: var(--green-600);
}

.green-500 .step-number,
.green-500>.step-title {
  color: var(--green-500);
}

.green-400 .step-number,
.green-400>.step-title {
  color: var(--green-400);
}

.green-300 .step-number,
.green-300>.step-title {
  color: var(--green-300);
}

.green-200 .step-number,
.green-200>.step-title {
  color: var(--green-200);
}

.green-100 .step-number,
.green-100>.step-title {
  color: var(--green-100);
}

@media (max-width: 768px) {
  #passoapasso>h2 {
    font-size: 1.5rem;
  }

  #passoapasso>p {
    font-size: 1rem;
  }

  .steps {
    flex-direction: column;
    row-gap: 2rem;
  }

  .step {
    width: calc(var(--step-size) + var(--step-number-font-size));
    margin: 0 auto;
  }

  .step:not(:last-child)::after {
    left: calc(var(--step-number-font-size) / 4);
    top: calc(var(--step-size) - var(--step-number-font-size) + 1rem);
    width: 4px;
    height: calc(100% - var(--step-number-font-size));
    transform: translateX(-50%);
  }

  .step-header {
    display: flex;
    align-items: center;
    column-gap: 1rem;
  }

  .step-number {
    order: -1;
  }

  .step-title,
  .step-description {
    justify-self: flex-end;
    margin-top: 1rem;
  }
}