/* ==========================================================================
   Renddi · Bloque "Señales" (rd-signals)
   Situaciones en las que la inversión digital no rinde. Cada tarjeta lleva
   un mini mosaico 2×2: al aparecer, uno de sus píxeles se apaga.
   Requiere: tokens.css, base.css · JS opcional: js/reveal.js
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rejilla: 1 columna móvil · 2 tablet · 3 escritorio
   -------------------------------------------------------------------------- */
.rd-signals__list {
  display: grid;
  gap: var(--rd-space-4);
}

@media (min-width: 40rem) {
  .rd-signals__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .rd-signals__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rd-space-5);
  }
}

/* --------------------------------------------------------------------------
   2. Tarjeta
   -------------------------------------------------------------------------- */
.rd-signals__item {
  display: flex;
  flex-direction: column;
  gap: var(--rd-space-5);
  padding: var(--rd-space-5);
  background-color: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-m);
}

.rd-signals__text {
  color: var(--rd-text-muted-on-dark);
  font-size: var(--rd-text-m);
  line-height: var(--rd-leading-snug);
}

.rd-signals__text strong {
  color: var(--rd-text);
  font-weight: var(--rd-weight-bold);
}

/* --------------------------------------------------------------------------
   3. Mini mosaico 2×2 (decorativo, aria-hidden)
   Colores por tarjeta con --c1, --c2, --c3; el cuarto píxel se apaga.
   -------------------------------------------------------------------------- */
.rd-signals__icon {
  display: grid;
  grid-template-columns: repeat(2, 0.75rem);
  gap: 3px;
}

.rd-signals__icon i {
  aspect-ratio: 1;
  border-radius: 2px;
}

.rd-signals__icon i:nth-child(1) { background-color: var(--c1); }
.rd-signals__icon i:nth-child(2) { background-color: var(--c2); }
.rd-signals__icon i:nth-child(3) { background-color: var(--c3); }

/* Píxel que "no rinde": apagado (sin JS ya aparece así) */
.rd-signals__icon i:nth-child(4) {
  box-shadow: inset 0 0 0 1px rgba(184, 199, 201, 0.4);
}

/* Con JS: se enciende y se apaga cuando la tarjeta entra en pantalla */
.rd-js .rd-signals__icon i:nth-child(4) {
  background-color: var(--c4);
  transition: background-color 600ms ease;
  transition-delay: calc(700ms + var(--rd-i, 0) * 120ms);
}

.rd-js .rd-is-visible .rd-signals__icon i:nth-child(4) {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   4. Cierre con CTA
   -------------------------------------------------------------------------- */
.rd-signals__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rd-space-5);
  margin-top: var(--rd-space-7);
  padding-top: var(--rd-space-6);
  border-top: 1px solid var(--rd-border);
}

.rd-signals__close-text {
  font-size: var(--rd-text-l);
  font-weight: var(--rd-weight-medium);
  line-height: var(--rd-leading-snug);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   5. Enlace con el hero: su fundido inferior ya aporta aire
   -------------------------------------------------------------------------- */
.rd-hero + .rd-signals {
  padding-top: var(--rd-space-6);
}