/* Contenedor: máximo 2 por fila, se centra si queda uno solo */
.cuadricula-proyectos:not(.proyectos-github),
.proyectos-github {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Cada tarjeta: mínimo 380px, máximo 48% — nunca más de 2 por fila */
.cuadricula-proyectos .tarjeta-proyecto,
.proyectos-github .tarjeta-proyecto {
    flex: 1 1 380px;
}
.proyectos-github {
    margin-top: 20px;
}
.proyectos-github:empty::after {
    content: "🐱 Cargando proyectos de GitHub...";
    display: block;
    width: 100%;
    text-align: center;
    padding: 40px;
    color: var(--texto-2);
    font-family: var(--fuente-codigo);
    font-size: 13px;
}

.tarjeta-proyecto {
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-l);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition:
        border-color 0.25s,
        transform 0.2s;
}

.tarjeta-proyecto:hover {
    border-color: var(--borde-hover);
    transform: translateY(-4px);
}

.cabecera-proyecto {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icono-proyecto {
    font-size: 28px;
    line-height: 1;
}

.estado-proyecto {
    font-family: var(--fuente-codigo);
    font-size: 10.5px;
    color: var(--color-verde);
    background: var(--color-verde-tenue);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(104, 211, 145, 0.2);
}

.titulo-proyecto {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.descripcion-proyecto {
    font-size: 13.5px;
    color: var(--texto-2);
    line-height: 1.7;
    flex-grow: 1;
}

.etiquetas-proyecto {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.etiqueta {
    font-family: var(--fuente-codigo);
    font-size: 11px;
    color: var(--color-acento);
    background: var(--color-acento-tenue);
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid rgba(99, 179, 237, 0.15);
}

.btn-ver-proyecto {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--texto-1);
    padding: 10px 0;
    border-top: 1px solid var(--borde);
    margin-top: 4px;
    transition: color 0.2s;
}

.btn-ver-proyecto:hover {
    color: var(--color-acento);
}