/* ============================================== */
/* === REORDENAMIENTO MÓVIL (SECCIÓN ABOUT) ===== */
/* ============================================== */

@media (max-width: 992px) {

    /* 1. Reducimos el espacio excesivo entre las secciones generales en móvil */
    .content-grid,
    .features-section {
        margin: 40px 0;
        /* Antes heredaba 60px u 80px, lo estandarizamos a 40px */
    }

    /* 2. Convertimos la cuadrícula en columna y aplicamos un espaciado (gap) simétrico */
    #about.content-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* MAGIA: Esto crea un espacio idéntico y perfecto entre título, imagen y texto */
    }

    /* "Desaparecemos" el contenedor de texto para manipular sus hijos libremente */
    #about .text-content {
        display: contents;
    }

    /* 3. El título va ARRIBA de la imagen (Orden 1) */
    #about .text-content h2.section-title {
        order: 1;
        /* Añadimos 20px de margen que, sumados a los 20px del gap, dan exactamente 40px de espacio libre (igual que arriba) */
        margin-bottom: 30px !important;
    }

    /* 4. La imagen va al MEDIO (Orden 2) */
    #about .image-content {
        order: 2;
        margin-bottom: 0 !important;
        /* Anulamos su margen propio */
        width: 100%;
    }

    /* 5. Los párrafos van ABAJO (Orden 3) */
    #about .text-content p {
        order: 3;
        margin-bottom: 0 !important;
        /* Anulamos su margen propio */
    }
}