/* El diferenciador — doble dominio, presentado como bento de 3 tiles (arquitectónico, monocromo).
   Reemplaza visualmente lo que en la maqueta de Stitch era "Metodología de Alto Rendimiento" —
   mismo copy ya aprobado del spec, sin contenido nuevo inventado. */

.diff {
  background: var(--color-ink-surface);
  color: var(--color-accent-ink);
}
.diff .section__head h2,
.diff .section__head p { color: var(--color-accent-ink); }
.diff .section__head p { color: var(--color-muted-on-dark); }

.diff__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: var(--space-lg);
}

.diff__tile {
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-accent-ink) 4%, transparent);
  border: 1px solid var(--color-rule-on-dark);
}

.diff__tile--domina { grid-column: span 2; }
.diff__tile--rentable { grid-column: span 1; }
.diff__tile--close {
  grid-column: span 3;
  display: flex;
  align-items: center;
  padding-block: var(--space-xl);
}

.diff__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-ink);
  color: var(--color-ink-surface);
  margin-bottom: var(--space-lg);
}

.diff__tile h3 {
  font-size: var(--text-2xl);
  color: var(--color-accent-ink);
  margin-bottom: var(--space-md);
}

.diff__tile p {
  color: var(--color-muted-on-dark);
  line-height: 1.6;
  max-width: 32ch;
}

.diff__close p {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent-ink);
  text-wrap: balance;
  max-width: 44ch;
  margin: 0;
}

@media (max-width: 60rem) {
  .diff__grid { grid-template-columns: 1fr; }
  .diff__tile--domina,
  .diff__tile--rentable,
  .diff__tile--close { grid-column: span 1; }
}