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

.hero {
    position: relative !important;
    width: 100% !important;

    /* proporção aproximada da própria arte */
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 6 !important;

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

    overflow: visible !important;

    background:
        url("/static/img/premio_maninho.png")
        center center / cover
        no-repeat !important;
}


/* não repetir a imagem como elemento HTML */
.hero-produto {
    display: none !important;
}


/* container transparente sobre a arte */
.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;
}


/* textos já existentes dentro da própria arte */
.hero-texto > .tag,
.hero-texto > h1,
.hero-texto > h2,
.hero-texto > .subtitulo {
    display: none !important;
}


/* o hero-texto passa a ser apenas um container invisível */
.hero-texto {
    position: static !important;

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

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

    display: block !important;
}


/* ==========================================================
   DESKTOP
   botão abaixo de "Juntos somos mais fortes"
========================================================== */

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

    left: 15.3% !important;
    bottom: 4.4% !important;

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

    height: 56px !important;
    min-height: 56px !important;

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

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

    box-sizing: border-box !important;

    border-radius: 9px !important;

    font-size: clamp(13px, .95vw, 18px) !important;
    line-height: 1 !important;

    z-index: 20 !important;
}


/* ==========================================================
   DESKTOP
   preço + prêmio abaixo da região da garrafa
========================================================== */

.hero .valores {
    position: absolute !important;

    left: 48.5% !important;
    bottom: 3.6% !important;

    width: 27% !important;
    max-width: 500px !important;
    min-width: 390px !important;

    height: 82px !important;

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

    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns:
        minmax(135px, .9fr)
        1px
        minmax(175px, 1.1fr) !important;

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

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

    background: rgba(12,7,4,.91) !important;

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

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

    z-index: 20 !important;
}


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

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


.hero .valores .divisor {
    width: 1px !important;
    height: 48px !important;

    background: rgba(219,165,54,.60) !important;
}


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

    margin-bottom: 4px !important;

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


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

    white-space: nowrap !important;

    font-size: clamp(24px, 1.8vw, 34px) !important;
    line-height: 1 !important;
}


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

    font-size: clamp(11px, .8vw, 15px) !important;
    line-height: 1.08 !important;
}


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

    margin-top: 3px !important;

    font-size: 8px !important;
}


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

@media (max-width: 1250px) {

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

        width: 32% !important;
        min-width: 300px !important;

        height: 52px !important;
        min-height: 52px !important;

        font-size: 13px !important;
    }


    .hero .valores {
        left: 50% !important;

        width: 34% !important;
        min-width: 350px !important;

        height: 76px !important;
    }
}


/* ==========================================================
   TABLET E CELULAR
   AQUI NÃO EXISTE POSITION ABSOLUTE NOS CONTROLES
========================================================== */

@media (max-width: 820px) {

    .hero {
        aspect-ratio: auto !important;

        min-height: 0 !important;

        /*
           A arte vira uma imagem responsiva.
           O espaço dos controles fica FORA dela.
        */
        padding-top: 56.25% !important;
        padding-bottom: 0 !important;

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

        background-color: #050302 !important;
    }


    .hero-conteudo {
        position: relative !important;
        inset: auto !important;

        height: auto !important;

        padding:
            18px
            clamp(14px, 4vw, 28px)
            26px !important;

        box-sizing: border-box !important;

        background:
            linear-gradient(
                180deg,
                #050302 0%,
                #090503 100%
            ) !important;
    }


    .hero-texto {
        position: static !important;

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

        margin: 0 auto !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 12px !important;
    }


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

        order: 1 !important;

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

        transform: none !important;

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

        height: 56px !important;
        min-height: 56px !important;

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

        border-radius: 10px !important;

        font-size: 14px !important;
    }


    .hero .valores {
        position: static !important;

        order: 2 !important;

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

        transform: none !important;

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

        height: auto !important;
        min-height: 82px !important;

        margin: 0 !important;
        padding: 13px 16px !important;

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

        gap: 14px !important;
    }


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


    .hero .premio-resumo strong {
        font-size: clamp(11px, 3.4vw, 14px) !important;
    }
}


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

@media (max-width: 430px) {

    .hero-conteudo {
        padding:
            14px
            12px
            22px !important;
    }


    .hero-texto {
        gap: 10px !important;
    }


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

        padding: 0 15px !important;

        font-size: 12px !important;
    }


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

        padding: 11px 12px !important;

        grid-template-columns:
            minmax(105px, .85fr)
            1px
            minmax(130px, 1.15fr) !important;

        gap: 10px !important;
    }


    .hero .valores .divisor {
        height: 42px !important;
    }


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


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


/* ==========================================================
   TELAS MUITO PEQUENAS
========================================================== */

@media (max-width: 350px) {

    .hero .valores {
        grid-template-columns: 1fr !important;
        gap: 8px !important;

        text-align: center !important;
    }


    .hero .valores .divisor {
        display: none !important;
    }


    .hero .premio-resumo {
        padding-top: 8px !important;

        border-top:
            1px solid rgba(219,165,54,.28) !important;
    }
}


/* ==========================================================
   CONTROLES FINAIS DO HERO
   SOMENTE BOTÃO + PREÇO/PRÊMIO
========================================================== */


/*
   No desktop, fazemos hero-conteudo e hero-texto deixarem
   de criar caixas próprias. Assim botão e valores passam
   a se posicionar diretamente em relação ao HERO.
*/
@media (min-width: 821px) {

    .hero .hero-conteudo,
    .hero .hero-texto {
        display: contents !important;
    }


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

    .hero .btn-principal {
        display: flex !important;

        position: absolute !important;

        left: 15.2% !important;
        bottom: 4.1% !important;

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

        height: 55px !important;
        min-height: 55px !important;

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

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

        box-sizing: border-box !important;

        z-index: 100 !important;

        opacity: 1 !important;
        visibility: visible !important;

        border-radius: 9px !important;

        background:
            linear-gradient(
                135deg,
                #e0182d,
                #bb071a
            ) !important;

        box-shadow:
            0 10px 28px rgba(183,0,22,.28) !important;

        color: #fff !important;

        font-size: clamp(13px, .95vw, 18px) !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }


    /* PREÇO + PRÊMIO — abaixo da garrafa */

    .hero .valores {
        display: grid !important;

        position: absolute !important;

        left: 47.8% !important;
        bottom: 3.2% !important;

        width: 27% !important;
        max-width: 500px !important;
        min-width: 390px !important;

        height: 82px !important;

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

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

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

        box-sizing: border-box !important;

        z-index: 100 !important;

        opacity: 1 !important;
        visibility: visible !important;

        border:
            1px solid rgba(219,165,54,.72) !important;

        border-radius: 11px !important;

        background:
            rgba(12,7,4,.93) !important;

        box-shadow:
            0 12px 32px rgba(0,0,0,.45) !important;

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


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

        position: static !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


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

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

        background:
            rgba(219,165,54,.65) !important;
    }


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

        margin-bottom: 5px !important;

        color: #fff !important;

        font-size: 9px !important;
        font-weight: 500 !important;
    }


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

        color: #fff !important;

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

        white-space: nowrap !important;
    }


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

        color: #fff !important;

        font-size: clamp(11px, .82vw, 15px) !important;
        line-height: 1.08 !important;
    }


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

        margin-top: 4px !important;

        color: rgba(255,255,255,.70) !important;

        font-size: 8px !important;
    }
}


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

@media (min-width: 821px) and (max-width: 1250px) {

    .hero .btn-principal {
        left: 8% !important;

        width: 34% !important;
        min-width: 290px !important;
    }


    .hero .valores {
        left: 51% !important;

        width: 38% !important;
        min-width: 350px !important;
    }
}

/* AJUSTE FINAL — botão um pouco mais abaixo no desktop */
@media (min-width: 821px) {
    .hero .btn-principal {
        bottom: 2.0% !important;
    }
}