/* Importação das fontes do Google Fonts */
/* Inter para títulos (Black) e Montserrat para textos e comentários (Regular) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&family=Montserrat:wght@400;600&display=swap');

section {
    max-width: 850px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    justify-self: center;
}

/* Estilos globais para o corpo da página */
body {
    font-family: 'Montserrat', sans-serif;
    /* Fonte padrão para o corpo */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Garante que padding e bordas não aumentem o tamanho total do elemento */
    background-color: #FFFFFF;
    /* Fundo branco, conforme solicitado */
    color: #333;
    text-align: center;
    /* Cor de texto padrão, um cinza escuro */
}

i {
    top: .5em;
    left: .1em;
}

/* Estilos da seção Hero */
.hero-section {
    display: flex;
    /* Usa Flexbox para o layout */
    flex-direction: column;
    /* Coloca os itens em coluna por padrão (mobile-first) */
    align-items: center;
    /* Centraliza os itens horizontalmente */
    padding: 30px 20px;
    /* Reduz um pouco o padding vertical */
    text-align: center;
    /* Centraliza o texto */
    background-color: #FFFFFF;
    /* Fundo branco, conforme solicitado */
}

/* Estilos para o ícone do desafio no topo */
.challenge-icon {
    margin-bottom: 15px;
    /* Reduz um pouco o espaçamento abaixo do ícone */
}

.challenge-icon img {
    max-width: 70px;
    /* Reduz um pouco o tamanho do ícone */
    height: auto;
}

/* Estilos do conteúdo textual da Hero Section */
.hero-content {
    max-width: 700px;
    /* Reduz um pouco a largura máxima para o conteúdo */
    margin-bottom: 25px;
    text-align: center;
    /* Reduz o espaço entre o conteúdo e a imagem em mobile */
}

/* Microcopy de urgência */
.urgency-microcopy {
    font-family: 'Montserrat', sans-serif;
    /* Montserrat Regular */
    font-weight: 400;
    font-size: 0.85em;
    /* Reduz ligeiramente a fonte */
    color: #555;
    margin-bottom: 8px;
    /* Reduz a margem */
}

/* Título Principal (Headline) */
.headline {
    font-family: 'Inter', sans-serif;
    /* Inter Black para o título */
    font-weight: 900;
    /* Black */
    font-size: 2.3em;
    /* Reduz o tamanho da fonte */
    color: #000;
    /* Contraste forte no título (preto) */
    margin: .1em;
    /* Reduz a margem */
    line-height: 1.15;
    text-align: center;
    /* Ajusta a altura da linha */
}

.headline2 {
    text-align: left;

    font-family: 'Inter', sans-serif;
    /* Inter Black para o título */
    font-weight: 900;
    /* Black */
    font-size: 2em;
    /* Reduz o tamanho da fonte */
    color: #E67E22;
    /* Contraste forte no título (preto) */
    margin: .1em;
    /* Reduz a margem */
    line-height: 1.15;
    /* Ajusta a altura da linha */
    margin-top: 0px;
}

/* Subheadline (Complemento com benefício direto) */
.subheadline {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    /* Montserrat Regular */
    font-weight: 400;
    font-size: 1.1em;
    /* Reduz ligeiramente */
    line-height: 1.5;
    /* Reduz a altura da linha */
    margin-bottom: 25px;
    /* Reduz a margem */
}

/* Botão de Chamada para Ação (CTA) */
.btn-cta {
    display: inline-block;
    /* Permite aplicar padding e margin */
    background-color: #E67E22;
    /* Laranja terroso/queimado */
    color: #FFF;
    /* Texto branco para contraste */
    padding: 1.5em 1em;
    /* Reduz o padding */
    border-radius: 8px;
    /* Reduz ligeiramente o arredondamento */
    text-decoration: none;
    /* Remove sublinhado */
    font-weight: bold;
    font-size: 1em;
    /* Reduz ligeiramente */
    transition: background-color 0.3s ease;
    /* Transição suave ao passar o mouse */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
}

.btn-cta:hover {
    background-color: #D36E1A;
    /* Escurece um pouco no hover */
}

/* Estilos da imagem ou mockup */
.hero-image {
    margin-top: 15px;
    /* Reduz um pouco o espaçamento */
}

.hero-image img {
    max-width: 100%;
    /* Ajusta um pouco mais a largura máxima */
    height: auto;
    /* Mantém a proporção da imagem */
    border-radius: 12px;
    /* Reduz ligeiramente o arredondamento */
}

/* Media Queries para Responsividade da Hero Section */
@media (min-width: 768px) {
    .hero-section {
        flex-direction: row;
        /* Altera para layout em linha para telas maiores */
        text-align: left;
        /* Alinha o texto à esquerda em telas maiores */
        padding: 40px;
        /* Reduz o padding */
    }

    .hero-content {
        flex: 1;
        /* Ocupa o espaço disponível */
        margin-right: 40px;
        /* Reduz o espaço entre o conteúdo e a imagem */
        margin-bottom: 0;
        /* Remove a margem inferior */
    }

    .hero-image {
        flex: 1;
        /* Ocupa o espaço disponível */
        margin-top: 0;
        /* Remove a margem superior */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .headline {
        font-size: 2.5em;
        /* Ajusta o tamanho da fonte para telas maiores */
    }

    .headline2 {
        font-size: 3em;
        /* Ajusta o tamanho da fonte para telas maiores */
    }

    .subheadline {
        font-size: 1.2em;
        /* Ajusta o tamanho da fonte */
    }
}

@media (max-width: 480px) {
    .headline {
        font-size: 1.3em;
        /* Ajuste para telas muito pequenas */
    }

    .headline2 {
        font-size: 1.5em;
        /* Ajusta o tamanho da fonte para telas maiores */
    }

    .subheadline {
        font-size: 0.95em;
        /* Ajuste para telas muito pequenas */
    }

    .btn-cta {
        padding: 1.5em 1em;
        font-size: 0.9em;
    }
}

/* Estilos da Seção 2 - Visão Geral do Desafio */
.overview-section {
    background-color: #F8F8F8;
    /* Fundo cinza claro para contraste com a seção Hero */
    padding: 50px 20px;
    /* Reduz o padding vertical */
    text-align: left;
    /* Alinha toda a seção para a esquerda */
}

.overview-section .container {
    max-width: 850px;
    /* Reduz a largura máxima */
    margin-left: 0;
    /* Alinha o container à esquerda */
    margin-right: auto;
    /* Permite que o restante do espaço vá para a direita */
    padding: 0 30px;
    /* Reduz o padding horizontal no container */
}

.overview-section .section-title {
    font-family: 'Inter', sans-serif;
    /* Inter Black para títulos */
    font-weight: 900;
    font-size: 2em;
    /* Reduz o tamanho do título */
    color: #000;
    margin-bottom: 25px;
    /* Reduz a margem inferior */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;

    /* Mantém espaçamento entre as letras */
}

/* Estilos para os wrappers de texto */
.overview-intro-text,
.overview-method-text {
    margin-bottom: 18px;
    /* Reduz o espaçamento consistente entre os blocos de texto */
}

.overview-section .section-description,
.overview-section .method-description {
    font-family: 'Montserrat', sans-serif;
    /* Montserrat Regular para textos */
    font-weight: 400;
    font-size: 1.05em;
    /* Reduz um pouco mais o tamanho da fonte */
    line-height: 1.6;
    /* Reduz a altura da linha para melhor leitura */
    margin-bottom: 12px;
    /* Ajusta margem inferior */
    max-width: 700px;
    /* Limita a largura do texto para melhor leitura */
    color: #222;
    text-align: center;
    padding: 0em 1em;
    /* Cor de texto mais escura para melhor contraste */
}

.overview-section .overview-points {
    text-align: center;
    /* Alinha a lista à esquerda */
    margin-left: 0;
    /* Alinha o bloco da lista à esquerda */
    margin-right: auto;
    /* Permite que o restante do espaço vá para a direita */
    margin-top: 20px;
    /* Ajusta margem */
    margin-bottom: 20px;
    /* Ajusta margem */
    max-width: 700px;
    /* Limita a largura da lista */
    padding-left: 0;
    /* Remove recuo padrão, usaremos padding no li */
}

.overview-section .overview-points p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.05em;
    /* Ajusta o tamanho da fonte */
    color: #222;
    margin-bottom: 8px;
    /* Reduz espaço antes da lista */
    line-height: 1.5;
    /* Ajusta a altura da linha */
}

.overview-section .overview-points ul {
    list-style-type: none;
    /* Remove os marcadores padrão da lista */
    padding: 0;
    margin: 0;
}

.overview-section .overview-points ul li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    /* Reduz a fonte para caber em uma linha */
    line-height: 1.25;
    /* Reduz a altura da linha para um visual mais compacto */
    margin-bottom: 6px;
    /* Mais espaço entre os itens da lista */
    position: relative;
    padding-left: 28px;
    /* Ajusta o espaço para o ícone customizado */
    color: #444;
    /* Cor de texto mais suave para os itens da lista */
}

.overview-section .overview-points ul li strong {
    font-weight: bold;
    /* Mantém o negrito para as semanas */
}

.overview-section .overview-points ul li::before {
    content: '✅';
    /* Ícone de checkmark */
    position: absolute;
    left: 0;
    top: 0.2em;
    /* Ajusta o ícone para o topo da primeira linha */
    color: #E67E22;
    /* Cor laranja para o checkmark */
    font-size: 1em;
    /* Reduz o tamanho do checkmark */
    line-height: 1;
}

/* Media Queries para Responsividade da Seção de Visão Geral */
@media (max-width: 768px) {
    .overview-section {
        padding: 30px 15px;
        /* Ajusta padding para telas menores */
    }

    .overview-section .container {
        padding: 0 15px;
        margin-left: 0;
        /* Garante alinhamento à esquerda em mobile também */
        margin-right: auto;
    }

    .overview-section .section-title {
        font-size: 1.6em;
        /* Ajusta tamanho do título para mobile */
        margin-bottom: 20px;
        text-align: center;
    }

    .overview-section .section-description,
    .overview-section .method-description,
    .overview-section .overview-points p,
    .overview-section .overview-points ul li {
        font-size: 0.9em;
        /* Ajusta tamanho da fonte para mobile */
        line-height: 1.5;
    }

    .overview-section .overview-points ul li {
        padding-left: 22px;
        /* Ajusta padding para o ícone em mobile */
        font-size: 0.85em;
        /* Garante que caiba em uma linha em mobile também */
    }

    .overview-section .overview-points ul li::before {
        font-size: 0.9em;
        /* Ajusta tamanho do checkmark em mobile */
    }
}


/* Estilos da Seção 3 - Depoimentos */
.testimonials-section {
    background-color: #FFFFFF;
    /* Fundo branco */
    padding: 60px 20px;
    /* Reduz o padding */
    text-align: center;
}

.testimonials-section .container {
    max-width: 950px;
    /* Reduz a largura máxima */
    margin: 0 auto;
}

.testimonials-section .section-title {
    font-family: 'Inter', sans-serif;
    /* Inter Black para títulos */
    font-weight: 900;
    font-size: 2em;
    /* Reduz o tamanho do título */
    color: #000;
    margin-bottom: 40px;
    /* Reduz a margem abaixo do título */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Uma coluna em mobile */
    gap: 25px;
    /* Reduz o espaçamento entre os cartões */
}

.testimonial-card {
    background-color: #FFF3E6;
    /* Tom laranja neutro/claro para o card */
    border-radius: 12px;
    /* Reduz o arredondamento */
    padding: 25px;
    /* Reduz o padding */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    /* Sombra mais sutil */
    position: relative;
    text-align: left;
    /* Alinha o conteúdo do card à esquerda */
    display: flex;
    flex-direction: column;
}

.testimonial-card .quote-icon {
    font-family: 'Inter', sans-serif;
    font-size: 4em;
    /* Reduz o tamanho do ícone */
    color: #E67E22;
    /* Laranja terroso/queimado */
    position: absolute;
    top: 8px;
    /* Ajusta a posição */
    left: 15px;
    /* Ajusta a posição */
    opacity: 0.2;
    /* Suave */
    line-height: 1;
    z-index: 0;
    /* Coloca o ícone atrás do texto */
}

.testimonial-card .testimonial-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    /* Reduzindo o tamanho da fonte */
    line-height: 1.5;
    /* Ajustando a altura da linha */
    color: #333;
    margin-bottom: 20px;
    /* Reduz a margem */
    z-index: 1;
    /* Garante que o texto fique acima do ícone */
}

.testimonial-card .testimonial-author {
    display: flex;
    align-items: center;
    margin-top: auto;
    /* Empurra o autor para o final do card */
}

.testimonial-card .author-photo {
    width: 55px;
    /* Reduz o tamanho da foto */
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    /* Reduz a margem */
    border: 2px solid #E67E22;
    /* Borda laranja na foto */
}

.testimonial-card .author-info {
    display: flex;
    flex-direction: column;
}

.testimonial-card .author-name {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.05em;
    /* Reduz ligeiramente */
    color: #000;
    margin-bottom: 3px;
    /* Reduz a margem */
}

.testimonial-card .rating {
    color: #E67E22;
    /* Estrelas em laranja */
    font-size: 0.95em;
    /* Reduz ligeiramente */
}

/* Media Queries para responsividade dos depoimentos */
@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr 1fr;
        /* Duas colunas em telas maiores */
    }
}

@media (max-width: 480px) {
    .testimonials-section {
        padding: 40px 15px;
    }

    .testimonials-section .section-title {
        font-size: 1.6em;
        margin-bottom: 25px;
    }

    .testimonial-card {
        padding: 20px;
    }

    .testimonial-card .testimonial-text {
        font-size: 0.9em;
        line-height: 1.4;
    }

    .testimonial-card .author-photo {
        width: 45px;
        height: 45px;
    }

    .testimonial-card .author-name {
        font-size: 0.95em;
    }
}

/* Estilos da Seção 4 - Estrutura Detalhada do Desafio */
.phase-cards-grid {
    /* Fundo branco */
    padding: .5em 0em;
    /* Reduz o padding */
    text-align: center;
    /* Alinha o título e descrição principal ao centro */
}

.container {
    max-width: 900px;
    /* Reduz a largura máxima */
    margin: 0 auto;
}

.section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2em;
    /* Reduz o tamanho do título */
    color: #000;
    margin-bottom: 25px;
    /* Reduz a margem */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    /* Reduz a fonte */
    line-height: 1.6;
    /* Reduz a altura da linha */
    color: #444;
    max-width: 700px;
    /* Ajusta a largura */
    margin: 0 auto 30px auto;
    /* Centraliza e reduz a margem inferior */
}

.phase-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Uma coluna em mobile */
    gap: 20px;
    /* Reduz o espaçamento entre os cards de fase */
}

.phase-card {
    background-color: #F8F8F8;
    /* Fundo cinza claro para os cards de fase */
    border-radius: 10px;
    /* Reduz o arredondamento */
    padding: 20px;
    /* Reduz o padding */
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.15);
    /* Sombra mais suave */
    text-align: left;
    /* Alinha o conteúdo do card à esquerda */
    transition: transform 0.3s ease;
    /* Efeito de hover */
}

.phase-card:hover {
    transform: translateY(-2px);
    /* Leve levantamento no hover */
}

.phase-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.4em;
    /* Reduz o tamanho dos títulos das fases */
    color: #E67E22;
    /* Laranja para os títulos das fases */
    margin-bottom: 1em;
    margin-top: 0em;
    /* Reduz a margem */
}

.phase-description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    /* Reduz a fonte */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #333;
    margin-bottom: 10px;
    /* Reduz a margem */
}

.curiosity-hook {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* Um pouco mais de destaque */
    font-size: 0.85em;
    /* Reduz a fonte */
    color: #E67E22;
    /* Laranja para o gancho de curiosidade */
    font-style: italic;
    margin-top: 12px;
    /* Reduz a margem */
}

/* Media Queries para responsividade da Seção 4 */
@media (min-width: 768px) {
    .section-title {
        font-size: 2em;
        /* Ajusta o tamanho para desktop */
    }

    .phase-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        /* Três colunas em telas maiores */
    }

    .phase-title {
        font-size: 1.6em;
    }
}

@media (max-width: 480px) {
    .phase-cards-grid {
        padding: .5em 0em;
    }

    .section-title {
        font-size: 1.5em;
    }

    .section-description {
        font-size: 0.9em;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .phase-card {
        padding: 0em 1em .5em 1em;
    }

    .phase-title {
        font-size: 1.3em;
    }

    .phase-description,
    .curiosity-hook {
        font-size: 0.8em;
        line-height: 1.3;
    }
}

/* Estilos da Imagem Intermediária 1 */
.intermediary-image-section {
    background-color: #F8F8F8;
    /* Fundo cinza claro */
    padding: 30px 0;
    /* Padding vertical para a seção da imagem */
    text-align: center;
}

.intermediary-image-section img {
    max-width: 100%;
    height: 350px;
    /* Altura fixa ou ajustável conforme necessário */
    object-fit: cover;
    /* Garante que a imagem cubra a área sem distorcer */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Media Query para imagem intermediária em telas menores */
@media (max-width: 768px) {
    .intermediary-image-section img {
        height: 250px;
        /* Reduz a altura para mobile */
    }
}

/* Estilos da Seção 5 - Para Quem é o Desafio? */
.target-audience-section {
    background-color: #FFFFFF;
    /* Fundo branco */
    padding: 40px 20px;
    /* Reduz padding para ocupar menos espaço */
    text-align: left;
    /* Alinhamento geral à esquerda */
}

.target-audience-section .container {
    max-width: 800px;
    /* Reduz largura máxima do container */
    margin-left: 0;
    /* Alinha o container à esquerda */
    margin-right: auto;
    /* Permite que o restante do espaço vá para a direita */
    padding: 0 25px;
    /* Reduz padding horizontal */
}

.target-audience-section .section-subtitle-bold {
    /* Novo estilo para o título transformado em p */
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.6em;
    /* Ajusta o tamanho da fonte */
    color: #000;
    margin-bottom: 20px;
    /* Reduz a margem */
    text-align: left;
    /* Alinha à esquerda */
    line-height: 1.2;
}

.target-audience-section .audience-situations p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    /* Reduz a fonte */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #333;
    margin-bottom: 8px;
    /* Reduz o espaço entre os parágrafos de situação */
    max-width: 650px;
    /* Limita largura para legibilidade */
    margin-left: 0;
    /* Alinha o parágrafo à esquerda */
    margin-right: auto;
    /* Permite que o restante do espaço vá para a direita */
}

.target-audience-section .conclusion-paragraph {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* Mantém destaque */
    font-size: 0.95em;
    /* Reduz a fonte */
    line-height: 1.6;
    /* Ajusta a altura da linha */
    color: #E67E22;
    /* Laranja para destaque */
    text-align: left;
    /* Alinha à esquerda */
    margin-top: 20px;
    /* Reduz margem superior */
    margin-bottom: 25px;
    /* Reduz margem inferior */
    max-width: 700px;
    margin-left: 0;
    /* Alinha à esquerda */
    margin-right: auto;
}

.target-audience-section .who-is-it-for-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.4em;
    /* Reduz o tamanho do título secundário */
    color: #000;
    margin-top: 25px;
    /* Reduz margem superior */
    margin-bottom: 18px;
    /* Reduz margem inferior */
    text-align: left;
    /* Alinha à esquerda */
}

.target-audience-section .characteristics-list {
    list-style-type: none;
    /* Remove os marcadores padrão */
    padding: 0;
    margin-left: 0;
    /* Alinha a lista à esquerda */
    margin-right: auto;
    max-width: 650px;
    /* Limita a largura da lista */
    text-align: left;
    /* Alinha os itens da lista à esquerda */
}

.target-audience-section .characteristics-list li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    /* Reduz a fonte */
    line-height: 1.4;
    /* Reduz a altura da linha */
    color: #444;
    margin-bottom: 8px;
    /* Reduz margem */
    position: relative;
    padding-left: 28px;
    /* Reduz o espaço para o ícone */
}

.target-audience-section .characteristics-list li .fas {
    color: #E67E22;
    /* Ícone de check em laranja */
    position: absolute;
    left: 0;
    top: 0.3em;
    /* Alinha com o topo da linha */
    font-size: 0.9em;
    /* Reduz o tamanho do ícone */
}

.target-audience-section .final-call-to-action {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    /* Reduz a fonte */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #222;
    text-align: left;
    /* Alinha à esquerda */
    margin-top: 25px;
    /* Reduz margem superior */
    margin-bottom: 10px;
    /* Reduz margem inferior */
    max-width: 700px;
    margin-left: 0;
    /* Alinha à esquerda */
    margin-right: auto;
}

.target-audience-section .cta-button-bottom {
    margin-top: 30px;
    /* Espaçamento acima do botão */
    text-align: center;
    /* Centraliza o botão */
}

/* Media Queries para a Seção 5 */
@media (max-width: 768px) {
    .target-audience-section {
        padding: 30px 15px;
        /* Mais redução em mobile */
    }

    .target-audience-section .container {
        padding: 0 15px;
    }

    .target-audience-section .section-subtitle-bold {
        font-size: 1.5em;
        margin-bottom: 18px;
    }

    .target-audience-section .audience-situations p,
    .target-audience-section .conclusion-paragraph,
    .target-audience-section .characteristics-list li,
    .target-audience-section .final-call-to-action {
        font-size: 0.85em;
        line-height: 1.4;
    }

    .target-audience-section .who-is-it-for-title {
        font-size: 1.3em;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    .target-audience-section .characteristics-list li {
        padding-left: 22px;
    }
}

/* Estilos da Seção 6 - Por que Outros Métodos Não Funcionaram */
.other-methods-section {
    background-color: #FFFFFF;
    /* Fundo branco */
    padding: 60px 20px;
    /* Espaçamento consistente */
    text-align: left;
    /* Alinhamento geral à esquerda */
}

.other-methods-section .container {
    max-width: 850px;
    margin-left: 0;
    /* Alinha o container à esquerda */
    margin-right: auto;
    padding: 0 30px;
}

.other-methods-section .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2em;
    /* Tamanho do título consistente */
    color: #000;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    /* Alinha o título à esquerda */
}

.other-methods-section .common-problems-intro p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    /* Reduz a fonte para ser mais compacto */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #333;
    margin-bottom: 15px;
    /* Ajusta a margem */
    max-width: 700px;
}

/* Removido: .other-methods-section .highlight-text { ... } */
/* Removido: .other-methods-section .solution-statement { ... } */

.other-methods-section .subtitle-common-problems,
.other-methods-section .subtitle-our-method {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* Leve destaque */
    font-size: 1.05em;
    /* Reduz ligeiramente */
    color: #222;
    margin-top: 20px;
    /* Reduz margem superior */
    margin-bottom: 12px;
    /* Reduz margem inferior */
    max-width: 700px;
}

.other-methods-section .common-problems-list,
.other-methods-section .unique-method-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-width: 700px;
}

.other-methods-section .common-problems-list li,
.other-methods-section .unique-method-list li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    /* Reduz um pouco a fonte */
    line-height: 1.4;
    /* Reduz a altura da linha */
    color: #444;
    margin-bottom: 8px;
    /* Reduz a margem */
    position: relative;
    padding-left: 28px;
    /* Espaço para o ícone */
}

.other-methods-section .common-problems-list li .fas {
    color: #CC0000;
    /* Cor de erro/negativa para o X */
    position: absolute;
    left: 0;
    top: 0.3em;
    font-size: 0.9em;
    /* Reduz o tamanho do ícone */
}

.other-methods-section .unique-method-list li .fas {
    color: #E67E22;
    /* Cor laranja para o "gancho" */
    position: absolute;
    left: 0;
    top: 0.3em;
    font-size: 0.9em;
    /* Reduz o tamanho do ícone */
}

.other-methods-section .no-delay-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* Destaque */
    font-size: 0.95em;
    /* Reduz a fonte */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #222;
    margin-top: 25px;
    /* Reduz margem superior */
    margin-bottom: 0;
    max-width: 700px;
}

/* Media Queries para a Seção 6 */
@media (max-width: 768px) {
    .other-methods-section {
        padding: 30px 15px;
        /* Mais redução em mobile */
    }

    .other-methods-section .container {
        padding: 0 15px;
    }

    .other-methods-section .section-title {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .other-methods-section .common-problems-intro p,
    .other-methods-section .subtitle-common-problems,
    .other-methods-section .subtitle-our-method,
    .other-methods-section .common-problems-list li,
    .other-methods-section .unique-method-list li,
    .other-methods-section .no-delay-text {
        font-size: 0.85em;
        line-height: 1.4;
    }

    .other-methods-section .common-problems-list li,
    .other-methods-section .unique-method-list li {
        padding-left: 22px;
    }

    .other-methods-section .common-problems-list li .fas,
    .other-methods-section .unique-method-list li .fas {
        font-size: 0.85em;
    }
}

/* Estilos da Imagem Intermediária 2 */
.intermediary-image-section-2 {
    background-color: #F8F8F8;
    /* Fundo cinza claro */
    padding: 30px 0;
    /* Padding vertical para a seção da imagem */
    text-align: center;
    width: 100%;
}

.intermediary-image-section-2 img {
    max-width: 100%;
    height: 300px;
    /* Altura de 300px conforme solicitado */
    object-fit: cover;
    /* Garante que a imagem cubra a área sem distorcer */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Media Query para imagem intermediária em telas menores */
@media (max-width: 768px) {
    .intermediary-image-section-2 img {
        height: 200px;
        /* Reduz a altura para mobile */
    }
}


/* Estilos da Seção 7 - Benefícios Diretos do Desafio */
.benefits-section {
    background-color: #FFFFFF;
    /* Fundo branco para contraste */
    padding: 60px 20px;
    /* Espaçamento consistente */
    text-align: left;
    /* Alinhamento geral à esquerda */
}

.benefits-section .container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 30px;
}

.benefits-section .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2em;
    color: #000;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    /* Alinha o título à esquerda */
}

.benefits-section .benefits-intro-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 25px;
    max-width: 700px;
}

.benefits-section .benefits-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-width: 700px;
}

.benefits-section .benefits-list li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    /* Reduz um pouco a fonte */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #444;
    margin-bottom: 10px;
    position: relative;
    padding-left: 30px;
    /* Espaço para o ícone */
}

.benefits-section .benefits-list li .fas {
    color: #E67E22;
    /* Cor laranja para o checkmark */
    position: absolute;
    left: 0;
    top: 0.3em;
    /* Alinha com o topo da linha */
    font-size: 1em;
}

.benefits-section .benefits-conclusion-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1em;
    line-height: 1.6;
    color: #222;
    margin-top: 30px;
    max-width: 700px;
}

/* Media Queries para a Seção 7 */
@media (max-width: 768px) {
    .benefits-section {
        padding: 40px 15px;
    }

    .benefits-section .container {
        padding: 0 15px;
    }

    .benefits-section .section-title {
        font-size: 1.6em;
        margin-bottom: 20px;
    }

    .benefits-section .benefits-intro-text,
    .benefits-section .benefits-list li,
    .benefits-section .benefits-conclusion-text {
        font-size: 0.9em;
        line-height: 1.4;
    }

    .benefits-section .benefits-list li {
        padding-left: 25px;
    }

    .benefits-section .benefits-list li .fas {
        font-size: 0.9em;
    }
}

/* Estilos da Seção 8 - Preço e Garantia */
.pricing-guarantee-section {
    background-color: #F8F8F8;
    /* Fundo cinza claro */
    padding: 40px 20px;
    /* Reduz padding para ocupar menos espaço */
    text-align: center;
    /* Centraliza o conteúdo principal */
}

.pricing-guarantee-section .container {
    max-width: 750px;
    /* Reduz largura máxima do container */
    margin: 0 auto;
    padding: 0 20px;
    /* Reduz padding horizontal */
}

.pricing-guarantee-section .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.8em;
    /* Reduz o tamanho do título */
    color: #000;
    margin-bottom: 25px;
    /* Reduz a margem */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-guarantee-section .pricing-intro-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.95em;
    /* Reduz a fonte */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #333;
    margin-bottom: 25px;
    /* Reduz a margem */
}

.pricing-guarantee-section .pricing-features-list {
    list-style-type: none;
    padding: 0;
    margin: 0 auto 25px auto;
    /* Centraliza e reduz a margem */
    max-width: 350px;
    /* Limita a largura da lista */
    text-align: left;
    /* Alinha os itens da lista à esquerda */
}

.pricing-guarantee-section .pricing-features-list li {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    /* Reduz a fonte */
    line-height: 1.4;
    /* Reduz a altura da linha */
    color: #444;
    margin-bottom: 6px;
    /* Reduz a margem */
    position: relative;
    padding-left: 25px;
    /* Reduz o padding para o ícone */
}

.pricing-guarantee-section .pricing-features-list li .fas {
    color: #E67E22;
    position: absolute;
    left: 0;
    top: 0.3em;
    font-size: 0.85em;
    /* Reduz o ícone */
}

.pricing-guarantee-section .price-call-to-action {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1em;
    /* Reduz a fonte */
    color: #222;
    margin-bottom: 12px;
    /* Reduz a margem */
}

/* Nova caixa para valores e botão */
.pricing-call-to-action-box {
    background-color: #FFFFFF;
    /* Fundo branco para a caixa */
    border-radius: 12px;
    /* Cantos arredondados */
    padding: 25px;
    /* Espaçamento interno */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    /* Sombra mais pronunciada */
    display: inline-block;
    /* Para que a caixa se ajuste ao conteúdo */
    max-width: 400px;
    /* Largura máxima da caixa */
    margin: 0 auto 30px auto;
    /* Centraliza a caixa e adiciona margem inferior */
    width: 100%;
    /* Garante que ocupe a largura disponível no max-width */
    box-sizing: border-box;
    /* Inclui padding na largura */
}

.pricing-guarantee-section .price-display {
    margin-bottom: 20px;
    /* Reduz a margem */
    display: flex;
    flex-direction: column;
    /* Usa flexbox para alinhar preço antigo e novo */
    justify-content: center;
    /* Centraliza os preços */
    align-items: center;
    /* Alinha os textos pela base */
}

.pricing-guarantee-section .original-price {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.6em;
    /* Aumenta o tamanho da fonte */
    color: #888;
    text-decoration: line-through;
    margin-right: 15px;
}

.pricing-guarantee-section .current-price {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 3.5em;
    /* Aumenta o tamanho da fonte */
    color: #E67E22;
    /* Laranja para o preço atual */
    line-height: 1;
    /* Para um alinhamento mais justo */
    margin-top: 0;
    /* Remove margem superior */
    display: inline-block;
    /* Para estar na mesma linha do antigo */
}

.pricing-guarantee-section .discount-info {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    color: #444;
    margin-top: 10px;
    /* Adiciona espaço abaixo do preço */
    display: block;
    /* Para ficar abaixo dos preços */
    text-align: center;
    /* Centraliza o texto de desconto */
}

/* Estilo para o botão verde de precificação */
.pricing-cta-btn-green {
    background-color: #1c7230;
    /* Verde escuro */
    color: #FFF;
    padding: 1.3em 1em;
    /* Ajusta padding */
    border-radius: 10px;
    /* Ajusta arredondamento */
    font-size: 1.1em;
    /* Ajusta fonte */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* Sombra para destacar */
}

.pricing-cta-btn-green:hover {
    background-color: #218838;
    /* Escurece no hover */
    transform: translateY(-2px);
    /* Efeito de levante */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}


.pricing-guarantee-section .guarantee-box {
    background-color: #FFF;
    /* Fundo branco para a caixa de garantia */
    border-radius: 10px;
    padding: 25px;
    margin-top: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: left;
    /* Alinha o texto da garantia à esquerda */
}

.pricing-guarantee-section .guarantee-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.3em;
    /* Reduz a fonte */
    color: #E67E22;
    /* Laranja para o título da garantia */
    margin-bottom: 15px;
}

.pricing-guarantee-section .guarantee-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.9em;
    /* Reduz a fonte */
    line-height: 1.5;
    /* Reduz a altura da linha */
    color: #333;
}

.pricing-guarantee-section .final-microcopy {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.85em;
    /* Reduz a fonte */
    line-height: 1.4;
    /* Reduz a altura da linha */
    color: #555;
    margin-top: 25px;
    /* Reduz a margem */
}

/* Media Queries para a Seção 8 */
@media (max-width: 768px) {
    .pricing-guarantee-section {
        padding: 30px 15px;
    }

    .pricing-guarantee-section .container {
        padding: 0 15px;
    }

    .pricing-guarantee-section .section-title {
        font-size: 1.6em;
        margin-bottom: 20px;
    }

    .pricing-guarantee-section .pricing-intro-text,
    .pricing-guarantee-section .pricing-features-list li,
    .pricing-guarantee-section .price-call-to-action,
    .pricing-guarantee-section .discount-info,
    .pricing-guarantee-section .guarantee-text,
    .pricing-guarantee-section .final-microcopy {
        font-size: 0.85em;
        line-height: 1.3;
    }

    .pricing-guarantee-section .original-price {
        font-size: 1.4em;
        /* Ajusta para mobile */
    }

    .pricing-guarantee-section .current-price {
        font-size: 3em;
        /* Ajusta para mobile */
    }

    .pricing-guarantee-section .guarantee-box {
        padding: 15px;
        margin-top: 25px;
    }

    .pricing-guarantee-section .guarantee-title {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .pricing-guarantee-section .pricing-features-list li {
        padding-left: 22px;
    }

    .pricing-guarantee-section .pricing-features-list li .fas {
        font-size: 0.8em;
    }
}

/* Estilos da Seção 9 - Urgência Oculta e Decisão Imediata */
.urgency-section {
    background-color: #FFFFFF;
    /* Fundo branco */
    padding: 40px 20px;
    /* Reduz padding */
    text-align: center;
    /* Centraliza o conteúdo */
}

.urgency-section .container {
    max-width: 750px;
    /* Reduz largura máxima */
    margin: 0 auto;
    padding: 0 20px;
    /* Reduz padding */
}

.urgency-section .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.8em;
    /* Reduz fonte */
    color: #000;
    margin-bottom: 25px;
    /* Reduz margem */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.urgency-section .urgency-text-intro {
    /* Este é o novo parágrafo condensado */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1em;
    /* Reduz fonte */
    line-height: 1.5;
    /* Reduz line-height */
    color: #333;
    margin-bottom: 15px;
    /* Ajusta margem */
    max-width: 700px;
    /* Permite que ocupe mais largura */
    margin-left: auto;
    /* Centraliza o texto */
    margin-right: auto;
    /* Centraliza o texto */
}

/* Removido: .urgency-section .urgency-list, .urgency-section .urgency-list li, .urgency-section .urgency-list li .fas */

.urgency-section .urgency-final-call {
    /* Combina statement e final call */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    /* Reduz fonte */
    line-height: 1.5;
    /* Reduz line-height */
    color: #222;
    margin-top: 20px;
    /* Reduz margem */
    margin-bottom: 20px;
    /* Reduz margem */
    max-width: 700px;
    margin-left: auto;
    /* Centraliza o texto */
    margin-right: auto;
    /* Centraliza o texto */
}

.urgency-section .urgency-microcopy-final {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.2em;
    /* Reduz fonte */
    color: #E67E22;
    margin-top: 30px;
    /* Reduz margem */
    margin-bottom: 0;
}

/* Media Queries para a Seção 9 */
@media (max-width: 768px) {
    .urgency-section {
        padding: 30px 15px;
    }

    .urgency-section .section-title {
        font-size: 1.6em;
    }

    .urgency-section .urgency-text-intro,
    .urgency-section .urgency-final-call,
    .urgency-section .urgency-microcopy-final {
        font-size: 0.85em;
        line-height: 1.4;
    }

    .urgency-section .urgency-microcopy-final {
        font-size: 1em;
    }
}

/* Estilos da Seção 10 - Chamada Final para Inscrição */
.final-cta-section {
    background-color: #F8F8F8;
    /* Fundo cinza claro */
    padding: 60px 20px;
    /* Reduz padding */
    text-align: center;
}

.final-cta-section .container {
    max-width: 750px;
    /* Reduz largura máxima */
    margin: 0 auto;
    padding: 0 20px;
    /* Reduz padding */
}

.final-cta-section .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2.2em;
    /* Reduz título */
    color: #000;
    margin-bottom: 30px;
    /* Reduz margem */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.final-cta-section .final-cta-summary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    /* Reduz fonte */
    line-height: 1.7;
    /* Reduz line-height */
    color: #333;
    margin-bottom: 25px;
    /* Reduz margem */
}

.final-cta-section .final-cta-urgency-reinforce {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1em;
    /* Reduz fonte */
    line-height: 1.6;
    /* Reduz line-height */
    color: #222;
    margin-bottom: 18px;
    /* Reduz margem */
}

.final-cta-section .final-cta-action-prompt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1em;
    /* Reduz fonte */
    color: #E67E22;
    margin-bottom: 20px;
    /* Reduz margem */
}

.final-cta-section .final-cta-btn {
    padding: 1.5em 1em;
    /* Reduz padding */
    font-size: 1.2em;
    /* Reduz fonte */
    border-radius: 10px;
    /* Reduz arredondamento */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    /* Sombra ajustada */
    /* Removido o emoji do botão no HTML, não precisa de estilo aqui */
}

.final-cta-section .final-cta-btn:hover {
    transform: translateY(-2px);
    /* Efeito de "levante" */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.final-cta-section .final-cta-microcopy-below {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.8em;
    /* Reduz fonte */
    line-height: 1.3;
    /* Reduz line-height */
    color: #555;
    margin-top: 20px;
    /* Reduz margem */
    margin-bottom: 0;
}

/* Media Queries para a Seção 10 */
@media (max-width: 768px) {
    .final-cta-section {
        padding: 40px 15px;
    }

    .final-cta-section .section-title {
        font-size: 1.8em;
        margin-bottom: 25px;
    }

    .final-cta-section .final-cta-summary,
    .final-cta-section .final-cta-urgency-reinforce,
    .final-cta-section .final-cta-action-prompt,
    .final-cta-section .final-cta-microcopy-below {
        font-size: 0.9em;
        line-height: 1.4;
    }

    .final-cta-section .final-cta-btn {
        padding: 1.5em 1em;
        font-size: 1em;
    }

    .final-cta-section .final-cta-microcopy-below {
        font-size: 0.75em;
    }
}

/* Estilos da Seção 11 - Sobre o Especialista */
.expert-section {
    background-color: #F8F8F8;
    /* Fundo cinza claro */
    padding: 60px 20px;
    /* Padding ajustado */
    text-align: center;
    /* Centraliza o conteúdo geral */
}

.expert-section .container {
    max-width: 750px;
    /* Reduz largura máxima */
    margin: 0 auto;
    padding: 0 20px;
    /* Reduz padding */
}

.expert-section .section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.8em;
    /* Reduz fonte */
    color: #000;
    margin-bottom: 30px;
    /* Reduz margem */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.expert-section .expert-content {
    display: flex;
    flex-direction: column;
    /* Coluna em mobile */
    align-items: center;
    /* Centraliza itens em coluna */
}

.expert-section .expert-photo {
    width: 120px;
    /* Reduz tamanho da foto */
    height: 120px;
    border-radius: 50%;
    /* Torna a imagem redonda */
    object-fit: cover;
    /* Garante que a imagem cubra o espaço */
    border: 0px solid #E67E22;
    /* Borda laranja */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Sombra ajustada */
    margin-bottom: 25px;
    /* Reduz espaço abaixo da foto */
}

.expert-section .expert-description {
    text-align: left;
    /* Alinha o texto da descrição à esquerda */
}

.expert-section .expert-description p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.85em;
    /* Fonte ainda menor */
    line-height: 1.5;
    /* Ajusta line-height */
    color: #333;
    margin-bottom: 12px;
    /* Reduz espaço entre os parágrafos */
}

.expert-section .expert-description p:last-child {
    margin-bottom: 0;
}

.expert-section .expert-description strong {
    font-weight: 600;
    color: #E67E22;
}

.sessao-transformacao {
    text-align: center;
    padding: 40px 20px 20px 20px;
    background-color: #fdfdfd;
}

.mosaico-sobreposto {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 420px;
    /* aumenta a área visível */
    margin: 0 auto;
}

.foto {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    object-fit: cover;
    opacity: 0;
    transform: translateY(30px) scale(0.95) rotate(0deg);
    transition: all 1s ease-out;
    max-width: 150px;
}

@media (min-width: 1024px) {
    .titulo-transformacao {
        font-size: 2rem;
    }

    .mosaico-sobreposto {
        height: 580px;
        max-width: 420px;
    }

    .foto {
        width: 180px;
        height: 240px;
    }

    .depoimento {
        font-size: 1.1rem;
    }
}

/* Ativação da animação */
.foto.reveal {
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(var(--rot));
}

/* Adjustments for the specific photos in the mosaic to improve layout */
.foto.f1 {
    top: 0%;
    left: 35%;
    width: 60%;
    height: 60%;
    z-index: 1;
    /* Lowest z-index, so it's at the back */
    transform: translateY(0px) scale(0.95) rotate(var(--rot, -65deg));
    /* Initial transform */
}

.foto.f2 {
    top: 15%;
    /* Adjust top to move it slightly down */
    left: 0;
    width: 60%;
    height: 60%;
    z-index: 2;
    transform: translateY(0px) scale(0.95) rotate(var(--rot, -5deg));
    /* Initial transform */
}

.foto.f3 {
    top: 35%;
    /* Adjust top to move it slightly down */
    right: 0;
    width: 60%;
    height: 50%;
    z-index: 3;
    transform: translateY(0px) scale(0.95) rotate(var(--rot, 5deg));
    /* Initial transform */
}

.foto.f4 {
    /* This is your last image, you want it in front and a bit lower */
    bottom: 10%;
    /* Position from the bottom of the container */
    left: 15%;
    /* Adjust left to position it */
    width: 65%;
    /* Make it slightly larger */
    height: 50%;
    /* Make it slightly larger */
    z-index: 4;
    /* Highest z-index to bring it to the front */
    transform: translateY(20px) scale(1) rotate(var(--rot, 5deg));
    /* Nudge it down slightly and make it full scale */
}

/* Ensure the .reveal class overrides initial transforms for the mosaic effect */
.foto.reveal {
    opacity: 1;
    /* Make the image visible */
    /* The individual transforms for each photo (f1, f2, f3, f4) will now define the final position/scale/rotation when 'reveal' is active */
}


/* Media Queries para a Seção 11 - Sobre o Especialista */
@media (min-width: 768px) {
    .expert-section .expert-content {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }

    .mosaico-sobreposto {
        height: 580px;
        max-width: 420px;
    }

    .expert-section .expert-photo {
        margin-right: 30px;
        /* Ajusta margem à direita */
        margin-bottom: 0;
    }

    .expert-section .section-title {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .expert-section {
        padding: 40px 15px;
    }

    .expert-section .section-title {
        font-size: 1.6em;
        margin-bottom: 25px;
    }

    .expert-section .expert-photo {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
    }

    .expert-section .expert-description p {
        font-size: 0.8em;
        line-height: 1.4;
    }
}