/*
 * ============================================================
 * BFT EXPERIENCE — MOBILE FINAL
 * Cargado al final para evitar conflictos con parches anteriores.
 * ============================================================
 */

@media (max-width:900px){

    html body #experience.experience-editorial{
        box-sizing:border-box !important;

        width:100% !important;
        max-width:100% !important;

        padding:54px 0 48px !important;

        overflow:hidden !important;
    }


    html body #experience.experience-editorial > .container{
        box-sizing:border-box !important;

        width:calc(100% - 32px) !important;
        max-width:720px !important;
        min-width:0 !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }


    /*
     * Fundamental:
     * dejamos de usar grid en móvil.
     */
    html body #experience .experience-editorial__layout{
        display:flex !important;
        flex-direction:column !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        gap:34px !important;
    }


    html body #experience .experience-editorial__layout > *{
        box-sizing:border-box !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }


    /* ========================================================
       TEXTO
       ======================================================== */

    html body #experience .experience-editorial__intro{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }


    html body #experience .experience-editorial__heading{
        width:100% !important;
        max-width:100% !important;

        margin:0 0 24px !important;
    }


    html body #experience .experience-editorial__line{
        margin-left:0 !important;
    }


    html body #experience .experience-editorial__intro h2{
        width:100% !important;
        max-width:100% !important;

        margin:0 0 16px !important;

        font-size:clamp(40px,12vw,56px) !important;
        line-height:.94 !important;

        text-align:left !important;

        white-space:normal !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }


    html body #experience .experience-editorial__lead{
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:16px !important;
        line-height:1.42 !important;

        text-align:left !important;

        white-space:normal !important;
        word-break:normal !important;
    }


    html body #experience .experience-editorial__prose{
        display:block !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }


    html body #experience .experience-editorial__prose p{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 0 13px !important;

        font-size:14px !important;
        line-height:1.55 !important;

        text-align:left !important;

        white-space:normal !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }


    /* ========================================================
       BLOQUE DE BENEFICIOS
       ======================================================== */

    html body #experience .experience-crescent{
        display:block !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;
    }


    html body #experience .experience-crescent__list{
        display:flex !important;
        flex-direction:column !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        gap:8px !important;

        margin:0 !important;
        padding:0 !important;
    }


    html body #experience .experience-point,
    html body #experience .experience-point--1,
    html body #experience .experience-point--2,
    html body #experience .experience-point--3,
    html body #experience .experience-point--4,
    html body #experience .experience-point--5,
    html body #experience .experience-point--6{

        box-sizing:border-box !important;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        min-height:68px !important;

        margin:0 !important;

        transform:none !important;

        grid-template-columns:
            42px
            minmax(0,1fr)
            !important;

        column-gap:12px !important;

        padding:9px 13px 9px 9px !important;

        border-radius:20px !important;
    }


    html body #experience .experience-point__icon{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;

        flex:0 0 40px !important;
    }


    html body #experience .experience-point__icon svg{
        width:19px !important;
        height:19px !important;
    }


    html body #experience .experience-point__copy{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }


    html body #experience .experience-point__copy h3{
        width:auto !important;
        max-width:100% !important;

        margin:0 0 3px !important;

        font-size:14px !important;
        line-height:1.08 !important;

        white-space:normal !important;
    }


    html body #experience .experience-point__copy p{
        width:auto !important;
        max-width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        font-size:12px !important;
        line-height:1.32 !important;

        white-space:normal !important;
        overflow-wrap:break-word !important;
    }

}


@media (max-width:420px){

    html body #experience.experience-editorial > .container{
        width:calc(100% - 24px) !important;
    }

    html body #experience.experience-editorial{
        padding:44px 0 42px !important;
    }

    html body #experience .experience-editorial__layout{
        gap:28px !important;
    }

    html body #experience .experience-editorial__intro h2{
        font-size:clamp(37px,11.5vw,48px) !important;
    }

    html body #experience .experience-point{
        grid-template-columns:38px minmax(0,1fr) !important;

        min-height:64px !important;

        column-gap:10px !important;

        padding:8px 10px 8px 8px !important;
    }

    html body #experience .experience-point__icon{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
    }

    html body #experience .experience-point__icon svg{
        width:17px !important;
        height:17px !important;
    }

}