/* -------------------- Nova Seção: Transforme Ideias em Resultados -------------------- */
.transform-section {
    width: 100vw;
    min-height: 80vh;
    /* Altura mínima para que o conteúdo se ajuste, mas seja generoso */
    background-color: var(--bg-white);
    /* Cor de texto padrão para a seção */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centraliza o conteúdo verticalmente */
    padding: 6rem 20px;
    /* Padding superior/inferior e lateral */
    box-sizing: border-box;
    /* Garante que o padding não adicione largura extra */
}

.transform-container {
    max-width: 1200px;
    /* Largura máxima do conteúdo, similar ao layout grid */
    width: 100%;
    display: flex;
    align-items: center;
    /* Alinha as duas colunas verticalmente ao centro */
    gap: 50px;
    /* Espaço entre as duas colunas */
}

.transform-text-content {
    flex: 1;
    /* Ocupa o espaço disponível */
    text-align: left;
    max-width: 550px;
    margin-left: -50px;
    /* Limita a largura do bloco de texto para o layout ficar melhor */
}

.transform-title {
    width: 530px;
    font-size: 3.5rem;
    /* Título grande */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
    /* Cor padrão do título */
}

/* Estilo para a parte do texto com gradiente */
.transform-title .gradient-text {
    background: linear-gradient(102deg, var(--transform-gradient-text-start) 8.5%, var(--transform-gradient-text-end) 54.65%);
    /* Gradiente azul para roxo */
    -webkit-background-clip: text;
    /* Aplica o gradiente apenas ao texto */
    background-clip: text;
    /* Padrão */
    -webkit-text-fill-color: transparent;
    /* Torna o texto transparente para o gradiente aparecer */
    color: transparent;
    /* Padrão */
}

/* Estilo para o botão FALE CONOSCO */
.btn-primary-gradient {
    display: inline-flex;
    /* Permite alinhar texto e ícone */
    align-items: center;
    background: linear-gradient(to right, var(--btn-primary-gradient-start), var(--btn-primary-gradient-end));
    /* Gradiente roxo para um roxo mais claro */
    color: var(--bg-white);
    padding: 1rem 2rem;
    border-radius: 8px;
    /* Cantos arredondados */
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--btn-primary-gradient-shadow-base);
    /* Sombra para o botão */
}

.btn-primary-gradient:hover {
    transform: translateY(-3px);
    /* Efeito de "levantar" */
    box-shadow: 0 6px 20px var(--btn-primary-gradient-shadow-hover);
    /* Sombra mais intensa no hover */
}

.btn-primary-gradient i {
    margin-left: 10px;
    /* Espaço entre o texto e o ícone da seta */
    font-size: 1.1rem;
}

.transform-image-content {
    flex: 1;
    /* Ocupa o espaço disponível */
    display: flex;
    justify-content: center;
    align-items: center;
}

.transform-main-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
    /* Cantos levemente arredondados para a imagem */
    box-shadow: var(--shadow-md);
    /* Sombra para a imagem, se desejar */
}

/* -------------------- Responsividade da Seção -------------------- */
@media (max-width: 992px) {
    .transform-container {
        flex-direction: column;
        text-align: center;
        /* Centraliza conteúdo inline/inline-block dentro do container */
        gap: 40px;
    }

    .transform-text-content {
        max-width: 100%;
        margin-left: 0;
        /* Remove o margin-left negativo de desktop */
        margin-right: 0;
        /* Garante que não haja margin-right */
        /* Para centralizar o próprio bloco se ele tiver uma largura definida */
        /* e para centralizar seus filhos (se ele for um flex container) */
        display: flex; /* Já é flex, mas reafirmo para clareza no contexto responsivo */
        flex-direction: column; /* Para empilhar o conteúdo verticalmente */
        align-items: center; /* Centraliza os itens flex (h2, p, a) horizontalmente */
        text-align: center; /* Centraliza o texto dentro dos elementos */
    }

    .transform-title {
        width: auto; /* Remove largura fixa para permitir centralização */
        max-width: 100%; /* Garante que não exceda a largura do pai */
        font-size: 2.8rem;
        margin-left: auto; /* Centraliza o próprio título como um bloco */
        margin-right: auto;
    }

    .transform-description {
        font-size: 1rem;
        max-width: 90%; /* Ajusta a largura para melhor leitura em mobile */
        margin-left: auto; /* Centraliza a descrição como um bloco */
        margin-right: auto;
    }

    .btn-primary-gradient {
        padding: 0.9rem 1.8rem;
        /* Padding menor no botão */
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .transform-section {
        padding: 4rem 15px;
        /* Padding ainda menor em telas muito pequenas */
    }

    .transform-title {
        width: auto; /* Garante que não tenha largura fixa */
        font-size: 2.2rem;
        max-width: 100%; /* Permite ocupar a largura total do container */
    }
}