/* ============================================================
   20-nichos.css · Restyle de Nichos a galería image-forward con
   overlay. El label se superpone al borde inferior de la imagen
   vía apilado por celda de grid (CERO markup: solo placement CSS).
   Las <picture>/srcset/.img-grade NO se tocan (cover + velo ya
   existen). Base en 10-media.css — NO se toca. El reveal cuelga
   del observer existente. Lavanda SOLO sobre el scrim oscuro.
   ============================================================ */

/* ── Eyebrow real "Nichos" → mono ejecutivo ── */
.nichos .section__eyebrow {
  font-family: var(--font-mono);
  color: var(--vp-azul-ejecutivo);
}

/* ── Counter para el índice 01–03 ── */
.nichos__grid { counter-reset: nicho; }

/* ── Tarjeta: grid de 2 filas; media y label comparten la celda 1/1 ── */
.nicho-card {
  display: grid;
  grid-template-rows: auto auto;
  counter-increment: nicho;
}

.nicho-card__media { grid-area: 1 / 1; }

/* ── Label = caption bar superpuesta al borde inferior de la imagen ── */
.nicho-card__label {
  grid-area: 1 / 1;
  align-self: end;               /* ancla al fondo de la celda (= fondo de la imagen) */
  position: relative;
  z-index: 1;                    /* sobre el velo .img-grade::after */
  margin: 0;                     /* override del margin-top base */
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  color: var(--vp-blanco);       /* nombre del sector en blanco (override del ink) */
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* scrim de legibilidad (tratamiento de imagen), layered sobre el velo */
  background: linear-gradient(to top,
    rgba(35, 28, 60, 0.88) 0%,
    rgba(35, 28, 60, 0.55) 45%,
    rgba(35, 28, 60, 0) 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);  /* coincide con las esquinas de la media */
}

/* Índice mono 01–03 en lavanda clara, sobre el scrim oscuro */
.nicho-card__label::before {
  content: counter(nicho, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vp-lavanda);
  flex-shrink: 0;
}

/* ── Descriptor: debajo de la imagen, ink-soft sobre blanco ── */
.nicho-card__sub {
  grid-row: 2;
  margin-top: var(--space-sm);
}