/* =============================================
   TALAVERA BORDERS - 21a RIIPN AMIPRONAT 2026
   ============================================= */

/* Left vertical talavera strip */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 45px;
    height: 100vh;
    background: url('../img/talavera_border.png') repeat-y left top;
    background-size: 45px auto;
    z-index: 999;
    pointer-events: none;
}

/* Top horizontal talavera strip — REMOVED */

/* Bottom horizontal talavera strip — REMOVED */
.talavera-bottom {
    display: none;
}

/* Offset body content to not be covered by the left border */
body {
    padding-left: 50px !important;
}

/* Keep header full width but account for left strip */
.header-area {
    margin-left: -50px;
    padding-left: 55px;
}

/* Footer also needs adjustment */
.footer-area {
    margin-left: -50px;
    padding-left: 55px;
}

/* Section backgrounds full width */
.wantToWork-area {
    margin-left: -50px;
    padding-left: 55px;
}

/* Mobile adjustments */
@media (max-width: 992px) {
    body::before {
        width: 30px;
        background-size: 30px auto;
    }

    body {
        padding-left: 35px !important;
    }

    .header-area,
    .footer-area,
    .wantToWork-area {
        margin-left: -35px;
        padding-left: 40px;
    }
}

@media (max-width: 576px) {
    body::before {
        width: 22px;
        background-size: 22px auto;
    }

    body {
        padding-left: 25px !important;
    }

    .header-area,
    .footer-area,
    .wantToWork-area {
        margin-left: -25px;
        padding-left: 28px;
    }
}

/* =============================================
   Sponsors Layout & Grayscale Effect
   ============================================= */
.sponsors-track {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
}

.sponsor-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 220px !important;
    height: 100px !important;
    padding: 8px !important;
    transition: transform 0.3s ease;
}

.sponsor-item img {
    max-width: 100% !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    animation: syncSponsors 4s infinite !important;
}

@keyframes syncSponsors {
    0%, 70% {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.05);
    }
    75%, 95% {
        filter: grayscale(100%);
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.05);
    }
}

/* sponsor_extra_1 — 1.5x más grande que el resto */
.sponsor-item img[src*="sponsor_extra_1"] {
    max-height: 120px !important;
    margin: 0 15px !important;
}