/* 3- Prova social rápida com gráfico de rosca */
.container-prova-social {
    width: 100%;
    background-color: #061D1A;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.card-prova-social-wrapper {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 20px;
    margin: 0 auto;
    max-width: 1200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 20px;
}

.card-prova-social-wrapper h2 {
    color: #061D1A;
    margin-bottom: 20px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    flex-basis: 100%;
    text-align: center;
}

/* Estilo ÚNICO e CORRIGIDO para o item do gráfico */
.grafico-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    flex-basis: calc(25% - 15px);
}

.grafico-item .grafico-rosca {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

/* O pseudo-elemento `::after` original foi removido
   e o `background` principal foi substituído por `conic-gradient`
   para criar o efeito de preenchimento dinâmico. */

/* Estilos de rosca com gradiente cônico para cada item */
.grafico-item:nth-child(2) .grafico-rosca {
    /* 95% - Padrão: de 0deg a 342deg (360 * 0.95) */
    background: conic-gradient(#F2CD00 342deg, #F9E680 0deg);
}

.grafico-item:nth-child(3) .grafico-rosca {
    /* 92% - Padrão: de 0deg a 331.2deg (360 * 0.92) */
    background: conic-gradient(#F2CD00 331.2deg, #F9E680 0deg);
}

.grafico-item:nth-child(4) .grafico-rosca {
    /* 89% - Padrão: de 0deg a 320.4deg (360 * 0.89) */
    background: conic-gradient(#F2CD00 320.4deg, #F9E680 0deg);
}

.grafico-item:nth-child(5) .grafico-rosca {
    /* 97% - Padrão: de 0deg a 349.2deg (360 * 0.97) */
    background: conic-gradient(#F2CD00 349.2deg, #F9E680 0deg);
}


.grafico-item .grafico-rosca span {
    position: relative;
    color: #061D1A;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 2;
}

.grafico-item .grafico-rosca::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background-color: #FFFFFF;
    border-radius: 50%;
    z-index: 1;
}

/* O pseudo-elemento `::after` original foi removido, pois a borda
   do `conic-gradient` já representa o percentual. */
.grafico-item p {
    color: #061D1A;
    font-size: clamp(0.95rem, 1.05vw, 1.25rem);
    font-weight: 700;
    max-width: 220px;
}

/* --- RESPONSIVIDADE --- */

/* TABLET (<= 1024px): 2 itens por linha */
@media (max-width: 1024px) {
    .grafico-item {
        flex-basis: calc(50% - 10px);
    }
}

/* Ajustes gerais para telas menores, não alteram a contagem de colunas */
@media (max-width: 768px) {
    .card-prova-social-wrapper {
        padding: 30px 20px;
    }

    .card-prova-social-wrapper h2 {
        font-size: 1.8rem;
    }

    .grafico-item .grafico-rosca {
        width: 70px;
        height: 70px;
    }
    
    .grafico-item .grafico-rosca::before {
        width: 50px;
        height: 50px;
    }

    .grafico-item .grafico-rosca span {
        font-size: 1rem;
    }

    /* Ajuste o tamanho do gradiente para telas menores */
    .grafico-item:nth-child(2) .grafico-rosca { background: conic-gradient(#F2CD00 342deg, #F9E680 0deg); }
    .grafico-item:nth-child(3) .grafico-rosca { background: conic-gradient(#F2CD00 331.2deg, #F9E680 0deg); }
    .grafico-item:nth-child(4) .grafico-rosca { background: conic-gradient(#F2CD00 320.4deg, #F9E680 0deg); }
    .grafico-item:nth-child(5) .grafico-rosca { background: conic-gradient(#F2CD00 349.2deg, #F9E680 0deg); }

}

/* MOBILE (<= 480px): 1 item por linha */
@media (max-width: 480px) {
    .card-prova-social-wrapper {
        padding: 20px 15px;
    }

    .card-prova-social-wrapper h2 {
        font-size: clamp(1rem, 5.3vw, 5.3rem);
    }
    
    .grafico-item {
        flex-basis: 100%;
    }
    .container-prova-social {
        padding: 10px 20px;
    }
}

/* 4- Explicação do método MyTree (container-metodo) */
.container-metodo {
    background-color: #061D1A; /* Cor de fundo */
    color: #FFFFFF;
    padding: 30px 20px; /* Preenchimento geral do container */
    display: flex;
    flex-direction: column; /* Agora os elementos filhos (intro e content-wrapper) ficam empilhados */
    align-items: center; /* Centraliza horizontalmente os elementos empilhados */
    min-height: 100vh;
    box-sizing: border-box;
}

/* Introdução Principal (acima das colunas) */
.intro-main-section {
    width: 100%; /* Ocupa a largura total */
    max-width: 900px; /* Limita a largura do texto para melhor legibilidade */
    text-align: center; /* Centraliza o texto */
    margin-bottom: 60px; /* Espaço abaixo da introdução e antes das colunas */
}

.intro-main-section h1 {
    font-size: clamp(2rem, 4vw, 3.5rem); /* Ajuste o tamanho conforme desejar */
    color: #F2CD00; /* Cor dourada, se quiser destacar */
    margin-bottom: 10px;
    line-height: 1.2;
}

.intro-main-section p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 0; /* O espaçamento com a próxima seção será no pai */
}

/* Estilo para o título "Com o nosso treinamento você vai:" */
.section-title-learning {
    font-size: clamp(2rem, 3vw, 4rem);
    line-height: 1.2;
    margin-bottom: 40px; /* Espaço abaixo do título e antes das colunas */
    color: #F2CD00;
    text-align: center;
    width: 100%; /* Garante que ocupe a largura total para centralizar */
    max-width: 800px; /* Limita a largura para melhor legibilidade */
}


/* Container das duas colunas (imagem e trilha) */
.container-metodo .content-wrapper {
    display: flex;
    width: 100%;
    max-width: 1200px;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza as colunas se elas não ocuparem 100% da largura */
    margin-bottom: 60px; /* Adicionado espaço abaixo do content-wrapper antes do novo título */
}

/* Coluna da Esquerda (Apenas Imagem) */
.left-column {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column; /* Manter como coluna para centralizar a imagem verticalmente se necessário */
    justify-content: center; /* Centraliza verticalmente a imagem */
    align-items: center; /* Centraliza horizontalmente a imagem */
    text-align: center; /* Caso algum texto fosse adicionado */
}

.left-column img {
    max-width: 88%;
    height: 70%; /* Mantenha essa altura se for intencional para a imagem */
    margin-top: 20px; /* Ajuste se a imagem parecer muito colada ao topo */
}

/* Coluna da Direita: A Trilha Interligada */
.right-column {
    flex: 1;
    min-width: 400px;
    padding-right: 40px; /* Mantém o padding no desktop */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ----------------------------------------------------- */
/* --- AJUSTES DA LINHA DO TEMPO ABAIXO --- */
/* ----------------------------------------------------- */

.timeline-container {
    position: relative;
    padding-left: 60px;

    /* Variáveis para facilitar o cálculo do posicionamento da linha */
    --icon-size-desktop: 40px;
    --item-padding-y-desktop: 15px; /* Padding vertical do .timeline-item */
    --line-offset-desktop: 20px; /* Ponto de alinhamento desejado para o centro da linha/ícone */
    --item-margin-top-desktop: 20px; /* Adicionada variável para o margin-top do timeline-item */
    --item-margin-bottom-desktop: 40px; /* Adicionada variável para o margin-bottom do timeline-item */
}

/* Linha vertical da trilha */
.timeline-container::before {
    content: '';
    position: absolute;
    /* Ajuste para top, considerando o margin-top do primeiro item */
    top: calc(var(--item-margin-top-desktop) + var(--item-padding-y-desktop) + (var(--icon-size-desktop) / 2));
    left: calc(var(--line-offset-desktop) - 1px);
    width: 2px;
    background-color: #355E3B;
    z-index: 1;
    /* NOVO: Altura da linha para terminar no centro do último ícone.
        Calcula o espaço total ocupado pelos itens menos o offset do topo
        e o offset do final do último item. Este valor pode precisar de ajuste fino. */
    height: calc(100% - 110px); /* Ajuste este valor. Comece com 100px para desktop. */
}

.timeline-item {
    position: relative;
    min-height: 110px; /* tamanho mínimo do card */
    margin-top: 20px; /* Seu margin-top original */
    margin-bottom: 40px; /* distância entre os cards */
    padding: 15px 20px; /* Mantém este padding interno para o texto */
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    z-index: 2;
}

.timeline-item:last-child {
    margin-bottom: 0; /* O último item não tem margin-bottom */
}

.timeline-icon {
    position: absolute;
    left: calc(var(--line-offset-desktop) - 60px - (var(--icon-size-desktop) / 2));
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-desktop);
    height: var(--icon-size-desktop);
    background-color: #355E3B;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

.timeline-text {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
    margin-left: 20px;
    color: #061D1A;
}

/* ----------------------------------------------------- */
/* --- NOVO TÍTULO FINAL --- */
/* ----------------------------------------------------- */
.final-message {
    font-size: clamp(1.5rem, 2.2vw, 3rem); /* Tamanho da fonte para o novo h2 */
    color: #F2CD00; /* Cor dourada, como nos outros títulos */
    text-align: center; /* Centraliza o texto */
    margin: 30px 0 30px; /* Espaço acima do título */
    width: 100%; /* Ocupa a largura total do container-metodo */
    max-width: 800px; /* Limita a largura para melhor legibilidade */
    line-height: 1.3;
}

/* Estilo do botão */
.button-container-central {
    text-align: center; /* Centraliza o botão */
    margin-top: 20px; /* Adiciona um espaço acima do botão */
    margin-bottom: 40px; /* Espaço abaixo do botão, se houver mais conteúdo */
}

/* Estilo do botão */
.button {
    /* PROPRIEDADES ATUAIS */
    display: flex; /* Mude de inline-block para flex para alinhar logo e texto */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    max-width: fit-content; /* Deixa o botão se ajustar ao conteúdo, sem preencher a tela */
    padding: 0.8em 1.5em; /* Ajusta o padding para um tamanho mais confortável */
    margin: 30px auto; /* Centraliza o botão e adiciona margens */
    text-decoration: none;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    background-color: #F2CD00;
    color: #061D1A;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
    background-color: #ffe066; /* Um tom mais claro de amarelo no hover */
    transform: scale(1.05);
    box-shadow: 0px 6px 20px rgba(255, 255, 255, 0.3);
}

/* Estilo do logo no botão (desktop) */
.button img {
    height: 1.8em; /* Tamanho do logo no desktop */
    width: auto;
    margin-right: 0.5em; /* Espaçamento entre o logo e o texto */
    vertical-align: middle;
}

/* Estilo para o texto do botão (desktop) */
.button span {
    line-height: 1.2;
    white-space: nowrap; /* Impede a quebra de linha no desktop */
    vertical-align: middle;
}

/* Responsividade */
@media (max-width: 768px) {
    /* --- INÍCIO DAS ALTERAÇÕES PARA MOBILE --- */
    
    /* 1. Esconde a imagem do celular e seu container */
    .left-column {
        display: none;
    }

    /* 2. Ajusta o container principal para remover espaçamentos */
    .container-metodo .content-wrapper {
        flex-direction: column;
        gap: 0;
        margin-bottom: 40px;
        padding-left: 0;
        padding-right: 0;
    }

    /* 3. Aplica a nova imagem como background na coluna direita e expande para as bordas */
    .right-column {
        width: 100vw; 
        margin-left: calc(-50vw + 50%);
        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('assets/web/phone2.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0;
        padding-top: 20px; 
        padding-bottom: 10px;
        min-height: 600px;
        min-width: unset;
        
        /* O padding-left/right é redefinido no .timeline-container */
        padding-left: 0;
        padding-right: 0;
    }
    
    /* 4. Ajusta o container da timeline para ter espaçamento interno, mas sem afetar o background */
    .timeline-container {
        padding-left: 60px;
        padding-right: 20px;
        max-width: 100%;
        margin: 0 auto;
        
        --icon-size-desktop: 40px;
        --item-padding-y-desktop: 15px;
        --line-offset-desktop: 20px;
        --item-margin-top-desktop: 20px;
        --item-margin-bottom-desktop: 30px;
    }

    /* 5. Ajusta os estilos dos bullets para o novo background */
    .right-column .timeline-item {
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 15px 20px;
        margin-bottom: 30px;
    }
    .right-column .timeline-text {
        color: #FFFFFF;
        font-size: 0.95rem;
        margin-left: 20px;
    }
    .right-column .timeline-icon {
        background-color: #F2CD00;
        left: calc(var(--line-offset-desktop) - 60px - (var(--icon-size-desktop) / 2));
        transform: translateY(-50%);
        width: var(--icon-size-desktop);
        height: var(--icon-size-desktop);
    }
    .right-column .timeline-container::before {
        background-color: #F2CD00;
        top: calc(var(--item-margin-top-desktop) + var(--item-padding-y-desktop) + (var(--icon-size-desktop) / 2));
        left: calc(var(--line-offset-desktop) - 1px);
        height: calc(100% - 150px);
    }

    /* 6. Ajustes gerais do seu código original */
    .intro-main-section { margin-bottom: 40px; }
    .intro-main-section h1 { font-size: 2.8rem; }
    .intro-main-section p { font-size: 1rem; }
    .section-title-learning {
        font-size: clamp(2rem, 3vw, 4rem);
        margin-bottom: 30px;
    }
    .final-message {
        font-size: clamp(1.5rem, 2vw, 3rem);
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .button-container-central {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .button {
        display: block;
        width: 100%;
        margin: 15px auto 25px;
        position: relative;
        padding: 15px 30px 15px 100px;
        font-size: 1.1rem;
    }
    .button span {
        display: block;
        white-space: normal;
    }
    .button img {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        max-height: 60%;
        width: auto;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    /* Mantenha o restante do seu código para mobile */
    .container-metodo {
        padding: 50px 15px 20px;
    }
    .intro-main-section h1 { font-size: clamp(1.8rem, 9vw, 9rem); }
    .intro-main-section p { font-size: clamp(0.7rem, 3.5vw, 3rem); }
    .section-title-learning {
        font-size: clamp(1.5rem, 7vw, 7rem);
        margin-bottom: 25px;
    }

    /* Redefine as propriedades para telas ainda menores, mantendo o background */
    .right-column {
        padding-left: 10px;
        padding-right: 0;
        min-height: 500px;
    }
    .timeline-container {
        padding-left: 60px;
        padding-right: 15px; /* Ajuste o padding para telas menores */
        --icon-size-mobile: 35px;
        --item-padding-y-mobile: 12px;
        --line-offset-mobile: 20px;
        --item-margin-top-mobile: 20px;
        --item-margin-bottom-mobile: 30px;
    }
    .timeline-container::before {
        top: calc(var(--item-margin-top-mobile) + var(--item-padding-y-mobile) + (var(--icon-size-mobile) / 2));
        left: calc(var(--line-offset-mobile) - 1px);
        height: calc(100% - 90px);
    }
    .timeline-item {
        padding: 12px 15px;
        margin-bottom: 30px;
    }
    .timeline-icon {
        width: var(--icon-size-mobile);
        height: var(--icon-size-mobile);
        left: calc(var(--line-offset-mobile) - 60px - (var(--icon-size-mobile) / 2));
        transform: translateY(-50%);
    }
    .right-column .timeline-text {
        font-size: clamp(0.8rem, 3.5vw, 3.5rem);
        margin-left: 20px;
    }
    .final-message {
        font-size: clamp(0.8rem, 4.2vw, 4rem);
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 15px;
    }
    .button-container-central {
        margin-top: 15px;
        margin-bottom: 25px;
    }
    .button {
        font-size: 0.9rem;
    }
    .button span { padding-left: 25px; }
    .button img{ padding-left: 0; }
}

/* 5- Para quem é / para quem não é (container-publico) */
.container-publico {
    width: 100%;
    padding: 40px 20px;
    text-align: center;
    margin: 50px auto 0;
    max-width: 1200px;
}

.container-publico h1 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    margin-bottom: 10px;
    color: #F2CD00;
}

.container-publico h3 {
    font-size: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 80px;
}

.container-publico .publico-content {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.container-publico .para-quem-e,
.container-publico .para-quem-nao-e {
    flex: 1;
    min-width: 300px; /* Largura mínima para cada coluna */
    max-width: 500px;
    background-color: #FFFFFF; /* Fundo para os blocos */
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 20px;
    text-align: left;
}

.container-publico .para-quem-e h4,
.container-publico .para-quem-nao-e h4 {
    font-size: 1.5rem;
    color: #11111F;
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: center;
}

.container-publico ul {
    list-style: none; /* Remove os marcadores de lista padrão */
    padding: 0;
}

.container-publico li {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1rem;
    line-height: 1.5;
    position: relative; /* Para o ícone personalizado */
    padding-left: 60px; /* Espaço para o ícone */
    color: #11111F;
}

.container-publico .para-quem-e li::before {
    content: '✅'; /* Ícone para "para quem é" */
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
}

.container-publico .para-quem-nao-e li::before {
    content: '❌'; /* Ícone para "para quem não é" */
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
}

/* Estilo do botão (replicado do anterior, mas pode ser ajustado se necessário) */
.button-container-central {
    text-align: center; /* Centraliza o botão */
    margin-top: 60px; /* Adiciona um espaço acima do botão, para separá-lo do conteúdo */
    margin-bottom: 40px; /* Espaço abaixo do botão */
}

/* Estilo do botão */
.button {
    /* PROPRIEDADES ATUAIS */
    display: flex; /* Mude para flex para alinhar logo e texto */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    
    max-width: fit-content; /* O botão se ajusta ao conteúdo */
    margin: 30px auto; /* Centraliza o botão e adiciona margens */
    padding: 18px 40px;
    
    background-color: #F2CD00;
    color: #11111F;
    text-decoration: none;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
    background-color: #ffe066; /* Um tom mais claro de amarelo no hover */
    transform: scale(1.05);
    box-shadow: 0px 6px 20px rgba(255, 255, 255, 0.3);
}

/* Estilo do logo no botão (desktop) */
.button img {
    height: 1.8em; /* Tamanho do logo no desktop */
    width: auto;
    margin-right: 0.5em; /* Espaçamento entre o logo e o texto */
    vertical-align: middle;
}

/* Estilo para o texto do botão (desktop) */
.button span {
    line-height: 1.2;
    white-space: nowrap; /* Impede a quebra de linha no desktop */
    vertical-align: middle;
}

/* Responsividade para Para Quem É / Não É */
@media (max-width: 768px) {
    .container-publico {
        padding: 0 15px;
    }

    .container-publico h1 {
        font-size: clamp(1.4rem, 2vw, 2.5rem);
    }

    .container-publico h3 {
        font-size: clamp(1rem, 1.5vw, 2rem);
        margin-bottom: 30px;
    }

    .container-publico .publico-content {
        flex-direction: column;
        gap: 30px;
    }

    .container-publico .para-quem-e,
    .container-publico .para-quem-nao-e {
        min-width: unset;
        width: 100%;
        max-width: 500px; /* Mantém um max-width para não esticar demais */
        margin: 0 auto;
        padding: 25px;
    }

    .container-publico .para-quem-e h4,
    .container-publico .para-quem-nao-e h4 {
        font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    }

    .container-publico li {
        font-size: clamp(0.85rem, 1vw, 1.2rem);
    }

    .container-publico .para-quem-e li::before,
    .container-publico .para-quem-nao-e li::before {
        font-size: 1.3rem;
    }

    .button-container-central {
        padding: 10px 0 0;
        margin-top: 40px; /* Ajuste o espaçamento do botão para mobile */
        margin-bottom: 30px;
    }

    .button {
        display: block; /* Ocupa a largura total */
        width: 100%;
        max-width: 85%; /* Limita a largura em mobile */
        margin: 40px auto 30px; /* Centraliza o botão e ajusta margens */
        
        position: relative; /* Ativa o posicionamento relativo para o logo */
        padding: 15px 30px 15px 100px; /* Ajusta o padding para o logo grande */
        font-size: clamp(1rem, 1.2vw, 1.4rem);
        text-align: left;
    }

    .button img {
        position: absolute;
        left: 20px; /* Posição do logo em mobile */
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        max-height: 60%; /* Logo ocupando a maior parte da altura do botão */
        width: auto;
        margin-right: 0; /* Remove a margem para o posicionamento absoluto */
    }

    .button span {
        display: block; /* Permite que o padding funcione e o texto quebre */
        white-space: normal; /* Permite a quebra de linha em mobile */
        text-align: center; /* Centraliza o texto */
    }
}

/* 6- Módulos da mentoria (container-modulos) */
.container-modulos {
    text-align: center;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 80px;
    max-width: 1200px; /* Limita a largura do container principal */
}

.container-modulos h1 {
    margin-bottom: 50px; /* Espaço maior abaixo do título principal */
    color: #F2CD00; /* Cor do título principal */
    font-size: clamp(2.2rem, 4vw, 3.8rem); /* Título responsivo */
}

.container-modulos .modules {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espaço entre os módulos */
    justify-content: center;
}

.container-modulos .module-box {
    background-color: #FFFFFF; /* Fundo branco para os cards */
    border-radius: 25px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra mais destacada */
    width: calc(33.33% - 20px); /* 3 cards por linha, descontando o gap */
    padding: 20px; /* Padding interno para o texto */
    display: flex; /* Transforma o module-box em um container flexível */
    flex-direction: column; /* Conteúdo empilhado por padrão: cabeçalho e parágrafos */
    align-items: flex-start; /* Alinha o conteúdo do card à esquerda */
    text-align: left; /* Garante que o texto esteja alinhado à esquerda */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição para hover */
    min-height: auto; /* Altura automática para se ajustar ao conteúdo */
    justify-content: flex-start;
    margin-bottom: 15px; /* Adicionei margem inferior entre os módulos */
}

.container-modulos .module-box:hover {
    transform: translateY(-5px); /* Suavizei um pouco o efeito de hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); /* Ajustei a sombra no hover */
}

/* Container para o ícone e o título ficarem lado a lado */
.container-modulos .module-box .module-header {
    display: flex; /* Faz o ícone e o título ficarem na mesma linha */
    align-items: center; /* Alinha verticalmente o ícone e o título no centro */
    margin-bottom: 15px; /* Espaço entre o cabeçalho do módulo e o primeiro parágrafo */
    width: 100%; /* Ocupa toda a largura disponível no card */
}

.container-modulos .module-box .module-icon {
    width: 40px; /* Tamanho do container do ícone */
    height: 40px;
    margin-right: 15px; /* Espaço à direita para afastar o título */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Garante que a imagem não vaze */
    border-radius: 12px; /* Deixa a imagem com bordas arredondadas */
    flex-shrink: 0; /* Impede que o ícone diminua se o título for muito longo */
}

.container-modulos .module-box .module-icon img {
    width: 100%; /* A imagem preenche o container do ícone */
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    border-radius: 20%; /* Deixa a imagem com bordas arredondadas */
}

.container-modulos .module-box h3 {
    font-size: clamp(1.1rem, 1.7vw, 1.3rem); /* Tamanho do título do módulo */
    color: #11111F; /* Cor do título do módulo */
    font-weight: 700;
    text-align: left;
    flex-grow: 1; /* Permite que o título ocupe o espaço restante */
    margin-bottom: 0; /* Remove a margem inferior para não interferir com o alinhamento flex */
}

.container-modulos .module-box p {
    font-size: clamp(0.9rem, 1.3vw, 1rem); /* Tamanho do texto do módulo */
    color: #11111F; /* Cor do texto dentro do card */
    line-height: 1.5;
    margin-bottom: 8px; /* Espaço entre parágrafos */
    text-align: justify; /* Justifica o texto */
}

.container-modulos .module-box p:last-child {
    margin-bottom: 0; /* Remove margem do último parágrafo */
}

/* Responsividade para Módulos da Mentoria */
@media (max-width: 1024px) {
    .container-modulos h1 {
        font-size: clamp(2rem, 3vw, 4rem); /* Título responsivo */
    }
    .container-modulos .module-box {
        width: calc(50% - 15px); /* 2 cards por linha em telas médias */
        margin-bottom: 25px; /* Ajustei a margem inferior entre os cards */
        padding: 18px; /* Ajustei o padding do card */
    }
    .container-modulos .module-box .module-icon {
        width: 35px; /* Ajusta tamanho do ícone */
        height: 35px;
        margin-right: 12px;
    }
    .container-modulos .module-box h3 {
        font-size: clamp(1.2rem, 1.8vw, 2.5rem); /* Ajusta tamanho do título do módulo */
    }
    .container-modulos .module-box p {
        font-size: clamp(0.9rem, 1.2vw, 1.5rem); /* Ajusta tamanho do texto do módulo */
    }
}

@media (max-width: 480px) {
    .container-modulos h1 {
        font-size: clamp(1.5rem, 2vw, 2.5rem); /* Título responsivo */
    }
    .container-modulos .module-box {
        width: 90%; /* 1 card por linha em mobile */
        padding: 15px;
        margin-bottom: 0;
        flex-direction: column; /* Volta a empilhar em telas menores */
        align-items: flex-start; /* Alinha à esquerda */
    }
    .container-modulos .module-box .module-header {
        margin-bottom: 10px; /* Espaço abaixo do cabeçalho do módulo em mobile */
        flex-direction: row; /* Mantém o ícone e o título lado a lado em mobile, se couber */
        align-items: center; /* Centraliza verticalmente o ícone e o título */
    }
    .container-modulos .module-box .module-icon {
        width: 35px; /* Mantém o tamanho do ícone */
        height: 35px;
        margin-right: 10px; /* Pequena margem à direita mesmo em coluna */
    }
    .container-modulos .module-box h3 {
        font-size: clamp(0.9rem, 1.1vw, 1.3rem); /* Ajusta o tamanho do título do módulo */
        margin-bottom: 0; /* Remove margem inferior aqui para consistência */
    }
    .container-modulos .module-box p {
        font-size: clamp(0.8rem, 1vw, 1.2rem); /* Ajusta o tamanho do texto do módulo */
        text-align: justify; /* Garante alinhamento justificado */
    }

    .container-modulos {
        margin-bottom: 50px;
    }
}

/* 7- Benefícios e resultados esperados (container-beneficios) */
.container-beneficios {
    width: 100%;
    background-color: #061D1A; /* Cor de fundo da seção */
    padding: 0px 20px; /* Padding geral para o container */
    text-align: center; /* Centraliza o título, elementos internos podem sobrescrever */
}

.container-beneficios h1 {
    margin-top: 50px;
    margin-bottom: 50px;
    color: #F2CD00; /* Amarelo de destaque */
    font-size: clamp(2.5rem, 4vw, 3.5rem); /* Tamanho de fonte responsivo */
}

.content-wrapper-principal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; /* Alinha os blocos text-content e image-content verticalmente */
    max-width: 1200px; /* Limita a largura do conteúdo principal */
    margin: 0 auto; /* Centraliza o wrapper */
    gap: 20px; /* Espaço entre as colunas (texto e imagem) */
    margin-bottom: 60px; /* Espaço antes da seção CTA inferior */
}

.text-content-beneficios {
    flex: 1; /* Dando mais espaço para a coluna de texto */
    min-width: 350px; /* Largura mínima para a coluna de texto */
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left; /* Alinhamento do texto à esquerda dentro da coluna */
}

.image-content-beneficios {
    flex: 1; /* A coluna da imagem ocupa menos espaço proporcionalmente */
    min-width: 350px; /* Largura mínima para a coluna da imagem */
    padding: 0 20px;
    box-sizing: border-box;
}

.image-content-beneficios img {
    max-width: 100%; /* Imagem responsiva */
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
    margin: 0 auto; /* Centraliza a imagem se ela for menor que a largura do container */
    object-fit: contain; /* Garante que a imagem se ajuste sem cortar */
}

/* --- ESTILOS PARA OS ÍCONES ANTES DO TEXTO --- */

/* Estilo para cada item de reflexão (os "Imagine...") */
.text-content-beneficios .reflection-item {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.3; /* Espaçamento entre linhas */
    margin-top: 26px;
    margin-bottom: 26px;
    color: #FFFFFF;
    max-width: 65ch; /* Limita a largura dos parágrafos para melhor legibilidade */
    margin-left: auto; /* Centraliza o parágrafo dentro da coluna */
    margin-right: auto; /* Centraliza o parágrafo dentro da coluna */
    display: flex; /* Habilita flexbox para alinhar ícone e texto */
    align-items: center; /* Alinha o ícone e o texto verticalmente ao centro */
    text-align: left; /* Garante que o texto dentro do p se alinhe à esquerda */
}

.text-content-beneficios .reflection-item::before {
    content: '✅'; /* O ícone de check */
    display: inline-block; /* Permite controlar margin e padding */
    font-size: 1.2em; /* Tamanho do ícone, relativo ao font-size do parágrafo */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
    line-height: 1; /* Ajuda no alinhamento vertical */
    flex-shrink: 0; /* Impede que o ícone encolha em telas pequenas */
}


/* SEÇÃO CTA INFERIOR (Parte "Agora para de imaginar!") */
.cta-bottom-section {
    max-width: 1000px; /* Limita a largura do conteúdo para não esticar demais */
    margin: 0 auto; /* Centraliza este bloco dentro do .container-beneficios */
    /* *** ADDED/MODIFIED FOR THE WHITE CARD EFFECT *** */
    background-color: #FFFFFF; /* White background */
    border-radius: 20px; /* Rounded corners */
    padding: 40px 0 10px; /* Adjusted padding to give space inside the card */
    box-sizing: border-box; /* Include padding in the element's total width and height */
    /* ************************************************* */
    color: #061D1A; /* Change text color to dark for better contrast on white background */
    text-align: center; /* Centraliza o texto e o botão dentro desta seção */
}

.cta-bottom-section .cta-text {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.8;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    color: #061D1A;
}

/* Estilo para o H2 da seção CTA inferior ("Agora para de imaginar!") */
.cta-bottom-section .reflection-cta-title {
    color: #061D1A;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-bottom: 20px;
    display: inline-flex; /* Usar inline-flex para centralizar o bloco completo (ícone + texto) */
    align-items: center; /* Alinha o ícone e o texto verticalmente ao centro */
    justify-content: center; /* Centraliza o conteúdo (ícone + texto) horizontalmente */
    text-align: center; /* Mantém a centralização do texto */
}

.cta-bottom-section .reflection-cta-title::before {
    content: '❌'; /* O ícone de X */
    display: inline-block;
    font-size: 1em; /* Tamanho do ícone, relativo ao font-size do h2 */
    margin-right: 15px; /* Espaço entre o ícone e o texto */
    line-height: 1;
    flex-shrink: 0;
}

.cta-bottom-section .reflection-cta-title::after {
    content: '❌'; /* O ícone de X */
    display: inline-block;
    font-size: 1em; /* Tamanho do ícone, relativo ao font-size do h2 */
    margin-left: 15px; /* Espaço entre o ícone e o texto */
    line-height: 1;
    flex-shrink: 0;
}

.cta-bottom-section .cta-text {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 75ch; /* Limita a largura do texto do CTA */
    margin-left: auto;
    margin-right: auto;
}

/* Estilo do botão */
.cta-bottom-section .button-container-central {
    text-align: center; /* Centraliza o botão */
    margin-top: 0; /* O margin-bottom do p.cta-text já dá o espaçamento */
}

/* Estilo do botão */
.cta-bottom-section .button {
    /* PROPRIEDADES ATUAIS */
    display: flex; /* Mude de inline-block para flex para alinhar logo e texto */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    
    max-width: fit-content; /* O botão se ajusta ao conteúdo */
    margin: 30px auto; /* Centraliza o botão e adiciona margens */
    padding: 18px 40px; /* Padding para o botão */
    
    background-color: #F2CD00;
    color: #061D1A;
    text-decoration: none;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-bottom-section .button:hover {
    background-color: #ffe066; /* Um tom mais claro de amarelo no hover */
    transform: scale(1.05);
    box-shadow: 0px 6px 20px rgba(255, 255, 255, 0.3);
}

/* Estilo do logo no botão (desktop) */
.cta-bottom-section .button img {
    height: 1.8em; /* Tamanho do logo no desktop */
    width: auto;
    margin-right: 0.5em; /* Espaçamento entre o logo e o texto */
    vertical-align: middle;
}

/* Estilo para o texto do botão (desktop) */
.cta-bottom-section .button span {
    line-height: 1.2;
    white-space: nowrap; /* Impede a quebra de linha no desktop */
    vertical-align: middle;
}

/* Responsividade Geral */
@media (max-width: 768px) {
    .container-beneficios {
        padding: 40px 15px; /* Ajuste o padding para mobile */
    }

    .container-beneficios h1 {
        font-size: clamp(2rem, 3vw, 4rem);
        margin-top: 0;
        margin-bottom: 40px;
    }

    .content-wrapper-principal {
        flex-direction: column-reverse; /* Adicione esta linha */
        gap: 30px;
        margin-bottom: 40px;
    }

    .text-content-beneficios,
    .image-content-beneficios {
        padding: 0 10px;
        min-width: unset; /* Remove min-width para permitir que ocupe 100% da largura */
    }

    .text-content-beneficios .reflection-item {
        font-size: clamp(1.1rem, 1.3vw, 1.5rem);
        margin-bottom: 20px;
        text-align: left; /* Centraliza o texto em telas menores */
        justify-content: left; /* Centraliza o conteúdo do flexbox (ícone + texto) */
        max-width: unset; /* Remove a largura máxima para se ajustar ao container flex */
        margin-left: 0;
        margin-right: 0;
    }
    
    .text-content-beneficios .reflection-item::before {
        font-size: 1.1em; /* Ajusta o tamanho do ícone para mobile */
    }

    .cta-bottom-section {
        /* Adjusted padding for smaller screens if needed, keeping card effect */
        padding: 30px 30px 15px; /* Espaço em branco em volta do botão */
    }

    .cta-bottom-section .reflection-cta-title {
        font-size: clamp(1.8rem, 2vw, 2.5rem);
    }

    .cta-bottom-section .reflection-cta-title::before {
        font-size: 1.3em; /* Ajusta o tamanho do X para mobile */
    }

    .cta-bottom-section .cta-text {
        font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    }

    .cta-bottom-section .button {
        display: block; /* Ocupa a largura total */
        width: 100%;
        max-width: 90%; /* Limita a largura em mobile */
        margin: 40px auto 30px; /* Centraliza o botão e ajusta margens */
        
        position: relative; /* Ativa o posicionamento relativo para o logo */
        padding: 15px 15px 15px 20px; /* Ajusta o padding para o logo grande */
        font-size: clamp(1.1rem, 1.3vw, 1.5rem);
        text-align: left;
    }

    .cta-bottom-section .button img {
        position: absolute;
        left: 20px; /* Posição do logo em mobile */
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        max-height: 60%; /* Logo ocupando a maior parte da altura do botão */
        width: auto;
        margin-right: 0; /* Remove a margem para o posicionamento absoluto */
    }

    .cta-bottom-section .button span {
        display: block; /* Permite que o padding funcione e o texto quebre */
        white-space: normal; /* Permite a quebra de linha em mobile */
        text-align: center; /* Centraliza o texto */
    }
}

/* 8- Quebra de objeções (container-objecoes) */
.container-objecoes {
    width: 100%;
    background-color: #061D1A;
    padding: 100px 20px 50px;
    text-align: center;
}

/* Título Principal DENTRO do container */
.container-objecoes .titulo-principal {
    color: #F2CD00; /* Usei a mesma cor dos títulos das objeções para harmonizar com o fundo escuro do container */
    font-size: clamp(2rem, 5vw, 3rem); /* Maior para h1 */
    margin-bottom: 40px; /* Espaçamento entre o título e as objeções */
    padding: 0 15px; /* Adiciona um pouco de padding para telas menores */
    text-align: center; /* Garante que o título esteja centralizado */
    margin-top: 0; /* Remove margem superior padrão do h1 para não adicionar espaço extra no padding do container */
}

.container-objecoes .objecao-item {
    background-color: #102E27; /* Fundo mais escuro para destaque */
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 40px; /* Espaçamento entre os itens de objeção */
    text-align: left; /* Texto alinhado à esquerda */
    margin: 50px auto; /* Centraliza os itens de objeção */
    max-width: 1000px; /* Limita a largura do conteúdo */
}

.container-objecoes .objecao-item:last-child {
    margin-bottom: 0; /* Remove margem do último item */
}

.container-objecoes .objecao-item h2 {
    color: #F2CD00; /* Título em amarelo */
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 20px;
    text-align: center; /* Centraliza o título da objeção */
}

.container-objecoes .objecao-item p {
    font-size: clamp(1rem, 1.5vw, 1.05rem);
    line-height: 1.7;
    color: #FFFFFF;
    margin-bottom: 15px;
}

/* Estilo do botão (replicado do anterior, mas pode ser ajustado se necessário) */
.button-container-central {
    text-align: center; /* Centraliza o botão */
    margin-top: 60px; /* Adiciona um espaço acima do botão, para separá-lo do conteúdo */
    margin-bottom: 40px; /* Espaço abaixo do botão, se houver mais conteúdo */
}

/* Estilo do botão */
.button {
    /* PROPRIEDADES ATUAIS */
    display: flex; /* Mude de inline-block para flex para alinhar logo e texto */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    
    max-width: fit-content; /* O botão se ajusta ao conteúdo */
    margin: 30px auto; /* Centraliza o botão e adiciona margens */
    padding: 18px 40px; /* Padding para o botão */
    
    background-color: #F2CD00;
    color: #061D1A;
    text-decoration: none;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.button:hover {
    background-color: #ffe066; /* Um tom mais claro de amarelo no hover */
    transform: scale(1.05);
    box-shadow: 0px 6px 20px rgba(255, 255, 255, 0.3);
}

/* Estilo do logo no botão (desktop) */
.button img {
    height: 1.8em; /* Tamanho do logo no desktop */
    width: auto;
    margin-right: 0.5em; /* Espaçamento entre o logo e o texto */
    vertical-align: middle;
}

/* Estilo para o texto do botão (desktop) */
.button span {
    line-height: 1.2;
    white-space: nowrap; /* Impede a quebra de linha no desktop */
    vertical-align: middle;
}

/* Responsividade para Quebra de Objeções */
@media (max-width: 768px) {
    .container-objecoes {
        padding: 30px 15px 20px;
    }

    .container-objecoes .titulo-principal h1 {
        font-size: clamp(2rem, 2.5vw, 3rem);
        margin-bottom: 30px;
    }

    .container-objecoes .objecao-item {
        padding: 25px;
        margin-bottom: 30px;
    }

    .container-objecoes .objecao-item h2 {
        font-size: clamp(1.2rem, 1.4vw, 1.6rem);
        margin-bottom: 15px;
    }

    .container-objecoes .objecao-item p {
        font-size: clamp(1rem, 1.2vw, 1.4rem);
    }

    .button-container-central {
        padding: 0 30px;
        margin-top: 40px; /* Ajuste o espaçamento do botão para mobile */
        margin-bottom: 30px;
    }

    .button {
        display: block; /* Ocupa a largura total */
        width: 100%;
        max-width: 80%; /* Limita a largura em mobile */
        margin: 40px auto 30px; /* Centraliza o botão e ajusta margens */
        
        position: relative; /* Ativa o posicionamento relativo para o logo */
        padding: 15px 15px 15px 30px; /* Ajusta o padding para o logo grande */
        font-size: clamp(1rem, 1.2vw, 1.4rem);
        text-align: left;
    }

    .button img {
        position: absolute;
        left: 20px; /* Posição do logo em mobile */
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        max-height: 60%; /* Logo ocupando a maior parte da altura do botão */
        width: auto;
        margin-right: 0; /* Remove a margem para o posicionamento absoluto */
    }

    .button span {
        display: block; /* Permite que o padding funcione e o texto quebre */
        white-space: normal; /* Permite a quebra de linha em mobile */
        text-align: center; /* Centraliza o texto */
    }
}

/* 9- Bônus (container-bonus) */
.container-bonus {
    width: 100%;
    background-color: #F2CD00;
    padding: 80px 100px 100px;
    text-align: center;
    color: #11111F;
}

.container-bonus h1 {
    font-size: clamp(2rem, 4vw, 3rem); /* Responsividade para h1 */
    text-align: center;
    color: #061D1A;
    margin-bottom: 50px;
}

.container-bonus .bonus-list {
    display: flex;
    flex-direction: column; /* Lista de bônus em coluna */
    gap: 40px; /* Espaço entre cada bônus */
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.container-bonus .bonus-item {
    background-color: #FFFFFF; /* Fundo branco para cada item de bônus */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.container-bonus .bonus-item h3 {
    color: #061D1A;
    font-size: clamp(1.4rem, 1.8vw, 2.2rem);
    margin-bottom: 10px;
    text-align: left;
}

.container-bonus .bonus-item p {
    color: #061D1A;
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    line-height: 1.6;
    text-align: left;
}

/* Responsividade para Bônus */
@media (max-width: 768px) {
    .container-bonus {
        padding: 40px 15px;
    }

    .container-bonus h1 {
        font-size: clamp(1.1rem, 1.3vw, 1.5rem);
        margin-bottom: 40px;
    }

    .container-bonus .bonus-list {
        gap: 20px;
    }

    .container-bonus .bonus-item {
        padding: 20px;
    }

    .container-bonus .bonus-item h3 {
        font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    }

    .container-bonus .bonus-item p {
        font-size: clamp(1rem, 1.2vw, 1.4rem);
    }
}

/* 10- Depoimentos estratégicos (container-depoimentos) */
.container-depoimentos {
    width: 100%;
    padding: 40px 20px;
    margin: 50px auto;
    max-width: 1200px;
    background-color: #11111F; /* Fundo do container principal conforme solicitado */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* ALINHAMENTO VERTICAL CENTRALIZADO */
}

/* Estilo para o container do texto */
.container-depoimentos .text-content {
    width: 48%;
    text-align: left;
    box-sizing: border-box;
}

.container-depoimentos h1 {
    margin-bottom: 20px;
    color: #F2CD00;
    text-align: left;
    font-size: clamp(2.5rem, 3.5vw, 4.5rem);
    line-height: 1.2;
}

.container-depoimentos h3 {
    margin-bottom: 0;
    color: #FFFFFF;
    text-align: left;
    font-size: clamp(1.8rem, 2.2vw, 2.6rem);
    line-height: 1.5;
}

.container-depoimentos .depoimento-box {
    width: 48%;
    display: flex;
    justify-content: flex-end; /* Continua alinhando a imagem à direita dentro da sua coluna */
    align-items: center; /* ALINHA A IMAGEM AO CENTRO VERTICALMENTE DENTRO DE SUA CAIXA (MODIFICADO AQUI) */
    box-sizing: border-box;
    /* Removidos quaisquer backgrounds, borders ou shadows que pudessem criar um "card" */
}

.container-depoimentos .depoimento-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsividade para Depoimentos */
@media (max-width: 768px) {
    .container-depoimentos {
        padding: 0 15px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .container-depoimentos .text-content {
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }

    .container-depoimentos h1 {
        font-size: clamp(1.5rem, 2vw, 2.5rem);
        margin-bottom: 15px;
        text-align: center;
    }

    .container-depoimentos h3 {
        font-size: clamp(0.89rem, 1.1vw, 1.2rem);
        text-align: center;
    }

    .container-depoimentos .depoimento-box {
        width: 96%;
        justify-content: center;
    }

    .container-depoimentos .depoimento-box img {
        width: 100%;
    }
}

/* 11- Sobre a MyTree (container-sobre-mytree) */
.container-sobre-mytree {
    width: 100%;
    padding: 5px 20px 50px;
    margin: 5px auto 0;
    max-width: 1200px; /* Largura máxima aumentada para acomodar imagem e texto lado a lado */
    background-color: #11111F; /* Fundo alterado para #11111F */
    color: #FFFFFF; /* Garante que o texto seja visível no fundo escuro */
}

.container-sobre-mytree h1 {
    text-align: center; /* Mantém o título centralizado acima do conteúdo */
    margin-bottom: 60px; /* Adiciona espaço abaixo do título */
    color: #F2CD00;
}

.content-wrapper {
    display: flex; /* Habilita flexbox para alinhamento da imagem e do texto */
    align-items: center; /* Alinha os itens verticalmente no meio */
    gap: 40px; /* Espaço entre a imagem e o texto */
}

.image-wrapper {
    flex-shrink: 0; /* Evita que a imagem encolha */
    width: 50%; /* Ocupa 50% da largura do container */
    max-width: 600px; /* Largura máxima para a imagem (metade da largura máxima total) */
    position: relative; /* Essencial para posicionar a sobreposição do pseudo-elemento */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper img {
    width: 70%;
    height: auto;
    display: block;
    border-radius: 8px; /* Opcional: adiciona um leve arredondamento nas bordas da imagem */
    z-index: 1; /* Garante que a imagem esteja acima da sobreposição do pseudo-elemento */
    position: relative; /* Necessário para que z-index funcione em relação ao pseudo-elemento */
}

/* Pseudo-elemento para o efeito de sombra desvanecida (vinheta) */
.image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px; /* Combina com o border-radius da imagem */
    /* Gradiente radial para o efeito de vinheta */
    background: radial-gradient(
        ellipse at center,
        rgba(17, 17, 31, 0) 10%, /* Transparente no centro */
        rgba(17, 17, 31, 0.8) 80% /* Desvanece para uma cor escura e semi-transparente (combinando com o fundo) */
    );
    pointer-events: none; /* Permite que cliques passem pela sobreposição para a imagem, se necessário */
    z-index: 2; /* Garante que a sobreposição esteja acima da imagem */
}


.text-content {
    flex-grow: 1; /* Permite que o conteúdo de texto ocupe o espaço restante */
    text-align: left;
    margin-right: 26px;
}

.container-sobre-mytree p {
    font-size: clamp(1.1rem, 1.25vw, 1.6rem);
    text-align: left;
    line-height: 1.5;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.container-sobre-mytree p:last-of-type { /* Aponta para o último parágrafo dentro de .text-content */
    margin-bottom: 0;
}

/* Estilo do botão dentro da seção "Sobre a MyTree" */
.container-sobre-mytree .button {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: fit-content;
    margin: 30px auto;
    padding: 18px 40px;
    background-color: #F2CD00;
    color: #11111F;
    text-decoration: none;
    border-radius: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estilo do logo no botão da seção "Sobre a MyTree" */
.container-sobre-mytree .button img {
    height: 1.8em;
    width: auto;
    margin-right: 0.5em;
    vertical-align: middle;
}

/* Estilo para o texto do botão da seção "Sobre a MyTree" */
.container-sobre-mytree .button span {
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
}

/* Responsividade para Sobre a MyTree */
@media (max-width: 768px) {
    .container-sobre-mytree {
        padding: 0 15px;
        margin: 0 auto;
    }

    .container-sobre-mytree h1 {
        font-size: clamp(1.8rem, 2vw, 2.5rem); /* Ajustado para telas menores */
        margin-bottom: 25px;
    }

    .content-wrapper {
        flex-direction: column; /* Empilha imagem e texto verticalmente em telas menores */
        gap: 20px;
    }

    .image-wrapper {
        width: 60%; /* Ajusta a largura da imagem para telas menores */
        max-width: 300px;
    }

    .text-content {
        margin-right: 0;
        padding: 0 20px;
        text-align: center; /* Centraliza o texto */
    }

    .container-sobre-mytree p {
        font-size: clamp(0.95rem, 1.2vw, 1.4rem);
    }

    .container-sobre-mytree .button {
        display: block;
        width: 100%;
        max-width: 90%;
        margin: 40px auto 30px;
        
        position: relative;
        padding: 15px 20px 15px 30px;
        font-size: clamp(1rem, 1.2vw, 1.4rem);
        text-align: left;
    }

    .container-sobre-mytree .button img {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        max-height: 60%;
        width: auto;
        margin-right: 0;
    }

    .container-sobre-mytree .button span {
        display: block;
        white-space: normal;
        text-align: center;
    }
}

/* 12- Valor + Tabela + CTA (container-valor) */
.container-valor {
    width: 100%;
    background-color: #FFFFFF;
    padding: 50px 20px;
    margin-top: 80px;
    text-align: center;
}

.container-valor h1 {
    color: #061D1A;
    font-size: clamp(1.5rem, 4vw, 4rem);
    margin: 30px clamp(10px, 12vw, 160px); /* margem-minima, margem-preferida (baseada em vw), margem-maxima */
}

.container-valor ul {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
    background-color: #102E27; /* Fundo para a lista de valores */
    border-radius: 20px;
    padding: 20px;
    border: 4px solid #f2cd00; /* Borda amarela de destaque */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin: 50px auto;
    max-width: 1000px; /* Limita a largura do conteúdo */
}

/* Modificação para alinhar texto e valor na lista */
.container-valor li {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: #FFFFFF;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed #355E3B; /* Linha tracejada */
    text-align: left; /* Garante que o texto dentro do li comece à esquerda */
    display: flex; /* Transforma o li em um container flexível */
    justify-content: space-between; /* Alinha os itens (texto e valor) com espaço entre eles */
    align-items: center; /* Centraliza verticalmente se houver diferença de altura */
}

/* Estilo para o span que vai conter o valor */
.container-valor li .value-text {
    font-weight: 700; /* Deixa o valor em negrito */
    white-space: nowrap; /* Impede que o valor quebre a linha */
    margin-left: 10px; /* Adiciona um pequeno espaçamento entre o texto e o valor */
    color: #F2CD00; /* Cor dourada para os valores */
    position: relative; /* Essencial para posicionar o pseudo-elemento */
    display: inline-block; /* Garante que o pseudo-elemento se posicione corretamente em relação ao texto */
}

.container-valor li:last-child {
    border-bottom: none;
    font-weight: 700; /* Total mais destacado */
    font-size: clamp(1.5rem, 2vw, 1.8rem); /* Pode deixar o total um pouco maior se quiser */
    margin-top: 20px;
    /* Ajustes para o TOTAL usando flexbox também */
    justify-content: space-between;
}

/* Estilo específico para o valor do TOTAL */
.container-valor li:last-child .value-text {
    font-size: clamp(1.5rem, 2vw, 1.8rem); /* Pode deixar o total um pouco maior se quiser */
    position: relative; /* Garante que o pseudo-elemento será posicionado relativo a este span */
}

/* --- NOVO ESTILO PARA A LINHA DIAGONAL NO VALOR TOTAL --- */
.container-valor li:last-child .value-text::before {
    content: ''; /* Essencial para pseudo-elementos */
    position: absolute; /* Permite posicionamento livre */
    top: 75%; /* Começa no meio vertical */
    left: -4px; /* Começa na esquerda */
    width: 106%; /* Ocupa toda a largura do texto e mais um pouco */
    height: 4px; /* Espessura da linha */
    background-color: #FF0000; /* Cor da linha: Vermelho */
    transform: rotate(-7deg); /* Gira a linha para criar a diagonal (ajuste o ângulo se necessário) */
    transform-origin: left center; /* Ponto de origem da rotação (do centro da esquerda) */
}

.container-valor p {
    font-size: clamp(1.2rem, 1.65vw, 1.35rem);
    font-weight: 700;
    color: #061D1A;
    margin-bottom: 15px;
}

/* Estilo do botão CTA final do valor */
.container-valor .cta-button {
    /* PROPRIEDADES PARA DESKTOP */
    display: flex; /* Alinha logo e texto em uma linha */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    
    /* Limita a largura máxima do botão para não ocupar 100% da tela */
    max-width: 500px; 
    margin: 50px auto 20px; /* Centraliza o botão e adiciona margens */
    
    padding: 15px 40px; /* Preenchimento para dar um bom tamanho ao botão */
    
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 700;
    background-color: #F2CD00;
    color: #061D1A;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.container-valor .cta-button:hover {
    background-color: #E6C200;
}

/* Estilo do logo e do texto para DESKTOP */
.container-valor .cta-button img {
    height: 1.8em; /* Define um tamanho razoável para o logo no desktop */
    width: auto;
    margin-right: 0.5em; /* Adiciona um espaço entre o logo e o texto */
}

.container-valor .cta-button span {
    line-height: 1.2;
}

/* Novo estilo para o card de preço */
.price-card {
    background-color: #102E27; /* Cor de fundo do card */
    border-radius: 20px;
    padding: 30px 20px;
    margin: 40px auto 70px; /* Centraliza e adiciona margem */
    border: 4px solid #f2cd00; /* Borda amarela de destaque */
    max-width: 1000px; /* Largura máxima do card */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra para destacar o card */
    text-align: center;
}

.price-card .card-text {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700; /* Garante que não fique em negrito */
    color: #FFFFFF; /* Cor do texto "Nessa promoção..." */
    margin-bottom: 20px;
}

.price-card .card-price-main {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Tamanho maior para o preço principal */
    color: #F2CD00; /* Cor dourada */
    margin-bottom: 10px;
    font-weight: 700;
}

.price-card .card-price-alt {
    font-size: clamp(1.2rem, 2vw, 2.5rem); /* Tamanho para o preço à vista */
    color: #FFFFFF; /* Cor branca */
    font-weight: 700;
    margin-bottom: 0; /* Remove margem inferior para não afetar o espaçamento do card */
}


/* Responsividade para Valor + Tabela + CTA */
@media (max-width: 768px) {
    .container-valor {
        padding: 30px 15px;
        margin-top: 15px;
    }

    .container-valor h1 {
        font-size: clamp(1.26rem, 1.5vw, 1.7rem);
        margin: 10px 20px 25px;
    }

    .container-valor ul {
        padding: 15px;
        margin-top: 0;
        margin-bottom: 30px;
    }

    .container-valor li {
        font-size: clamp(0.9rem, 1.1vw, 1.2rem);
        margin-bottom: 8px;
    }

    /* Responsividade para o span de valor */
    .container-valor li .value-text {
        margin-left: 5px; /* Menos espaçamento em telas pequenas */
    }

    .container-valor p {
        font-size: clamp(1rem, 1.2vw, 1.4rem);
        margin-bottom: 20px;
    }

    /* Responsividade para o botão */
    .container-valor .cta-button {
        /* PROPRIEDADES QUE MUDAM NO MOBILE */
        display: block; /* Ocupa 100% da largura disponível */
        width: 100%;
        max-width: 70%; /* Limita a largura em mobile também */
        margin: 40px auto 20px; /* Centraliza o botão */
        
        position: relative; /* Ativa o posicionamento relativo para o logo */
        padding: 15px 20px 15px 80px; /* Ajusta o padding para o logo grande */
        font-size: 1.1rem;
        text-align: center; /* Centraliza o texto */
    }

    .container-valor .cta-button img {
        /* POSICIONAMENTO DO LOGO NO MOBILE (SOLUÇÃO QUE VOCÊ QUERIA) */
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        max-height: 60%; /* Logo ocupando a maior parte da altura do botão */
        width: auto;
        margin-right: 0; /* Remove a margem para o posicionamento absoluto */
    }

    /* Responsividade para o card de preço */
    .price-card {
        padding: 20px 15px;
        margin: 30px auto;
    }

    .price-card .card-text {
        font-size: clamp(1.2rem, 1.4vw, 1.6rem);
        margin-bottom: 15px;
    }

    .price-card .card-price-main {
        font-size: clamp(2.2rem, 2.8vw, 3.2rem);
    }

    .price-card .card-price-alt {
        font-size: clamp(1rem, 1.2vw, 1.4rem);
    }
}

/* 13- Garantia de 30 dias (container-garantia) */
.container-garantia {
  width: 100%;
  padding: 10px 20px 100px; /* Padding para o container branco (que agora é o .container-garantia) */
  background-color: #FFFFFF; /* Fundo branco para o container principal */
  text-align: center; /* Centraliza o card interno */
}

.garantia-card {
  /* Este é o seu "card" com o fundo escuro, borda e sombra */
  background-color: #061D1A; /* Fundo mais escuro para o card */
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 4px solid #f2cd00; /* Borda amarela de destaque */
  padding: 30px 0; /* Padding interno do card */
  margin: 0 auto; /* Centraliza o card dentro do .container-garantia */
  max-width: 1000px; /* Ajuste a largura máxima do card se necessário */
  text-align: left; /* Garante que o texto dentro do card volte para a esquerda */
}

.container-garantia .garantia-content {
  display: flex; /* Permite que os itens fiquem lado a lado */
  align-items: center; /* Alinha os itens verticalmente ao centro */
  gap: 0; /* Espaço entre a imagem e o texto */
}

.container-garantia .garantia-logo {
  flex-basis: 50%; /* Ocupa aproximadamente 50% do espaço */
  flex-shrink: 0; /* Impede que a imagem encolha demais */
  max-width: 50; /* Garante que não ultrapasse 50% */
  display: flex; /* Para centralizar a imagem dentro do seu container */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente (se necessário) */
}

.container-garantia .garantia-logo img {
  max-width: 70%; /* Garante que a imagem não transborde o container logo */
  height: auto; /* Mantém a proporção da imagem */
  display: block; /* Remove espaço extra abaixo da imagem */
}

.container-garantia .garantia-text {
  flex-basis: 50%; /* Ocupa o restante 50% do espaço */
  max-width: 50%; /* Garante que não ultrapasse 50% */
}

.container-garantia p {
  font-size: clamp(1rem, 1.15vw, 1.1rem); /* Ajustei um pouco o tamanho inicial da fonte */
  color: #FFFFFF;
  margin-bottom: 15px; /* Reduzi um pouco a margem inferior */
  margin-right: 63px;
}

.container-garantia p:last-of-type {
  margin-bottom: 0; /* Remove margem do último parágrafo */
}

/* Responsividade para Garantia */
@media (max-width: 768px) {
  .container-garantia {
    padding: 30px 15px 40px; /* Ajusta o padding do container principal */
    margin: 0 auto;
  }

  .garantia-card {
    padding: 20px 15px; /* Ajusta o padding interno do card em telas menores */
  }

  .container-garantia .garantia-content {
    flex-direction: column; /* Empilha os itens em telas menores */
    gap: 20px;
    text-align: center; /* Centraliza o texto novamente em telas menores */
  }

  .container-garantia .garantia-logo {
    width: 60%; /* Ocupa mais largura em telas menores */
    max-width: 80%;
  }

  .container-garantia .garantia-logo img {
    max-width: 100%;
  }

  .container-garantia .garantia-text {
    width: 90%;
    max-width: 90%;
  }

  .container-garantia p {
    font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    margin-bottom: 15px;
    margin-right: 0;
  }
}

/* 14- FAQ (container-faq) - Mantendo a estrutura do JS */
.container-faq {
    width: 100%;
    padding: 60px 20px 40px;
    text-align: center;
    margin: 30px auto;
}

.container-faq h1 {
    font-size: clamp(3rem, 4vw, 5rem);
    margin-bottom: 60px;
    color: #F2CD00;
}

/* Perguntas e Respostas */
.faq {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 15px;
    font-size: clamp(1.2rem, 1.6vw, 2rem);;
    font-weight: 700;
    background-color: #FFFFFF;
    border: none;
    cursor: pointer;
    color: #11111F;
    transition: background-color 0.2s ease-in-out;
}

.faq-question:hover {
    background-color: #F2CD00;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    background-color: #F2CD00;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.faq-answer p {
    margin: 10px 0;
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    text-align: left;
    line-height: 1.6;
    color: #11111F;
}

/* Quando a resposta está ativa */
.faq-item.active .faq-answer {
    max-height: none; /* Remove o limite de altura */
    height: auto; /* Permite que o conteúdo se ajuste ao tamanho necessário */
    padding: 15px;
    background-color: #F2CD00;
}

/* Quando a pergunta está ativa */
.faq-item.active .faq-question {
    background-color: #F2CD00; /* Fundo amarelo constante */
}

/* Responsividade para FAQ */
@media (max-width: 768px) {
    .container-faq {
        padding: 10px 15px;
    }

    .container-faq h1 {
        margin-bottom: 30px;
        font-size: clamp(2rem, 3vw, 4rem);
    }

    .faq-question {
        padding: 12px;
    }

    .faq-answer p {
        margin: 8px 0;
    }
}

/* 15- CTA final (container-cta-final) */
.container-cta-final {
    width: 100%;
    padding: 5px 20px;
    text-align: center;
    margin: 5px auto;
    background-color: #11111F;
}

.container-cta-final h1 {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    color: #F2CD00;
    margin: 0 clamp(10px, 12vw, 160px) 50px; /* margem-minima, margem-preferida (baseada em vw), margem-maxima */
}

.container-cta-final h2 {
    font-size: clamp(1.1rem, 1.45vw, 2rem);
    color: #FFFFFF;
    margin: 0 clamp(10px, 12vw, 160px) 10px; /* margem-minima, margem-preferida (baseada em vw), margem-maxima */
}

/* Estilo do Botão CTA final */
.container-cta-final .cta-button {
    /* PROPRIEDADES ATUAIS */
    display: flex; /* Mude de inline-block para flex para alinhar logo e texto */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    
    max-width: fit-content; /* O botão se ajusta ao conteúdo */
    margin: 80px auto; /* Centraliza o botão e ajusta as margens verticais */
    padding: 10px 30px; /* Padding para o botão */
    
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    color: #11111F;
    background-color: #F2CD00;
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container-cta-final .cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0px 6px 20px #FFFFFF;
}

/* Estilo do logo no botão CTA final (desktop) */
.container-cta-final .cta-button img {
    height: 1.4em; /* Tamanho do logo no desktop */
    width: auto;
    margin-right: 0.5em; /* Espaçamento entre o logo e o texto */
    vertical-align: middle;
}

/* Estilo para o texto do botão CTA final (desktop) */
.container-cta-final .cta-button span {
    line-height: 1.2;
    white-space: nowrap; /* Impede a quebra de linha no desktop */
    vertical-align: middle;
}

/* Responsividade para CTA Final */
@media (max-width: 768px) {
    .container-cta-final {
        padding: 0 15px;
    }

    .container-cta-final h1 {
        font-size: clamp(1.2rem, 1.4vw, 1.6rem);
        margin: 0 15px 25px;
    }

    .container-cta-final h2 {
        font-size: clamp(0.9rem, 1.2vw, 1.4rem);
        margin: 0 15px 25px;
    }

    .container-cta-final .cta-button {
        display: block; /* Ocupa a largura total */
        width: 100%;
        max-width: 70%; /* Limita a largura em mobile */
        margin: 40px auto; /* Centraliza o botão e ajusta margens */
        
        position: relative; /* Ativa o posicionamento relativo para o logo */
        padding: 15px 20px 15px 80px; /* Ajusta o padding para o logo grande */
        font-size: clamp(1.1rem, 1.3vw, 1.5rem); /* Ajuste para mobile */
        text-align: left;
    }

    .container-cta-final .cta-button img {
        position: absolute;
        left: 20px; /* Posição do logo em mobile */
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        max-height: 60%; /* Logo ocupando a maior parte da altura do botão */
        width: auto;
        margin-right: 0; /* Remove a margem para o posicionamento absoluto */
    }

    .container-cta-final .cta-button span {
        display: block; /* Permite que o padding funcione e o texto quebre */
        white-space: normal; /* Permite a quebra de linha em mobile */
        text-align: center; /* Centraliza o texto */
    }
}

/* 16- Rodapé (container-rodape-final) */
.container-rodape-final {
    width: 100%;
    padding: 20px 10px;
    background-color: #F2CD00; /* Cor de fundo do rodapé */
    text-align: center;
    color: #11111F;
    margin-top: auto; /* Empurra o rodapé para o final da página */
}

.container-rodape-final p {
    font-size: clamp(0.7rem, 1.2vw, 0.9rem); /* Ajuste para responsividade */
    font-weight: normal;
    margin: 5px 0; /* Espaçamento entre as linhas do rodapé */
    line-height: 1.5;
    color: #11111F;
}

/* Opcional: para evitar que a "piada" do rodapé fique muito grande em telas pequenas */
@media (max-width: 768px) {
    .container-rodape-final p:last-child {
        font-size: 0.6rem;
    }
}

/* Estilos para a barra de rolagem personalizada (Webkit - Chrome, Edge, Safari, etc.) */

/* Track (fundo da barra de rolagem) */
::-webkit-scrollbar {
    width: 10px; /* Largura da barra de rolagem vertical - um pouco mais fina */
    height: 10px; /* Altura da barra de rolagem horizontal */
}

::-webkit-scrollbar-track {
    background: transparent; /* Fundo totalmente transparente para o "track" */
}

/* Thumb (o "botão" que você arrasta) */
::-webkit-scrollbar-thumb {
    background-color: rgba(242, 205, 0, 0.4); /* Seu amarelão com 40% de opacidade */
    border-radius: 10px; /* Borda arredondada para o thumb */
    border: 2px solid transparent; /* Borda transparente para não interferir */
}

/* Ao passar o mouse sobre o thumb */
::-webkit-scrollbar-thumb:hover {
    background-color: #F2CD00; /* Amarelão total quando o mouse está em cima */
    border: 2px solid #F2CD00; /* Uma bordinha sutil que aparece junto */
}

/* Canto da barra de rolagem (onde a horizontal e vertical se encontram) */
::-webkit-scrollbar-corner {
    background: transparent; /* Fundo transparente também para o canto */
}