/* ============================================================
   balanza — bloque 13 (Web móvil frente a la aplicación)
   Anatomy unlike siblings: comparación CARA A CARA. Banner de
   perfiles arriba, y dos platos (Web móvil / Aplicación nativa) con
   un fiel "vs" al centro. Sin costura: aquí los platos se nivelan.
   Animación propia: los dos platos entran INCLINADOS en sentidos
   opuestos y se NIVELAN (balanza); el fiel salta al centro.
   ============================================================ */

.balanza { padding-block: var(--aire-l); }

.balanza__cab { margin-bottom: var(--aire-m); }
.balanza__cab .folio { margin-bottom: var(--aire-s); }
.balanza__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--marfil);
}

.balanza__banner {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-mesa);
  margin-bottom: var(--aire-m);
}
.balanza__banner img { width: 100%; aspect-ratio: 24 / 7; object-fit: cover; object-position: center 30%; }

.balanza__cara {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: center;
}
.plato {
  background: linear-gradient(160deg, var(--fieltro-alto), var(--fieltro));
  border: 1px solid var(--linde);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.plato--app { border-color: rgba(40,224,140,.32); }
.plato__rotulo {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .9rem;
}
.plato--app .plato__rotulo { color: var(--esmeralda-viva); }
.plato p { color: var(--marfil-medio); font-size: var(--t-cuerpo); line-height: 1.6; }
.balanza__fiel {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-h3);
  color: var(--oro);
}

@media (max-width: 760px) {
  .balanza__cara { grid-template-columns: 1fr; }
  .balanza__fiel { justify-self: center; }
  .balanza__banner img { aspect-ratio: 16 / 9; }
}

@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .balanza__cab, .balanza__banner { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .plato--web { opacity: 0; transform: rotate(-3.5deg) translateY(12px); transition: opacity .6s ease .2s, transform .7s cubic-bezier(.3,1.2,.4,1) .2s; }
  .plato--app { opacity: 0; transform: rotate(3.5deg) translateY(-12px); transition: opacity .6s ease .2s, transform .7s cubic-bezier(.3,1.2,.4,1) .2s; }
  .balanza__fiel { opacity: 0; transform: scale(.5); transition: opacity .4s ease .5s, transform .5s cubic-bezier(.3,1.5,.5,1) .5s; }

  .balanza.en-vista .balanza__cab,
  .balanza.en-vista .balanza__banner { opacity: 1; transform: none; }
  .balanza.en-vista .plato--web,
  .balanza.en-vista .plato--app { opacity: 1; transform: rotate(0) translateY(0); }
  .balanza.en-vista .balanza__fiel { opacity: 1; transform: none; }
}