/*==================================================
BRANDS
==================================================*/

.sidv-brands {
    --brands-primary: var(--sidv-primary, #FF9800);
    --brands-dark: var(--sidv-dark, #0D2137);
    --brands-muted: #667085;
    --brands-surface: #FFFFFF;
    --brands-border: #EEF2F6;
    --brands-radius: 20px;

    position: relative;
    padding: 5rem 0;
    background: var(--brands-surface);
    overflow: hidden;
}

/*==================================================
HEADER
==================================================*/

.sidv-brands__header {
    max-width: 760px;
    margin: 0 auto 4rem;
    text-align: center;
}

.sidv-brands__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.1rem;
    border: 1px solid rgba(255, 152, 0, .14);
    border-radius: 999px;
    background: rgba(255, 152, 0, .08);
    color: var(--brands-primary);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidv-brands__title {
    margin: 1.25rem 0;
    color: var(--brands-dark);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.sidv-brands__description {
    max-width: 640px;
    margin: 0 auto;
    color: var(--brands-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

/*==================================================
MARQUEE (CARRUSEL CONTINUO)
==================================================*/

.sidv-brands__marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Mascarilla de degradado lateral para difuminar los bordes */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.sidv-brands__track {
    display: flex;
    width: max-content;
    gap: 2rem;
    animation: sidvBrandsScroll 35s linear infinite;
    will-change: transform;
}

/* Pausa la animación al interactuar */
.sidv-brands__marquee:hover .sidv-brands__track {
    animation-play-state: paused;
}

.sidv-brands__group {
    display: flex;
    align-items: center;
    gap: inherit;
    flex-shrink: 0;
}

/*==================================================
CARDS / LOGO ITEMS
==================================================*/

.sidv-brands__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 115px;
    padding: 1.25rem;
    border: 1px solid var(--brands-border);
    border-radius: var(--brands-radius);
    background: var(--brands-surface);
    flex-shrink: 0;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color .35s ease,
                box-shadow .35s ease;
}

.sidv-brands__item:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 152, 0, 0.4);
    box-shadow: 0 16px 32px rgba(13, 33, 55, .08);
}

.sidv-brands__item img {
    max-width: 140px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Logos siempre a todo color */
    filter: none;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidv-brands__item:hover img {
    transform: scale(1.08);
}

/*==================================================
KEYFRAMES
==================================================*/

@keyframes sidvBrandsScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width: 992px) {
    .sidv-brands {
        padding: 4.5rem 0;
    }

    .sidv-brands__item {
        width: 180px;
        height: 100px;
        padding: 1rem;
    }

    .sidv-brands__item img {
        max-width: 120px;
        max-height: 48px;
    }
}

@media (max-width: 768px) {
    .sidv-brands {
        padding: 3.5rem 0;
    }

    .sidv-brands__header {
        margin-bottom: 2.5rem;
    }

    .sidv-brands__track {
        gap: 1.25rem;
        animation-duration: 25s;
    }

    .sidv-brands__item {
        width: 150px;
        height: 85px;
        padding: .85rem;
        border-radius: 16px;
    }

    .sidv-brands__item img {
        max-width: 100px;
        max-height: 40px;
    }

    .sidv-brands__marquee {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    }
}