/* ========================================
   GRID FIX CSS - SOLO PARA CORREGIR TARJETAS
   ========================================
   Archivo adicional para fix del grid sin alterar diseño original
   Enlace en index.html: <link rel="stylesheet" href="assets/css/grid-fix.css">
   Versión: 1.0 - Solo modifica .profiles-grid
*/

/* Solo estos estilos - no sobrescribe resto de styles.css */
.profiles-section {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.profiles-grid {
    display: grid;
    gap: 1.5rem;
    justify-content: flex-start;
    grid-template-columns: repeat(2, 1fr); /* 2 en móviles */
    min-width: max-content;
}

/* Desktop: Máximo 6 columnas (≥1024px) */
@media (min-width: 1024px) {
    .profiles-grid {
        grid-template-columns: repeat(6, 1fr); /* Exactamente 6 columnas */
        gap: 1.5rem;
        justify-content: flex-start;
        max-width: calc(6 * 200px + 5 * 1.5rem); /* Ancho máximo para 6 tarjetas */
    }
    
    .main {
        max-width: calc(6 * 200px + 5 * 1.5rem + 2rem); /* Limitar main para 6 max */
        overflow-x: hidden;
    }
    
    .profiles-section {
        overflow-x: hidden; /* Sin scroll extra en desktop */
    }
}

/* Tablets: 4 columnas (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .profiles-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

/* Móviles grandes: 3 columnas (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .profiles-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Asegurar tarjetas uniformes - Solo para grid */
.profile-card {
    aspect-ratio: 2/3;
    max-width: 200px;
    min-width: 150px;
    flex-shrink: 0;
}

/* Resto sin cambios - No afecta header, colores, logo, etc. */