/* =============================================================
   FOR-WHOM — Para quién (sección sobre el cliente ideal)
   WordPress: template-parts/sections/for-whom.php
   ============================================================= */

/* ── Grid de cards ───────────────────────────────────────────── */
.for-whom__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.125rem; /* 2px */
}

.for-whom__grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.for-whom__grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ── Card individual ─────────────────────────────────────────── */
.for-whom-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.25rem 2rem;
  background-color: var(--blk-surface, var(--c-dark-2));
  border-radius: var(--r-sm);
  transition: filter var(--t);
}

.for-whom-card:hover {
  filter: brightness(1.08);
}

/* ── Ícono ───────────────────────────────────────────────────── */
.for-whom-card__icon {
  display: block;
  color: var(--blk-accent, var(--c-accent));
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.for-whom-card__icon svg {
  width: 28px;
  height: 28px;
}

/* ── Título ──────────────────────────────────────────────────── */
.for-whom-card__title {
  font-family: var(--f-heading);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--blk-text, var(--c-white));
}

/* ── Descripción ─────────────────────────────────────────────── */
.for-whom-card__desc {
  font-family: var(--f-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--blk-text, var(--c-text-3));
}

/* ── Esquemas de color ───────────────────────────────────────── */

/* Dark */
.for-whom.is-style-dark {
  background-color: var(--dark-bg, #0D0D0D);
  color: var(--dark-text, #FFFFFF);
}
.for-whom.is-style-dark .section-title       { color: var(--dark-text, #FFFFFF); }
.for-whom.is-style-dark .eyebrow             { color: var(--dark-accent, #2EA3F1); }
.for-whom.is-style-dark .eyebrow__dot,
.for-whom.is-style-dark .eyebrow__line       { background-color: var(--dark-accent, #2EA3F1); }
.for-whom.is-style-dark .for-whom-card       { background-color: #1A1A1A; }
.for-whom.is-style-dark .for-whom-card__icon { color: var(--dark-accent, #2EA3F1); }
.for-whom.is-style-dark .for-whom-card__title { color: #FFFFFF; }
.for-whom.is-style-dark .for-whom-card__desc  { color: #94A3B8; }

/* Gray */
.for-whom.is-style-gray {
  background-color: var(--gray-bg, #F4F4F4);
  color: var(--gray-text, #0D0D0D);
}
.for-whom.is-style-gray .section-title       { color: var(--gray-text, #0D0D0D); }
.for-whom.is-style-gray .eyebrow             { color: var(--gray-accent, #0D0D0D); }
.for-whom.is-style-gray .eyebrow__dot,
.for-whom.is-style-gray .eyebrow__line       { background-color: var(--gray-accent, #0D0D0D); }
.for-whom.is-style-gray .for-whom-card       { background-color: #FFFFFF; }
.for-whom.is-style-gray .for-whom-card__icon { color: var(--c-accent, #2EA3F1); }
.for-whom.is-style-gray .for-whom-card__title { color: #0D0D0D; }
.for-whom.is-style-gray .for-whom-card__desc  { color: #64748B; }

/* Light */
.for-whom.is-style-light {
  background-color: var(--light-bg, #FFFFFF);
  color: var(--light-text, #0D0D0D);
}
.for-whom.is-style-light .section-title       { color: var(--light-text, #0D0D0D); }
.for-whom.is-style-light .eyebrow             { color: var(--light-accent, #0D0D0D); }
.for-whom.is-style-light .eyebrow__dot,
.for-whom.is-style-light .eyebrow__line       { background-color: var(--light-accent, #0D0D0D); }
.for-whom.is-style-light .for-whom-card       { background-color: #F4F4F4; }
.for-whom.is-style-light .for-whom-card__icon { color: var(--c-accent, #2EA3F1); }
.for-whom.is-style-light .for-whom-card__title { color: #0D0D0D; }
.for-whom.is-style-light .for-whom-card__desc  { color: #64748B; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .for-whom__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .for-whom-card {
    padding: 1.75rem 1.5rem;
  }

  .for-whom__grid {
    max-width: 100%;
  }
}