/* ==========================================================
   MAHAU — PERSONAGENS INDEPENDENTES
   Desktop: personagem livre na lateral direita
   Mobile: personagem abaixo do bloco, sem sobreposição
   ========================================================== */


/* O MAIN vira apenas referência de posicionamento */
main,
.raffle-page,
.extra-page,
.orders-shell {
    position: relative;
}


/* ==========================================================
   CARD / TEXTO
   O personagem NÃO faz parte desta caixa.
   ========================================================== */

.mahau-guide {
    width: min(700px, calc(100% - 48px));

    margin-left: clamp(45px, 7vw, 150px);
    margin-right: auto;

    margin-top: 42px;
    margin-bottom: 250px;

    min-height: 0;

    display: block;

    position: static !important;

    overflow: visible !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    isolation: auto !important;
}


.mahau-guide::before,
.mahau-guide::after {
    display: none !important;
}


.mahau-guide-copy {
    width: 100% !important;

    min-height: 250px;

    box-sizing: border-box;

    padding: 42px 46px;

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

    position: relative;

    z-index: 2;

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

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(122,65,255,.12),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            rgba(19,16,27,.98),
            rgba(7,7,9,.98)
        );

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


.mahau-guide-kicker {
    display: block;

    margin-bottom: 10px;

    color: #c48cff;

    font-size: .75rem;
    font-weight: 900;

    letter-spacing: .16em;
    text-transform: uppercase;
}


.mahau-guide-copy h2 {
    margin: 0;

    max-width: 610px;

    color: #fff;

    font-size:
        clamp(2.3rem, 4vw, 4rem);

    line-height: .98;

    letter-spacing: -.05em;
}


.mahau-guide-copy p {
    margin: 17px 0 0;

    max-width: 610px;

    color: rgba(255,255,255,.65);

    font-size: 1rem;
    line-height: 1.65;
}


/* ==========================================================
   PERSONAGEM
   ELEMENTO INDEPENDENTE DO CARD
   ========================================================== */

.mahau-guide-art {
    position: absolute !important;

    width: 390px !important;
    height: 570px !important;

    right: clamp(45px, 7vw, 150px);

    display: flex;

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

    overflow: visible !important;

    pointer-events: none;

    z-index: 3;
}


/* luz atrás do personagem */

.mahau-guide-art::before {
    content: "";

    display: block !important;

    position: absolute;

    width: 390px;
    height: 390px;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(120,65,255,.25),
            rgba(120,65,255,.08) 48%,
            transparent 72%
        );

    filter: blur(30px);

    z-index: -1;
}


/* imagem */

.mahau-guide-character {
    position: relative !important;

    inset: auto !important;

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

    max-width: 100% !important;

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

    opacity: 1 !important;

    transform: none !important;

    filter:
        drop-shadow(
            0 24px 30px
            rgba(0,0,0,.65)
        );

    animation:
        mahauIndependentEnter
        .6s
        cubic-bezier(.2,.8,.2,1)
        both;
}


@keyframes mahauIndependentEnter {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================
   POSIÇÃO INDIVIDUAL DE CADA PÁGINA
   ========================================================== */


/* PRODUTOS */

.mahau-guide--products .mahau-guide-art {
    top: 20px !important;

    width: 410px !important;
    height: 585px !important;
}


/* PROMOÇÕES */

.mahau-guide--offers .mahau-guide-art {
    top: 20px !important;

    width: 410px !important;
    height: 585px !important;
}


/*
   SORTEIOS possui o hero grande antes do nosso bloco.
   Por isso DAVI começa mais abaixo na página.
*/

.raffle-page
.mahau-guide--raffle
.mahau-guide-art {

    top: 400px !important;

    width: 420px !important;
    height: 600px !important;
}


/* GANHADORES */

.extra-page
.mahau-guide--winner
.mahau-guide-art {

    top: 405px !important;

    width: 540px !important;
    height: 590px !important;
}


/* ==========================================================
   GANHADORES — LUARA + BRUNO
   ========================================================== */

.mahau-guide-art--duo {
    display: block !important;
}


.mahau-guide-art--duo
.mahau-character-luara {

    position: absolute !important;

    width: auto !important;
    height: 91% !important;

    left: 0 !important;
    right: auto !important;

    bottom: 0 !important;
    top: auto !important;

    z-index: 1;

    transform: none !important;
}


.mahau-guide-art--duo
.mahau-character-bruno {

    position: absolute !important;

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

    right: 0 !important;
    left: auto !important;

    bottom: 0 !important;
    top: auto !important;

    z-index: 2;

    transform: none !important;
}


/* ==========================================================
   SORTEIO / GANHADORES
   Reserva espaço vertical antes do conteúdo seguinte.
   Não reserva espaço horizontal.
   ========================================================== */

.mahau-guide--raffle {
    margin-bottom: 280px;
}

.mahau-guide--winner {
    margin-bottom: 280px;
}


/* ==========================================================
   TELAS MUITO GRANDES
   ========================================================== */

@media (min-width: 1600px) {

    .mahau-guide-art {

        width: 450px !important;
        height: 650px !important;
    }


    .mahau-guide--products .mahau-guide-art,
    .mahau-guide--offers .mahau-guide-art {

        width: 460px !important;
        height: 650px !important;
    }


    .raffle-page
    .mahau-guide--raffle
    .mahau-guide-art {

        width: 470px !important;
        height: 665px !important;
    }


    .extra-page
    .mahau-guide--winner
    .mahau-guide-art {

        width: 600px !important;
        height: 650px !important;
    }
}


/* ==========================================================
   NOTEBOOK / TELAS MÉDIAS
   ========================================================== */

@media (max-width: 1250px) {

    .mahau-guide {

        width: min(620px, calc(100% - 420px));

        margin-left: 45px;
    }


    .mahau-guide-art {

        right: 30px;

        width: 350px !important;
        height: 520px !important;
    }


    .raffle-page
    .mahau-guide--raffle
    .mahau-guide-art {

        width: 360px !important;
        height: 540px !important;
    }


    .extra-page
    .mahau-guide--winner
    .mahau-guide-art {

        width: 440px !important;
        height: 530px !important;
    }
}


/* ==========================================================
   TABLET / MOBILE
   Sem lateral suficiente:
   personagem vira uma seção independente EMBAIXO.
   ========================================================== */

@media (max-width: 900px) {

    .mahau-guide {

        width: calc(100% - 30px);

        margin:
            30px
            auto
            35px;
    }


    .mahau-guide-copy {

        min-height: 0;

        padding:
            32px
            28px;
    }


    .mahau-guide-art,
    .mahau-guide--products .mahau-guide-art,
    .mahau-guide--offers .mahau-guide-art,
    .raffle-page
    .mahau-guide--raffle
    .mahau-guide-art,
    .extra-page
    .mahau-guide--winner
    .mahau-guide-art {

        position: relative !important;

        top: auto !important;
        right: auto !important;

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

        height: 420px !important;

        margin:
            12px
            auto
            40px;
    }


    .mahau-guide--raffle,
    .mahau-guide--winner {

        margin-bottom: 30px;
    }


    .mahau-guide-art--duo {

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


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

@media (max-width: 520px) {

    .mahau-guide {

        width: calc(100% - 22px);

        margin-top: 22px;
    }


    .mahau-guide-copy {

        padding:
            27px
            22px;

        border-radius: 21px;
    }


    .mahau-guide-copy h2 {

        font-size:
            clamp(
                2rem,
                11vw,
                2.8rem
            );
    }


    .mahau-guide-art,
    .mahau-guide--products .mahau-guide-art,
    .mahau-guide--offers .mahau-guide-art,
    .raffle-page
    .mahau-guide--raffle
    .mahau-guide-art {

        height: 350px !important;
    }


    .extra-page
    .mahau-guide--winner
    .mahau-guide-art {

        height: 330px !important;
    }


    .mahau-guide-art--duo
    .mahau-character-luara {

        height: 84% !important;
    }


    .mahau-guide-art--duo
    .mahau-character-bruno {

        height: 92% !important;
    }
}


@media (prefers-reduced-motion: reduce) {

    .mahau-guide-character {
        animation: none !important;
    }
}