/* ==========================================================================
   /partners — marcas del festival

   Se carga después de lineup.css y pagina.css (degradado, cabecera, hoja
   blanca, hero). Aquí sólo va lo suyo: una sección por categoría, con el
   título arriba y los logos en rejilla, como la página de partners de Kappa
   FuturFestival pero centrado.

   Entre categoría y categoría, una línea (Victor, 30/09): se probaron
   tarjetas para que se vieran «más agrupadas» y quedaba muy cuadrado.

   Los logos son PNG de 530x400 con el logo en negro al centro y aire
   alrededor: así los preparó marketing, y así se prepararon los que faltaban.
   Por eso aquí no se les pone padding ni caja: el aire ya viene en el archivo.
   ========================================================================== */

.ff-partners {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 0 8px;
}

.ff-partners-grupo + .ff-partners-grupo {
    margin-top: 28px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

/* Centrado y no a la izquierda como en Kappa: la mayoría de las categorías
   tiene una o dos marcas, y cargadas a la izquierda dejaban la hoja vacía a
   la derecha. Por eso los logos van en flex y no en grid: la fila incompleta
   también se centra. */
.ff-partners-grupo h2 {
    margin: 0 0 4px;
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.ff-logos {
    --columnas: 4;
    --hueco: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px var(--hueco);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ff-logos li {
    flex: 0 0 calc((100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas));
}

.ff-logos img {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 860px) {
    .ff-logos {
        --columnas: 3;
        --hueco: 16px;
        row-gap: 4px;
    }
}

@media (max-width: 560px) {
    .ff-logos {
        --columnas: 2;
    }

    .ff-partners-grupo + .ff-partners-grupo {
        margin-top: 20px;
        padding-top: 24px;
    }
}

/* Medios aliados y agradecimientos: en chico, hasta abajo (marketing, 01/10).
   Va al final para ganarle a las columnas de los @media de arriba. */
.ff-partners-chico h2 {
    font-size: clamp(13px, 1.6vw, 15px);
}

.ff-partners-chico .ff-logos {
    --columnas: 6;
    --hueco: 16px;
    row-gap: 0;
}

.ff-partners-chico .ff-logos img {
    max-width: 120px;
}

@media (max-width: 860px) {
    .ff-partners-chico .ff-logos {
        --columnas: 5;
    }
}

@media (max-width: 560px) {
    .ff-partners-chico .ff-logos {
        --columnas: 4;
        --hueco: 10px;
    }
}