/* ==========================================================================
   bento — página de proyectos (proyectos.html)
   Figma: sábana completa 2089:43915 (valores) + sábana preview 2043:14796
   (10 proyectos y botón "Ver más proyectos"). rem = px del frame 1920 / 16.
   Hovers y comportamiento del filtro: criterio propio (no hay variantes en Figma).
   Tablet (≤991) y mobile (≤767): criterio propio.
   ========================================================================== */

body.bn-page-work { background: var(--bn-black); }          /* 2089:43915 fill #0b0b0c */

/* ---------- 01 · Encabezado · 2089:43929 ---------- */
.bn-work_head {
  max-width: var(--bn-max);
  margin-inline: auto;
  padding: 10rem 5rem 4.5rem;                                /* 160/80/72/80 */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}
.bn-work_title { max-width: 39.9375rem; }                    /* 639 (título nuevo, 2026-11-13) · 64/67.2 ls -1.92 = .bn-h2 */
.bn-work_intro {                                             /* 2089:43932 · 20/28 ls -0.2 */
  width: 32.5rem;                                            /* 520 */
  max-width: 100%;
  font-size: var(--bn-fs-20);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #8a8a8f;
}

/* ---------- 02 · Filtros · 2089:43933 ---------- */
.bn-work_filters {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bn-work_chips {
  max-width: var(--bn-max);
  margin-inline: auto;
  padding: 0 5rem 2rem;                                      /* 0/80/32/80 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;                                               /* 8 */
}
.bn-work_chip {
  padding: 0.625rem 1.125rem;                                /* 10/18 */
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--bn-white);
  font: inherit;
  font-size: var(--bn-fs-15);
  line-height: 1.09;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out;
}
.bn-work_chip:hover { border-color: rgba(255, 255, 255, 0.45); }   /* criterio propio */
.bn-work_chip.is-active {                                    /* "Filtro · Todos" activo */
  border-color: transparent;
  background: var(--bn-lime-2);                              /* #daff7b */
  color: var(--bn-black);
  font-weight: 500;
}
.bn-work_chip:focus-visible { outline: 2px solid var(--bn-lime-2); outline-offset: 2px; }

/* ---------- 03 · Grilla · 2089:43963 ---------- */
.bn-work_list {
  max-width: var(--bn-max);
  margin-inline: auto;
  padding: 4rem 5rem 6rem;                                   /* 64/80/96/80 */
}
.bn-work_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6rem 2.5rem;                                          /* 96 / 40 */
}
.bn-work_card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                                              /* 20 */
}
.bn-work_card[hidden],
.bn-work_grid:not(.is-expanded) .bn-work_card.is-more { display: none; }
.bn-work_media {
  position: relative;
  aspect-ratio: 860 / 560;
  border-radius: 0.375rem;                                   /* 6 */
  overflow: hidden;
  background: var(--bn-card);
}
.bn-work_media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); /* criterio propio */
}
.bn-work_card:hover .bn-work_media > img { transform: scale(1.03); }
.bn-work_name {                                              /* 32/34.8 ls -0.64 */
  font-size: var(--bn-fs-xl);
  line-height: 1.09;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--bn-white);
}
.bn-work_tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bn-work_tag {                                               /* 6/12 · 13/14.1 · #c9c9ce */
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--bn-fs-13);
  line-height: 1.09;
  color: #c9c9ce;
}
.bn-work_empty { color: var(--bn-gray); font-size: var(--bn-fs-18); }

/* Entrada de las cards que aparecen con "Ver más" o al filtrar */
.bn-work_card.is-in { animation: bn-work-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes bn-work-in { from { opacity: 0; transform: translateY(1.5rem); } }
@media (prefers-reduced-motion: reduce) { .bn-work_card.is-in { animation: none; } }

/* ---------- 04 · Cargar más · 2043:15078 ---------- */
.bn-work_more {
  display: flex;
  justify-content: center;
  padding: 0 var(--bn-pad-x) 10rem;                          /* bottom 160 */
}
.bn-work_more[hidden] { display: none; }
.bn-work_more-btn {                                          /* 2043:15079 · 16/28 · stroke blanco 30% */
  padding: 1rem 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--bn-white);
  font: inherit;
  font-size: var(--bn-fs-16);
  line-height: 1.09;
  cursor: pointer;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}
.bn-work_more-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }

/* ==========================================================================
   TABLET ≤991 (criterio propio)
   ========================================================================== */
@media (max-width: 991px) {
  .bn-work_head { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 6rem var(--bn-pad-x) 3rem; }
  .bn-work_chips { padding: 0 var(--bn-pad-x) 1.5rem; }
  .bn-work_list { padding: 3rem var(--bn-pad-x) 4rem; }
  .bn-work_grid { gap: 3.5rem 1.25rem; }
  .bn-work_card { gap: 1rem; }
  .bn-work_more { padding-bottom: 6rem; }
}

/* ==========================================================================
   MOBILE ≤767 (criterio propio): una columna; filtros en una fila con scroll
   ========================================================================== */
@media (max-width: 767px) {
  .bn-work_head { padding-top: 4rem; }
  .bn-work_chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .bn-work_chips::-webkit-scrollbar { display: none; }
  .bn-work_chip { flex: none; }
  .bn-work_grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .bn-work_more { padding-bottom: 4.5rem; }
}

/* link a la página de caso: cubre toda la card (casos/<slug>.html) */
.bn-work_link { position: absolute; inset: 0; z-index: 1; }
.bn-work_link:focus-visible { outline: 2px solid var(--bn-lime); outline-offset: 6px; }

/* CTA del listado: "Elevemos tu presencia online" en una línea (como en los casos) */
.bn-page-work .bn-cta_content { width: 48.625rem; }