/* =========================================================
   CRYSTAL CLEANING - ABOUT LAPTOP REAL BREAKPOINT V98

   Corrección:
   En varios portátiles Chrome reporta anchos CSS cercanos a 1600-1900 px.
   V97 terminaba en 1500 px, por eso no se aplicaba.

   Objetivo:
   - conservar imagen + contenido en 2 columnas;
   - darle más espacio real al lado derecho;
   - mantener las 3 tarjetas en una sola fila;
   - evitar que "Experienced Professionals" se parta;
   - no alterar monitor grande (>1920px), tablet ni móvil.
   ========================================================= */

/* Portátiles anchos: 1501px a 1920px */
@media (min-width:1501px) and (max-width:1920px){
    html body .about-grid{
        grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)!important;
        gap:clamp(34px,2.6vw,48px)!important;
        align-items:center!important;
    }

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

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

    html body .about-copy h2{
        font-size:clamp(42px,3vw,54px)!important;
        line-height:1.04!important;
        letter-spacing:-.035em!important;
        margin-bottom:18px!important;
    }

    html body .about-copy>p{
        font-size:clamp(15px,1.05vw,18px)!important;
        line-height:1.62!important;
        margin-bottom:20px!important;
    }

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

    html body .about-points>div{
        min-width:0!important;
        min-height:112px!important;
        padding:18px 20px!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(13px,.95vw,16px)!important;
        line-height:1.15!important;
        letter-spacing:-.02em!important;
        overflow:visible!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        hyphens:none!important;
    }

    html body .about-points span{
        display:block!important;
        white-space:nowrap!important;
        margin-top:7px!important;
        font-size:clamp(10px,.72vw,12px)!important;
        line-height:1.25!important;
    }
}

/* Portátiles normales/compactos: 1081px a 1500px */
@media (min-width:1081px) and (max-width:1500px){
    html body .about-grid{
        grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr)!important;
        gap:clamp(24px,2.2vw,34px)!important;
        align-items:center!important;
    }

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

    html body .about-copy h2{
        font-size:clamp(34px,3vw,42px)!important;
        line-height:1.04!important;
        letter-spacing:-.03em!important;
    }

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

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

    html body .about-points>div{
        min-height:88px!important;
        padding:12px 11px!important;
    }

    html body .about-points strong{
        white-space:nowrap!important;
        font-size:clamp(11px,.95vw,14px)!important;
        line-height:1.12!important;
        overflow:visible!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        hyphens:none!important;
    }

    html body .about-points span{
        white-space:nowrap!important;
        font-size:clamp(9px,.7vw,10.5px)!important;
        line-height:1.2!important;
    }
}

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

    html body .about-visual{
        min-height:340px!important;
    }

    html body .about-copy h2{
        font-size:28px!important;
        line-height:1.03!important;
    }

    html body .about-copy>p{
        font-size:11.5px!important;
        line-height:1.5!important;
    }

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

    html body .about-points>div{
        min-height:72px!important;
        padding:8px 7px!important;
    }

    html body .about-points strong{
        white-space:nowrap!important;
        font-size:10px!important;
        line-height:1.1!important;
        letter-spacing:-.03em!important;
        overflow:visible!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        hyphens:none!important;
    }

    html body .about-points span{
        white-space:nowrap!important;
        font-size:8px!important;
        line-height:1.15!important;
    }
}