/* =========================================================
   CRYSTAL CLEANING - ABOUT LAPTOP BALANCE V97
   Objetivo: conservar el look de escritorio grande en portátiles:
   - imagen un poco más compacta
   - más ancho real para el contenido About
   - 3 tarjetas siempre en una sola fila
   - títulos de tarjetas en una sola línea
   ========================================================= */

/* Portátiles grandes / medianos */
@media (min-width:1081px) and (max-width:1500px){
    html body .about-grid{
        grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr)!important;
        gap:clamp(26px,2.8vw,40px)!important;
        align-items:center!important;
    }

    html body .about-visual{
        min-height:420px!important;
        width:100%!important;
    }

    html body .about-copy{
        min-width:0!important;
    }

    html body .about-copy h2{
        font-size:clamp(34px,2.65vw,42px)!important;
        line-height:1.06!important;
        letter-spacing:-.025em!important;
        margin-bottom:13px!important;
    }

    html body .about-copy>p{
        font-size:13.5px!important;
        line-height:1.68!important;
        margin-bottom:18px!important;
    }

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

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

    html body .about-points strong{
        display:block!important;
        white-space:nowrap!important;
        font-size:clamp(11.5px,.94vw,14px)!important;
        line-height:1.15!important;
        letter-spacing:-.02em!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
        hyphens:none!important;
    }

    html body .about-points span{
        display:block!important;
        margin-top:5px!important;
        font-size:10px!important;
        line-height:1.3!important;
        white-space:normal!important;
    }
}

/* Portátiles compactos */
@media (min-width:921px) and (max-width:1080px){
    html body .about-grid{
        grid-template-columns:minmax(285px,.72fr) minmax(0,1.28fr)!important;
        gap:20px!important;
        align-items:center!important;
    }

    html body .about-visual{
        min-height:360px!important;
        width:100%!important;
    }

    html body .about-copy{
        min-width:0!important;
    }

    html body .about-copy h2{
        font-size:29px!important;
        line-height:1.04!important;
        letter-spacing:-.025em!important;
        margin-bottom:11px!important;
    }

    html body .about-copy>p{
        font-size:12px!important;
        line-height:1.58!important;
        margin-bottom:14px!important;
    }

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

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

    html body .about-points strong{
        display:block!important;
        white-space:nowrap!important;
        font-size:11px!important;
        line-height:1.12!important;
        letter-spacing:-.025em!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
        hyphens:none!important;
    }

    html body .about-points span{
        display:block!important;
        margin-top:4px!important;
        font-size:8.8px!important;
        line-height:1.24!important;
        white-space:normal!important;
    }
}

/* Tablet y móvil mantienen el responsive existente. */
