/* ============================================================
   12-posicionamiento.css · Díptico "Lo que vendemos / no somos"
   (#quienes-somos > .about__right). Contraste sólido↔quieto.
   ============================================================ */

.about { position: relative; }
.about__inner { position: relative; z-index: 1; }
.about .accent-motif { opacity: 0.045; }

.dyptic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.dyptic__eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: var(--space-md);
}

.dyptic__list { display: flex; flex-direction: column; gap: 12px; }
.dyptic__row { display: flex; align-items: baseline; gap: var(--space-sm); }
.dyptic__idx, .dyptic__mark {
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.dyptic__idx { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; min-width: 2.4ch; }

/* IZQ · Lo que vendemos (morado sólido, texto claro) */
.dyptic__sell {
  background: var(--vp-azul-profundo);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.dyptic__sell .dyptic__eyebrow { color: var(--vp-lavanda); }
.dyptic__sell .dyptic__idx { color: var(--vp-lavanda); }
.dyptic__sell .dyptic__val { color: var(--vp-blanco); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }

/* DER · Lo que no somos (surface + borde, tachado apagado) */
.dyptic__not {
  background: var(--vp-gris-claro);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.dyptic__not .dyptic__eyebrow { color: var(--color-ink-soft); }
.dyptic__not .dyptic__mark { color: var(--color-ink-soft); }
.dyptic__not .dyptic__val { color: var(--color-ink-soft); text-decoration: line-through; line-height: 1.3; }

/* Móvil: apila afirmación ARRIBA / negación ABAJO */
@media (max-width: 768px) {
  .dyptic { grid-template-columns: 1fr; }
}

/* Reduced motion: filas afirmativas estáticas (sin fade/slide) */
@media (prefers-reduced-motion: reduce) {
  .dyptic__row--sell.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}