/* ==================================================
   PRODUTOS CINEMATOGRÁFICOS FPSS
================================================== */

.produtos-premium-section{
    padding:80px 20px 120px;

    background:
    linear-gradient(
    180deg,
    #f7f2e8 0%,
    #efe3cf 100%
    );
}

/* ==================================================
   TOPO
================================================== */

.produtos-cinema-topo{
    text-align:center;

    margin-bottom:60px;
}

.section-mini-title{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 26px;

    border-radius:999px;

    background:#ffcc00;

    color:#5c0000;

    font-size:14px;

    font-weight:900;

    letter-spacing:1px;

    margin-bottom:24px;

    box-shadow:
    0 10px 25px rgba(255,204,0,.35);
}

.produtos-cinema-topo h2{
    font-size:72px;

    line-height:.95;

    color:#7a0000;

    font-weight:900;

    text-transform:uppercase;

    margin-bottom:25px;

    text-shadow:
    0 10px 30px rgba(0,0,0,.08);
}


.produtos-cinema-topo p{
    max-width:900px;

    margin:auto;

    color:#5b5b5b;

    font-size:20px;

    line-height:1.7;
}

/* ==================================================
   GRID
================================================== */

.venda-container{
    display:grid;

    grid-template-columns:
    repeat(2,minmax(0,1fr));

    gap:35px;

    width:100%;

    max-width:1400px;

    margin:0 auto;
}

/* ==================================================
   CARD
================================================== */

.venda-box{
    position:relative;

    overflow:hidden;

    display:flex;

    align-items:stretch;

    min-height:280px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,.96),
    rgba(255,255,255,.90)
    );

    box-shadow:
    0 18px 45px rgba(0,0,0,.10);

    transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* BARRA DOURADA */

.venda-box::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:10px;
    height:100%;

    background:
    linear-gradient(
    180deg,
    #ffcc00,
    #ff7b00
    );
}

/* HOVER */

.venda-box:hover{
    transform:
    translateY(-10px);

    box-shadow:
    0 28px 70px rgba(0,0,0,.18);
}

/* ==================================================
   IMAGEM
================================================== */

.venda-box img{

    width:220px;
    min-width:220px;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:#fff;
    padding:8px;
    border-radius:24px 0 0 24px;
    display:block;
}

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

.venda-box-conteudo{
    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:30px;
}

/* ==================================================
   TÍTULO
================================================== */

.venda-box h3{
    color:#7a0000;

    font-size:42px;

    line-height:1;

    font-weight:900;

    margin-bottom:18px;
}

/* ==================================================
   INFO
================================================== */

.info-list{
    list-style:none;

    padding:0;

    margin:0;
}

.info-list li{
    color:#3f3f46;

    font-size:17px;

    line-height:1.6;

    margin-bottom:12px;
}

/* ==================================================
   BADGE
================================================== */

.badge-lote{
    display:inline-flex;

    align-items:center;

    width:max-content;

    margin-top:10px;

    padding:10px 16px;

    border-radius:999px;

    background:#fff1f2;

    border:1px solid #fecdd3;

    color:#e11d48;

    font-size:13px;

    font-weight:800;
}

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

.venda-box-rodape{
    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:25px;

    margin-top:28px;
}

/* ==================================================
   PREÇO
================================================== */

.price-box{
    color:#00a63e;

    font-size:56px;

    line-height:1;

    font-weight:900;
}

/* ==================================================
   BOTÃO
================================================== */

.venda-box .btn.green.full{
    display:flex;

    align-items:center;

    justify-content:center;

    min-width:230px;

    padding:20px 28px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #16a34a,
    #22c55e
    );

    color:#ffffff !important;

    text-decoration:none;

    font-size:16px;

    font-weight:900;

    letter-spacing:.5px;

    text-transform:uppercase;

    box-shadow:
    0 15px 30px rgba(34,197,94,.30);

    transition:.3s;
}

.venda-box .btn.green.full:hover{
    transform:
    scale(1.04);

    box-shadow:
    0 20px 45px rgba(34,197,94,.40);
}

/* ==================================================
   RESPONSIVO
================================================== */

@media(max-width:1200px){

    .venda-container{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .produtos-cinema-topo h2{
        font-size:42px;
    }

    .produtos-cinema-topo p{
        font-size:16px;
    }

    .venda-box{
        flex-direction:column;

        min-height:auto;
    }

    .venda-box img{
        width:100%;

        min-width:100%;

        height:240px;
    }

    .venda-box h3{
        font-size:32px;
    }

    .price-box{
        font-size:42px;
    }

    .venda-box-rodape{
        flex-direction:column;

        align-items:flex-start;
    }

    .venda-box .btn.green.full{
        width:100%;

        min-width:100%;
    }

}