.card-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
}

/* El CTA siempre queda anclado al fondo de la tarjeta, sin importar cuánto
   texto tenga cada una — así los botones de una misma fila quedan alineados. */
.card > .btn,
.card > .card__link {
    margin-top: auto;
}

.card .frame {
    border-radius: var(--radius-sm);
}

.card__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--fs-2xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card__title {
    font-size: var(--fs-lg);
}

.card__summary {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
}

.card__link {
    align-self: flex-start;
}

/* Barra de progreso de campañas */
.progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: inherit;
    transform-origin: left;
    animation: progress-grow var(--duration-cinematic) var(--ease-editorial) forwards;
}

@keyframes progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar__fill {
        animation: none;
    }
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-2xs);
    color: var(--color-text-muted);
}

.tag {
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(10, 31, 137, 0.08);
    color: var(--color-primary);
}