.festival-banner {
    background-color: #000;
    position: relative;
}

.festival-banner-padding {
    padding: 40px 0 60px 0;
}

.banner-img {
    max-width: 100%;
    height: auto;
}

.banner-cta {
    margin-top: -60px;
}

@media (max-width: 496px) {
    .banner-cta {
        margin-top: -40px;
    }
}

    .banner-cta .btn {
        background-color: #ffd400;
        border: none;
        color: #000;
        font-weight: bold;
        padding: 12px 30px;
        border-radius: 25px;
        z-index: 99999;
    }

        .banner-cta .btn:hover {
            background-color: #e6be00;
            color: #000 !important;
        }

        .banner-cta .btn:focus,
        .banner-cta .btn:active {
            background-color: #ffd400 !important;
            color: #000 !important;
        }

            .banner-cta .btn:active:hover,
            .banner-cta .btn:active:focus {
                background-color: #ffd400 !important;
                color: #000 !important;
            }

    .festival-mostra {
        padding: 60px 0;
        text-align: center;
    }

    .titulo-mostra {
        color: #fff;
        font-size: 28px;
        font-weight: 600;
    }

    /* Botões padrão */
    .btn-mostra {
        display: inline-block;
        padding: 14px 25px;
        border-radius: 30px;
        font-weight: 600;
        text-decoration: none;
        min-width: 220px;
        transition: 0.2s;
        margin: 10px;
        color: #000;
    }

        .btn-mostra:hover {
            transform: translateY(-2px);
            color: #000;
        }

        .btn-mostra:visited {
            color: #000 !important;
        }

    /* Cores */
    .btn-amarelo-producao {
        background: #ffd400;
    }

    .btn-roxo-producao {
        background: linear-gradient(90deg, #7b4dff, #6a5cff);
    }

    .btn-rosa-producao {
        background: linear-gradient(90deg, #ff4dc4, #e94ab8);
    }

    .btn-verde-producao {
        background: linear-gradient(90deg, #9cff4d, #7ee64d);
    }

    .festival-votacao {
        color: #fff;
        padding: 60px 0;
    }

        .festival-votacao .titulo {
            font-size: 30px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .festival-votacao .descricao {
            font-size: 18px;
            color: #fff;
            margin-bottom: 40px;
        }

    .box-votacao {
        background-color: #000;
        border-radius: 20px;
        padding: 30px;
        margin: 0 auto;
        height: 180px;
        width: 700px;
    }

    @media (max-width: 768px) {

        .box-votacao {
            width: 100%;
            height: auto;
            padding: 25px 20px;
        }

            .box-votacao .row {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: left;
            }

            /* Todas as colunas ocupam 100% */
            .box-votacao .col-sm-5,
            .box-votacao .col-sm-2 {
                width: 100%;
                max-width: 100%;
                flex: 0 0 100%;
            }

        /* Espaçamentos */
        .texto-menor {
            margin-bottom: 10px;
        }

        .texto-direita {
            display: none;
        }

        /* Seta vira para baixo */
        .seta {
            display: none;
        }

        /* Centraliza tudo */
        .text-left {
            text-align: left !important;
        }

        /* GIF menor e centralizado */
        .estrelas-gif {
            display: block;
            margin-top: 12px;
            max-width: 200px !important;
        }
    }

    .texto-menor {
        font-size: 16px;
        color: #fff;
    }

        .texto-menor.destaque {
            margin-top: 10px;
            font-size: 13px;
            color: #9aa3b2;
        }

    .seta span {
        font-size: 28px;
        display: inline-block;
        margin-top: 30px;
    }

    .texto-direita {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .estrelas-gif {
        max-width: 180px;
    }

    /*carrossel*/

    .carousel {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: 16px; /* Espaço entre os cards */
        padding: 10px 0;
        max-width: 100%;
    }

        .carousel::-webkit-scrollbar {
            display: none; /* Opcional: esconde a barra de rolagem */
        }

    .carousel-item {
        min-width: 250px;
        max-width: 250px;
        background-color: #1f1f1f;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        position: relative;
    }

        .carousel-item img {
            width: 100%;
            height: 140px;
            object-fit: cover;
        }

    .item-info {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
        color: white;
    }

    .item-title {
        font-weight: bold;
        font-size: 14px;
        color: white;
    }

    .item-meta {
        font-size: 12px;
        color: #aaa;
    }

    .stars {
        color: gold;
        font-size: 14px;
        margin-bottom: 5px;
    }

    @media (min-width: 962px) {
        .container-carrossel {
            max-width: 1160px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 18px;
            padding-right: 18px;
        }

            .container-carrossel.m-t-80 {
                margin-top: 48px;
            }

            .container-carrossel #canais-home > .row {
                display: flex;
                align-items: center;
                margin-bottom: 46px;
            }

                .container-carrossel #canais-home > .row > .col-md-2 {
                    flex: 0 0 22%;
                    max-width: 22%;
                    width: 22%;
                }

                .container-carrossel #canais-home > .row > .col-md-10 {
                    flex: 0 0 78%;
                    max-width: 78%;
                    min-width: 0;
                    width: 78%;
                }

            .container-carrossel .box-titulo {
                font-size: 24px;
                line-height: 1.25;
                margin-top: 0 !important;
            }

            .container-carrossel .box-texto {
                font-size: 13px;
                line-height: 1.45;
                margin: 20px 0 22px;
            }

            .container-carrossel .btn-assistidos {
                min-width: 120px;
                padding: 10px 22px;
            }

            .container-carrossel .carousel-skeleton-wrapper {
                justify-content: flex-start;
                margin: 18px 0;
            }

            .container-carrossel .carousel {
                gap: 14px;
            }

            .container-carrossel .carousel-item {
                min-width: 250px;
                max-width: 250px;
            }

                .container-carrossel .carousel-item img {
                    height: 140px;
                }

            .container-carrossel .item-info {
                padding: 9px 10px;
            }

            .container-carrossel .item-title {
                font-size: 14px;
                line-height: 1.25;
            }

            .container-carrossel .item-meta {
                font-size: 12px;
                line-height: 1.25;
            }

            .container-carrossel .stars {
                font-size: 14px;
                margin-bottom: 5px;
            }

            .container-carrossel .arrow {
                width: auto;
                height: auto;
                padding: 10px;
            }
    }


    .carousel.dragging {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }

    .carousel {
        cursor: grab;
        padding: 10px 0;
    }

    .row-equal {
        display: flex;
        flex-wrap: wrap;
    }

        .row-equal > [class*='col-'] {
            display: flex;
            flex-direction: column;
        }

    .skeleton {
        background: #333;
        border-radius: 8px;
        animation: pulse 1.5s infinite;
        margin-bottom: 15px;
    }

    .skeleton-img {
        width: 100%;
        height: 200px;
    }

    .skeleton-title {
        width: 70%;
        height: 24px;
    }

    .skeleton-date {
        width: 40%;
        height: 16px;
    }

    .skeleton-line {
        width: 100%;
        height: 60px;
        margin-bottom: 20px;
    }

    @keyframes pulse {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }



    .carousel-skeleton-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 32px 0;
        max-width: 100%;
    }

    .carousel-skeleton {
        display: flex;
        gap: 16px;
        overflow: hidden;
    }

    .card-skeleton {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        height: 140px;
        border-radius: 12px;
        background: linear-gradient( 90deg, #2b2b2b 25%, #3a3a3a 50%, #2b2b2b 75% );
        background-size: 200% 100%;
        animation: shimmer 1.4s infinite;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .arrow {
        background: #111;
        color: white;
        border: none;
        font-size: 0;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
        border-radius: 8px;
        align-items: center;
        display: inline-flex;
        justify-content: center;
        line-height: 1;
        min-height: 54px;
        min-width: 34px;
    }

        .arrow::before {
            display: block;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 28px;
            font-weight: 700;
            line-height: 1;
            transform: translateY(-1px);
        }

        .arrow.left {
            margin-right: 10px;
        }

            .arrow.left::before {
                content: "\2039";
            }

        .arrow.right {
            margin-left: 10px;
        }

            .arrow.right::before {
                content: "\203A";
            }

    .skeleton-box {
        display: block;
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 37%, #2a2a2a 63%);
        background-size: 400% 100%;
        animation: shimmer 1.4s infinite;
        border-radius: 8px;
    }

    /* Título "MAIS ASSISTIDOS" */
    .titulo-skeleton {
        width: 100px;
        height: 20px;
        margin-bottom: 20px;
        margin-top: 30px;
    }

    /* Botão */
    .btn-skeleton {
        width: 100px;
        height: 38px;
        border-radius: 50px;
    }

    @keyframes shimmer {
        0% {
            background-position: -200% 0;
        }

        100% {
            background-position: 200% 0;
        }
    }

    @media (max-width: 961px) {
        .carousel-skeleton {
            overflow: hidden;
            justify-content: center;
        }

        .card-skeleton {
            flex: 0 0 100%; /* ou 100% se quiser ocupar toda a largura */
        }

        .carousel-skeleton > .card-skeleton:not(:first-child) {
            display: none;
        }
    }

    .box-titulo {
        font-size: 26px;
        color: #fff;
    }

    .box-texto {
        color: #7790b0;
        font-size: 14px;
        line-height: 1.55;
        margin: 18px 0 22px;
    }

    @media (max-width: 961px) {
        .box-titulo,
        .box-texto {
            width: 100%;
        }

        .container-carrossel {
            overflow: hidden;
            padding-left: 15px;
            padding-right: 15px;
        }

            .container-carrossel > .row,
            .container-carrossel #canais-home > .row {
                margin-left: 0;
                margin-right: 0;
            }

                .container-carrossel #canais-home > .row > [class*='col-'] {
                    padding-left: 0;
                    padding-right: 0;
                }

            .container-carrossel .box-titulo {
                margin: 0 0 18px;
                padding: 0 26px;
                font-size: 25px;
                line-height: 1.18;
                text-align: left;
            }

            .container-carrossel .btn-assistidos,
            .container-carrossel .btn-mostra,
            .btn-skeleton {
                margin-left: 26px;
            }

            .container-carrossel .carousel-skeleton-wrapper {
                justify-content: flex-start;
                margin: 28px 0 42px;
                padding: 0 28px;
            }

            .container-carrossel .carousel {
                gap: 14px;
                padding: 10px 0;
                width: 100%;
                min-width: 0;
                scroll-padding-left: 0;
            }

                .container-carrossel .carousel a {
                    flex: 0 0 auto;
                    max-width: 100%;
                }

            .container-carrossel .carousel-item {
                width: min(250px, calc(100vw - 104px));
                min-width: min(250px, calc(100vw - 104px));
                max-width: min(250px, calc(100vw - 104px));
            }

            .container-carrossel .arrow {
                position: absolute;
                top: 50%;
                width: 34px;
                height: 54px;
                padding: 0;
                transform: translateY(-50%);
                background: rgba(17, 17, 17, 0.92);
            }

                .container-carrossel .arrow.left {
                    left: 0;
                    margin-right: 0;
                }

                .container-carrossel .arrow.right {
                    right: 0;
                    margin-left: 0;
                }

        .box-texto {
            margin-top: 10px;
            padding: 0 26px;
        }
    }

    @media (max-width: 469px) {
        .container-carrossel {
            margin-top: 40px !important;
            padding-left: 10px;
            padding-right: 10px;
        }

            .container-carrossel .box-titulo {
                padding: 0 32px;
                font-size: 24px;
            }

            .container-carrossel .btn-assistidos,
            .container-carrossel .btn-mostra,
            .btn-skeleton {
                margin-left: 32px;
            }

            .container-carrossel .carousel-skeleton-wrapper {
                padding: 0 34px;
            }

            .container-carrossel .carousel-item {
                width: min(250px, calc(100vw - 118px));
                min-width: min(250px, calc(100vw - 118px));
                max-width: min(250px, calc(100vw - 118px));
            }

            .container-carrossel .item-title {
                font-size: 13px;
                line-height: 1.25;
            }

            .container-carrossel .item-meta {
                font-size: 11px;
                line-height: 1.3;
            }
    }




    .premios-img {
        max-width: 100%;
    }

    @media (max-width: 469px) {
        .premios-img,
        .btn-catalogo-festival {
            max-width: 90% !important;
        }
    }

    @media(min-width: 470px){
        .btn-catalogo-festival {
            max-width: 600px !important;
            margin-bottom: 30px;
        }
    }

    .festival-noticias-box {
        background: #000;
        border-radius: 25px;
        padding: 40px;
        color: #fff;
    }

    .noticias-subtitulo {
        color: #fff;
        font-size: 30px;
    }

    .noticias-titulo {
        color: #ffd400;
        font-size: 32px;
    }

    .btn-amarelo {
        background: #ffd400;
        color: #000 !important;
        border-radius: 25px;
        padding: 10px 22px;
        font-weight: bold;
        border: none;
    }

    .img-destaque {
        border-radius: 15px;
    }

    .conteudo-destaque h2 {
        font-size: 18px;
        margin-top: 15px;
    }

    .noticia-data {
        font-size: 13px;
        color: #ffd400;
        display: block;
        margin-top: 5px;
    }

    .card-noticia {
        background: #111;
        border-radius: 15px;
        padding: 10px;
        margin-bottom: 15px;
    }

        .card-noticia .thumb {
            border-radius: 10px;
        }

    .titulo-card {
        font-size: 14px;
        color: #fff;
        font-weight: 600;
    }

    .header-noticias {
        display: flex;
        align-items: center;
    }

    .ler-noticias {
        text-align: right;
    }

    @media (max-width: 469px) {
        .header-noticias {
            display: block;
            margin-bottom: 20px;
        }

        .ler-noticias {
            text-align: left;
            margin-top: 10px;
        }
    }

    .box-destaque {
        position: relative;
        display: block;
        border-radius: 20px;
        overflow: hidden;
    }

    .img-destaque {
        width: 100%;
        height: 320px;
        object-fit: cover;
    }

    .imagem-wrapper {
        position: relative;
        height: 260px;
        overflow: hidden;
        border-radius: 20px 20px 0 0;
    }

    @media (max-width: 469px) {
        .imagem-wrapper {
            height: auto;
        }
    }

    .img-destaque {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .noticia-overlay {
        position: absolute;
        inset: 0;
        border-radius: 20px 20px 0 0; /* importante */

        background: linear-gradient( to bottom, rgba(20, 30, 45, 0) 40%, /* topo transparente */
        rgba(20, 30, 45, 0.4) 60%, /* meio acinzentado */
        rgba(20, 30, 45, 0.8) 75%, /* transição */
        #1b2433 100% /* mesma cor do card */
        );
    }

    .conteudo-destaque {
        padding: 15px 20px 20px;
        border-radius: 0 0 20px 20px;
    }

    .box-destaque {
        border-radius: 20px;
        overflow: hidden; /* isso garante que o overlay respeite o corte */
        background: #1b2433;
    }

    .titulo-card-destaque {
        font-size: 20px;
        color: #fff;
        font-weight: 600;
    }

    .conteudo-destaque h2 {
        font-size: 18px;
        font-weight: 500;
    }

    .card-noticia {
        background: linear-gradient(135deg, #0f1724, #1b2433);
        border-radius: 15px;
        padding: 12px;
        margin-bottom: 15px;
        transition: 0.2s;
    }

        .card-noticia:hover {
            transform: translateY(-2px);
        }

        .card-noticia .thumb {
            border-radius: 10px;
            height: 80px;
            object-fit: cover;
        }

    @media (max-width: 469px) {
        .card-noticia .thumb {
            height: auto;
            margin-bottom: 10px;
        }
    }

    .festival-noticias-box {
        background: #000;
        border-radius: 30px;
        padding: 30px 40px;
    }

    @media (max-width: 469px) {
        #minhasNoticias {
            padding-left: 0;
            padding-right: 0;
        }

        .festival-noticias-box {
            margin-left: auto;
            margin-right: auto;
            padding: 30px 24px;
            width: 86%;
        }
    }

    @media (max-width: 992px) {
        .coluna-esquerda {
            margin-bottom: 15px;
        }
    }

    @media (min-width: 992px) {

        .row-flex {
            display: flex;
            align-items: stretch;
        }

        .coluna-esquerda,
        .coluna-direita {
            display: flex;
            flex-direction: column;
        }

        .coluna-direita {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

            .coluna-direita .card-noticia {
                display: flex;
                align-items: center;
            }
    }

    @media (max-width: 1200px) and (min-width: 992px) {

        .row-flex {
            display: flex;
        }

        .coluna-direita {
            gap: 10px;
        }

        .titulo-card {
            font-size: 13px;
        }
    }

    .festival-premios {
        margin-top: 60px;
        margin-bottom: 60px;
    }