/* ============================================================
   bono — bloque 9 (Bono de bienvenida)
   Anatomy unlike siblings: punto de conversión = un CUPÓN
   perforado, ligeramente ladeado (colocado "a mano"), sobre un
   fondo de casino atenuado. Talón izquierdo con el rótulo en
   vertical; cuerpo con el texto y el CTA.
   Animación propia: el cupón ASIENTA como un sello (escala+giro) y
   un destello dorado diagonal lo cruza una sola vez.
   ============================================================ */

.bono {
  position: relative;
  padding-block: var(--aire-xl);
  overflow: hidden;
}
.bono__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bono__fondo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .22;
  filter: saturate(1.1);
}
.bono__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 90% at 50% 50%, transparent, var(--fieltro-hondo) 78%),
    linear-gradient(180deg, var(--fieltro-hondo), transparent 30%, transparent 70%, var(--fieltro-hondo));
}

.bono__lienzo {
  position: relative;
  z-index: 1;
  max-width: 58rem;
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* — el cupón — */
.cupon {
  position: relative;
  display: grid;
  grid-template-columns: clamp(3.4rem, 8vw, 5rem) 1fr;
  background: linear-gradient(155deg, var(--fieltro-alto), var(--fieltro));
  border: 1px solid var(--linde);
  border-radius: var(--radio);
  transform: rotate(-1.4deg);          /* colocado a mano */
  box-shadow: var(--sombra-mesa);
  overflow: hidden;
}
/* talón perforado a la izquierda */
.cupon__talon {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(var(--esmeralda-honda), var(--fieltro-alto));
  border-right: 2px dashed var(--oro-tenue);
}
.cupon__talon span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--marfil);
}
/* muescas de la perforación (arriba y abajo del dashed) */
.cupon__talon::before,
.cupon__talon::after {
  content: "";
  position: absolute;
  right: -7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--fieltro-hondo);
}
.cupon__talon::before { top: -7px; }
.cupon__talon::after  { bottom: -7px; }

.cupon__cuerpo {
  padding: clamp(1.6rem, 4vw, 3rem);
}
.cupon__eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: var(--aire-s);
}
.cupon__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.15;
  color: var(--marfil);
  margin-bottom: var(--aire-s);
}
.cupon__texto {
  color: var(--marfil-medio);
  font-size: var(--t-cuerpo);
  line-height: 1.62;
  margin-bottom: var(--aire-m);
}
.cupon__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aire-s);
}
.cupon__nota {
  font-size: var(--t-micro);
  color: var(--marfil-tenue);
  max-width: 26ch;
}

/* destello diagonal */
.cupon__brillo {
  position: absolute;
  top: -60%; left: -30%;
  width: 40%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(243,239,226,.18), rgba(200,162,74,.32), transparent);
  transform: translateX(-260%) rotate(8deg);
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 620px) {
  .cupon { grid-template-columns: 1fr; transform: none; }
  .cupon__talon { display: none; }
}

/* — animación propia: sello + destello — */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .cupon {
    opacity: 0;
    transform: rotate(-1.4deg) scale(1.07);
    transition: opacity .5s ease, transform .6s cubic-bezier(.3,1.3,.5,1);
  }
  .bono.en-vista .cupon { opacity: 1; transform: rotate(-1.4deg) scale(1); }
  .bono.en-vista .cupon__brillo { animation: destello 1.4s ease .55s 1 forwards; }

  @keyframes destello {
    0%   { transform: translateX(-260%) rotate(8deg); }
    100% { transform: translateX(520%) rotate(8deg); }
  }
}