/* ========================================================================== */
/* 🔥 FIX GENERAL SOLO PARA ESTA SECCIÓN */
/* ========================================================================== */

.services-area {
    overflow-x: hidden; /* 🔥 evita que se corte en móviles */
}

/* CONTENEDOR PRINCIPAL */
#div-scroll {
    margin-top: 0 !important;
    width: 100%;
    overflow: hidden;
}

/* TARJETAS */
.box {
    width: 100%;
    margin: 0 auto;
}

/* 🔥 IMPORTANTE: evita desbordes de bootstrap */
.row.box {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ESPACIADO ENTRE TARJETAS */
.box-small {
    margin-bottom: 20px;
}

/* ICONOS */
.ic-des {
    color: #ffc107 !important;
}

/* ========================================================================== */
/* 🖼️ IMÁGENES */
/* ========================================================================== */

.image-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

    .image-container img {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 10px;
    }

/* ========================================================================== */
/* 📊 CONTENIDO INTERNO */
/* ========================================================================== */

.feature-content {
    width: 100%;
}

.text-descri {
    width: 100%;
    font-size: clamp(12px, 1vw, 16px);
    line-height: 1.5;
}

/* COLUMNAS */
.feature-list,
.feature-benefits {
    width: 100%;
}

/* ========================================================================== */
/* 📱 MOBILE (CLAVE PARA TU PROBLEMA) */
/* ========================================================================== */

@media (max-width: 768px) {

    /* 🔥 columnas en vertical SIEMPRE */
    .feature-list,
    .feature-benefits {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row .feature-list,
    .row .feature-benefits {
        width: 100%;
    }

    /* 🔥 padding más compacto */
    .box {
        padding: 10px !important;
    }

    /* 🔥 imagen más chica y centrada */
    .image-container {
        max-width: 240px;
    }

    /* 🔥 textos balanceados (ni gigantes ni ilegibles) */
    .text-descri {
        font-size: 13px;
    }

        .text-descri h3 {
            font-size: 16px;
            margin-bottom: 8px;
        }

        .text-descri h5 {
            font-size: 13px;
            margin-bottom: 6px;
        }

        .text-descri li,
        .text-descri p {
            font-size: 12px;
            line-height: 1.4;
            margin-bottom: 5px !important;
        }

        .text-descri i {
            font-size: 12px;
        }
}

/* ========================================================================== */
/* 📲 EXTRA SMALL (Galaxy A34, iPhone SE, etc) */
/* ========================================================================== */

@media (max-width: 480px) {

    .image-container {
        max-width: 200px;
    }

    .text-descri {
        font-size: 12px;
    }

        .text-descri h3 {
            font-size: 15px;
        }

        .text-descri h5 {
            font-size: 12px;
        }

        .text-descri li {
            font-size: 11.5px;
        }
}

/* ========================================================================== */
/* 💻 TABLET */
/* ========================================================================== */

@media (min-width: 768px) {

    .image-container {
        max-width: 380px;
    }

    .text-descri {
        font-size: 14px;
    }
}

/* ========================================================================== */
/* 🖥️ DESKTOP */
/* ========================================================================== */

@media (min-width: 1024px) {

    .image-container {
        max-width: 520px;
    }

    .text-descri {
        font-size: 15px;
    }
}