/* =====================
   CORREÇÃO FINAL DE DETALHES MOBILE
   Ajustes específicos em Carol, Depoimentos e Fase Gerir
   ===================== */

@media (max-width: 768px) {

    /* 1. Ajuste na Bio da Carol (Texto colado na borda) */
    .carol-bio {
        padding: 0 1rem !important;
        text-align: left !important;
        /* Melhor leitura em mobile */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .carol-image {
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
        /* Padding também na imagem */
    }

    /* 2. Ajuste nos Depoimentos (Um embaixo do outro) */
    .depoimentos-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        padding: 0 1rem !important;
        /* Garante que não cole nas bordas */
        box-sizing: border-box !important;
    }

    .depoimento-card {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* Garante que o texto do depoimento não "vaze" */
    .depoimento-texto {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 3. Ajuste na Fase Gerir (Quadros um em cima do outro) */
    .gerir-options {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
        /* Espaço entre os quadros */
        width: 100% !important;
    }

    .gerir-option {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .gerir-or {
        margin: 0.5rem 0 !important;
        /* Ajuste no "ou" */
    }
}