/* Contenedor genérico */
.container {
  width: min(1200px, 92%);
  margin-inline: auto;
}

/* Página de portafolios */
.portfolio-page { padding: 56px 0; }

.portfolio-title {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  text-align: center;
  color: #0E2A47;
  margin: 34px 0 22px;
}

/* Grid principal */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 14px;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f5f9;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.portfolio-item:hover img { transform: scale(1.06); }

/* Spans opcionales (se asignan por PHP según orientación) */
.portfolio-item.wide { grid-column: span 2; }
.portfolio-item.tall { grid-row: span 2; }

/* Responsive */
@media (max-width: 1024px) {
  .portfolio-grid { grid-auto-rows: 200px; }
}
@media (max-width: 768px) {
  .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-rows: 160px; }
  .portfolio-item.wide, .portfolio-item.tall { grid-column: span 1; grid-row: span 1; } /* no spans en móvil */
}
@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; gap: 10px; }
}