<!-- =========================================
     CSS PREMIUM
========================================= -->
<style>

/* =========================================
   RESET
========================================= */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

/* =========================================
   OVERLAY BLUR
========================================= */

.modal-overlay{
    
    position:fixed;

    inset:0;

    width:100%;
    height:100vh;

    display:flex;

   align-items:flex-start;
    justify-content:center;

    padding:20px;

    padding-top:20px;
    padding-bottom:20px;

    z-index:999999;

    background:
    rgba(255,255,255,0.0);

    backdrop-filter:
    blur(12px);

    -webkit-backdrop-filter:
    blur(12px);

    animation:fadeBlur .4s ease;

}
/* =========================================
   MODAL
========================================= */

.modal-box{

    width:100%;

    max-width:680px;

    max-height:calc(100vh - 40px);

    overflow-y:auto;

    overflow-x:hidden;

    scrollbar-width:none;

    -ms-overflow-style:none;

    border-radius:28px;

    position:relative;

    background:
    rgba(101,104,115,0.88);

    backdrop-filter:
    blur(20px);

    -webkit-backdrop-filter:
    blur(20px);

    border:
    1px solid rgba(255,255,255,0.12);

    box-shadow:
    0 25px 70px rgba(0,0,0,0.45);

    animation:modalEntrada .45s ease;

}
.modal-box::-webkit-scrollbar{

    display:none;

}

/* =========================================
   FECHAR
========================================= */

/* =========================================
   TOPO FIXO DO MODAL
========================================= */

.modal-topo{

    position:sticky;

    top:0;

    width:100%;

    display:flex;

    justify-content:flex-end;

    padding-top:18px;

    padding-right:18px;

    padding-bottom:8px;

    padding-left:1px;

    z-index:9999;

    background:
    rgba(101,104,115,0.30);

    backdrop-filter:
    blur(12px);

    -webkit-backdrop-filter:
    blur(12px);

}

/* =========================================
   BOTÃO FECHAR
========================================= */

.modal-close{

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:#77be32;

    color:#ffffff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:20px;

    cursor:pointer;

    transition:.35s;

    box-shadow:
    0 5px 15px rgba(0,0,0,.25);

}

.modal-close:hover{

    background:#656873;

    transform:
    rotate(90deg);

}

/* =========================================
   LOGO
========================================= */

/* =========================================
   LOGO HORIZONTAL
========================================= */

.modal-logo{

    width:100%;

    display:flex;

    align-items:center;
    justify-content:center;

padding:18px 20px 10px;

}

.modal-logo img{

    width:200px;

    height:60px;

    object-fit:contain;

    display:block;

}

/* =========================================
   BANNER
========================================= */

.modal-banner{

    width:100%;

    overflow:hidden;

}

.modal-banner img{
    
max-height:260px;

    width:100%;

    max-width:100%;

    height:auto;

    display:block;

    object-fit:cover;
 
}


/* =========================================
   CONTEÚDO
========================================= */

.modal-content{

  padding:28px;

    text-align:center;

    color:#ffffff;

}

.modal-content h1{

 font-size:38px;

    line-height:1.1;

    color:#77be32;

    margin-bottom:18px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;

}

.modal-content h2{

    font-size:20px;

    line-height:1.5;

    margin-bottom:22px;

    font-weight:400;

    color:#ffffff;

}

.modal-content p{

   font-size:16px;

    line-height:1.7;
    color:#f1f1f1;

}

/* =========================================
   FOOTER
========================================= */

.modal-footer{

    padding:20px;

    text-align:center;

    background:
    rgba(0,0,0,0.10);

    border-top:
    1px solid rgba(255,255,255,0.08);

}

.modal-footer a{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    text-decoration:none;

    background:#77be32;

    color:#ffffff;

    padding:18px 30px;

    border-radius:70px;

    font-size:17px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 10px 25px rgba(119,190,50,.35);

}

.modal-footer a i{

    font-size:26px;

}

.modal-footer a:hover{

    background:#656873;

    transform:
    translateY(-3px);

}

/* =========================================
   ANIMAÇÕES
========================================= */

@keyframes fadeBlur{

    from{

        opacity:0;

        backdrop-filter:blur(0px);

    }

    to{

        opacity:1;

        backdrop-filter:blur(12px);

    }

}

@keyframes modalEntrada{

    from{

        opacity:0;

        transform:
        translateY(40px)
        scale(.94);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

/* =========================================
   SCROLL
========================================= */

.modal-box::-webkit-scrollbar{

    width:8px;

}

.modal-box::-webkit-scrollbar-thumb{

    background:#77be32;

    border-radius:30px;

}

/* =========================================
   TABLET
========================================= */

@media(max-width:992px){

    .modal-box{

        max-width:92%;

    }

    .modal-content{

        padding:32px;

    }

    .modal-content h1{

        font-size:38px;

    }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .modal-overlay{

        padding:12px;

    }

    .modal-box{

        max-width:100%;

        border-radius:24px;

    }

    .modal-logo{

        padding:28px 20px 14px;

    }

    .modal-logo img{

        max-width:180px;

    }

    .modal-content{

        padding:24px;

    }

    .modal-content h1{

        font-size:30px;

    }

    .modal-content h2{

        font-size:18px;

    }

    .modal-content p{

        font-size:15px;

        line-height:1.8;

    }

    .modal-footer{

        padding:22px;

    }

    .modal-footer a{

        width:100%;

        font-size:16px;

        padding:16px;

    }

}

/* =========================================
   MOBILE PEQUENO
========================================= */

@media(max-width:480px){

    .modal-close{

        width:42px;
        height:42px;

        top:12px;
        right:12px;

    }

    .modal-content h1{

        font-size:26px;

    }

    .modal-content h2{

        font-size:16px;

    }

    .modal-content p{

        font-size:14px;

    }

}


body{

    overflow-x:hidden;

}

.modal-box{

    overflow-y:auto;
    overflow-x:hidden;

}

.valor-promocional{

    display:inline-block;

    margin-top:10px;

    padding:8px 18px;

    background:#535353;

    color:#ffffff;

    border-radius:12px;

    font-size:42px;

    font-weight:800;

    line-height:1;

    box-shadow:
    0 10px 25px rgba(119,190,50,.35);

}

.texto-informativo{

    display:inline-block;

    margin-top:18px;

    padding:10px 16px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    border-radius:12px;

    font-size:14px;

    line-height:1.6;

    color:
    rgba(255,255,255,0.88);

    max-width:520px;

    backdrop-filter:
    blur(6px);

    -webkit-backdrop-filter:
    blur(6px);

}

.modal-overlay{
    display:none;
}

.destaque-producao{
    font-size: 1.2rem;
    color: #333;
    text-align: center;
    margin: 15px 0;
    line-height: 1.5;
}

.prazo-producao{
    color: #fff;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;
    margin-top: 2px;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

.prazo-producao strong{
    font-weight: 900;
    font-style: italic;
}

@media(max-width:768px){

    .modal-box{
        width:90%;
        max-height:70vh;
    }

    .modal-banner img{
        max-height:120px;
        object-fit:cover;
    }

    .modal-logo{
        padding:10px 15px 5px;
    }

    .modal-logo img{
        width:120px;
        height:auto;
    }

    .modal-content{
        padding:15px;
    }

    .modal-content h1{
        font-size:22px;
        margin-bottom:10px;
    }

    .modal-content h2{
        font-size:16px;
        margin-bottom:10px;
    }

    .valor-promocional{
        font-size:28px;
        padding:6px 12px;
    }

    .texto-informativo{
        font-size:12px;
        padding:8px 12px;
        margin-top:10px;
    }

    .modal-footer{
        padding:15px;
    }

    .modal-footer a{
        padding:12px 18px;
        font-size:14px;
    }

}

.modal-overlay{

    align-items:flex-start;

}

</style>