/* =========================================================
   CRYSTAL CLEANING - ABOUT RESPONSIVE V85
   Corrige únicamente las tres tarjetas inferiores de About en laptops.
   Monitores grandes conservan exactamente el diseño aprobado.
   ========================================================= */

/* Laptop / desktop compacto: damos más ancho real al contenido derecho. */
@media (min-width:1181px) and (max-width:1500px){
    html body .about-grid{
        grid-template-columns:minmax(420px,.90fr) minmax(0,1.10fr)!important;
        gap:clamp(34px,4vw,58px)!important;
    }

    html body .about-points{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:10px!important;
    }

    html body .about-points>div{
        min-width:0!important;
        min-height:102px!important;
        padding:15px 14px!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
        box-sizing:border-box!important;
    }

    html body .about-points strong{
        font-size:16px!important;
        line-height:1.22!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
        hyphens:none!important;
    }

    html body .about-points span{
        margin-top:5px!important;
        font-size:11.5px!important;
        line-height:1.42!important;
    }
}

/*
 * Portátiles pequeños: en lugar de aplastar tres columnas dentro de media
 * pantalla, las tarjetas se convierten en tres filas compactas y elegantes.
 * La sección About sigue manteniendo imagen + contenido en dos columnas.
 */
@media (min-width:921px) and (max-width:1180px){
    html body .about-grid{
        grid-template-columns:minmax(350px,.82fr) minmax(0,1.18fr)!important;
        gap:clamp(26px,3.4vw,42px)!important;
    }

    html body .about-points{
        grid-template-columns:1fr!important;
        gap:9px!important;
        margin-top:20px!important;
    }

    html body .about-points>div{
        min-width:0!important;
        min-height:68px!important;
        padding:13px 16px!important;
        display:grid!important;
        grid-template-columns:minmax(165px,.85fr) minmax(0,1.15fr)!important;
        align-items:center!important;
        column-gap:16px!important;
        box-sizing:border-box!important;
    }

    html body .about-points strong{
        font-size:15.5px!important;
        line-height:1.22!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
        hyphens:none!important;
    }

    html body .about-points span{
        margin-top:0!important;
        font-size:11.5px!important;
        line-height:1.42!important;
    }
}

/* Tablet: la sección ya pasa a una columna por el CSS existente; mantenemos
   las tarjetas cómodas y sin compresión mientras haya ancho suficiente. */
@media (min-width:641px) and (max-width:920px){
    html body .about-points{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:10px!important;
    }

    html body .about-points>div{
        min-width:0!important;
        min-height:94px!important;
        padding:14px!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:center!important;
    }

    html body .about-points strong{
        font-size:15px!important;
        line-height:1.22!important;
    }

    html body .about-points span{
        font-size:11px!important;
        line-height:1.4!important;
    }
}

/* Mobile conserva la columna única ya aprobada, con proporción consistente. */
@media (max-width:640px){
    html body .about-points>div{
        min-height:72px!important;
        padding:14px 16px!important;
    }
}