.elementor-6 .elementor-element.elementor-element-e4e7a73{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-431ac75{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-6 .elementor-element.elementor-element-1ca6df2{--display:flex;}.elementor-6 .elementor-element.elementor-element-c295df2{--display:flex;}.elementor-6 .elementor-element.elementor-element-bbad998{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-f144f87{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-650c2bb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6 .elementor-element.elementor-element-24a8620{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-9eb9cc4 */<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
    --text-title: #333;
    --text-body: #555;
    --accent-pink: #f53d68;
    --card-bg: #fff7f8;
    --pre-title-color: #888;
}

.transformation-section {
    font-family: 'Poppins', sans-serif;
    padding: 80px 20px;
    /* MODIFICADO: Alinhamento geral agora é à esquerda */
    text-align: left;
    background-color: #ffffff;
    overflow: hidden;
}

/* Cabeçalho */
.transformation-header {
    /* MODIFICADO: Mantém o cabeçalho centralizado */
    text-align: center;
    animation: fadeInDown 1s ease-out;
}
.transformation-header h2 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    color: var(--text-title);
    margin: 0 0 10px 0;
}
.transformation-header p {
    font-size: 1.1rem;
    color: var(--pre-title-color);
    margin-bottom: 50px;
}

/* Grid principal */
.transformation-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão mobile */
    gap: 20px;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .transformation-grid {
        grid-template-columns: 1fr auto 1fr; /* Desktop: Antes | Seta | Depois */
    }
}

/* Colunas Antes e Depois */
.column-before, .column-after {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.column-before h3, .column-after h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-pink);
    margin-bottom: 10px;
}

/* Itens da lista */
.transformation-item {
    background-color: var(--card-bg);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-body);
    box-shadow: 0 5px 20px rgba(245, 61, 104, 0.05);
    opacity: 0;
}

/* Ícones de ponto */
.item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-pink);
    flex-shrink: 0;
}

/* Animações específicas */
.column-before .transformation-item {
    animation: fadeInBefore 0.8s ease-out forwards;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.column-after .transformation-item {
    animation: fadeInAfter 0.8s 0.5s ease-out forwards;
}

/* Efeito de esmaecer no "Antes" durante a transformação */
.transformation-section.transformed .column-before .transformation-item {
    opacity: 0.3;
    transform: scale(0.95);
}

/* Animação da Seta Central */
.arrow-trigger {
    background-color: var(--accent-pink);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 0 0 rgba(245, 61, 104, 0.7);
    animation: pulseArrow 2s infinite, fadeInDown 1s 0.2s ease-out forwards;
    opacity: 0;
    margin: 20px auto; /* Centraliza no mobile e desktop */
}
@keyframes pulseArrow {
    to {
        box-shadow: 0 0 0 20px rgba(245, 61, 104, 0);
    }
}

/* Atrasos para a aparição sequencial dos itens do "Antes" */
.column-before .transformation-item:nth-child(2) { animation-delay: 0.2s; }
.column-before .transformation-item:nth-child(3) { animation-delay: 0.4s; }
.column-before .transformation-item:nth-child(4) { animation-delay: 0.6s; }
.column-before .transformation-item:nth-child(5) { animation-delay: 0.8s; }
.column-before .transformation-item:nth-child(6) { animation-delay: 1s; }

/* Atrasos para a aparição sequencial dos itens do "Depois" */
.column-after .transformation-item:nth-child(2) { animation-delay: 1.5s; }
.column-after .transformation-item:nth-child(3) { animation-delay: 1.7s; }
.column-after .transformation-item:nth-child(4) { animation-delay: 1.9s; }
.column-after .transformation-item:nth-child(5) { animation-delay: 2.1s; }
.column-after .transformation-item:nth-child(6) { animation-delay: 2.3s; }


/* Animações de entrada */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInBefore {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInAfter {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

</style>

<div class="transformation-section">
    <div class="transformation-header">
        <h2>A transformação que você vai experimentar</h2>
        <p>Veja a diferença entre o antes e depois do método</p>
    </div>

    <div class="transformation-grid">
        <!-- Coluna Antes -->
        <div class="column-before">
            <h3>Antes</h3>
            <div class="transformation-item"><div class="item-dot"></div><span>Irritação constante</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Noites mal dormidas</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Baixa autoestima</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Cansaço excessivo</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Relacionamentos afetados</span></div>
        </div>

        <!-- Seta Central -->
        <div class="arrow-trigger">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
        </div>

        <!-- Coluna Depois -->
        <div class="column-after">
            <h3>Depois</h3>
            <div class="transformation-item"><div class="item-dot"></div><span>Corpo equilibrado</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Sono tranquilo</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Energia renovada</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Autoconfiança restaurada</span></div>
            <div class="transformation-item"><div class="item-dot"></div><span>Relacionamentos harmoniosos</span></div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const section = document.querySelector('.transformation-section');
    setTimeout(() => {
        section.classList.add('transformed');
    }, 1200);
});
</script>/* End custom CSS */