/* ============================================================
   11 · CUOTAS ("La importancia de comparar cuotas")
   Anatomy unlike siblings: texto a la izquierda y, a la derecha,
   un racimo de fichas-cuota tiradas a mano (una alta ↑, otra
   baja ↓), torcidas y superpuestas, con borde tosco y sombra
   dura. Dos párrafos textuales del PDF.
   ============================================================ */

.cuotas {
  padding: var(--tramo) var(--calle);
  background: var(--cal-honda);
}
.cuotas__caja {
  width: var(--cancha); max-width: 1300px; margin-inline: auto;
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
.cuotas__volante { margin-bottom: 1.2rem; }
.cuotas__titulo { font-size: var(--t-titular); margin-bottom: 1.4rem; max-width: 17ch; }
.cuotas__p { color: var(--tinta-media); max-width: 60ch; margin-bottom: 1.1rem; }
.cuotas__p .marca {
  background: linear-gradient(transparent 58%, rgba(22,196,109,0.5) 58%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.08em;
  color: var(--tinta); font-weight: 700;
}
.cuotas__cta { margin-top: 0.6rem; }

/* racimo de fichas-cuota tiradas a mano */
.cuotas__racimo { position: relative; min-height: 16rem; }
.cuotas__chip {
  position: absolute;
  background: var(--cal-claro); border: 3px solid var(--tinta);
  border-radius: 16px 6px 15px 7px; padding: 1rem 1.3rem;
  box-shadow: 6px 6px 0 var(--cesped); text-align: center;
  display: grid; gap: 0.2rem; justify-items: center;
}
.cuotas__chip b {
  font-family: "Mulish", sans-serif; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-tenue);
}
.cuotas__chip em {
  font-family: "Gabarito", sans-serif; font-style: normal; font-weight: 900;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--tinta); line-height: 1;
}
.cuotas__chip--alta { left: 4%; top: 1rem; transform: rotate(-6deg); z-index: 2; }
.cuotas__chip--alta em { color: var(--cesped-hondo); }
.cuotas__chip--baja { right: 6%; top: 7.5rem; transform: rotate(5deg); box-shadow: -6px 6px 0 var(--tinta); z-index: 1; }

@media (max-width: 1024px) {
  .cuotas__caja { grid-template-columns: 1fr; gap: 2rem; }
  .cuotas__titulo, .cuotas__p { max-width: none; }
  .cuotas__racimo { min-height: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
  .cuotas__chip { position: static; transform: none !important; box-shadow: 5px 5px 0 var(--cesped); }
}