/* ==========================================================================
   VÍNCULOS INSTITUCIONALES (includes/socios.php)
   2 filas de 6 logos con desplazamiento infinito en sentidos opuestos.
   Cada fila contiene sus 6 logos + una copia oculta (aria-hidden): la pista
   se mueve el 50% de su ancho y vuelve a empezar sin salto visible.
   Prefijo "eps-socios" para no afectar al resto del sitio.
   ========================================================================== */

.eps-socios,
.eps-socios *,
.eps-socios *::before,
.eps-socios *::after {
    box-sizing: border-box;
}

.eps-socios {
    --eps-navy: #002855;   /* Azul institucional de títulos */
    --eps-blue: #0072ce;   /* Azul primario institucional */
    --eps-muted: #48658d;  /* Gris azulado para textos */
    --eps-visible: 6;      /* Logos visibles por fila */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(56px, 6vw, 88px) 24px;
    background: #ffffff;
    color: var(--eps-navy);
}

/* --- Ondas decorativas --- */
.eps-socios__wave {
    position: absolute;
    z-index: -1;
    width: min(46%, 640px);
    height: clamp(90px, 13vw, 190px);
    pointer-events: none;
}

.eps-socios__wave--top {
    top: 0;
    right: 0;
}

.eps-socios__wave--bottom {
    bottom: 0;
    left: 0;
}

.eps-socios__inner {
    max-width: 1480px;
    margin: auto;
}

/* --- Encabezado centrado --- */
.eps-socios__header {
    margin-bottom: clamp(30px, 4vw, 46px);
    text-align: center;
}

.eps-socios__eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eps-blue);
}

.eps-socios h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3.2vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: var(--eps-navy);
}

.eps-socios h2 span {
    color: var(--eps-blue);
}

.eps-socios__description {
    margin: 0;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
    color: var(--eps-muted);
}

/* --- Filas animadas --- */
.eps-socios__row {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* 100cqw = ancho visible de la fila */
}

.eps-socios__row + .eps-socios__row {
    margin-top: clamp(14px, 2vw, 24px);
}

/* Degradados blancos en los extremos */
.eps-socios__row::before,
.eps-socios__row::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: clamp(40px, 8%, 120px);
    pointer-events: none;
}

.eps-socios__row::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0));
}

.eps-socios__row::after {
    right: 0;
    background: linear-gradient(270deg, #ffffff, rgba(255, 255, 255, 0));
}

.eps-socios__track {
    display: flex;
    width: max-content;
    animation: eps-socios-marquee 42s linear infinite;
}

.eps-socios__row--reverse .eps-socios__track {
    animation-direction: reverse;
}

/* Pausa al pasar el cursor o al navegar con el teclado */
.eps-socios__row:hover .eps-socios__track,
.eps-socios__row:focus-within .eps-socios__track {
    animation-play-state: paused;
}

@keyframes eps-socios-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.eps-socios__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sin márgenes ni gap: así cada copia mide exactamente la mitad de la pista */
.eps-socios__item {
    flex: 0 0 auto;
    width: calc(100cqw / var(--eps-visible));
    border-left: 1px solid #e3edf6; /* Separador vertical sutil */
}

.eps-socios__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(84px, 8vw, 110px);
    padding: 12px clamp(14px, 2vw, 30px);
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.eps-socios__link:hover {
    transform: scale(1.04);
}

.eps-socios__link:focus-visible {
    outline: 3px solid #00baf0;
    outline-offset: -3px;
}

.eps-socios__link img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- Responsividad --- */
@media (max-width: 1024px) {
    .eps-socios { --eps-visible: 4; }
}

@media (max-width: 620px) {
    .eps-socios {
        --eps-visible: 2.5;
        padding: 48px 16px;
    }
    .eps-socios__link {
        height: 80px;
        padding: 10px 14px;
    }
}

/* Sin movimiento: los 6 logos de cada fila quedan fijos y centrados */
@media (prefers-reduced-motion: reduce) {
    .eps-socios__track {
        width: auto;
        animation: none;
    }
    .eps-socios__list {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    .eps-socios__list--copy,
    .eps-socios__row::before,
    .eps-socios__row::after {
        display: none;
    }
    .eps-socios__item {
        width: calc(100% / 6);
        min-width: 130px;
    }
    .eps-socios__link {
        transition: none;
    }
}