/* ============================================================
   SECTION: Brand Identity (servicio Branding)
   Horizontal card showcase — same rhythm as Web cases.
   ============================================================ */

.brand-identity { background: var(--color-bg-soft); }
.brand-identity__head { margin-bottom: var(--space-6); }
.brand-identity__head .h2 { max-width: 22ch; }

.brand-identity__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(230px, 22vw, 320px);
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.brand-identity__grid::-webkit-scrollbar { display: none; }

.bi-card {
  position: relative;
  scroll-snap-align: start;
  transition: transform var(--dur) var(--ease-out);
}
.bi-card:hover { transform: translateY(-6px); }
.bi-card__link { position: absolute; inset: 0; z-index: 3; }

.bi-card__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}
.bi-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.9);
  transition: filter var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.bi-card:hover .bi-card__media img {
  filter: saturate(1) brightness(1);
  transform: scale(1.05);
}

.bi-card__caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--space-2);
}
.bi-card__title {
  font-size: 1.0625rem;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.bi-card:hover .bi-card__title { color: var(--color-accent); }