/* ========== IMPACTO ========== */
.categories-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); margin-bottom: var(--spacing-2xl); }
.category-pill { padding: var(--spacing-sm) var(--spacing-lg); background-color: var(--color-bg-sand); color: var(--color-primary); border-radius: 50px; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: default; transition: var(--transition); }
.category-pill:hover { background-color: var(--color-primary); color: var(--color-white); }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); }

.project-card { background-color: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid #f0f0f0; display: flex; flex-direction: column; }
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }

.project-card__image { height: 220px; width: 100%; overflow: hidden; position: relative; background-color: #eee; display: flex; align-items: center; justify-content: center; }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.project-card:hover .project-card__image img { transform: scale(1.05); }

.project-card__content { padding: var(--spacing-lg); display: flex; flex-direction: column; flex: 1; }
.project-card__tag { font-size: 0.75rem; text-transform: uppercase; color: var(--color-secondary); font-weight: 600; margin-bottom: var(--spacing-xs); }
.project-card__title { font-size: 1.25rem; margin-bottom: var(--spacing-sm); color: var(--color-text-primary); }
.project-card__excerpt { color: var(--color-text-secondary); margin-bottom: var(--spacing-md); flex: 1; font-size: 0.9375rem; }

/* MODAL */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-overlay); z-index: 2000; display: none; align-items: center; justify-content: center; padding: var(--spacing-md); opacity: 0; transition: opacity 0.3s ease; }
.modal.active { display: flex; opacity: 1; }
.modal__content { background-color: var(--color-white); width: 100%; max-width: 900px; max-height: 90vh; border-radius: var(--radius-lg); overflow-y: auto; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.2); display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .modal__content { grid-template-columns: 1fr 1fr; } }

.modal__close { position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; background-color: rgba(0,0,0,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: var(--transition); font-weight: bold; }
.modal__close:hover { background-color: var(--color-alert); color: white; }

.modal__media { background-color: #f5f5f5; height: 300px; position: relative; }
@media (min-width: 768px) { .modal__media { height: auto; min-height: 500px; } }
.modal__img { width: 100%; height: 100%; object-fit: cover; }

.modal__details { padding: var(--spacing-xl); display: flex; flex-direction: column; }
.modal__tag { color: var(--color-secondary); font-weight: 600; margin-bottom: var(--spacing-xs); text-transform: uppercase; font-size: 0.875rem; }
.modal__title { font-size: 2rem; margin-bottom: var(--spacing-md); line-height: 1.1; }
.modal__text { color: var(--color-text-secondary); margin-bottom: var(--spacing-lg); line-height: 1.7; overflow-y: auto; }
.modal__actions { margin-top: auto; }