/* ###########################################################################
#
#  HOME MOBILE DO PEDIDOPOP
#
#  Este arquivo controla apenas a versão mobile da Home.
#  As logos ficam organizadas no arquivo:
#  /assets/css/05-logos.css
#
############################################################################ */

@media(max-width:780px){

    /* #######################################################################
    #  FUNDO DA HOME NO MOBILE
    ####################################################################### */

    .pp-home{
        background:linear-gradient(180deg,#ffffff 0%,#fff6f7 55%,#ffffff 100%);
    }


    /* #######################################################################
    #  ÁREA PRINCIPAL
    ####################################################################### */

    .pp-home-hero{
        min-height:0;
        padding:26px 18px 48px;

        display:flex;
        flex-direction:column;
        gap:24px;

        overflow:hidden;
        text-align:center;
    }


    /* #######################################################################
    #  BLOCO DOS TEXTOS
    ####################################################################### */

    .pp-home-copy{
        width:100%;
        max-width:430px;
        margin:0 auto;

        display:flex;
        flex-direction:column;
        align-items:center;
    }


    /* #######################################################################
    #  ETIQUETA
    ####################################################################### */

    .pp-kicker{
        max-width:100%;
        margin-bottom:14px;
        padding:8px 12px;

        font-size:13px;
        text-align:center;
    }


    /* #######################################################################
    #  TÍTULO
    ####################################################################### */

    .pp-home h1{
        max-width:360px;
        margin:0 auto 14px;

        font-size:34px;
        line-height:1.06;
        letter-spacing:-1.2px;
    }


    /* #######################################################################
    #  TEXTO
    ####################################################################### */

    .pp-home p{
        max-width:350px;
        margin:0 auto 18px;

        font-size:15.5px;
        line-height:1.46;
    }


    /* #######################################################################
    #  BOTÕES
    ####################################################################### */

    .pp-actions{
        width:100%;
        max-width:360px;
        margin:0 auto;

        display:grid;
        grid-template-columns:1fr;
        gap:11px;
    }

    .pp-actions .pp-btn{
        width:100%;
        min-height:58px;

        border-radius:20px;

        font-size:16px;
    }

    .pp-demo-cta{
        order:-1;
        min-height:72px !important;

        font-size:19px !important;
        box-shadow:var(--pp-shadow-red) !important;
    }


    /* #######################################################################
    #  LINHA DE CONFIANÇA
    ####################################################################### */

    .pp-trust-row{
        justify-content:center;
        gap:12px;

        margin-top:14px;

        font-size:12px;
    }


    /* #######################################################################
    #  DEMONSTRAÇÃO
    ####################################################################### */

    .pp-demo-panel{
        width:100%;
        max-width:390px;
        margin:0 auto;
    }

    .pp-demo-card{
        width:100%;
        padding:10px;

        border-radius:30px;
        box-shadow:0 22px 60px rgba(16,21,27,.14);
    }

    .pp-demo-screen{
        border-width:8px;
        border-radius:26px;
    }

    .pp-demo-store-head{
        padding:18px;
    }

    .pp-demo-avatar{
        width:74px;
        height:74px;
        margin-bottom:10px;
    }

    .pp-demo-store-head h2{
        font-size:24px;
    }

    .pp-demo-badges span{
        padding:7px 9px;
        font-size:12px;
    }

    .pp-demo-cats{
        padding:12px;
        gap:8px;
        overflow:auto;
    }

    .pp-demo-cats span{
        padding:7px 10px;
        white-space:nowrap;
        font-size:12px;
    }

    .pp-demo-product{
        grid-template-columns:72px 1fr;
        text-align:left;

        margin:0 12px 12px;
        padding:10px;

        border-radius:20px;
    }

    .pp-demo-product img{
        width:72px;
        height:72px;
    }

    .pp-demo-product b{
        font-size:17px;
    }

    .pp-demo-product p{
        font-size:12.5px;
    }

    .pp-demo-product strong{
        font-size:18px;
    }


    /* #######################################################################
    #  CARDS DE VANTAGENS
    ####################################################################### */

    .pp-home-features{
        max-width:390px;
        padding:0 18px 44px;

        grid-template-columns:1fr;
    }

    .pp-home-feature{
        padding:16px;

        display:grid;
        grid-template-columns:36px 1fr;
        column-gap:10px;
        align-items:start;

        border-radius:22px;
        text-align:left;
    }

    .pp-home-feature i{
        grid-row:1 / 3;
    }

    .pp-home-feature b{
        margin:0 0 3px;
    }

    .pp-home-feature span{
        font-size:13px;
    }

}