/* ============================================================
   09 · BONO ("Bono de bienvenida")
   Anatomy unlike siblings: cupón con costura perforada entre foto
   (izq) y texto (der), con muescas circulares en el doblez. Punto
   de conversión destacado. Un párrafo textual del PDF.
   ============================================================ */

.bono {
  padding: var(--tramo) var(--calle);
  background: var(--cal-honda);
}
.bono__cupon {
  width: var(--cancha); max-width: 1080px; margin-inline: auto;
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  background: var(--cal-claro); border: 1px solid var(--linea-honda);
  border-radius: 22px; overflow: hidden; box-shadow: var(--sombra-plano);
  position: relative;
}
.bono__media { position: relative; min-height: 100%; }
.bono__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bono__cuerpo {
  position: relative;
  padding: clamp(1.8rem, 3.5vw, 3.2rem);
  border-left: 2px dashed var(--linea-honda);   /* costura del cupón */
}
/* muescas del doblez */
.bono__cuerpo::before, .bono__cuerpo::after {
  content: ""; position: absolute; left: -11px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--cal-honda);
}
.bono__cuerpo::before { top: -11px; }
.bono__cuerpo::after { bottom: -11px; }

.bono__sello {
  display: inline-flex; align-items: center; gap: 0.5ch;
  font-family: "Mulish", sans-serif; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cesped);
  margin-bottom: 1rem;
}
.bono__sello::before { content: ""; width: 1.6rem; height: 2px; background: var(--cesped); }
.bono__titulo { font-size: var(--t-titular); margin-bottom: 1.2rem; }
.bono__p { color: var(--tinta-media); margin-bottom: 1.8rem; }
.bono__cta { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }

@media (max-width: 1024px) {
  .bono__cupon { grid-template-columns: 1fr; }
  .bono__media { min-height: 220px; }
  .bono__cuerpo { border-left: 0; border-top: 2px dashed var(--linea-honda); }
  .bono__cuerpo::before { top: -11px; left: auto; right: 28px; }
  .bono__cuerpo::after { bottom: auto; top: -11px; left: 28px; }
}