.btnface{
            background-color:rgb(62, 114, 255);
            color:white;
        }
        .standard {
            background-color: gray; /* dourado */
        }
         .btnleft{
            background-color: #1a91cc;
            color:white;
        }
        .card {
            position: relative;
        }

        .faixa-diagonal {
            position: absolute;
            top: 8px;
            right: -28px;
            transform: rotate(45deg);
            color: #fff;
            font-weight: 600;
            text-align: center;
            padding: 6px 20px;
            z-index: 3;
            font-size: 12px;
            letter-spacing: 0.5px;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
        }

       /* STANDARD */
        .faixa-diagonal.standard {
            background: linear-gradient(135deg, #c8c8c8ff, #6e6e6e); /* cinza premium */
             z-index: 2;
        }

        /* GOLD */
        .faixa-diagonal.gold {
            background: linear-gradient(135deg, #ffdf29ff, #b79200ff); /* dourado real */
             z-index: 2;
        }

        /* PLATINUM */
        .faixa-diagonal.platinum {
            background: linear-gradient(135deg, #cce9ff, #80bfff); /* azul platinum */
             z-index: 2;
        }
        /* DIAMOND */
        .faixa-diagonal.diamond {
            background: linear-gradient(135deg, #9a2de2ff, #6d07a8ff);
            text-transform: uppercase;
            font-weight: 700;
        }

        /* Neon atrás (somente Diamond) */
        .faixa-diagonal.diamond::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #8e2de2;
            border-radius: inherit;
            filter: blur(10px);
            opacity: 0.6;
            z-index: -1; /* fica atrás */
            animation: diamondNeon 2s infinite ease-in-out;
        }

        @keyframes diamondNeon {
            0% { opacity: 0.3; }
            50% { opacity: 0.8; }
            100% { opacity: 0.3; }
        }

        .card-body {
            text-align: center;
        }
        .card-group {
            margin-bottom: 1.5rem;
        }
        .imagegp img{
            height: 200px;
            width: 200px;
            object-fit: cover;
        }

        .card img {
            height: 200px;
            object-fit: cover;
        }
        .btn-side {
            width: 100%;
            margin-bottom: 10px;
        }
        .highlight {
            background-color: orange;
            color: white;
        }

        .btnleftgp{
            background-color: #1a91cc;
            color:white;
            width: 100%;
            font-weight: bold;
            font-size: 20px;
        }
        .container {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .main-content {
            width: 75%;
        }
        .sidebar {
            width: 25%;
        }
        .descricao {
            text-align: left;
        }

        .tags {
            margin-top:30px;
            text-align: left;
        }
        .tags i {
            margin-right: 5px; /* Adiciona um pequeno espaço entre o ícone e a palavra "Tags" */
            color: #333; /* Cor do ícone */
        }

        .tag-item {
            display: inline-block;
            background-color: #f0f0f0; /* Cor de fundo cinza claro */
            color: #333; /* Cor do texto */
            border-radius: 5px; /* Bordas arredondadas */
            padding: 5px 10px; /* Espaçamento interno (padding) */
            margin-right: 10px; /* Espaçamento entre as tags */
            margin-top: 5px; /* Espaçamento entre as tags */
            font-weight: bold; /* Para destacar o texto */
            font-size: 0.9rem; /* Tamanho da fonte para as tags */
        }

        .tag-item:hover {
            background-color: #e0e0e0; /* Cor de fundo ao passar o mouse */
            cursor: pointer; /* Cursor de mão ao passar o mouse */
        }
        .regras {
            background-color:rgb(235, 235, 235);
            margin-top:30px;
            text-align: left;
            max-width: 50%;
            padding:10px;
            border-radius: 10px;
        }

        .regras ol {
            text-align: left;
            margin-top: 10px;
            padding-left: 20px;
        }
        .regras ol li {
            margin-bottom: 5px;
        }
        .image {
            border-right: 5px solid #ccc;
            border-bottom: 5px solid #ccc;
            border-left: 0.5px solid #ccc;
            border-top: 1px solid #ccc;
        }

        .card img.image5 {
            width: 300px;
            height: 250px !important;
            object-fit: cover;
        }
        .categoria {
           padding-left: 3px;
           padding-right: 3px;
            background-color: lightgray;
            border-radius: 6px;
        }
        .info-group {
            display: flex;
            justify-content: center; /* Centraliza o conteúdo horizontalmente */
            align-items: center; /* Centraliza verticalmente */
            gap: 15px; /* Espaço entre os itens */
        }

        .info-group p {
            margin: 0; /* Remove margens extras */
            text-align: center; /* Alinha o texto centralmente (opciomanal) */
        }
        .card-link {
            text-decoration: none;
            color: inherit; /* Manter as cores do card */
        }

        .card-title {
            display: -webkit-box; /* Garante suporte a clamping */
            -webkit-line-clamp: 2; /* Limita a 2 linhas */
            -webkit-box-orient: vertical; /* Necessário para line-clamp */
            overflow: hidden; /* Oculta o texto excedente */
            text-overflow: ellipsis; /* Adiciona os "..." */
            height: 3em; /* Define a altura aproximada para 2 linhas */
            line-height: 1.5em; /* Define o espaçamento entre as linhas */
        }

        #menuButton {
            font-size: 30px;
            background: none;
            border: none;
            color: #333;
            cursor: pointer;
        }

           /* ##### PREVIA #### */

            .preview-final {
                 text-align: center; /* Centraliza o h4 e o bloco */
            }

            .preview-caixa {
                display: flex;
                justify-content: center; /* Centraliza as imagens */
                gap: 15px; /* Espaço entre elas */
                margin-top: 10px;
            }

            .preview-caixa img {
                width: 180px; 
                height: 260px;
                object-fit: cover;
                border-radius: 8px;
                border: 1px solid #ddd;
            }

            .preview-item {
                position: relative;
                overflow: hidden;
                border-radius: 8px;
            }

            /* TAMANHO CENTRAL PADRÃO */
            .preview-item img {
                width: 180px;
                height: 260px;
                object-fit: cover;
                border-radius: 8px;
                border: 1px solid #ddd;
                transition: .3s ease;
            }

            /* AQUI ESTÁ O BLUR */
            .blurred img {
                filter: blur(8px) brightness(1);
            }

            /* BOTÃO DO OLHO */
            .show-btn {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 18px;
                padding: 10px 14px;
                background: rgba(0,0,0,0.6);
                color: #fff;
                border: none;
                border-radius: 50%;
                cursor: pointer;
                z-index: 10;
            }

            /* ##### PREVIA #### */

            .descricao-box {
                text-align: left; /* Garante que tudo fique alinhado à esquerda */
            }

            .descricao-titulo {
                display: block;      /* Faz o título quebrar linha */
                font-size: 16px;
            }

        @media (max-width: 768px) {
            /* Esconde os botões de menu no celular */
            .actions {
                display: none;
            }
            
            /* Exibe o menu (botão do modal) no celular */
            #menuButton {
                display: block;
            }
            .card img {
               height: 120px;
                object-fit: cover;
            }

            .imagegp img{
                height: 150px;
                 width: 150px; 
                object-fit: cover;
            }

            .main-content {
                width: 100%; 
            }
            .sidebar {
                width: 100%; 
                margin-top: 20px;
            }
            .regras {
                background-color:rgb(235, 235, 235);
                margin-top:30px;
                text-align: left;
                max-width: 70%;
                padding:10px;
                border-radius: 10px;
            }

            .preview-caixa {
                gap: 8px; /* Menos espaço entre elas */
            }

            .preview-item img {
                width: 120px;   /* 🔥 tamanho ideal para 3 lado a lado */
                height: 160px; 
                border-radius: 6px;
            }

            .preview-item {
                border-radius: 6px;
            }

            .show-btn {
                font-size: 14px;
                padding: 7px 10px;
            }

        }
        @media (min-width: 769px) {
            /* Exibe os botões no desktop */
            .row {
                display: flex;
            }

            /* Esconde o botão de menu (modal) no desktop */
            #menuButton {
                display: none;
            }
        }