/* ==========================================================================
   "Formatos que producimos": fondo de la sección, cuadrícula y textos de cada formato.
   ========================================================================== */

/* Cuadrícula de formatos */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  gap: clamp(28px,3vw,40px) clamp(16px,2vw,28px);
  align-items: start;
}

.work {
  margin: 0;
}

.w-169 {
  grid-column: span 9;
}

.w-916 {
  grid-column: span 3;
}

.w-11 {
  grid-column: span 4;
}

.w-45 {
  grid-column: span 3;
}

.w-32 {
  grid-column: span 5;
}

.art {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.w-169 .art {
  aspect-ratio: 16/9;
}

.w-916 .art {
  aspect-ratio: 9/16;
}

.w-11 .art {
  aspect-ratio: 1;
}

.w-45 .art {
  aspect-ratio: 4/5;
}

.w-32 .art {
  aspect-ratio: 3/2;
}

.art img, .art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fmt {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  padding: .2rem .5rem;
  z-index: 3;
}

.work figcaption {
  margin-top: 14px;
}

.work figcaption strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.25;
}

.work figcaption span {
  display: block;
  color: var(--muted);
  font-size: .92rem;
  margin-top: 6px;
  font-weight: 600;
}

.work figcaption p {
  font-size: 1rem;
  margin-top: 6px;
  max-width: 46ch;
}

/* Fondo celeste de la sección (igual en modo claro y oscuro) */
#formatos {
  --bg: #FFFFFF;
  --ink: #000000;
  --muted: #001A1E;
  --line: rgba(0,0,0,.16);
  --teal: #019EB5;
  background: var(--sect);
  color: #000000;
}

#formatos ::selection {
  background: #000000;
  color: #FFFFFF;
}

#formatos .fmt {
  background: #FFFFFF;
  color: #000000;
}

#formatos .art-c .fmt, #formatos .art-b .fmt, #formatos .art-d .fmt {
  background: #000000;
  color: #FFFFFF;
}

@media (max-width:980px) {
  .w-169 {
    grid-column: span 12;
  }
  .w-916 {
    grid-column: span 5;
  }
  .w-11 {
    grid-column: span 7;
  }
  .w-45 {
    grid-column: span 5;
  }
  .w-32 {
    grid-column: span 7;
  }
}

@media (max-width:560px) {
  .w-916, .w-11, .w-45, .w-32 {
    grid-column: span 12;
  }
  .w-916 .art {
    max-width: 70%;
  }
}