:root {
    --fundo: #090604;
    --fundo2: #130c07;
    --card: #160e09;
    --card2: #21140c;

    --ouro: #dca838;
    --ouro-claro: #ffd778;

    --vermelho: #d41424;
    --vermelho-escuro: #8d0711;

    --texto: #fff9ee;
    --texto2: #c9bdac;

    --livre: #d8d5cf;
    --aguardando: #dfa523;
    --pago: #c91b26;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--texto);

    background:
        linear-gradient(rgba(8,5,3,.94), rgba(8,5,3,.96)),
        repeating-linear-gradient(
            90deg,
            #1b1009 0,
            #1b1009 3px,
            #110a06 3px,
            #110a06 8px
        );

    padding-bottom: 120px;
}

a {
    color: inherit;
}


/* TOPO */

.topo {
    height: 74px;
    width: 100%;

    position: absolute;
    top: 0;
    z-index: 20;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 30px;

    padding: 0 5%;

    border-bottom: 1px solid rgba(255,255,255,.06);

    background:
        linear-gradient(
            rgba(0,0,0,.72),
            rgba(0,0,0,.25)
        );
}

.marca {
    text-decoration: none;
    justify-self: start;
}

.marca strong {
    display: block;

    font-family: Georgia, serif;
    font-style: italic;

    font-size: 24px;

    color: var(--ouro-claro);
}

.marca strong span {
    color: var(--vermelho);
}

.marca small {
    display: block;

    margin-top: 2px;

    font-size: 7px;

    letter-spacing: 3px;

    color: #a79a89;
}

.topo nav {
    display: flex;
    gap: 35px;
}

.topo nav a {
    text-decoration: none;

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

    transition: .2s;
}

.topo nav a:hover {
    color: var(--ouro-claro);
}

.btn-topo {
    justify-self: end;

    text-decoration: none;

    padding: 13px 21px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #e01a2a,
            #a60816
        );

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

    box-shadow:
        0 8px 30px rgba(207,15,31,.25);
}


/* HERO */

.hero {
    min-height: 720px;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(220,139,37,.20),
            transparent 32%
        ),
        linear-gradient(
            100deg,
            #080503 0%,
            #160d07 48%,
            #060403 100%
        );
}

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.15),
            transparent 60%,
            rgba(0,0,0,.30)
        );
}

.hero-conteudo {
    width: min(1380px, 92%);
    min-height: 720px;

    margin: auto;

    padding-top: 75px;

    display: grid;
    grid-template-columns: .88fr 1.12fr;

    align-items: center;
}

.hero-texto {
    position: relative;
    z-index: 4;

    padding-left: 20px;
}

.etiqueta {
    display: inline-block;

    padding: 8px 18px;

    border: 1px solid rgba(227,177,68,.7);
    border-radius: 30px;

    color: white;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;

    background: rgba(0,0,0,.28);
}

.hero h1 {
    margin: 18px 0 16px;

    font-family: Georgia, serif;

    font-size: clamp(58px, 6vw, 92px);

    line-height: .87;

    letter-spacing: -3px;
}

.hero h1 > span {
    display: block;

    color: var(--ouro-claro);
}

.hero h1 b {
    color: var(--vermelho);

    font-family: Arial, sans-serif;

    font-weight: normal;
}

.hero h2 {
    margin: 0 0 7px;

    color: var(--ouro-claro);

    font-size: 18px;
}

.subtitulo {
    max-width: 520px;

    margin: 0;

    color: #ded5ca;

    font-size: 15px;

    line-height: 1.55;
}


/* VALOR */

.valores {
    width: min(530px, 100%);

    margin-top: 32px;

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

    gap: 25px;

    align-items: center;

    padding: 22px 25px;

    border: 1px solid rgba(221,165,51,.65);
    border-radius: 15px;

    background:
        linear-gradient(
            120deg,
            rgba(79,45,18,.50),
            rgba(15,9,5,.72)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 20px 50px rgba(0,0,0,.25);
}

.valores small {
    display: block;

    color: #eee1d0;

    font-size: 10px;
}

.valor strong {
    display: block;

    margin-top: 7px;

    font-size: 40px;
}

.divisor {
    height: 65px;

    background:
        rgba(225,173,67,.60);
}

.premio-resumo strong {
    display: block;

    margin-top: 6px;

    color: white;

    line-height: 1.2;
}

.premio-resumo span {
    color: #b5aa9c;

    font-size: 10px;
}


/* BOTÃO HERO */

.btn-principal {
    width: min(530px,100%);

    margin-top: 16px;

    padding: 18px 25px;

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

    text-decoration: none;

    border-radius: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    background:
        linear-gradient(
            135deg,
            #e91c2e,
            #a60716
        );

    box-shadow:
        0 15px 40px rgba(205,17,32,.25);

    transition: .2s;
}

.btn-principal:hover {
    transform: translateY(-2px);

    box-shadow:
        0 20px 50px rgba(205,17,32,.38);
}


/* PRODUTO */

.hero-produto {
    height: 645px;

    position: relative;

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

    overflow: hidden;
}

.hero-produto img {
    position: relative;
    z-index: 2;

    width: 580px;
    max-width: 88%;

    height: 580px;

    object-fit: cover;

    object-position: 57% 42%;

    border-radius: 28px;

    border:
        1px solid rgba(229,176,69,.32);

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

.brilho {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        rgba(210,122,27,.25);

    filter: blur(100px);
}

.frase-lateral {
    position: absolute;
    z-index: 3;

    right: 2%;
    top: 120px;

    text-align: right;
}

.frase-lateral span {
    display: block;

    font-family: Georgia, serif;
    font-style: italic;

    font-size: 22px;

    color: white;
}

.frase-lateral strong {
    display: block;

    margin-top: 65px;

    color: var(--ouro-claro);

    font-family: Georgia, serif;
    font-style: italic;

    font-size: 22px;
}


/* COMO PARTICIPAR */

.como {
    width: min(1250px, 94%);

    margin: -25px auto 30px;

    position: relative;
    z-index: 8;

    padding: 28px 45px 36px;

    border: 1px solid rgba(217,162,55,.40);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(27,16,9,.98),
            rgba(10,7,5,.98)
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.45);
}

.titulo-secao small,
.cabecalho-rifa > div:first-child > small {
    color: var(--ouro);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 3px;
}

.titulo-secao h2,
.cabecalho-rifa h2 {
    margin: 5px 0 18px;

    font-family: Georgia, serif;

    font-size: 34px;
}

.passos {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 15px;
}

.passos article {
    min-height: 190px;

    position: relative;

    padding: 23px 18px;

    text-align: center;

    border-radius: 12px;

    border:
        1px solid rgba(218,166,59,.28);

    background:
        linear-gradient(
            145deg,
            #24160d,
            #120c08
        );
}

.passos article > b {
    position: absolute;

    top: 12px;
    left: 12px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            #e31a2a,
            #a30714
        );
}

.icone {
    margin: 10px 0;

    font-size: 29px;
}

.passos h3 {
    margin: 8px 0;

    font-family: Georgia, serif;

    font-size: 17px;
}

.passos p {
    margin: 0;

    color: #c0b5a7;

    font-size: 12px;

    line-height: 1.55;
}


/* RIFA */

.rifa {
    width: min(1250px, 94%);

    margin: 18px auto 0;

    padding: 32px 45px 45px;

    border: 1px solid rgba(217,162,55,.38);
    border-radius: 18px;

    background:
        linear-gradient(
            150deg,
            rgba(23,14,8,.99),
            rgba(8,6,4,.99)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);
}

.cabecalho-rifa {
    display: flex;

    justify-content: space-between;
    align-items: end;

    gap: 25px;

    margin-bottom: 25px;
}

.cabecalho-rifa h2 {
    margin-bottom: 4px;
}

.cabecalho-rifa p {
    margin: 0;

    color: #bdb2a5;

    font-size: 12px;
}


/* LEGENDA */

.legenda {
    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    justify-content: flex-end;

    padding-bottom: 8px;

    font-size: 10px;

    color: #d2c9be;
}

.legenda span {
    display: flex;

    align-items: center;

    gap: 7px;
}

.legenda i {
    width: 19px;
    height: 19px;

    display: inline-block;

    border-radius: 5px;
}

.livre-cor {
    background: var(--livre);
}

.selecao-cor {
    background: var(--ouro);
}

.aguardando-cor {
    background: var(--aguardando);
}

.pago-cor {
    background: var(--pago);
}


/* GRID */

.grid-numeros {
    display: grid;

    grid-template-columns: repeat(10,1fr);

    gap: 7px;
}

.numero {
    min-height: 44px;

    border-radius: 7px;

    border:
        1px solid rgba(217,165,57,.38);

    background:
        linear-gradient(
            #1c130d,
            #100b08
        );

    color: #f4ede4;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .12s,
        background .12s,
        border .12s,
        box-shadow .12s;
}

.numero.disponivel:hover {
    transform: translateY(-2px);

    color: #1a1008;

    background: var(--livre);

    border-color: white;

    box-shadow:
        0 6px 20px rgba(255,255,255,.10);
}


/* SUA SELEÇÃO */

.numero.disponivel.selecionado {
    color: #160c05;

    background:
        linear-gradient(
            135deg,
            #ffe298,
            #d9a233
        );

    border-color: #ffe59c;

    box-shadow:
        0 5px 18px rgba(223,168,45,.30);
}


/* AGUARDANDO */

.numero.reservado {
    color: #271900;

    background:
        linear-gradient(
            135deg,
            #f0bd46,
            #c58a0d
        );

    border-color: #ffc849;

    cursor: not-allowed;
}


/* COMPRADO / PAGO */

.numero.pago {
    color: white;

    background:
        linear-gradient(
            135deg,
            #df2633,
            #9b0a15
        );

    border-color: #f34650;

    cursor: not-allowed;

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.18);
}


/* FINAL */

.mensagem-final {
    text-align: center;

    padding: 70px 20px 45px;
}

.mensagem-final strong {
    color: var(--ouro-claro);

    font-family: Georgia, serif;
    font-style: italic;

    font-size: 30px;
}

.mensagem-final p {
    color: #958a7d;

    line-height: 1.5;
}


/* FOOTER */

footer {
    width: min(1250px,94%);

    margin: auto;

    padding: 22px;

    display: flex;

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

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

    color: #8e8479;
}

footer strong {
    display: block;

    color: var(--ouro-claro);

    font-family: Georgia, serif;
    font-style: italic;

    font-size: 21px;
}

footer small {
    font-size: 6px;

    letter-spacing: 2px;
}

footer p {
    font-size: 9px;

    letter-spacing: 1px;
}


/* BARRA COMPRA */

.barra-compra {
    position: fixed;

    z-index: 100;

    left: 50%;
    bottom: -170px;

    transform: translateX(-50%);

    width:
        min(1150px, calc(100% - 25px));

    min-height: 88px;

    padding: 13px 25px;

    display: grid;

    grid-template-columns:
        1fr 200px 250px;

    align-items: center;

    gap: 20px;

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

    border-bottom: 0;

    border-radius:
        17px 17px 0 0;

    background:
        linear-gradient(
            120deg,
            #160e09,
            #0b0806
        );

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

    transition:
        bottom .3s ease;
}

.barra-compra.ativa {
    bottom: 0;
}

.resumo-selecao {
    display: flex;

    align-items: center;

    gap: 17px;
}

.ticket {
    font-size: 32px;
}

.resumo-selecao small,
.resumo-total small {
    display: block;

    color: var(--ouro);

    font-size: 8px;

    letter-spacing: 2px;
}

.resumo-selecao strong {
    display: inline-block;

    margin-right: 8px;

    font-size: 28px;
}

.resumo-selecao > div > span {
    color: #a89d91;

    font-size: 10px;
}

.resumo-total {
    padding-left: 25px;

    border-left:
        1px solid rgba(220,168,56,.55);
}

.resumo-total strong {
    display: block;

    margin-top: 4px;

    font-size: 27px;
}

.barra-compra button {
    height: 55px;

    border: 0;

    border-radius: 10px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #eb1d2f,
            #a60816
        );

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 8px 30px rgba(210,15,30,.28);
}

.barra-compra button span {
    margin-left: 25px;
}

.barra-compra button:disabled {
    opacity: .35;

    cursor: not-allowed;
}


/* RESPONSIVO */

@media (max-width: 1000px) {

    .topo {
        grid-template-columns: 1fr auto;
    }

    .topo nav {
        display: none;
    }

    .hero-conteudo {
        grid-template-columns: 1fr;
    }

    .hero-texto {
        padding-top: 70px;

        text-align: center;
    }

    .subtitulo,
    .valores,
    .btn-principal {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-produto {
        height: 600px;
    }

    .frase-lateral {
        display: none;
    }

    .passos {
        grid-template-columns:
            repeat(2,1fr);
    }

    .cabecalho-rifa {
        display: block;
    }

    .legenda {
        justify-content: flex-start;

        margin-top: 20px;
    }

}


@media (max-width: 650px) {

    body {
        padding-bottom: 150px;
    }

    .topo {
        padding: 0 18px;
    }

    .marca strong {
        font-size: 19px;
    }

    .btn-topo {
        padding: 11px 13px;

        font-size: 9px;
    }

    .hero h1 {
        font-size: 56px;
    }

    .hero h2 {
        font-size: 15px;
    }

    .hero-produto {
        height: 470px;
    }

    .hero-produto img {
        width: 95%;
        height: 430px;
    }

    .valores {
        grid-template-columns:
            1fr 1px 1fr;

        padding: 18px 13px;

        gap: 13px;
    }

    .valor strong {
        font-size: 29px;
    }

    .como {
        padding: 28px 15px;
    }

    .passos {
        gap: 8px;
    }

    .passos article {
        padding: 20px 10px;
    }

    .rifa {
        width: 97%;

        padding:
            28px 10px 35px;
    }

    .grid-numeros {
        grid-template-columns:
            repeat(5,1fr);

        gap: 5px;
    }

    .numero {
        min-height: 42px;

        font-size: 11px;
    }

    .barra-compra {
        grid-template-columns:
            1fr auto;

        padding: 12px 15px;
    }

    .resumo-total {
        padding-left: 15px;
    }

    .barra-compra button {
        grid-column:
            1 / -1;
    }

    footer {
        display: block;

        text-align: center;
    }

    footer p {
        margin-top: 20px;
    }
}


/* =====================================================
   CHECKOUT
===================================================== */

.checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;

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

    padding: 20px;

    background: rgba(0,0,0,.82);
    backdrop-filter: blur(8px);
}

.checkout-overlay.aberto {
    display: flex;
}

.checkout-modal {
    width: min(620px, 100%);
    max-height: 94vh;
    overflow-y: auto;

    position: relative;

    padding: 35px;

    border: 1px solid rgba(220,168,56,.60);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(165,83,18,.16),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #1c110a,
            #090604
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,.75);
}

.fechar-checkout {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;

    background: rgba(255,255,255,.05);
    color: white;

    font-size: 25px;
    cursor: pointer;
}

.checkout-cabecalho {
    text-align: center;
}

.checkout-cabecalho small {
    color: var(--ouro);
    letter-spacing: 3px;
    font-size: 9px;
    font-weight: 900;
}

.checkout-cabecalho h2 {
    margin: 7px 0;

    font-family: Georgia, serif;
    font-size: 32px;
}

.checkout-cabecalho p {
    margin: 0;

    color: #aa9f92;
    font-size: 12px;
}

.checkout-resumo {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;

    margin: 25px 0;

    padding: 18px;

    border: 1px solid rgba(220,168,56,.30);
    border-radius: 12px;

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

.checkout-resumo small {
    display: block;

    margin-bottom: 5px;

    color: var(--ouro);
    font-size: 8px;
    letter-spacing: 2px;
}

.checkout-resumo strong {
    font-size: 17px;
}

.checkout-resumo > div:last-child strong {
    color: var(--ouro-claro);
    font-size: 22px;
}

#formCheckout > label,
.area-pix label {
    display: block;

    margin-bottom: 17px;

    color: #ded5ca;

    font-size: 11px;
    font-weight: bold;
}

#formCheckout input[type="text"],
#formCheckout input[type="tel"] {
    width: 100%;

    margin-top: 7px;
    padding: 15px 16px;

    border: 1px solid #463527;
    border-radius: 9px;
    outline: none;

    background: #0d0906;
    color: white;

    font-size: 14px;
}

#formCheckout input:focus {
    border-color: var(--ouro);

    box-shadow:
        0 0 0 3px rgba(220,168,56,.08);
}

.titulo-pagamento {
    margin: 22px 0 10px;

    color: var(--ouro);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.formas-pagamento {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 15px;
}

.forma-card {
    position: relative;
    cursor: pointer;
}

.forma-card input {
    position: absolute;
    opacity: 0;
}

.forma-card > span {
    min-height: 74px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 14px 16px;

    border: 1px solid #463527;
    border-radius: 10px;

    background: #100b07;

    transition: .15s;
}

.forma-card b {
    color: white;
    font-size: 14px;
}

.forma-card small {
    margin-top: 5px;

    color: #8f8376;
    font-size: 10px;
}

.forma-card input:checked + span {
    border-color: var(--ouro);

    background:
        linear-gradient(
            145deg,
            #3a260f,
            #171007
        );

    box-shadow:
        inset 0 0 20px rgba(220,168,56,.08);
}

.area-pix {
    display: none;

    margin: 15px 0;

    padding: 17px;

    border-radius: 11px;

    background: rgba(220,168,56,.06);
    border: 1px solid rgba(220,168,56,.18);
}

.area-pix.ativa {
    display: block;
}

.area-pix p {
    margin: -7px 0 0;

    color: #93877a;
    font-size: 10px;
}

.aviso-reserva {
    margin: 20px 0;

    padding: 14px;

    border-radius: 9px;

    background: rgba(225,165,35,.08);
    border: 1px solid rgba(225,165,35,.20);

    color: #c9bda9;

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

.aviso-reserva strong {
    color: #f0bd46;
}

.btn-reservar {
    width: 100%;
    min-height: 56px;

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

    padding: 0 23px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #e91c2e,
            #9d0715
        );

    color: white;

    font-weight: 900;
    letter-spacing: .5px;

    cursor: pointer;

    box-shadow:
        0 12px 35px rgba(205,17,32,.28);
}


@media(max-width:650px) {

    .checkout-overlay {
        padding: 8px;
        align-items: flex-end;
    }

    .checkout-modal {
        max-height: 96vh;

        padding: 28px 17px 20px;

        border-radius: 20px 20px 0 0;
    }

    .checkout-cabecalho h2 {
        font-size: 26px;
    }

    .checkout-resumo {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .formas-pagamento {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================
   RESPONSIVIDADE FINAL — AÇÃO MANINHO
   Desktop / Tablet / Celular
========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/* ---------- NOTEBOOK / TABLET GRANDE ---------- */

@media (max-width: 1180px) {

    .hero-conteudo {
        width: 94%;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .hero h1 {
        font-size: clamp(52px, 6vw, 72px);
    }

    .hero-produto img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .frase-lateral {
        display: none;
    }

    .como,
    .rifa {
        width: 94%;
    }
}


/* ==========================================================
   TABLET / CELULAR
========================================================== */

@media (max-width: 820px) {

    body {
        padding-bottom: 145px;
    }


    /* TOPO */

    .topo {
        height: 64px;

        position: relative;

        grid-template-columns: 1fr auto;

        padding: 0 16px;

        background: #090604;
    }

    .topo nav {
        display: none;
    }

    .marca strong {
        font-size: 19px;
    }

    .marca small {
        font-size: 5px;
        letter-spacing: 2px;
    }

    .btn-topo {
        padding: 11px 13px;
        font-size: 8px;
    }


    /* HERO */

    .hero {
        min-height: auto;
    }

    .hero-conteudo {
        width: 100%;
        min-height: auto;

        padding: 35px 16px 0;

        display: flex;
        flex-direction: column;

        gap: 25px;
    }

    .hero-texto {
        width: 100%;

        padding: 0;

        text-align: center;
    }

    .etiqueta {
        font-size: 8px;
        letter-spacing: 2px;

        padding: 7px 14px;
    }

    .hero h1 {
        margin: 15px 0 13px;

        font-size: clamp(48px, 15vw, 68px);

        line-height: .88;

        letter-spacing: -2px;
    }

    .hero h2 {
        font-size: 15px;
        line-height: 1.3;
    }

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

        margin: 8px auto 0;

        padding: 0 5px;

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


    /* VALOR E PRÊMIO */

    .valores {
        width: 100%;
        max-width: 520px;

        margin: 25px auto 0;

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

        gap: 14px;

        padding: 18px 14px;

        text-align: left;
    }

    .valor strong {
        font-size: clamp(27px, 8vw, 37px);
        white-space: nowrap;
    }

    .premio-resumo strong {
        font-size: 13px;
    }

    .btn-principal {
        width: 100%;
        max-width: 520px;

        margin: 12px auto 0;

        padding: 17px 18px;

        font-size: 12px;
    }


    /* ARTE DO PRÊMIO */

    .hero-produto {
        width: 100%;
        height: auto;

        padding: 0 0 50px;
    }

    .hero-produto img {
        width: min(100%, 560px);
        max-width: 100%;

        height: auto;
        aspect-ratio: auto;

        object-fit: contain;

        border-radius: 18px;
    }

    .brilho {
        width: 80vw;
        height: 80vw;
    }


    /* COMO PARTICIPAR */

    .como {
        width: calc(100% - 20px);

        margin: -20px auto 20px;

        padding: 27px 13px;

        border-radius: 15px;
    }

    .titulo-secao {
        text-align: center;
    }

    .titulo-secao h2 {
        font-size: 29px;
    }

    .passos {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .passos article {
        min-height: 175px;

        padding: 20px 10px 15px;
    }

    .passos article > b {
        width: 30px;
        height: 30px;

        font-size: 11px;
    }

    .icone {
        font-size: 25px;
    }

    .passos h3 {
        font-size: 14px;
    }

    .passos p {
        font-size: 10px;
    }


    /* RIFA */

    .rifa {
        width: calc(100% - 12px);

        margin: 12px auto;

        padding: 27px 8px 35px;

        border-radius: 14px;
    }

    .cabecalho-rifa {
        display: block;

        padding: 0 7px;

        text-align: center;
    }

    .cabecalho-rifa h2 {
        font-size: 28px;
    }

    .cabecalho-rifa p {
        font-size: 11px;
        line-height: 1.5;
    }

    .legenda {
        margin: 20px auto 4px;

        justify-content: center;

        gap: 8px 14px;
    }

    .legenda i {
        width: 14px;
        height: 14px;
    }


    /* 5 NÚMEROS POR LINHA NO CELULAR */

    .grid-numeros {
        width: 100%;

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

        gap: 5px;
    }

    .numero {
        width: 100%;
        min-width: 0;
        min-height: 44px;

        padding: 0 2px;

        font-size: 11px;

        border-radius: 7px;
    }


    /* FOOTER */

    .mensagem-final {
        padding: 45px 20px 30px;
    }

    .mensagem-final strong {
        font-size: 25px;
    }

    footer {
        width: 94%;

        display: block;

        text-align: center;
    }

    footer p {
        margin-top: 18px;
    }


    /* BARRA DE COMPRA */

    .barra-compra {
        width: calc(100% - 12px);

        grid-template-columns: 1fr auto;

        gap: 10px;

        padding: 11px 13px;
    }

    .ticket {
        display: none;
    }

    .resumo-selecao strong {
        font-size: 21px;
    }

    .resumo-selecao > div > span {
        display: block;

        max-width: 200px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .resumo-total {
        padding-left: 10px;
    }

    .resumo-total strong {
        font-size: 20px;
        white-space: nowrap;
    }

    .barra-compra button {
        grid-column: 1 / -1;

        height: 49px;
    }


    /* CHECKOUT MOBILE */

    .checkout-overlay {
        padding: 0;

        align-items: flex-end;
    }

    .checkout-modal {
        width: 100%;
        max-width: none;

        max-height: 94dvh;

        padding: 30px 16px 22px;

        border-radius: 22px 22px 0 0;

        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .checkout-cabecalho {
        padding: 0 25px;
    }

    .checkout-cabecalho h2 {
        font-size: 27px;
    }

    .checkout-resumo {
        grid-template-columns: 1fr;

        gap: 13px;
    }

    .formas-pagamento {
        grid-template-columns: 1fr 1fr;
    }

    #formCheckout input[type="text"],
    #formCheckout input[type="tel"] {
        min-height: 52px;

        font-size: 16px;
    }

    .btn-reservar {
        min-height: 55px;
    }
}


/* ==========================================================
   CELULARES PEQUENOS
========================================================== */

@media (max-width: 420px) {

    .btn-topo {
        padding: 10px;
    }

    .hero-conteudo {
        padding-left: 11px;
        padding-right: 11px;
    }

    .hero h1 {
        font-size: clamp(45px, 15vw, 59px);
    }

    .valores {
        gap: 9px;
        padding: 15px 10px;
    }

    .valor strong {
        font-size: 27px;
    }

    .premio-resumo strong {
        font-size: 11px;
    }

    .passos {
        grid-template-columns: 1fr;
    }

    .passos article {
        min-height: 145px;
    }

    /*
       Continua com 5 números por linha.
       Assim 0001–1000 continuam legíveis.
    */

    .grid-numeros {
        grid-template-columns: repeat(5, minmax(0,1fr));
        gap: 4px;
    }

    .numero {
        min-height: 42px;

        font-size: 10px;
    }

    .formas-pagamento {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   ENQUADRAMENTO DEFINITIVO DA ARTE DO PRÊMIO
========================================================== */

.hero-produto {
    height: auto;
    min-height: 590px;
    padding: 25px 0;

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

    overflow: visible;
}

.hero-produto img {
    width: auto;
    height: auto;

    max-width: min(100%, 610px);
    max-height: 590px;

    aspect-ratio: auto;

    object-fit: contain;
    object-position: center;

    border-radius: 24px;

    border: 1px solid rgba(229,176,69,.32);

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


/* TABLET */

@media (max-width: 1000px) {

    .hero-produto {
        min-height: auto;
        padding: 25px 0 55px;
    }

    .hero-produto img {
        width: auto;
        height: auto;

        max-width: min(100%, 570px);
        max-height: none;

        object-fit: contain;
    }
}


/* CELULAR */

@media (max-width: 650px) {

    .hero-produto {
        width: 100%;
        min-height: auto;

        padding: 15px 0 45px;
    }

    .hero-produto img {
        width: 100%;
        height: auto;

        max-width: 100%;
        max-height: none;

        object-fit: contain;

        border-radius: 15px;
    }
}



/* ==========================================================
   HERO CINEMATOGRÁFICO — AÇÃO MANINHO
   A arte premio_maninho.png passa a compor o fundo.
========================================================== */

.hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,3,2,.97) 0%,
            rgba(5,3,2,.88) 25%,
            rgba(5,3,2,.40) 52%,
            rgba(5,3,2,.08) 78%,
            rgba(5,3,2,.18) 100%
        ),
        url("/static/img/premio_maninho.png") center right / cover no-repeat;
}


/* luz ambiente */

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 70% 45%,
            rgba(195,116,25,.13),
            transparent 38%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,.08),
            rgba(0,0,0,.28)
        );
}


/* conteúdo fica acima do background */

.hero-conteudo {
    position: relative;
    z-index: 2;

    width: min(1450px, 92%);

    margin: 0 auto;

    display: block;

    padding: 75px 0 90px;
}


.hero-texto {
    width: min(570px, 46vw);

    padding: 0;
}


/*
   A imagem não precisa mais aparecer como um segundo quadro.
   Ela já está no background do HERO.
*/

.hero-produto {
    display: none !important;
}


.hero h1 {
    text-shadow:
        0 5px 25px rgba(0,0,0,.80);
}


.hero h2,
.hero .subtitulo {
    text-shadow:
        0 2px 12px rgba(0,0,0,.95);
}


.valores {
    backdrop-filter: blur(12px);

    background:
        linear-gradient(
            135deg,
            rgba(27,15,8,.88),
            rgba(12,7,4,.76)
        );

    box-shadow:
        0 18px 55px rgba(0,0,0,.35);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .hero {
        min-height: 680px;

        background-position: 60% center;
    }

    .hero-conteudo {
        width: 94%;

        padding: 65px 0 75px;
    }

    .hero-texto {
        width: min(560px, 58vw);

        text-align: left;
    }

}


/* ==========================================================
   CELULAR
   Aqui não vamos simplesmente esmagar o desktop.
========================================================== */

@media (max-width: 820px) {

    .hero {
        min-height: auto;

        display: block;

        padding-top: 0;

        /*
           Mostra a arte primeiro e cria uma transição
           escura para o conteúdo.
        */

        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.05) 0%,
                rgba(0,0,0,.05) 36%,
                rgba(7,4,2,.78) 55%,
                #090604 73%
            ),
            url("/static/img/premio_maninho.png")
            center top / 100% auto no-repeat;
    }


    .hero::before {
        background:
            linear-gradient(
                to bottom,
                transparent 25%,
                rgba(9,6,4,.15) 42%,
                #090604 70%
            );
    }


    .hero-conteudo {
        width: 100%;

        padding:
            clamp(330px, 78vw, 610px)
            15px
            45px;
    }


    .hero-texto {
        width: 100%;
        max-width: 540px;

        margin: 0 auto;

        text-align: center;
    }


    /*
       A própria arte já apresenta o título.
       No celular reduzimos o título HTML para evitar
       a sensação de repetição.
    */

    .hero h1 {
        font-size: clamp(42px, 13vw, 62px);
        line-height: .90;
    }


    .valores {
        max-width: 500px;

        margin-left: auto;
        margin-right: auto;
    }


    .btn-principal {
        max-width: 500px;

        margin-left: auto;
        margin-right: auto;
    }

}


/* aparelhos realmente estreitos */

@media (max-width: 430px) {

    .hero-conteudo {
        padding-top: clamp(300px, 83vw, 390px);
    }

    .hero h1 {
        font-size: 45px;
    }

}


/* ==========================================================
   HERO FINAL — MOCKUP APROVADO
   A arte contém todo o conteúdo institucional.
   HTML contém somente controles funcionais.
========================================================== */

.hero {
    position: relative !important;

    width: 100% !important;
    height: min(43.75vw, 820px) !important;
    min-height: 620px !important;

    display: block !important;

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

    overflow: hidden !important;

    background-image:
        url("/static/img/premio_maninho.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* NÃO escurecer nem desenhar nada sobre a arte */

.hero::before,
.hero::after {
    display: none !important;
    content: none !important;
}


/* área de posicionamento dos dois controles */

.hero-conteudo {
    position: absolute !important;

    inset: 0 !important;

    z-index: 5 !important;

    width: min(1500px, 100%) !important;
    height: 100% !important;

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

    display: block !important;
}


/* hero-texto deixa de ser uma coluna de texto.
   Agora é apenas o container dos controles. */

.hero-texto {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    max-width: none !important;

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

    text-align: initial !important;
}


/* A antiga imagem HTML não aparece.
   A imagem já é o background. */

.hero-produto {
    display: none !important;
}


/* ==========================================================
   BOTÃO
   abaixo de "Juntos somos mais fortes!"
========================================================== */

.btn-principal {
    position: absolute !important;

    left: 17% !important;
    bottom: 3.3% !important;

    width: 25.5% !important;
    max-width: 440px !important;
    min-width: 310px !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 22px !important;

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

    border-radius: 7px !important;

    font-size: 14px !important;
    line-height: 1 !important;

    z-index: 20 !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.40) !important;
}


/* ==========================================================
   VALOR + PRÊMIO
   abaixo da garrafa
========================================================== */

.valores {
    position: absolute !important;

    left: 45.8% !important;
    bottom: 2.7% !important;

    width: 25% !important;
    max-width: 440px !important;
    min-width: 360px !important;

    height: 98px !important;

    margin: 0 !important;
    padding: 15px 20px !important;

    display: grid !important;

    grid-template-columns:
        minmax(130px, .9fr)
        1px
        minmax(170px, 1.1fr) !important;

    align-items: center !important;
    gap: 18px !important;

    border: 1px solid rgba(219,165,54,.68) !important;
    border-radius: 12px !important;

    background: rgba(15,9,5,.94) !important;

    backdrop-filter: blur(8px) !important;

    z-index: 20 !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.42) !important;
}


.valores .valor,
.valores .premio-resumo {
    position: static !important;

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


.valores .valor strong {
    display: block !important;

    margin-top: 4px !important;

    font-size: 31px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


.valores .premio-resumo strong {
    display: block !important;

    margin-top: 4px !important;

    font-size: 13px !important;
    line-height: 1.1 !important;
}


.valores .premio-resumo span {
    font-size: 8px !important;
}


.valores small {
    font-size: 8px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1000px) {

    .hero {
        height: 64vw !important;
        min-height: 590px !important;

        background-size: cover !important;
        background-position: center center !important;
    }

    .btn-principal {
        left: 5% !important;
        bottom: 3% !important;

        width: 43% !important;
        min-width: 0 !important;
    }

    .valores {
        left: auto !important;
        right: 5% !important;
        bottom: 3% !important;

        width: 43% !important;
        min-width: 0 !important;
    }
}


/* ==========================================================
   CELULAR
   A imagem continua protagonista.
   Os controles ficam abaixo dela para não cobrir a arte.
========================================================== */

@media (max-width: 700px) {

    .hero {
        height: auto !important;
        min-height: 0 !important;

        padding-top: 56.25% !important;
        padding-bottom: 178px !important;

        overflow: visible !important;

        background-size: 100% auto !important;
        background-position: center top !important;

        background-color: #090604 !important;
    }


    .hero-conteudo {
        position: static !important;

        width: 100% !important;
        height: auto !important;
    }


    .hero-texto {
        position: static !important;

        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        padding: 14px 12px 22px !important;
    }


    .valores {
        position: static !important;

        order: 1 !important;

        width: 100% !important;
        max-width: 520px !important;
        min-width: 0 !important;

        height: 88px !important;

        margin: 0 auto 10px !important;

        grid-template-columns:
            minmax(110px,.9fr)
            1px
            minmax(145px,1.1fr) !important;

        padding: 12px 15px !important;
    }


    .valores .valor strong {
        font-size: 27px !important;
    }


    .btn-principal {
        position: static !important;

        order: 2 !important;

        width: 100% !important;
        max-width: 520px !important;
        min-width: 0 !important;

        height: 52px !important;

        margin: 0 auto !important;
    }
}


@media (max-width: 390px) {

    .hero {
        padding-bottom: 170px !important;
    }

    .valores {
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .valores .valor strong {
        font-size: 24px !important;
    }

    .valores .premio-resumo strong {
        font-size: 11px !important;
    }

    .btn-principal {
        font-size: 11px !important;
    }
}


/* ==========================================================
   RESPONSIVO DEFINITIVO — AÇÃO MANINHO
   DESKTOP / NOTEBOOK / TABLET / CELULAR
========================================================== */

/* ---------- DESKTOP ---------- */

.hero {
    min-height: 720px;
    height: auto;
    padding: 0;
}

.hero-conteudo {
    width: min(1480px, calc(100% - 80px));
    min-height: 720px;
    margin: 0 auto;

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

    padding: 0 0 48px;
}

/*
   Não mostramos novamente os textos que já fazem
   parte da própria arte.
*/
.hero-texto > .tag,
.hero-texto > h1,
.hero-texto > h2,
.hero-texto > .subtitulo {
    display: none !important;
}

/*
   Mantemos apenas:
   botão + quadro de valor/prêmio.
*/
.hero-texto {
    width: 100%;
    max-width: 1080px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(300px, 560px) minmax(300px, 440px);
    grid-template-areas:
        "botao valores";
    gap: 28px;

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

.valores {
    grid-area: valores;

    width: 100%;
    min-height: 108px;
    margin: 0 !important;

    display: grid;
    grid-template-columns: 1fr auto 1.2fr;
    align-items: center;

    padding: 20px 24px;
}

.btn-principal {
    grid-area: botao;

    width: 100%;
    min-height: 64px;
    margin: 0 !important;
}

/*
   A imagem já está no background do HERO.
   Evita segunda imagem/duplicação.
*/
.hero-produto {
    display: none !important;
}


/* ---------- COMO PARTICIPAR ---------- */

.como {
    position: relative;

    width: min(1480px, calc(100% - 80px));

    margin: 55px auto 0 !important;
    padding: 42px 54px 54px;
}

.passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 22px;
}

.passos article {
    min-width: 0;
    min-height: 285px;

    padding: 26px 22px;

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

    text-align: center;
}


/* ==========================================================
   NOTEBOOK / TABLET
========================================================== */

@media (max-width: 1100px) {

    .hero {
        min-height: 680px;

        background-position: 58% center !important;
    }

    .hero-conteudo {
        width: min(94%, 960px);
        min-height: 680px;

        padding-bottom: 35px;
    }

    .hero-texto {
        max-width: 850px;

        grid-template-columns: 1fr 1fr;

        gap: 18px;
    }

    .como {
        width: min(94%, 960px);

        margin-top: 45px !important;

        padding: 35px;
    }

    .passos {
        grid-template-columns: repeat(2, 1fr);
    }

    .passos article {
        min-height: 240px;
    }
}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }

    .hero {
        min-height: 0;
        height: auto;

        /*
           Preserva a arte inteira em vez de ampliar e cortar.
        */
        padding-top: 56.25%;

        background-size: 100% auto !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }

    .hero-conteudo {
        width: 100%;
        min-height: 0;

        display: block;

        padding: 0 16px 28px;
    }

    .hero-texto {
        width: 100%;
        max-width: 100%;

        display: flex;
        flex-direction: column;

        gap: 12px;

        margin: 0;
    }

    /*
       No celular o quadro fica primeiro e o botão logo abaixo.
       Nada lado a lado.
    */
    .valores {
        order: 1;

        width: 100%;
        min-height: auto;

        grid-template-columns: 1fr;
        gap: 14px;

        padding: 18px;

        border-radius: 15px;
    }

    .valores .divisor {
        width: 100%;
        height: 1px;

        margin: 0;

        background: rgba(219,169,56,.30);
    }

    .valor,
    .premio-resumo {
        width: 100%;

        text-align: center;
    }

    .valor strong {
        font-size: clamp(30px, 9vw, 42px);
    }

    .premio-resumo strong {
        font-size: 18px;
    }

    .btn-principal {
        order: 2;

        width: 100%;
        min-height: 58px;

        padding: 15px 18px;

        font-size: 15px;

        border-radius: 13px;
    }

    /*
       Seção começa separada do botão.
       Isso resolve o encavalamento.
    */
    .como {
        width: calc(100% - 24px);

        margin: 32px auto 0 !important;

        padding: 26px 14px 30px;

        border-radius: 18px;
    }

    .titulo-secao {
        margin-bottom: 22px;
    }

    .titulo-secao h2 {
        font-size: clamp(30px, 9vw, 42px);
    }

    .passos {
        width: 100%;

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

        gap: 14px;
    }

    .passos article {
        width: 100%;
        min-height: 210px;

        padding: 24px 18px;

        border-radius: 15px;
    }
}


/* ==========================================================
   CELULAR PEQUENO
========================================================== */

@media (max-width: 390px) {

    .hero-conteudo {
        padding-left: 10px;
        padding-right: 10px;
    }

    .como {
        width: calc(100% - 16px);

        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-principal {
        font-size: 13px;
    }
}



/* ==========================================================
   HERO FINAL — AÇÃO MANINHO
   A ARTE É O BANNER.
   HTML SOBRE A ARTE: SOMENTE O BOTÃO.
========================================================== */

.hero {
    position: relative !important;

    width: 100% !important;

    /*
       Proporção aproximada da arte panorâmica.
       Evita deformação.
    */
    min-height: 0 !important;
    height: auto !important;

    aspect-ratio: 2.74 / 1 !important;

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

    overflow: hidden !important;

    background-image:
        url("/static/img/premio_maninho.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* elimina overlays antigos */

.hero::before,
.hero::after {
    display: none !important;
}


/* container usado apenas para posicionar o botão */

.hero-conteudo {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: 100% !important;

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

    display: block !important;
}


/*
   Tudo que era texto HTML sobre a arte desaparece.
*/

.hero-texto {
    position: static !important;

    width: 100% !important;
    max-width: none !important;

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

    display: block !important;
}

.hero-texto > .tag,
.hero-texto > h1,
.hero-texto > h2,
.hero-texto > .subtitulo,
.hero-texto > .valores {
    display: none !important;
}


/* segunda imagem antiga não existe visualmente */

.hero-produto {
    display: none !important;
}


/* ==========================================================
   ÚNICO ELEMENTO HTML DO BANNER:
   ESCOLHER MEUS NÚMEROS
========================================================== */

.hero .btn-principal {
    position: absolute !important;

    /*
       POSIÇÃO semelhante à montagem enviada:
       abaixo de "Juntos somos mais fortes!"
    */

    left: 17.8% !important;
    bottom: 4.2% !important;

    width: 25.5% !important;
    max-width: 470px !important;
    min-width: 300px !important;

    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 22px !important;

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

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;

    background:
        linear-gradient(
            90deg,
            #e21b2b,
            #c9081d
        ) !important;

    box-shadow:
        0 10px 35px rgba(204,0,25,.30) !important;

    color: #fff !important;

    font-size: clamp(13px, 1vw, 18px) !important;
    font-weight: 900 !important;

    letter-spacing: .035em !important;

    text-decoration: none !important;

    z-index: 20 !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}


.hero .btn-principal:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.08) !important;

    box-shadow:
        0 15px 40px rgba(204,0,25,.40) !important;
}


/* ==========================================================
   COMO PARTICIPAR
   DESCOLADO DO BANNER
========================================================== */

.como {
    position: relative !important;

    width: min(1450px, calc(100% - 60px)) !important;

    margin:
        48px auto 0 !important;

    padding:
        40px 48px 48px !important;

    clear: both !important;
}


/* ==========================================================
   NOTEBOOK
========================================================== */

@media (max-width: 1200px) {

    .hero .btn-principal {
        left: 15% !important;
        bottom: 4% !important;

        width: 31% !important;
        min-width: 260px !important;

        min-height: 50px !important;

        font-size: 14px !important;
    }
}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 700px) {

    /*
       No celular NÃO usamos cover.
       Mostramos a arte completa.
    */

    .hero {
        aspect-ratio: auto !important;

        height: auto !important;
        min-height: 0 !important;

        /*
           altura da própria arte
        */
        padding-top: 36.5% !important;

        overflow: visible !important;

        background-size: contain !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;

        /*
           espaço para o botão fora da imagem
        */
        margin-bottom: 82px !important;
    }


    .hero-conteudo {
        overflow: visible !important;
    }


    /*
       No celular o botão NÃO fica esmagado dentro da arte.
       Fica centralizado logo abaixo dela.
    */

    .hero .btn-principal {
        left: 16px !important;
        right: 16px !important;

        bottom: -68px !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        min-height: 56px !important;

        padding: 0 18px !important;

        border-radius: 12px !important;

        font-size: 14px !important;
    }


    .como {
        width: calc(100% - 24px) !important;

        margin:
            30px auto 0 !important;

        padding:
            26px 15px 30px !important;
    }
}


/* celular pequeno */

@media (max-width: 390px) {

    .hero {
        margin-bottom: 76px !important;
    }

    .hero .btn-principal {
        left: 10px !important;
        right: 10px !important;

        bottom: -62px !important;

        min-height: 52px !important;

        font-size: 12px !important;
    }
}



/* ==========================================================
   FAIXA FINAL DO HERO — DESKTOP + MOBILE
   BOTÃO À ESQUERDA / VALOR E PRÊMIO À DIREITA
========================================================== */


/* O container ocupa toda a arte, mas não interfere nela */

.hero-conteudo {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;

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

    display: block !important;
}


/* Esconde somente textos HTML redundantes */

.hero-texto > .tag,
.hero-texto > h1,
.hero-texto > h2,
.hero-texto > .subtitulo {
    display: none !important;
}


/*
   Hero-texto vira exclusivamente a faixa de controles.
   IMPORTANTE:
   fica ABAIXO de "Juntos somos mais fortes".
*/

.hero-texto {
    position: absolute !important;

    left: 50% !important;
    bottom: 4.2% !important;

    transform: translateX(-50%) !important;

    width: min(70%, 1320px) !important;
    max-width: 1320px !important;

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

    display: grid !important;

    grid-template-columns:
        minmax(360px, 1.05fr)
        minmax(390px, .95fr) !important;

    grid-template-areas:
        "botao valores" !important;

    gap: 28px !important;

    align-items: stretch !important;

    z-index: 30 !important;
}


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

.hero .btn-principal {
    position: static !important;

    grid-area: botao !important;

    transform: none !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    min-height: 70px !important;

    margin: 0 !important;
    padding: 0 26px !important;

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

    border-radius: 11px !important;

    font-size: clamp(14px, 1.05vw, 19px) !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   VALOR + PRÊMIO
========================================================== */

.hero .valores {
    position: static !important;

    grid-area: valores !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 70px !important;

    margin: 0 !important;
    padding: 10px 22px !important;

    display: grid !important;

    grid-template-columns:
        minmax(125px, .8fr)
        1px
        minmax(190px, 1.2fr) !important;

    gap: 20px !important;

    align-items: center !important;

    border: 1px solid rgba(220,168,56,.65) !important;
    border-radius: 11px !important;

    background:
        rgba(14,8,5,.91) !important;

    backdrop-filter: blur(8px) !important;

    box-sizing: border-box !important;
}


.hero .valor,
.hero .premio-resumo {
    width: auto !important;

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


.hero .valor small,
.hero .premio-resumo small {
    display: block !important;

    margin-bottom: 3px !important;

    font-size: 9px !important;

    letter-spacing: .06em !important;
}


.hero .valor strong {
    display: block !important;

    white-space: nowrap !important;

    font-size: clamp(25px, 1.8vw, 34px) !important;

    line-height: 1 !important;
}


.hero .premio-resumo strong {
    display: block !important;

    font-size: clamp(12px, .95vw, 17px) !important;

    line-height: 1.08 !important;
}


.hero .premio-resumo span {
    display: block !important;

    margin-top: 3px !important;

    font-size: 9px !important;

    opacity: .72 !important;
}


.hero .valores .divisor {
    display: block !important;

    width: 1px !important;
    height: 42px !important;

    margin: 0 !important;

    background:
        rgba(220,168,56,.55) !important;
}


/* ==========================================================
   NOTEBOOK
========================================================== */

@media (max-width: 1200px) {

    .hero-texto {
        width: 82% !important;

        grid-template-columns:
            minmax(300px, 1fr)
            minmax(350px, 1fr) !important;

        gap: 18px !important;

        bottom: 3.5% !important;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 850px) {

    .hero {
        /*
           Arte inteira.
           Nada de cover cortando conteúdo importante.
        */
        aspect-ratio: auto !important;

        min-height: 0 !important;

        padding-top: 36.5% !important;

        margin-bottom: 175px !important;

        overflow: visible !important;

        background-size: contain !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }


    .hero-texto {
        left: 20px !important;
        right: 20px !important;

        bottom: -155px !important;

        transform: none !important;

        width: auto !important;
        max-width: none !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        grid-template-areas:
            "valores"
            "botao" !important;

        gap: 10px !important;
    }


    .hero .valores {
        min-height: 76px !important;

        grid-template-columns:
            1fr
            1px
            1.3fr !important;

        padding: 11px 18px !important;
    }


    .hero .btn-principal {
        min-height: 58px !important;

        font-size: 15px !important;
    }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 520px) {

    .hero {
        margin-bottom: 185px !important;
    }


    .hero-texto {
        left: 12px !important;
        right: 12px !important;

        bottom: -168px !important;

        gap: 9px !important;
    }


    .hero .valores {
        min-height: 88px !important;

        grid-template-columns:
            .85fr
            1px
            1.15fr !important;

        gap: 12px !important;

        padding: 12px 14px !important;
    }


    .hero .valor strong {
        font-size: clamp(24px, 8vw, 32px) !important;
    }


    .hero .premio-resumo strong {
        font-size: 13px !important;
    }


    .hero .btn-principal {
        min-height: 56px !important;

        padding: 0 17px !important;

        font-size: 13px !important;

        border-radius: 11px !important;
    }


    /*
       Garante que COMO PARTICIPAR nunca invade
       os controles acima.
    */

    .como {
        clear: both !important;

        margin-top: 30px !important;
    }

}


/* ==========================================================
   CELULAR MUITO PEQUENO
========================================================== */

@media (max-width: 360px) {

    .hero {
        margin-bottom: 195px !important;
    }


    .hero-texto {
        left: 8px !important;
        right: 8px !important;

        bottom: -178px !important;
    }


    .hero .valores {
        padding: 10px !important;

        gap: 8px !important;
    }


    .hero .valor strong {
        font-size: 25px !important;
    }


    .hero .premio-resumo strong {
        font-size: 12px !important;
    }


    .hero .btn-principal {
        font-size: 12px !important;
    }

}



/* ==========================================================
   AÇÃO MANINHO - AGUARDANDO / RESERVADO = AZUL
   ========================================================== */

/* Legenda: Aguardando */
.legenda .aguardando-cor {
    background: #2589ff !important;
    border-color: #2589ff !important;
    box-shadow: 0 0 10px rgba(37, 137, 255, 0.28) !important;
}

/* Número reservado aguardando confirmação */
.numero.reservado {
    background: linear-gradient(
        145deg,
        #2388ff,
        #1264c8
    ) !important;

    color: #ffffff !important;

    border-color: #49a2ff !important;

    box-shadow:
        0 4px 13px rgba(25, 118, 230, 0.22) !important;

    cursor: not-allowed !important;
    opacity: 1 !important;
}

.numero.reservado:hover {
    transform: none !important;
}