/* ==========================================================
   Ingenial Web · Contenido interior (artículos, proyecto, 404)
   ========================================================== */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-lg);
}
.breadcrumbs a { color: var(--color-ink-soft); }
.breadcrumbs a:hover { color: var(--color-primary-dark); }

/* --- Página portafolio completo --- */
.page-header {
  padding-top: 8rem;
  padding-bottom: var(--space-lg);
}
.page-header h1 { margin-bottom: var(--space-sm); }
.page-header p { max-width: 560px; }

/* --- Chips de tecnología / servicios --- */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

/* --- Vista de proyecto individual --- */
.project-hero {
  padding-top: 8rem;
}
.project-hero__image {
  aspect-ratio: 21/9;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-surface-alt), var(--color-surface));
  margin-bottom: var(--space-xl);
  overflow: hidden;
}
.project-hero__image img { width: 100%; height: 100%; object-fit: cover; }

.project-detail__grid {
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}
@media (max-width: 900px) { .project-detail__grid { grid-template-columns: 1fr; } }

.project-detail__meta {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.project-detail__meta-item span:first-child {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
  margin-bottom: 0.35rem;
}
.project-detail__meta-item span:last-child { font-weight: 600; }
.project-detail__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: var(--space-sm); }
.project-detail__actions .btn { width: 100%; }

/* --- Artículo --- */
.article-header { padding-top: 8rem; max-width: 720px; margin-inline: auto; text-align: center; }
.article-header .eyebrow { justify-content: center; }
.article-header h1 { margin-block: var(--space-sm); }
.article-header__meta { font-size: 0.85rem; color: var(--color-ink-faint); }

.article-body { max-width: 680px; margin-inline: auto; }
.article-body h3 { font-size: 1.3rem; margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.article-body p { font-size: 1.05rem; margin-bottom: var(--space-md); color: var(--color-ink-soft); }

.article-cta {
  max-width: 680px;
  margin: var(--space-2xl) auto 0;
}

.articles-related {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* --- 404 --- */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg);
}
.error-page__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}