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

    :root {
        --primary: #149dff;
        --rl: #0fb858;
        --r10: #11a4e9;
        --r12: #ebc20f;
        --r14: #FF8301;
        --r16: #FF161F;
        --r18: #1d1815;
    }


    /* ── TV CONTAINER ── */
    #tv {
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
        color: #fff;
        outline: none;
        /* user-select: none;
        cursor: none; */
        background: transparent;
    }

    #home-root {
        background-color: rgb(0, 0, 0);
        width: 100%;
        height: 100%;
        position: relative;
    }

    /* ── HERO BACKGROUND ── */
    #hero-bg {
        position: relative;
        inset: 0;
        left: 17%;
        top: -34%;
        object-fit: cover;
        object-position: top right;
        background-repeat: no-repeat;
        width: 80%;
        height: 60vh;
        z-index: 0;
    }

    @media (min-width: 1200px) {
        #hero-bg {
            object-fit: fill;
        }
    }

    .hero-group-orvelay {
        position: absolute;
        top: -34%;
        left: 0;
        width: 100%;
        height: 200%;
    }

    .hero-bg-orvelay-left {
        position: relative;
        inset: 0;
        width: clamp(100px, 50vw, 1100px);
        height: 100%;
        background-image: url('/img/overlay3.png');
        background-size: 100% 100%;
        opacity: 1;
        background-position: center left;
        background-repeat: no-repeat;
    }

    .hero-bg-orvelay-bottom {
        position: absolute;
        inset: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.4) 20%, transparent 45%);
    }





    /* ── LOADING ── */
    #loading {
        position: absolute;
        inset: 0;
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #080808;
        font-size: clamp(12px, 2vw, 20px);
        opacity: .5;
        letter-spacing: .08em;
        transition: opacity .4s;
    }

    /* ── NAVBAR ── */
    #nav-home {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 3.5% 10px 3.5%;
        width: 100%;
        z-index: 10;
        background-color: rgba(255, 0, 0, 0);
        gap: .3%;
    }

    .ni {
        background: none;
        border: none;
        color: #EBEBEB;
        font-size: clamp(10px, 1.65vw, 14px);
        font-family: 'Inter', sans-serif;
        font-weight: 100 !important;
        cursor: pointer;
        padding: .28em .7em;
        height: clamp(20px, 3vw, 32px);
        margin-right: .2%;
        border-bottom: 2px solid transparent;
        transition: opacity .12s, transform .12s;
        outline: none;
        white-space: nowrap;
    }

    .ni.active {
        border-bottom: 2px solid #149dff;
    }

    .ni.focused {
        border-bottom: 2px solid #149dff;
    }

    .nav-icons {
        position: relative;
        display: flex;
        height: clamp(20px, 3vw, 32px);
        margin-left: auto;
        gap: 18px;
        width: fit-content;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .search-icon {
        position: relative;
        width: clamp(20px, 3vw, 32px);
        height: clamp(20px, 3vw, 32px);
        border-radius: 50%;
        margin: auto;
        background: transparent;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        background-color: #0000006c;
    }

    .search-icon.focused {
        background-color: #000000bb;
    }

    .search-icon.focused svg {
        scale: 0.92;
    }

    .search-icon svg {
        transform: scale(0.92);
        margin-bottom: 1;
        width: clamp(15px, 2vw, 22px);
        height: clamp(15px, 2vw, 22px);
    }

    .box-nav-avatar {
        position: relative;
        width: clamp(20px, 3vw, 32px);
        height: clamp(20px, 3vw, 32px);
        border-radius: 50%;
        background: rgb(20, 20, 20);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
    }

    #nav-avatar {
        display: flex;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }





    /* ── HERO ── */
    .hero {
        position: relative;
        left: 3.5%;
        top: 10%;
        width: 100%;
        height: 30%;
        z-index: 5;
        flex-direction: column-reverse;
    }

    .container-hero-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }

    .hero-meta-content {
        width: auto;
        height: auto;
        position: absolute;
        bottom: -61px;
    }


    #hero-logo {
        max-width: clamp(120px, 28vw, 340px);
        max-height: clamp(40px, 8vw, 100px);
        object-fit: contain;
        object-position: left;
        margin-bottom: 3%;
    }

    #hero-title-text {
        margin-bottom: 3%;
        line-height: .92;
    }

    #hero-title-text .prefix {
        font-size: clamp(5px, .82vw, 10px);
        font-weight: 700;
        letter-spacing: .28em;
        opacity: .72;
        margin-bottom: 3%;
        text-transform: uppercase;
    }

    #hero-title-text .main {
        font-size: clamp(19px, 4.2vw, 52px);
        font-weight: 900;
        color: #149dff;
        ;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    #hero-title-text .sub {
        font-size: clamp(16px, 3.6vw, 44px);
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .hero-meta-group {
        display: flex;
        flex-direction: column;
        gap: 0.2vw;
    }

    #hero-meta {
        display: flex;
        align-items: center;
        gap: clamp(6px, 1.2%, 14px);
    }

    #hero-meta span {
        font-size: clamp(10px, 1.45vw, 13.2px);
        opacity: 1;
        color: #e0e0e0;
    }

    #hero-meta .badge {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 0;
        width: 0;
        padding: 10px 11px;
        border-radius: 2px;
        background-color: #a3a3a300;
        border: none !important;
    }

    #hero-meta #hero-age-rating-text {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 0.2;
        position: relative;
        margin-top: 2px;
        margin-left: -1.8px;
        letter-spacing: -1.8px;
        font-size: 18px !important;
        font-family: "Bebas Neue", sans-serif !important;
        font-weight: 500;
        font-style: normal;
        transform: scaleY(0.8);
        transform-origin: top;
    }

    .rL {
        background-color: var(--rl) !important;
    }

    .r10 {
        background-color: var(--r10) !important;
    }

    .r12 {
        color: black;
        background-color: var(--r12) !important;
    }

    .r12 #hero-age-rating-text {
        color: black;
    }

    .r14 {
        background-color: var(--r14) !important;
    }

    .r16 {
        background-color: var(--r16) !important;
    }

    .r18 {
        border: 1px solid rgb(255, 255, 255, 0.5) !important;
        background-color: var(--r18) !important;
    }

    #hero-meta .dot {
        opacity: .4;
    }

    #hero-evaluation {
        line-height: 1.55;
        display: inline-block;
        font-size: clamp(10px, 1.4vw, 13.2px);
        display: -webkit-box;
        font-weight: 500;
        color: #26e488;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #hero-desc {
        font-size: clamp(10px, 1.45vw, 13.2px);
        line-height: 1.55;
        color: #e0e0e0;
        max-width: clamp(230px, 31vw, 350px);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        font-family: 'Inter', sans-serif !important;
        overflow: hidden;
    }

    .hero-actions {
        margin-top: 10px;
        display: flex;
        align-items: center;
        width: fit-content;
        height: fit-content;
        gap: 10px;
    }


    .hb {
        transition: transform .12s, outline .1s;
        outline: none;
    }

    .hb.focused {
        outline: 3px solid #ffffff;
        outline-offset: 3px;
    }

    .btn-play {
        background-color: #149dff;
        color: #ececec;
        border: none;
        border-radius: 26px;
        width: 10em;
        height: 3.1em;
        font-size: 0.75em;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .btn-more-info {
        background-color: #2D2D2D;
        color: rgba(255, 255, 255, 0.856);
        border: none;
        border-radius: 26px;
        width: 6.8em;
        height: 3.1em;
        padding: 0 55px;
        font-size: 0.75em;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        white-space: nowrap;
        z-index: 10;
    }

    .btn-more-info i {
        font-weight: 500;
        font-size: 1.30rem;
    }

    .btn-ghost {
        background-color: #2D2D2D;
        color: rgba(255, 255, 255, 0.85);
        border: none;
        font-size: 0.75em;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        justify-content: center;
        width: auto;
        height: 3.3em;
        flex-shrink: 0;
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        width: 3.1em;
        height: 3.1em;
        border-radius: 50%;
        padding: 0 8px;
        white-space: nowrap;
    }

    .card {
        width: clamp(140px, 16vw, 246px);
        height: clamp(85px, 8vw, 140px);
        border-radius: 4px;
        background-size: 100% 100%;
        background-position: center top;
        background-repeat: no-repeat;
        background-color: #1a1a2e;
        display: flex;
        flex-shrink: 0;
        margin-bottom: 30px;
        padding: 5% 4%;
        position: relative;
        transition: transform .2s cubic-bezier(.4, 0, .2, 1), outline .15s;
        outline: 4px solid transparent;
        outline-offset: 2px;
        cursor: pointer;
        overflow: hidden;
    }



    /* sombra no card */
    .card .cov {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 50%;
        top: 50%;
        border-radius: 3px;
        overflow: hidden;
        display: none;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, .2) 20%, transparent 90%);
    }

    .card .card-title {
        position: relative;
        font-size: clamp(5px, .82vw, 8.5px);
        font-weight: 600;
        line-height: 1.25;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: none;
    }

    .card.focused {
        outline: 2px solid rgba(255, 255, 255, 0.774);
        outline-offset: 2px;
        will-change: transform;
        /*  margin: 0 10px 0 10px; */
        /*   box-shadow: 0 0 10px 5px #ffffff59; */
        /*  transform: translateY(-10px) scale(1.1); */

    }

    /* rating badge on card */
    .card .card-rating {
        position: absolute;
        top: 5%;
        right: 5%;
        font-size: clamp(4px, .7vw, 9px);
        font-weight: 700;
        background: rgba(0, 0, 0, 0.521);
        border-radius: 3px;
        padding: .35em .65em;
        display: flex;
        align-items: center;
        gap: 2px;
        display: none;
    }

    .card .card-rating .star {
        color: #f5c22a;
    }

    /* ── ERROR ── */
    #error-msg {
        position: absolute;
        inset: 0;
        z-index: 50;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background: rgba(8, 8, 8, .92);
        font-size: clamp(10px, 1.5vw, 16px);
        opacity: .7;
        text-align: center;
        padding: 5%;
    }

    #error-msg i {
        font-size: clamp(24px, 4vw, 48px);
        opacity: .5;
    }

    /* ── ZONE BADGE ── */
    #zonebadge {
        position: absolute;
        bottom: .4%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        font-size: clamp(4px, .6vw, 7px);
        opacity: .25;
        letter-spacing: .06em;
        white-space: nowrap;
        pointer-events: none;
    }







    /* sobe a rowlist de filmes pra abrir espaço pra série embaixo */
    /*     .rows-viewport {
        width: 100%;
        height: clamp(200px, 20vw, 280px);
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 40px;
        overflow-y: auto;
        display: none;
        background-color: rgba(105, 0, 0, 0);
    }
 */






















    /* Alvo: Largura lógica de até 960px COM densidade de pixels igual ou maior a 2 */
    @media screen and (max-width: 960px) and (-webkit-min-device-pixel-ratio: 2),
    screen and (max-width: 960px) and (min-resolution: 192dpi) {

        /*         .hero-meta-group {
            transform: scale(0.95) translateX(0.5%);
        }
        
        #hero-logo {
            transform: scale(0.70) translateX(0.50%);
        } */
        .hero {
            position: absolute;
            /*  left: -1%;
            top: 14%; */
            width: 100%;
            z-index: 5;
        }
        
        .hero-meta-content {
            width: auto;
            height: auto;
            position: absolute;
            left: -3.5%;
            top: 7%;
            transform: scale(0.77);
        }


        #tv nav .ni {
            font-size: clamp(10px, 1.65vw, 11px);
        }



        .nav-icons {
            height: clamp(20px, 3vw, 29px);
        }

        .search-icon {
            width: clamp(20px, 3vw, 29px);
            height: clamp(20px, 3vw, 29px);
        }

        .search-icon svg {
            width: clamp(15px, 2vw, 22px);
            height: clamp(15px, 2vw, 22px);
        }

        .box-nav-avatar {
            width: clamp(20px, 3vw, 29px);
            height: clamp(20px, 3vw, 29px);
        }


        .rowLabel {
            font-size: clamp(10px, 1.35vw, 11px);
        }


        .rows-viewport {
            bottom: 0%;
            height: 42vh;
        }


        #hero-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            width: clamp(300px, 100vw, 1000px);
            height: 100%;
            background-image: url('/img/overlay3.png');
            background-size: 100% 100%;
            opacity: 1;
            left: -3.5%;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* search */
        .search-left {
            width: clamp(200px, 26.5vw, 280px);
            min-width: clamp(200px, 26.5vw, 280px);
            max-width: clamp(200px, 26.5vw, 280px);
            display: flex;
            flex-direction: column;
            scrollbar-width: none;
        }
    }


























    @media only screen and (max-width: 780px) {

        /* ── NAVBAR ── */
        #nav-home {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 4.5% 10px 4.5%;
            width: 100%;
            z-index: 10;
            background-color: rgba(0, 0, 0, 0);
            gap: .3%;
        }

        #nav-home #nav-item-novidades {
            display: none;
        }

        .ni {
            background: none;
            border: none;
            /* color: #fff; */
            font-size: clamp(12px, 1.65vw, 14px);
            font-family: 'Inter', sans-serif;
            font-weight: 500 !important;

            letter-spacing: 0.6px;
            cursor: pointer;
            padding: .28em .7em;
            height: clamp(20px, 3vw, 32px);
            margin-right: .2%;
            border-bottom: 2px solid transparent;
            transition: opacity .12s, transform .12s;
            outline: none;
            white-space: nowrap;
            z-index: 9;
        }

        .ni.active {
            border: none;
        }

        .ni.focused {
            border: none;
        }

        .nav-icons {
            position: relative;
            display: flex;
            height: clamp(20px, 3vw, 32px);
            margin-left: auto;
            gap: 18px;
            width: fit-content;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
        }

        .search-icon {
            position: relative;
            width: clamp(26px, 3vw, 32px);
            height: clamp(26px, 3vw, 32px);
            border-radius: 50%;
            margin: auto;
            background: transparent;
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            background-color: #020202cc;
        }

        .search-icon.focused {
            background-color: #000000bb;
        }

        .search-icon.focused svg {
            scale: 0.92;
        }

        .search-icon svg {
            transform: scale(0.92);
            margin-bottom: 1;
            width: clamp(17px, 2vw, 22px);
            height: clamp(17px, 2vw, 22px);
        }

        .box-nav-avatar {
            position: relative;
            width: clamp(26px, 3vw, 32px);
            height: clamp(26px, 3vw, 32px);
            border-radius: 50%;
            background: rgb(20, 20, 20);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
        }


        #nav-avatar {
            display: flex;
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }











        .hero {
            position: relative;
            left: 23px;
            top: 0%;
            width: 100%;
            height: 38%;
            z-index: 5;
            flex-direction: column-reverse;
        }

        .container-hero-bg {
            position: absolute;
            top: 50%;
            left: calc(50% - 23px);
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
        }

        #hero-bg {
            position: relative;
            left: 0;
            top: 0;
            object-fit: cover;
            object-position: center top;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            z-index: 0;
            transform: scale(1);
        }

        .hero-group-orvelay {
            position: absolute;
            top: calc(50% + 23px);
            left: calc(50% - 23px);
            transform: translate(-50%, -50%);
            width: calc(100% + 43px);
            height: 100%;
        }

        .hero-bg-orvelay-left {
            position: relative;
            inset: 0;
            top: -100px;
            left: -60px;
            height: 160%;
            width: 60%;
            z-index: 1;
            transform: rotate(-25deg);
            background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
        }

        .hero-bg-orvelay-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 30%, transparent 60%);
        }

        .hero-meta-content {
            width: auto;
            height: auto;
            position: absolute;
            bottom: -61px;
        }

        #hero-logo {
            max-width: 180px;
            max-height: 50px;
            display: none;
            object-fit: contain;
            object-position: left;
            margin-bottom: 3%;
        }

        #hero-title-text {
            margin-bottom: 3%;
            line-height: .92;
        }

        #hero-title-text .prefix {
            font-size: clamp(5px, .82vw, 10px);
            font-weight: 700;
            letter-spacing: .28em;
            opacity: .72;
            margin-bottom: 3%;
            text-transform: uppercase;
        }

        #hero-title-text .main {
            font-size: clamp(19px, 4.2vw, 52px);
            font-weight: 900;
            color: #149dff;
            ;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        #hero-title-text .sub {
            font-size: clamp(16px, 3.6vw, 44px);
            font-weight: 900;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .hero-meta-group {
            display: flex;
            flex-direction: column;
            gap: 0.2vw;
        }

        #hero-meta {
            display: flex;
            align-items: center;
            gap: clamp(6px, 1.2%, 14px);
        }

        #hero-meta span {
            display: none;
            font-size: clamp(12px, 1.45vw, 13.2px);
            opacity: .72;
        }

        #hero-meta .badge {
            display: none;
            /*         height: 16px;
            width: 18px !important; */
        }

        .rL {
            background-color: var(--rl) !important;
        }

        .r10 {
            background-color: var(--r10) !important;
        }

        .r12 {
            color: black;
            background-color: var(--r12) !important;
        }

        .r14 {
            background-color: var(--r14) !important;
        }

        .r16 {
            background-color: var(--r16) !important;
        }

        .r18 {
            border: 1px solid rgb(255, 255, 255, 0.5) !important;
            background-color: var(--r18) !important;
        }

        #hero-meta .dot {
            opacity: .4;
        }

        #hero-evaluation {
            line-height: 1.55;
            display: inline-block;
            font-size: clamp(12px, 1.4vw, 13.2px);
            display: -webkit-box;
            font-weight: 500;
            color: #26e488;
            /* #26e488 */
            -webkit-box-orient: vertical;
            overflow: hidden;

        }

        #hero-desc {
            font-size: clamp(12px, 1.45vw, 13.2px);
            color: #e0e0e0;
            opacity: 1 !important;
            line-height: 1.40;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            font-weight: 500;
            -webkit-box-orient: vertical;
            font-family: 'Inter', sans-serif !important;
            overflow: hidden;
            z-index: 9;
        }






        .card {
            width: clamp(160px, 16vw, 246px);
            height: clamp(95px, 8vw, 140px);
            border-radius: 4px;
            background-size: 100% 100%;
            background-position: center top;
            background-repeat: no-repeat;
            background-color: #1a1a2e;
            display: flex;
            flex-shrink: 0;
            margin-bottom: 30px;
            padding: 5% 4%;
            position: relative;
            transition: transform .2s cubic-bezier(.4, 0, .2, 1), outline .15s;
            outline: 4px solid transparent;
            outline-offset: 2px;
            cursor: pointer;
            overflow: hidden;
        }

        .card .card-rating {
            display: none;
        }

    }