/* Desarrollos: fondo claro para contrastar con la sección oscura anterior */
.desarrollos-area {
    background: #f4f6fb !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.desarrollos-area .single-property {
    background-color: #fff;
    padding: 20px;
    border: 10px solid #7dcf00;
    border-radius: 3px !important;
    opacity: 0.9;
    box-shadow: 0px 0px 15px #aaa;
}

.desarrollos-area .header-text h1 {
    color: #000;
    margin-bottom: 20px;
    text-align: center;
    font-size: 63px;
}

.desarrollos-area .images img {
    height: 170px !important;
}

.desarrollos-area .header-text h1 {
    font-size: 30px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    font-family: 'Inter', 'Poppins', sans-serif;
    font-weight: 700;
}

/* Aplicamos a un rango amplio de móviles para asegurar cobertura */
@media only screen and (max-width: 991px) {

    /* 1. TÍTULO: Forzar que el texto quiebre y baje */
    .section-title h2,
    .section-title h1,
    h2.title-desarrollos {
        font-size: 24px !important;
        white-space: normal !important;
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 15px !important;
    }

    /* 2. CONTENEDOR: Matar el sistema de columnas que las amontona */
    .desarrollos-area .row,
    .development-section .row {
        display: flex !important;
        flex-direction: column !important;
        /* Una arriba de otra sí o sí */
        align-items: center !important;
    }

    /* 3. TARJETAS: Forzar ancho completo */
    .desarrollos-area [class*="col-"],
    .single-development,
    .development-item-wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 10px 20px !important;
        /* Espacio a los lados */
    }

    /* 4. AJUSTE DE LA TARJETA INDIVIDUAL */
    .single-development {
        display: block !important;
        float: none !important;
        margin-bottom: 25px !important;
    }

    /* 5. DETALLES: Que no se amontone el texto de m2 y baños */
    .development-details,
    .details-info {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }

    .development-details span {
        font-size: 11px !important;
        flex: 0 0 45% !important;
        /* Dos columnas de datos adentro */
    }
}

@media (max-width: 768px) {

    /* 1. Forzar que el título quepa en la pantalla */
    .desarrollos-area .header-text h1 {
        font-size: 32px !important;
        /* Baja de 70px a 32px */
        line-height: 1.1 !important;
        text-align: center !important;
        margin-top: 20px !important;
    }

    /* 2. Desactivar el slider en móvil para que no se amontone */
    /* Si el slider se ve mal, forzamos a que las tarjetas bajen */
    #slider.regular {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    .bar-desarrollos {
        width: 100% !important;
        margin-bottom: 20px !important;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        display: block !important;
        padding: 15px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* 3. Ajuste de la imagen del desarrollo */
    .bar-desarrollos img {
        width: 100% !important;
        /* Ocupa todo el ancho de la tarjeta */
        height: 200px !important;
        /* Altura fija para que se vea uniforme */
        object-fit: cover !important;
        border-radius: 8px;
    }

    /* 4. Corregir los textos amontonados de Habitaciones/Baños */
    .bar-desarrollos .col-md-6,
    .bar-desarrollos .col-md-4,
    .bar-desarrollos .col-md-12 {
        width: 50% !important;
        /* Ponemos Habitaciones y Baños lado a lado */
        display: inline-block !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    /* Construcción y Terreno a ancho completo */
    .bar-desarrollos .col-md-12 {
        width: 100% !important;
    }

    /* 5. Título y Precio */
    .title-bar {
        font-size: 16px !important;
        font-weight: bold;
        color: #2b358f;
    }

    .precio-bar {
        font-size: 18px !important;
        color: #49a72a;
        font-weight: 800;
        margin-top: 10px;
    }
}