/* ==========================================================
   TV MAHAU
   Identidade visual baseada na página inicial
   ========================================================== */

body.tv-body {
    margin: 0;

    color: #fff;

    background: #080808;

    /* NÃO define font-family:
       usa exatamente a fonte carregada pelo main.css */
}


/* FUNDO */

.tv-root {
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(102, 45, 150, .18) 0,
            rgba(20, 10, 29, .20) 30%,
            #080808 68%,
            #050505 100%
        ) !important;
}


/* LOGO */

.tv-top img {
    width: 82px;

    filter:
        drop-shadow(
            0 8px 22px
            rgba(135, 63, 255, .22)
        );
}


/* RELÓGIO */

.tv-clock {
    color: rgba(255,255,255,.52) !important;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .04em;
}


/* ==========================================================
   TEXTO CENTRAL
   ========================================================== */

.tv-content {
    width: min(1100px, 72vw);

    text-align: center;

    position: relative;

    z-index: 5;
}


/* equivalente ao eyebrow da Home */

.tv-eyebrow {
    color: #d28cff !important;

    font-size:
        clamp(.72rem, 1vw, .95rem);

    font-weight: 900;

    letter-spacing: .19em;

    text-transform: uppercase;
}


/* título no mesmo espírito da Home */

.tv-title {
    margin:
        20px
        0
        24px;

    color: #fff;

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

    font-weight: 950;

    line-height: .86;

    letter-spacing: -.065em;

    text-transform: uppercase;

    text-shadow:
        0 14px 45px
        rgba(0,0,0,.38);
}


/* palavra colorida como COMEÇA AQUI da Home */

.tv-title span {

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ecd8ff 20%,
            #d698ff 52%,
            #a955ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    -webkit-text-fill-color: transparent;
}


/* subtítulo */

.tv-subtitle {

    max-width: 800px;

    margin:
        0
        auto;

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

    font-size:
        clamp(
            1rem,
            1.65vw,
            1.55rem
        );

    font-weight: 500;

    line-height: 1.5;
}


/* ==========================================================
   PERSONAGENS
   ========================================================== */

.tv-character {

    filter:
        drop-shadow(
            0 35px 45px
            rgba(0,0,0,.78)
        )
        drop-shadow(
            0 0 35px
            rgba(111,46,184,.08)
        ) !important;
}


/* ==========================================================
   BARRA INFERIOR
   ========================================================== */

.tv-progress {

    height: 5px !important;

    background:
        rgba(255,255,255,.06) !important;
}


.tv-progress span {

    background:
        linear-gradient(
            90deg,
            #6932ff,
            #a94fff,
            #dd87ff
        ) !important;

    box-shadow:
        0 0 18px
        rgba(169,79,255,.50);
}


/* ==========================================================
   BOTÃO TELA CHEIA
   Mesmo estilo dos botões da Home
   ========================================================== */

.tv-fullscreen {

    min-height: 48px;

    padding:
        0
        20px !important;

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

    border-radius:
        13px !important;

    background:
        rgba(15,15,17,.92) !important;

    color:
        #fff !important;

    font-weight:
        800 !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform .18s ease,
        background .18s ease;
}


.tv-fullscreen:hover {

    transform:
        translateY(-2px);

    background:
        rgba(27,20,36,.96) !important;
}


/* ==========================================================
   SLIDES
   ========================================================== */

.tv-slide {

    padding:
        9vh
        8vw !important;
}


/* pequena luz Mahau central */

.tv-slide::before {

    content: "";

    position: absolute;

    width: 50vw;
    height: 50vw;

    max-width: 850px;
    max-height: 850px;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(119,57,190,.10),
            transparent 68%
        );

    pointer-events: none;
}


/* ==========================================================
   MOBILE / TV PEQUENA
   ========================================================== */

@media (max-width: 800px) {

    .tv-top img {
        width: 62px;
    }


    .tv-title {

        font-size:
            clamp(
                3rem,
                14vw,
                6rem
            );
    }


    .tv-content {

        width: 88vw;
    }


    .tv-subtitle {

        font-size:
            clamp(
                .95rem,
                4vw,
                1.3rem
            );
    }
}