/* =========================================================
   Aliados (aliados.html): carrusel y tarjetas de cada marca
   ========================================================= */

/* ---------- Carrusel (componente/aliados.js lo llena dos veces para que gire sin cortes) ---------- */
.carrusel {
    overflow: hidden;
    padding: 40px 0;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Sin "gap": cada logo lleva su margen a la derecha, así la mitad de la pista mide
   exactamente una vuelta y el -50% de la animación empalma sin saltos. */
.carrusel__pista { display: flex; width: max-content; padding: 8px 0; animation: desfilar 40s linear infinite; }
.carrusel__pista > li { margin-right: 20px; }

.logo-aliado {
    flex: none;
    width: 200px; aspect-ratio: 16 / 9;
    background: var(--blanco); border-radius: 14px;
    padding: 16px 22px;
    display: grid; place-items: center;
    overflow: hidden;
}
.logo-aliado img { width: 100%; height: 100%; object-fit: contain; }
.logo-aliado--lleno { padding: 0; }
.logo-aliado--lleno img { object-fit: cover; }

.carrusel .logo-aliado { filter: grayscale(1) contrast(1.05); opacity: 0.8; transition: filter 0.3s, opacity 0.3s, transform 0.3s; }
.carrusel .logo-aliado:hover { filter: none; opacity: 1; transform: translateY(-4px); }

/* ---------- Tarjetas ---------- */
.aliados { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.aliado {
    display: flex; flex-direction: column;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden;
    transition: transform 0.3s, border-color 0.3s;
}
.aliado:hover { transform: translateY(-4px); border-color: rgba(255, 180, 35, 0.5); }
.aliado .logo-aliado { width: 100%; border-radius: 0; }
.aliado__texto { padding: 20px 22px 24px; }
.aliado__texto h3 { font-size: 1.15rem; margin-bottom: 4px; }
.aliado__rubro { display: block; color: var(--naranja); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.aliado__texto p { color: var(--texto-suave); font-size: 0.96rem; }

@keyframes desfilar { to { transform: translateX(-50%); } }

@media (max-width: 560px) {
    .carrusel .logo-aliado { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
    .carrusel { mask-image: none; -webkit-mask-image: none; }
    .carrusel__pista { flex-wrap: wrap; justify-content: center; width: auto; padding: 0 16px; }
    .carrusel__pista [aria-hidden="true"] { display: none; }
}