/* ============================================================
   08 · BONO
   Anatomy unlike siblings: CUPÓN sobre plancha oscura — la ÚNICA
   zona oscura del cuerpo. Sello de carbón con marco de oro
   punteado y una costura de troquel (perforación de ticket) entre
   la imagen y el texto. Capitular dorada. Destaca como premio.
   ============================================================ */

.bono {
  padding: var(--seccion-y) var(--canal);
  background: var(--papel-claro);
  border-top: 1px solid var(--filete);
}
.bono__cupon {
  position: relative;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  background: linear-gradient(158deg, var(--carbon) 0%, var(--carbon-2) 100%);
  border: 1px solid var(--oro-hondo);
  box-shadow: var(--sombra-plancha);
}
.bono__cupon::before {
  content: ""; position: absolute; inset: 0.85rem;
  border: 1px dashed rgba(212,175,55,0.38); pointer-events: none; z-index: 4;
}

.bono__media { position: relative; overflow: hidden; }
.bono__media img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }

/* costura de troquel */
.bono__texto {
  position: relative;
  padding: clamp(2rem, 4vw, 3.6rem) clamp(1.6rem, 3.5vw, 3.4rem);
  color: #e9dec8;
  border-left: 2px dashed rgba(212,175,55,0.5);
}
.bono__texto::before, .bono__texto::after {
  content: ""; position: absolute; left: -0.85rem; width: 1.6rem; height: 1.6rem;
  background: var(--papel-claro); border-radius: 50%; z-index: 5;
}
.bono__texto::before { top: -0.85rem; }
.bono__texto::after { bottom: -0.85rem; }

.bono__folio { color: var(--oro-vivo); }
.bono__folio b { color: #fff; }
.bono__titulo {
  font-size: var(--t-sub); margin: 1rem 0 1.4rem;
  background: var(--oro-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.bono__p { color: #cabd9f; line-height: 1.7; }
.bono__p::first-letter {
  float: left; font-family: "Cormorant Garamond", serif; font-weight: 700;
  font-size: 3.6em; line-height: 0.72; padding: 0.05em 0.16em 0 0; color: var(--oro-vivo);
}
.bono__cta { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; align-items: center; margin-top: 2rem; }
.bono__cta .rubrica { color: var(--oro-vivo); border-color: rgba(212,175,55,0.45); }
.bono__cta .rubrica:hover { color: #fff; border-color: var(--oro-vivo); }

@media (max-width: 1024px) {
  .bono__cupon { grid-template-columns: 1fr; }
  .bono__media img { min-height: 15rem; aspect-ratio: 16 / 9; }
  .bono__texto { border-left: 0; border-top: 2px dashed rgba(212,175,55,0.5); }
  .bono__texto::before { top: -0.85rem; left: -0.85rem; }
  .bono__texto::after { bottom: auto; top: -0.85rem; left: auto; right: -0.85rem; }
  .bono__cta { flex-direction: column; align-items: stretch; }
  .bono__cta .rubrica { justify-content: center; }
}