/* =====================================================
   CLUBE BORA — STYLE.CSS V2
   Página dinâmica de promoções
===================================================== */


/* =====================================================
   RESET E VARIÁVEIS
===================================================== */

:root{
    --fundo:#06110a;
    --fundo-secundario:#0a1b10;

    --verde:#00c853;
    --verde-claro:#00e676;
    --verde-escuro:#008f3b;

    --amarelo:#ffc928;
    --vermelho:#ff5252;

    --branco:#ffffff;
    --texto-secundario:#bcc7bf;

    --card:rgba(255,255,255,.075);
    --card-forte:rgba(255,255,255,.105);
    --borda:rgba(255,255,255,.10);

    --sombra:0 20px 60px rgba(0,0,0,.42);
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{
    min-height:100vh;

    font-family:"Poppins",sans-serif;

    color:var(--branco);

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(0,200,83,.23),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 88%,
            rgba(255,201,40,.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #041008,
            #08170d 55%,
            #07110a
        );

    overflow-x:hidden;
}


button,
input{
    font-family:inherit;
}


button{
    border:0;
}


img{
    max-width:100%;
}


/* =====================================================
   UTILIDADES
===================================================== */

.hidden{
    display:none !important;
}


/* =====================================================
   FUNDO DECORATIVO
===================================================== */

.bg-circle{
    position:fixed;

    z-index:-1;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;
}


.bg1{
    width:360px;
    height:360px;

    top:-130px;
    left:-120px;

    background:var(--verde);

    opacity:.20;
}


.bg2{
    width:320px;
    height:320px;

    right:-130px;
    bottom:-130px;

    background:var(--amarelo);

    opacity:.08;
}


/* =====================================================
   BARRA FIXA DE VALIDADE
===================================================== */

.barra-fechamento{
    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:1000;

    min-height:62px;

    padding:10px 18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    background:rgba(3,13,7,.94);

    border-bottom:1px solid var(--borda);

    backdrop-filter:blur(18px);

    box-shadow:
        0 8px 30px rgba(0,0,0,.32);
}


.barra-fechamento span{
    color:#d4ded7;

    font-size:12px;
    font-weight:500;
}


.barra-fechamento strong{
    color:var(--verde-claro);

    font-size:18px;
    font-weight:800;

    letter-spacing:1px;
}


.barra-fechamento.encerrado strong{
    color:var(--vermelho);
}


/* =====================================================
   CONTAINER PRINCIPAL
===================================================== */

.container{
    width:100%;
    max-width:500px;

    margin:0 auto;

    padding:
        96px
        18px
        70px;
}


/* =====================================================
   CABEÇALHO
===================================================== */

.cabecalho{
    text-align:center;

    margin-bottom:34px;
}


.logo{
    width:250px;
    max-width:82%;

    margin:
        0
        auto
        24px;

    display:flex;
    align-items:center;
    justify-content:center;

    animation:
        flutuarLogo
        4s
        ease-in-out
        infinite;
}


.logo img{
    width:100%;
    height:auto;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(
            0
            18px
            25px
            rgba(0,0,0,.42)
        );
}


@keyframes flutuarLogo{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }

}


.cabecalho h1{
    margin-bottom:7px;

    font-size:36px;
    font-weight:800;

    letter-spacing:-1px;
}


.subtitulo{
    max-width:390px;

    margin:0 auto;

    color:var(--texto-secundario);

    font-size:14px;
    line-height:1.65;
}


/* =====================================================
   ESTADOS DA PÁGINA
===================================================== */

.estado-pagina{
    width:100%;

    padding:38px 25px;

    border:1px solid var(--borda);
    border-radius:26px;

    background:var(--card);

    backdrop-filter:blur(20px);

    box-shadow:var(--sombra);

    text-align:center;
}


.estado-pagina h2{
    margin-bottom:9px;

    font-size:23px;
}


.estado-pagina p{
    color:var(--texto-secundario);

    font-size:14px;
    line-height:1.6;
}


.estado-icone{
    width:74px;
    height:74px;

    margin:
        0
        auto
        18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

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

    font-size:34px;
    font-weight:800;
}


.estado-pagina button{
    width:100%;

    margin-top:22px;
}


/* =====================================================
   LOADING
===================================================== */

.loading{
    width:66px;
    height:66px;

    margin:
        0
        auto
        22px;

    border-radius:50%;

    border:
        6px
        solid
        rgba(255,255,255,.11);

    border-top-color:var(--verde-claro);

    animation:
        girar
        .9s
        linear
        infinite;
}


@keyframes girar{

    to{
        transform:rotate(360deg);
    }

}


/* =====================================================
   ÁREA DE PROMOÇÕES
===================================================== */

.area-promocoes{
    width:100%;
}


.promocoes-topo{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;

    margin-bottom:20px;
}


.promocoes-topo h2{
    margin-top:4px;

    font-size:23px;
    line-height:1.2;
}


.section-label{
    color:var(--verde-claro);

    font-size:11px;
    font-weight:800;

    letter-spacing:1.2px;
}


.indicador-promocao{
    flex-shrink:0;

    color:#d4ded7;

    font-size:13px;
    font-weight:600;
}


/* =====================================================
   CARROSSEL / PILHA
===================================================== */

.carrossel-wrapper{
    position:relative;

    width:100%;

    padding:
        0
        5px
        34px;
}


.pilha-promocoes{
    position:relative;

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

    width:100%;

    isolation:isolate;
}


.card-promocao{
    grid-column:1;
    grid-row:1;

    width:100%;

    margin:0;

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(35px)
        scale(.91);

    transform-origin:center top;

    transition:
        transform .38s ease,
        opacity .30s ease,
        visibility .30s ease;
}


.card-promocao.ativa{
    z-index:4;

    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);
}


.card-promocao.proxima{
    z-index:3;

    opacity:.25;
    visibility:visible;

    transform:
        translateY(19px)
        scale(.965);
}


.card-promocao.anterior{
    z-index:2;

    opacity:.10;
    visibility:visible;

    transform:
        translateY(32px)
        scale(.93);
}


.card-promocao.distante,
.card-promocao.oculta{
    z-index:1;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(45px)
        scale(.90);
}


/* =====================================================
   CARD DE PROMOÇÃO
===================================================== */

.card{
    width:100%;

    padding:30px 27px;

    border:1px solid var(--borda);
    border-radius:27px;

    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.045)
        );

    backdrop-filter:blur(22px);

    box-shadow:var(--sombra);

    text-align:center;
}


.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    max-width:100%;

    margin-bottom:21px;

    padding:
        8px
        15px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--verde),
            var(--verde-claro)
        );

    color:#fff;

    font-size:11px;
    font-weight:800;

    letter-spacing:.35px;

    box-shadow:
        0
        8px
        24px
        rgba(0,200,83,.28);
}


.card h2{
    margin-bottom:10px;

    font-size:29px;
    line-height:1.17;

    letter-spacing:-.5px;
}


.descricao{
    color:#d3ddd6;

    font-size:14px;
    line-height:1.6;
}


/* =====================================================
   IMAGEM DO PRODUTO
===================================================== */

.produto{
    min-height:205px;

    margin:
        22px
        0;

    display:flex;
    align-items:center;
    justify-content:center;
}


.produto img{
    width:250px;
    max-width:92%;
    max-height:230px;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(
            0
            22px
            26px
            rgba(0,0,0,.42)
        );

    transition:
        transform .35s ease;

    animation:
        flutuarProduto
        4s
        ease-in-out
        infinite;
}


.produto img:hover{
    transform:
        scale(1.04)
        rotate(-1deg);
}


@keyframes flutuarProduto{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

}


/* =====================================================
   PREÇOS
===================================================== */

.precos{
    margin-top:15px;

    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:17px;

    flex-wrap:wrap;
}


.antigo{
    color:#98a39b;

    font-size:18px;

    text-decoration:line-through;
}


.novo{
    color:var(--verde-claro);

    font-size:45px;
    font-weight:800;

    line-height:1;

    letter-spacing:-1.5px;

    text-shadow:
        0
        0
        25px
        rgba(0,230,118,.20);
}


/* =====================================================
   ECONOMIA E DESCONTO
===================================================== */

.economia{
    margin:
        22px
        0
        25px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}


.desconto-percentual{
    display:inline-block;

    padding:
        8px
        17px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #ffb300,
            #ffd84a
        );

    color:#18130a;

    font-size:17px;
    font-weight:800;

    box-shadow:
        0
        8px
        22px
        rgba(255,193,7,.24);
}


.economia p{
    color:#ffe07d;

    font-size:14px;
}


.economia strong{
    color:#fff;
}


/* =====================================================
   BENEFÍCIOS
===================================================== */

.beneficios{
    margin:
        0
        0
        25px;

    padding:17px 18px;

    border:
        1px
        solid
        rgba(255,255,255,.075);

    border-radius:16px;

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

    color:#e2e9e4;

    font-size:13px;
    line-height:1.9;

    text-align:left;
}


/* =====================================================
   CONTADOR
===================================================== */

.contador{
    margin:
        24px
        0;

    color:#e5ece7;

    font-size:14px;
    line-height:1.55;
}


.contador span,
.contador-campanha{
    color:var(--verde-claro);

    font-size:23px;
    font-weight:800;
}


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

button{
    cursor:pointer;

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


.btn-resgatar-campanha,
#btnConfirmarTelefone,
#fecharCupom,
#fecharTelaVencedor,
#fecharTelaEncerrada,
.estado-pagina button{
    width:100%;

    padding:
        17px
        18px;

    border-radius:16px;

    background:
        linear-gradient(
            90deg,
            var(--verde),
            var(--verde-claro)
        );

    color:#fff;

    font-size:14px;
    font-weight:800;

    box-shadow:
        0
        10px
        28px
        rgba(0,200,83,.30);
}


.btn-resgatar-campanha:hover,
#btnConfirmarTelefone:hover,
#fecharCupom:hover,
#fecharTelaVencedor:hover,
#fecharTelaEncerrada:hover,
.estado-pagina button:hover{
    transform:translateY(-2px);

    box-shadow:
        0
        15px
        35px
        rgba(0,200,83,.38);
}


.btn-resgatar-campanha:active,
#btnConfirmarTelefone:active,
#fecharCupom:active,
#fecharTelaVencedor:active,
#fecharTelaEncerrada:active,
.estado-pagina button:active{
    transform:scale(.98);
}


button:disabled{
    opacity:.5;

    cursor:not-allowed;

    transform:none !important;
}


.card > small{
    display:block;

    margin-top:16px;

    color:#aeb8b1;

    font-size:11px;
    line-height:1.55;
}


/* =====================================================
   SETAS DO CARROSSEL
===================================================== */

.seta-carrossel{
    position:absolute;

    top:50%;

    z-index:20;

    width:44px !important;
    height:44px !important;
    min-width:44px;

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

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px
        solid
        rgba(255,255,255,.18);

    border-radius:50%;

    background:
        rgba(0,215,98,.96);

    color:#fff;

    font-size:24px;
    font-weight:800;
    line-height:1;

    box-shadow:
        0
        8px
        24px
        rgba(0,220,105,.34);

    transform:translateY(-50%);
}


.seta-carrossel:hover{
    transform:
        translateY(-50%)
        scale(1.08);
}


.seta-carrossel:active{
    transform:
        translateY(-50%)
        scale(.94);
}


.seta-esquerda{
    left:-12px;
}


.seta-direita{
    right:-12px;
}


.seta-carrossel:disabled{
    display:none;
}


/* =====================================================
   PAGINAÇÃO
===================================================== */

.paginacao-promocoes{
    position:relative;

    z-index:30;

    min-height:22px;

    margin-top:20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}


.ponto-promocao{
    width:9px !important;
    height:9px !important;
    min-width:9px;

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

    border-radius:999px;

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

    box-shadow:none;
}


.ponto-promocao:hover{
    transform:scale(1.18);
}


.ponto-promocao.ativo{
    width:28px !important;

    background:var(--verde-claro);

    box-shadow:
        0
        0
        14px
        rgba(0,230,118,.42);
}


/* =====================================================
   MODAIS
===================================================== */

.modal{
    position:fixed;

    inset:0;

    z-index:3000;

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:
        rgba(0,0,0,.82);

    backdrop-filter:blur(8px);
}


.modal-box{
    position:relative;

    width:100%;
    max-width:410px;

    padding:34px 28px;

    border:
        1px
        solid
        var(--borda);

    border-radius:25px;

    background:
        linear-gradient(
            150deg,
            #152019,
            #0c1510
        );

    box-shadow:
        0
        25px
        75px
        rgba(0,0,0,.60);

    text-align:center;

    animation:
        aparecerModal
        .28s
        ease;
}


@keyframes aparecerModal{

    from{
        opacity:0;

        transform:
            translateY(25px)
            scale(.96);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }

}


.modal-box h2{
    margin-bottom:9px;

    font-size:24px;
}


.modal-box > p{
    color:var(--texto-secundario);

    font-size:13px;
    line-height:1.6;
}


.modal-badge{
    display:inline-block;

    margin-bottom:14px;

    padding:
        7px
        13px;

    border-radius:999px;

    background:
        rgba(0,230,118,.12);

    color:var(--verde-claro);

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
}


.botao-fechar-modal{
    position:absolute;

    top:13px;
    right:15px;

    width:36px !important;
    height:36px !important;

    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

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

    color:#fff;

    font-size:25px;
}


/* =====================================================
   CAMPO DE TELEFONE
===================================================== */

.verificacao{
    margin:
        24px
        0
        18px;

    text-align:left;
}


.verificacao label{
    display:block;

    margin-bottom:7px;

    color:#fff;

    font-size:13px;
    font-weight:700;
}


.verificacao input{
    width:100%;

    padding:
        15px
        16px;

    border:
        1px
        solid
        rgba(255,255,255,.13);

    border-radius:14px;

    outline:none;

    background:
        rgba(0,0,0,.22);

    color:#fff;

    font-size:15px;
}


.verificacao input:focus{
    border-color:var(--verde-claro);

    box-shadow:
        0
        0
        0
        3px
        rgba(0,230,118,.10);
}


.verificacao-ajuda{
    display:block;

    margin-top:8px;

    color:#aeb8b1;

    font-size:11px;
    line-height:1.5;
}


/* =====================================================
   MENSAGENS
===================================================== */

.mensagem-pagina{
    margin-bottom:16px;

    padding:
        13px
        14px;

    border-radius:13px;

    font-size:12px;
    line-height:1.5;

    text-align:left;
}


.mensagem-pagina.erro{
    border:
        1px
        solid
        rgba(255,82,82,.30);

    background:
        rgba(255,82,82,.10);

    color:#ffc1c1;
}


.mensagem-pagina.sucesso{
    border:
        1px
        solid
        rgba(0,230,118,.30);

    background:
        rgba(0,230,118,.09);

    color:#a7ffca;
}


.mensagem-pagina.info{
    border:
        1px
        solid
        rgba(255,201,40,.30);

    background:
        rgba(255,201,40,.09);

    color:#ffe590;
}


/* =====================================================
   TICKET DO CUPOM
===================================================== */

.ticket{
    width:100%;
    max-width:420px;

    overflow:hidden;

    border-radius:28px;

    box-shadow:
        0
        30px
        90px
        rgba(0,0,0,.66);

    animation:
        subirTicket
        .40s
        ease;
}


@keyframes subirTicket{

    from{
        opacity:0;

        transform:
            translateY(55px)
            scale(.96);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }

}


.ticket-top{
    padding:18px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:
        linear-gradient(
            90deg,
            var(--verde-escuro),
            var(--verde)
        );

    color:#fff;
}


.ticket-top span{
    font-size:20px;
    font-weight:800;
}


.ticket-top small{
    font-size:10px;
    font-weight:600;

    opacity:.86;
}


.ticket-body{
    padding:30px 27px;

    background:#ffffff;

    color:#202320;

    text-align:center;
}


.ticket-badge{
    display:inline-block;

    margin-bottom:16px;

    padding:
        7px
        14px;

    border-radius:999px;

    background:#e9fff0;

    color:#008d36;

    font-size:10px;
    font-weight:800;

    letter-spacing:.8px;
}


.ticket-body h2{
    margin-bottom:7px;

    font-size:26px;
    line-height:1.2;
}


.ticket-body h3{
    margin-bottom:18px;

    color:#777;

    font-size:13px;
    font-weight:500;
    line-height:1.55;
}


.ticket-precos{
    margin-bottom:20px;
}


.ticket-preco-antigo{
    display:block;

    color:#888;

    font-size:15px;

    text-decoration:line-through;
}


.valor{
    margin-top:4px;

    color:#009b3a;

    font-size:49px;
    font-weight:800;

    letter-spacing:-1.5px;
}


.ticket-economia{
    margin-bottom:22px;

    color:#866400;

    font-size:13px;
    font-weight:700;
}


/* =====================================================
   QR CODE
===================================================== */

.qrcode{
    width:190px;
    min-height:190px;

    margin:
        0
        auto
        20px;

    padding:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px
        solid
        #e0e0e0;

    border-radius:16px;

    background:#fff;
}


.qrcode img,
.qrcode canvas{
    max-width:100%;
    height:auto !important;
}


.codigo{
    margin-bottom:14px;

    color:#171717;

    font-size:18px;
    font-weight:800;

    letter-spacing:1.5px;

    overflow-wrap:anywhere;
}


.status{
    margin-bottom:16px;

    color:#009b3a;

    font-size:14px;
    font-weight:700;
}


.aviso-uso-unico{
    margin:
        18px
        0;

    padding:16px;

    border:
        1px
        solid
        #e4e4e4;

    border-radius:15px;

    background:#f6f7f6;

    color:#464b47;
}


.aviso-uso-unico strong{
    display:block;

    margin-bottom:8px;

    color:#202320;

    font-size:13px;
}


.aviso-uso-unico p{
    margin-top:5px;

    font-size:11px;
    line-height:1.55;
}


.aviso-uso-unico span{
    color:#008d36;

    font-size:17px;
    font-weight:800;
}


.cupom-validade{
    margin-bottom:18px;

    color:#767b77;

    font-size:11px;
    line-height:1.5;
}


/* =====================================================
   TELAS DE RESULTADO
===================================================== */

.resultado-promocao{
    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:22px;

    background:
        rgba(0,0,0,.91);

    backdrop-filter:blur(11px);
}


.resultado-conteudo{
    width:100%;
    max-width:430px;

    padding:38px 29px;

    border:
        1px
        solid
        rgba(255,255,255,.12);

    border-radius:28px;

    text-align:center;

    box-shadow:
        0
        30px
        90px
        rgba(0,0,0,.60);

    animation:
        aparecerResultado
        .45s
        ease;
}


@keyframes aparecerResultado{

    from{
        opacity:0;

        transform:
            scale(.87)
            translateY(30px);
    }

    to{
        opacity:1;

        transform:
            scale(1)
            translateY(0);
    }

}


.tela-vencedor .resultado-conteudo{
    background:
        radial-gradient(
            circle at top,
            rgba(0,230,118,.26),
            transparent 42%
        ),
        linear-gradient(
            150deg,
            #10351d,
            #07140c
        );
}


.tela-encerrada .resultado-conteudo{
    background:
        radial-gradient(
            circle at top,
            rgba(255,82,82,.15),
            transparent 42%
        ),
        linear-gradient(
            150deg,
            #251313,
            #100909
        );
}


.trofeu,
.resultado-icone{
    margin-bottom:12px;

    font-size:64px;
}


.resultado-selo{
    display:inline-block;

    margin-bottom:16px;

    padding:
        7px
        14px;

    border-radius:999px;

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

    color:#fff;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
}


.resultado-conteudo h2{
    margin-bottom:10px;

    font-size:31px;
}


.resultado-conteudo > p{
    color:#ced8d1;

    font-size:14px;
    line-height:1.65;
}


.resultado-destaque{
    margin:
        23px
        0
        10px;

    color:var(--verde-claro);

    font-size:27px;
    font-weight:800;
}


.resultado-produto{
    color:#fff;

    font-size:17px;
    font-weight:700;
}


.resultado-horario{
    margin:
        12px
        0
        24px;
}


/* =====================================================
   RESPONSIVIDADE
===================================================== */

@media(max-width:520px){

    .barra-fechamento{
        min-height:66px;

        padding:
            8px
            12px;

        flex-direction:column;

        gap:0;
    }


    .barra-fechamento span{
        font-size:10px;
    }


    .barra-fechamento strong{
        font-size:17px;
    }


    .container{
        padding:
            92px
            12px
            55px;
    }


    .logo{
        width:230px;

        margin-bottom:18px;
    }


    .cabecalho h1{
        font-size:30px;
    }


    .subtitulo{
        font-size:12px;
    }


    .promocoes-topo{
        align-items:center;
    }


    .promocoes-topo h2{
        font-size:20px;
    }


    .card{
        padding:
            27px
            20px;
    }


    .card h2{
        font-size:25px;
    }


    .descricao{
        font-size:13px;
    }


    .produto{
        min-height:180px;
    }


    .produto img{
        width:220px;
        max-height:200px;
    }


    .novo{
        font-size:39px;
    }


    .antigo{
        font-size:15px;
    }


    .seta-carrossel{
        width:39px !important;
        height:39px !important;
        min-width:39px;

        font-size:20px;
    }


    .seta-esquerda{
        left:-5px;
    }


    .seta-direita{
        right:-5px;
    }


    .modal{
        padding:13px;
    }


    .modal-box{
        padding:
            31px
            21px;
    }


    .ticket-body{
        padding:
            26px
            21px;
    }


    .valor{
        font-size:43px;
    }


    .resultado-conteudo{
        padding:
            33px
            22px;
    }

}


@media(max-width:380px){

    .card{
        padding:
            25px
            17px;
    }


    .novo{
        font-size:36px;
    }


    .precos{
        gap:11px;
    }


    .produto img{
        width:195px;
    }


    .seta-esquerda{
        left:-2px;
    }


    .seta-direita{
        right:-2px;
    }

}

/* =====================================================
   CLUBE BORA V3 — FASES E CUPONS LIMITADOS
===================================================== */

.badge-em-breve{
    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #7c3aed
        );
    box-shadow:
        0
        8px
        24px
        rgba(124,58,237,.28);
}

.card-promocao.fase-em_breve .produto img{
    filter:
        grayscale(.10)
        drop-shadow(
            0
            22px
            26px
            rgba(0,0,0,.42)
        );
}

.segredo-promocao{
    margin:
        18px
        0
        24px;

    padding:20px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    overflow:hidden;

    border:
        1px
        solid
        rgba(255,255,255,.08);

    border-radius:18px;

    background:
        rgba(0,0,0,.18);

    filter:blur(5px);

    user-select:none;
    pointer-events:none;
}

.segredo-promocao strong{
    color:#d9e0db;

    font-size:35px;
    font-weight:800;

    letter-spacing:-1px;
}

.segredo-linha{
    width:72%;
    height:12px;

    border-radius:999px;

    background:
        rgba(255,255,255,.20);
}

.segredo-linha.curta{
    width:45%;
}

.mensagem-fase{
    margin:
        18px
        0;

    padding:
        17px
        18px;

    border:
        1px
        solid
        rgba(255,255,255,.10);

    border-radius:17px;

    background:
        rgba(0,0,0,.22);

    text-align:center;
}

.mensagem-fase strong{
    display:block;

    margin-bottom:5px;

    color:#ffffff;

    font-size:14px;
}

.mensagem-fase p{
    color:#c3cdc6;

    font-size:12px;
    line-height:1.55;
}

.contador-limitado{
    padding:
        15px
        16px;

    border:
        1px
        solid
        rgba(0,230,118,.14);

    border-radius:16px;

    background:
        rgba(0,230,118,.06);
}

.contador-limitado > div{
    color:#e5ece7;

    font-size:13px;
}

.contador-limitado > div strong{
    color:#ffffff;

    font-size:18px;
}

.contador-limitado small{
    display:block;

    margin-top:4px;

    color:#9eaaa2;

    font-size:11px;
}

.card-promocao.fase-esgotada.ativa,
.card-promocao.fase-encerrada.ativa{
    opacity:.68;

    filter:
        grayscale(.46);
}

.card-promocao.fase-esgotada.ativa:hover,
.card-promocao.fase-encerrada.ativa:hover{
    opacity:.82;
}

.card-promocao.fase-esgotada .badge{
    background:
        linear-gradient(
            90deg,
            #6b7280,
            #9ca3af
        );

    box-shadow:none;
}

.card-promocao.fase-encerrada .badge{
    background:
        linear-gradient(
            90deg,
            #7f1d1d,
            #ef4444
        );

    box-shadow:
        0
        8px
        24px
        rgba(239,68,68,.18);
}

.btn-resgatar-campanha:disabled{
    background:
        linear-gradient(
            90deg,
            #4b5563,
            #6b7280
        );

    box-shadow:none;

    color:#e5e7eb;
}

.card-promocao.fase-em_breve .btn-resgatar-campanha:disabled{
    background:
        linear-gradient(
            90deg,
            #4f46e5,
            #7c3aed
        );

    opacity:.78;
}

@media(max-width:520px){

    .segredo-promocao strong{
        font-size:30px;
    }

    .mensagem-fase{
        padding:
            15px
            14px;
    }

}


/* =====================================================
   CUPOM INDIVIDUAL VALIDADO EM TEMPO REAL
===================================================== */

.card-promocao.meu-cupom-utilizado.ativa{
    opacity:.72;
    filter:grayscale(.28);
}

.card-promocao.meu-cupom-utilizado .btn-resgatar-campanha{
    background:linear-gradient(90deg,#176a37,#238a4b);
    box-shadow:none;
}

.tela-vencedor .resultado-destaque{
    line-height:1.2;
}

@media(max-width:520px){
    .resultado-promocao{
        padding:14px;
    }

    .resultado-conteudo{
        padding:30px 20px;
    }

    .resultado-conteudo h2{
        font-size:27px;
    }

    .resultado-destaque{
        font-size:23px;
    }
}

/* =====================================================
   V4 — PARTICIPANTES E LIMITE DE UTILIZAÇÕES
===================================================== */

/* Mantém somente o card atual visível no carrossel. */
.card-promocao:not(.ativa){
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.contador-participacao{
    margin:20px 0;
    padding:15px;
    border:1px solid rgba(0,230,118,.16);
    border-radius:17px;
    background:
        linear-gradient(
            135deg,
            rgba(0,230,118,.075),
            rgba(255,255,255,.035)
        );
}

.contador-resumo-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:10px;
}

.contador-resumo-grid > div{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:72px;
    padding:10px 8px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    background:rgba(0,0,0,.18);
}

.contador-resumo-grid strong{
    color:var(--verde-claro);
    font-size:27px;
    font-weight:800;
    line-height:1;
}

.contador-resumo-grid span{
    margin-top:6px;
    color:#d8e1da;
    font-size:10px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.35px;
}

.contador-resumo-grid .contador-validacoes{
    border-color:rgba(255,201,40,.18);
    background:rgba(255,201,40,.055);
}

.contador-resumo-grid .contador-validacoes strong{
    color:#ffd86a;
}

.contador-participacao > small{
    display:block;
    color:#aeb9b1;
    font-size:10px;
    line-height:1.5;
    text-align:center;
}

.card-promocao.fase-validacoes_esgotadas.ativa{
    opacity:.72;
    filter:grayscale(.38);
}

.card-promocao.fase-validacoes_esgotadas .badge{
    background:linear-gradient(90deg,#8a6414,#d79a16);
    box-shadow:none;
}

.card-promocao.fase-validacoes_esgotadas .contador-validacoes strong{
    color:#ff8f8f;
}

/* =====================================================
   CUPOM COMPACTO EM CELULARES E TELAS BAIXAS
===================================================== */

@media (max-width:520px), (max-height:760px){
    #cupom.modal{
        align-items:flex-start;
        overflow-y:auto;
        padding:8px 10px 16px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    #cupom .ticket{
        flex:0 0 auto;
        margin:auto 0;
        border-radius:20px;
    }

    #cupom .ticket-top{
        padding:12px 17px;
    }

    #cupom .ticket-top span{
        font-size:17px;
    }

    #cupom .ticket-body{
        padding:16px 17px;
    }

    #cupom .ticket-badge{
        margin-bottom:7px;
        padding:5px 10px;
    }

    #cupom .ticket-body h2{
        margin-bottom:3px;
        font-size:21px;
    }

    #cupom .ticket-body h3{
        margin-bottom:7px;
        font-size:11px;
        line-height:1.35;
    }

    #cupom .ticket-precos{
        margin-bottom:3px;
    }

    #cupom .ticket-preco-antigo{
        font-size:12px;
    }

    #cupom .valor{
        margin-top:0;
        font-size:37px;
        line-height:1.05;
    }

    #cupom .ticket-economia{
        margin-bottom:8px;
        font-size:12px;
        line-height:1.25;
    }

    #cupom .qrcode{
        width:182px;
        min-height:182px;
        margin:0 auto 9px;
        padding:5px;
        border-radius:12px;
    }

    #cupom .codigo{
        margin-bottom:7px;
        font-size:16px;
    }

    #cupom .status{
        margin-bottom:8px;
        font-size:12px;
    }

    #cupom .aviso-uso-unico{
        margin:8px 0;
        padding:9px 11px;
    }

    #cupom .aviso-uso-unico strong{
        margin-bottom:3px;
        font-size:11px;
    }

    #cupom .aviso-uso-unico p{
        margin-top:2px;
        font-size:9px;
        line-height:1.3;
    }

    #cupom .aviso-uso-unico span{
        font-size:14px;
    }

    #cupom .cupom-validade{
        margin-bottom:8px;
        font-size:9px;
    }

    #cupom #fecharCupom{
        padding:12px 16px;
        border-radius:13px;
    }
}

@media(max-width:380px){
    .contador-resumo-grid{
        gap:7px;
    }

    .contador-resumo-grid strong{
        font-size:23px;
    }
}

@media(max-height:680px){
    #cupom .ticket-top{
        padding:9px 15px;
    }

    #cupom .ticket-body{
        padding:12px 15px;
    }

    #cupom .ticket-badge{
        margin-bottom:5px;
    }

    #cupom .ticket-body h3{
        margin-bottom:5px;
    }

    #cupom .qrcode{
        width:172px;
        min-height:172px;
        margin-bottom:6px;
    }

    #cupom .aviso-uso-unico p:last-child{
        display:none;
    }
}

/* Clube Bora V5 — código cancelado */
.card-promocao.meu-cupom-cancelado {
    opacity: 0.86;
}

.card-promocao.meu-cupom-cancelado .btn-resgatar-campanha {
    background: rgba(194, 52, 52, 0.16);
    border-color: rgba(255, 92, 92, 0.28);
    color: #ffb0b0;
}