.card-banner-custom {
    width: 100%;
    height: 361px;
    flex-shrink: 0;
    position: relative;
    border-radius: 19px;
}

.card-img-custom {
    width: 100%;
    height: 361px;
    object-fit: cover;
    position: absolute;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    border-bottom-left-radius: 19px;
    border-bottom-right-radius: 19px;
    background: rgba(0, 0, 0, 0.82);
    overflow: hidden;
}

/* faixa de brilho animada */
.gradient-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(77, 77, 77, 0.6),
            transparent
    );
    transform: skewX(-20deg);
    transition: all 0.3s ease;
}

/* efeito contínuo ao hover */
.card-banner-custom:hover .gradient-overlay::before {
    animation: shine 1s linear forwards;
}

@keyframes shine {
    from {
        left: -75%;
    }
    to {
        left: 125%;
    }
}

.gradient-overlay span{
    color: #FFF;
    font-size: 14.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.2px; /* 133.333% */
    text-transform: uppercase;
}

.floating-btn {
    width: 28px;
    height: 28px;
    background-color: #FFD600; /* cor amarela */
    border-radius: 50%;
    bottom: 22px;
    right: 12px;
}

/* ===== Banner ===== */
#banner{
    position: relative;
    overflow: hidden;
    /* Mantém seu limite superior, mas responsivo em telas menores */
    min-height: clamp(360px, 75vh, 1150px);
    color: #fff;
}

/* Container de conteúdo por cima do fundo */
#banner .content{
    position: relative;
    z-index: 2;
}

/* Se você ainda quiser forçar um “empurrão” no conteúdo em telas grandes,
   deixe esta regra; senão pode remover. */
#banner .content.container{
    margin-top: 178px !important;
}

/* Mídia de fundo (imagem OU vídeo) ocupa todo o banner */
#banner .bg-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* corta sem distorcer */
    z-index: 0;
    pointer-events: none;      /* não bloqueia cliques dos botões */
    background: #000;          /* cor de fundo enquanto carrega */
}

/* Camada de gradiente para legibilidade do texto */
#banner .bg-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    /* ajuste o gradiente conforme a sua arte */
    background: linear-gradient(180deg, rgb(255 10 18 / 73%) 5.2%, rgb(251 129 14 / 35%) 38.64%);
}

/* Se houver qualquer botão/flutuante dentro do banner, garanta que fique no topo */
#banner .floating-btn{
    z-index: 3;
}

/* ===== Responsivo ===== */
@media (max-width: 800px){
    #banner{
        min-height: 300px;
    }
    #banner .content.container{
        margin-top: 30px !important;
    }
}

/* Acessibilidade: se o usuário prefere menos movimento, evita loop visível */
@media (prefers-reduced-motion: reduce){
    #banner video.bg-media{
        /* Você pode trocar para 'display:none' e usar apenas o poster/imagem se quiser */
        animation: none;
    }
}

/* ===== Painel principal ===== */
.panel-marcas{
    background:#eeeeef;                  /* cinza suave (ajuste se quiser) */
    border-radius:60px;                  /* cantos arredondados como no print */
    padding:40px 40px 36px;
}

/* ===== Título com degradê ===== */
.titulo-gradiente{
    text-align:center;
    font-weight: 700;
    font-size:51px;                      /* ~h3 do print */
    line-height:1.15;
    margin-bottom:12px;
    background:linear-gradient(90deg,#ff3ea5,#ff7b25);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

/* ===== Descrição ===== */
.desc-marcas{
    text-align:center;
    color:#1a1a1a;
    font-size: 20.8px;
    font-weight: 400;
    line-height:1.6;
    max-width:1326px;
    margin:0 auto 26px;
}

/* ===== Grid de logos ===== */
.grid-marcas{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:24px;
    justify-items:center;
    margin: 60px 3%;
}

/* ===== Card de cada marca ===== */
.card-marca{
    width:194px;
    height:194px;
    background:#fff;
    border-radius:22px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:
            0 1px 0 rgba(0,0,0,.03),
            0 10px 22px rgba(0,0,0,.08);
    padding:10px;                        /* dá “respiro” ao logo */
}

.card-marca img{
    width:100%;
    height:100%;
    object-fit:contain;                  /* mantém proporção dos SVG/PNGs */
}

/* ===== Responsivo ===== */
@media (max-width: 1200px){
    .panel-marcas{ padding:36px 28px; }
    .card-marca{ width:156px; height:156px; }
}
@media (max-width: 992px){
    .grid-marcas{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 576px){
    .titulo-gradiente{ font-size:22px; }
    .desc-marcas{ font-size:13px; }
    .grid-marcas{ grid-template-columns: repeat(2,1fr); gap:18px; }
    .card-marca{ width:122px; height:122px; padding:22px; border-radius:20px; }
}