/* Container do Slider Manual */
.slider-container {
    position: relative;
    width: 100%;
    background: #000;
    padding: 20px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Wrapper limita a área de visualização e deixa espaço fixo para as setas nas laterais */
.slider-wrapper-manual {
    width: calc(100% - 100px); /* Garante espaço de 50px de cada lado para as setas não cobrirem o vídeo */
    margin: 0 auto;
    overflow: hidden;
    cursor: grab;
}

.slider-wrapper-manual:active {
    cursor: grabbing;
}

.slider-trilho-manual {
    display: flex;
    transition: transform 0.5s ease-out;
    width: 100%;
}

/* --- ESTILO RESPONSIVO DOS CARDS (O segredo do ajuste de tela) --- */
.card-short {
    height: 440px;
    flex-shrink: 0;
    background: #111;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #333;
    
    /* Configuração padrão para PC Grande: Mostra 4 cards inteiros na tela */
    width: calc((100% - 60px) / 4); 
    margin-right: 20px;
}

/* Remove a margem do último card para o cálculo matemático fechar perfeito */
.card-short:last-child {
    margin-right: 0;
}

/* Garante que o vídeo preencha o card corretamente */
.card-short video {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Setas de Navegação (Mantidas visíveis em todos os dispositivos) */
.seta-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: none;
    font-size: 1.8rem;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
    border-radius: 5px;
    user-select: none;
}

.seta-slider:hover {
    background: rgba(255, 255, 255, 0.4);
}

.seta-esquerda { left: 10px; }
.seta-direita { right: 10px; }


/* ==========================================================================
   MEDIA QUERIES (Ajusta a quantidade de cards na tela dinamicamente)
   ========================================================================== */

/* Notebooks / Telas Médias: Mostra 3 cards por vez */
@media (max-width: 1200px) {
    .card-short {
        width: calc((100% - 40px) / 3);
    }
}

/* Tablets / Telas Pequenas: Mostra 2 cards por vez */
@media (max-width: 900px) {
    .card-short {
        width: calc((100% - 20px) / 2);
    }
}

/* Celulares (Mobile): Mostra APENAS 1 CARD inteiro na tela, sem cortar, com as setas aparecendo */
@media (max-width: 600px) {
    .seta-slider {
        padding: 12px 8px; /* Setas ligeiramente menores no celular para economizar espaço */
        font-size: 1.5rem;
    }
    
    .slider-wrapper-manual {
        width: calc(100% - 80px); /* Deixa exatamente 40px nas laterais para as setas */
    }

    .card-short {
        width: 100%; /* O card ocupa 100% do espaço disponível do wrapper (Apenas 1 na tela) */
        margin-right: 20px; /* Mantém o espaçamento para o próximo card que está escondido */
    }
}






.esteira-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 40px 0;
  background: #000;
}

.esteira-trilho {
  display: flex;
  width: max-content;
  animation: rolar-suave 30s linear infinite;
}

.pausada-total {
  animation-play-state: paused !important;
}

.esteira-trilho:hover {
  animation-play-state: paused;
}

.card-short {
  width: 250px;
  height: 440px;
  margin-right: 20px;
  flex-shrink: 0;
  background: #111;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #333;
}

.card-short video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes rolar-suave {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


    /* ESTRUTURA DA SEÇÃO  MURAL ÓLIVER*/
    .mural-oliver {
        padding: 40px 5%;
        background: #000;
        color: #fff;
    }

    .container-texto-mural {
        text-align: center;
        margin-bottom: 30px;
    }

    .container-texto-mural h2 { color: #ffce08; font-weight: bold; margin-bottom: 5px; }
    .container-texto-mural h3 { color: #ccc; font-size: 1.2rem; }

    /* GRID ESTILO MASONRY */
    .masonry-grid {
        column-gap: 15px;
        width: 100%;
        max-width: 2000px;
        margin: 0 auto;
        max-height: 1700px; /* Altura limite para o scroll interno */
        overflow-y: auto;
        padding-right: 10px;
        column-count: 4; /* 4 colunas no PC */
    }

    /* ESTILO DE CADA ITEM */
    .masonry-item {
        display: inline-block;
        width: 100%;
        margin-bottom: 15px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(219, 175, 0, 0.3);
        background: #0a0a0a;
        break-inside: avoid;
        position: relative;
    }

    .masonry-item img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.5s ease;
    }

    /* EFEITO DE BRILHO AO PASSAR O MOUSE */
    .masonry-item::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,206,8,0.3) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        transition: none;
    }

    .masonry-item:hover::after {
        animation: brilhoAnim 0.8s forwards;
    }

    .masonry-item:hover img {
        transform: scale(1.08);
    }

    @keyframes brilhoAnim {
        0% { left: -100%; }
        100% { left: 150%; }
    }

    /* BARRA DE ROLAGEM DOURADA */
    .masonry-grid::-webkit-scrollbar { width: 6px; }
    .masonry-grid::-webkit-scrollbar-thumb {
        background: #ffce08;
        border-radius: 10px;
    }

    /* RESPONSIVIDADE */
    @media (max-width: 768px) {

        /* GRID ESTILO MASONRY */
    .masonry-grid {
        max-width: 2000px;
        max-height: 1700px; /* Altura limite para o scroll interno */
        column-count: 2; /* 2 colunas no no celular */
    }
    
    
    }