/* ###########################################################################
#
#  CABEÇALHO PÚBLICO
#
#  Responsável por:
#  • Logo
#  • Menu
#  • Botões
#
############################################################################ */


/* ========================================================================== */
/* BARRA SUPERIOR                                                             */
/* ========================================================================== */

.pp-public-header{

    position:sticky;
    top:0;
    z-index:50;

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(18px);

    border-bottom:1px solid var(--pp-line);

}


/* ========================================================================== */
/* CONTAINER DO CABEÇALHO                                                     */
/* ========================================================================== */

.pp-public-inner{

    max-width:1180px;

    margin:0 auto;

    padding:22px 18px;

    min-height:170px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}


/* ========================================================================== */
/* LOGO DO CABEÇALHO - DESKTOP                                                */
/* ========================================================================== */

.pp-public-logo{

    display:block;

    width:auto;

    height:140px;

    object-fit:contain;

}


/* ========================================================================== */
/* MENU                                                                       */
/* ========================================================================== */

.pp-nav{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

}


/* ========================================================================== */
/* BOTÕES                                                                     */
/* ========================================================================== */

.pp-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:48px;

    padding:12px 18px;

    border:0;

    border-radius:18px;

    cursor:pointer;

    white-space:nowrap;

    font-weight:900;

    letter-spacing:-.1px;

}

.pp-btn-primary{

    color:#ffffff;

    background:var(--pp-grad);

    box-shadow:0 12px 30px rgba(217,15,31,.28);

}

.pp-btn-ghost{

    color:var(--pp-dark);

    background:#ffffff;

    border:1px solid #e8ecf4;

}


/* ========================================================================== */
/* CONTEÚDO                                                                   */
/* ========================================================================== */

.pp-main{

    min-height:80vh;

}


/* ========================================================================== */
/* RODAPÉ                                                                     */
/* ========================================================================== */

.pp-footer{

    padding:28px 14px;

    text-align:center;

    color:var(--pp-muted);

}


/* ###########################################################################
#
#  RESPONSIVO - TABLETS E CELULARES
#
############################################################################ */

@media (max-width:780px){

    .pp-public-inner{

        display:grid;

        grid-template-columns:1fr;

        justify-items:center;

        gap:14px;

        padding:18px 14px;

        min-height:auto;

    }

    /* Logo */

    .pp-public-logo{

        display:block;

        width:auto;

        height:95px;

        object-fit:contain;

    }

    /* Menu */

    .pp-nav{

        width:100%;

        display:grid;

        grid-template-columns:1fr 1fr 1.4fr;

        gap:8px;

    }

    .pp-nav .pp-btn{

        min-height:50px;

        padding:10px 8px;

        border-radius:18px;

        font-size:14px;

    }

}


/* ###########################################################################
#
#  CELULARES PEQUENOS
#
############################################################################ */

@media (max-width:360px){

    .pp-public-logo{

        width:auto;

        height:78px;

        object-fit:contain;

    }

    .pp-nav .pp-btn{

        font-size:12px;

    }

}