@media (max-width: 768px) {
    html, body {
        height: auto !important;
        min-height: 100%;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* suaviza no iOS */
    }

    /* O container não deve forçar altura fixa */
    .form-container {
        height: auto !important;
        min-height: 100vh; /* fallback */
        min-height: 100dvh; /* corrige barras do mobile */
        display: block !important; /* evita flex "apertando" o conteúdo */
        padding: 10px !important;
    }

    /* O card precisa crescer com o conteúdo (sem max-height) */
    .form-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* nada escondido */
        border-radius: 0; /* opcional: tela cheia no mobile */
        padding: 12px !important;
    }

    /* Áreas internas também sem limites de altura */
    .form-step {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        padding-bottom: 70px; /* espaço extra p/ o botão não cobrir */
    }
    /* Layout em coluna no mobile */
    .form-row,
    .form-grid-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-group {
        width: 100% !important;
    }

    /* Grupos grandes (checkbox) sem recorte */
    .checkbox-group {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Indicador dos passos pode quebrar linha */
    .step-navigation {
        position: relative !important; /* botão segue o fluxo normal */
        bottom: auto !important;
        margin-top: 20px;
    }
    .step-navigation {
        display: flex;
        justify-content: space-between; /* 👈 um em cada ponta */
        align-items: center;
        padding: 0; /* só um respiro dentro do card */
        box-sizing: border-box;
        width: 85%; /* ocupa toda a largura do card */
    }


    .step-navigation button {
        flex: 0 0 auto;
        width: auto; /* tamanho do conteúdo */
        max-width: 45%; /* garante que não ultrapassem */
        font-size: 14px;
        padding: 6px 14px;
    }

    .form-step {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 5px !important; /* só um respiro, sem excesso */
    }
    .step-navigation button {
        max-width: 100px; /* ainda menor no mobile */
        font-size: 13px;
        padding: 5px 12px;
    }
    /* checkboxes ficam um abaixo do outro no mobile */
    .checkbox-group,
    .checkbox-group.five-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .checkbox-item {
        width: 100% !important;
    }

    /* Botão WhatsApp compacto */
    .btn-whatsapp {
        font-size: 13px; /* texto menor */
        padding: 6px 12px; /* menos altura e largura */
        border-radius: 6px; /* cantos menores */
        max-width: 160px; /* limita largura */
        display: inline-flex; /* mantém ícone + texto lado a lado */
        align-items: center;
        gap: 6px; /* espaço entre ícone e texto */
    }

        /* Ícone dentro do botão */
        .btn-whatsapp i,
        .btn-whatsapp svg {
            font-size: 16px; /* ícone proporcional ao texto */
        }
}