/* VIP bonus: official event background and a responsive ticket illustration. */
.bonus-panel {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 40px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 72px;
  padding: 66px 48px;
  min-height: 540px;
  color: var(--white);
  background: var(--navy) url('assets/bonus-clinica-de-sucesso-bg.webp') center top / cover no-repeat;
  border: 1px solid #bca67670;
  border-radius: 20px;
}
.bonus-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #000a2ee6 0%, #000a2e94 46%, #000a2e05 100%);
}
.bonus-copy { min-width: 0; }
.bonus-panel .bonus-copy .eyebrow { color: var(--gold-light); font-size: .6875rem; line-height: 1.6; letter-spacing: .11em; margin-bottom: 24px; }
.bonus-copy h3 { font-size: clamp(2.25rem, 3.1vw, 2.9rem); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.bonus-copy h3 em { color: var(--gold-light); }
.bonus-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.65; color: #d2d8e7; margin-top: 24px; }
.bonus-copy strong { font-weight: 500; color: var(--white); }
.bonus-copy > .bonus-duration { margin-top: 16px; }
.bonus-copy > .bonus-audience { color: var(--gold-light); font-size: .8125rem; line-height: 1.7; margin-top: 26px; max-width: 390px; }
.bonus-audience > span { margin-inline: 4px; }
.bonus-event-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding-block: 8px; font-size: .875rem; line-height: 1.5; color: #c4ccdf; text-decoration: underline; text-decoration-color: #c4ccdf80; text-underline-offset: 5px; transition: color 160ms ease; }
.bonus-event-link > span { font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { .bonus-event-link:hover { color: var(--gold-light); } }
.bonus-ticket-scene { min-width: 0; padding-block: 48px 26px; }
.bonus-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  min-height: 254px;
  transform: rotate(-10deg);
  border-radius: 5px;
  background: #f3eee2;
  box-shadow: 0 24px 40px #00051e80, 0 1px 0 #fff6 inset;
  -webkit-mask-image: radial-gradient(circle at 0 50%, transparent 12px, #000 13px), radial-gradient(circle at 100% 50%, transparent 12px, #000 13px);
  mask-image: radial-gradient(circle at 0 50%, transparent 12px, #000 13px), radial-gradient(circle at 100% 50%, transparent 12px, #000 13px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.ticket-main { display: flex; flex-direction: column; min-width: 0; background: linear-gradient(125deg, #132450, #000a2e 78%); color: var(--white); padding: 30px 28px 20px; }
.ticket-brand { display: flex; gap: 18px; align-items: center; flex: 1; padding-bottom: 27px; }
.ticket-brand img { width: 55px; height: 55px; flex: none; }
.ticket-brand > span { font: 600 clamp(1.55rem, 2.5vw, 2.2rem)/.98 var(--sans); letter-spacing: -.04em; }
.ticket-band { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-inline: -28px; padding: 12px 28px; color: var(--navy); background: linear-gradient(110deg, #e2d7c1, #bca676); }
.ticket-band > span { font-size: .875rem; letter-spacing: .12em; }
.ticket-band > strong { font: 500 1.65rem/1 var(--sans); letter-spacing: .03em; }
.ticket-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; font-size: .5625rem; letter-spacing: .08em; line-height: 1.4; color: var(--gold-light); }
.ticket-footer strong { white-space: nowrap; font-size: .6875rem; }
.ticket-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px dashed #8f826a8c; padding: 24px 12px 18px; color: var(--navy); background: linear-gradient(125deg, #fcfaf4, #e9e2d5); }
.ticket-stub-label { font-size: .5625rem; letter-spacing: .17em; }
.ticket-stub > strong { font: 400 2.75rem/1.1 var(--serif); letter-spacing: -.04em; margin-top: 6px; }
.ticket-city { margin-top: 20px; text-align: center; font: 600 .625rem/1.5 var(--sans); letter-spacing: .06em; }
.ticket-city > span { font-weight: 400; }
.ticket-barcode { display: block; align-self: stretch; height: 36px; margin: 18px 4px 8px; background: repeating-linear-gradient(90deg, #000a2e 0 2px, transparent 2px 4px, #000a2e 4px 5px, transparent 5px 8px, #000a2e 8px 12px, transparent 12px 14px, #000a2e 14px 15px, transparent 15px 18px); }
.ticket-admission { font-size: .5rem; letter-spacing: .12em; }
.bonus-ticket-scene figcaption { color: #bac4dc; font: 400 .6875rem/1.5 var(--sans); margin-top: 64px; text-align: center; }
@media (max-width: 1100px) {
  .bonus-panel { padding: 48px 32px; gap: 32px; grid-template-columns: 1fr 1fr; }
  .bonus-ticket { grid-template-columns: minmax(0, 1fr) 94px; min-height: 238px; }
  .ticket-main { padding: 26px 20px 18px; }
  .ticket-brand { gap: 12px; }
  .ticket-brand img { width: 43px; height: 43px; }
  .ticket-band { margin-inline: -20px; padding-inline: 20px; }
  .ticket-stub { padding-inline: 8px; }
  .ticket-footer { font-size: .5rem; letter-spacing: .02em; }
}
@media (max-width: 900px) {
  .bonus-panel { grid-template-columns: 1fr; padding: 46px 38px 28px; gap: 10px; background-position: 64% top; min-height: 0; }
  .bonus-panel::before { background: linear-gradient(180deg, #000a2ea8, #000a2e38 80%); }
  .bonus-copy { max-width: 580px; }
  .bonus-copy h3 { font-size: 2.8rem; }
  .bonus-ticket-scene { width: min(490px, calc(100% - 12px)); justify-self: center; padding-top: 42px; }
  .bonus-ticket { grid-template-columns: minmax(0, 1fr) 112px; transform: rotate(-7deg); }
  .ticket-main { padding: 30px 28px 20px; }
  .ticket-brand > span { font-size: 2.1rem; }
  .ticket-brand img { width: 55px; height: 55px; }
  .ticket-brand { gap: 18px; }
  .ticket-band { margin-inline: -28px; padding-inline: 28px; }
  .ticket-footer { font-size: .5625rem; letter-spacing: .06em; }
  .bonus-ticket-scene figcaption { margin-top: 44px; }
}
@media (max-width: 560px) {
  .bonus-panel { margin-top: 44px; padding: 34px 24px 20px; gap: 10px; border-radius: 16px; background-size: auto 560px; background-position: 66% top; }
  .bonus-panel .bonus-copy .eyebrow { font-size: .625rem; margin-bottom: 20px; }
  .bonus-copy h3 { font-size: clamp(2rem, 8.7vw, 2.6rem); }
  .bonus-copy > p:not(.eyebrow) { margin-top: 20px; }
  .bonus-copy > .bonus-audience { font-size: .8125rem; margin-top: 24px; }
  .bonus-event-link { font-size: .8125rem; gap: 10px; }
  .bonus-ticket-scene { width: 100%; padding-block: 30px 10px; }
  .bonus-ticket { grid-template-columns: minmax(0, 1fr) 78px; min-height: 192px; transform: rotate(-6deg); }
  .ticket-main { padding: 23px 17px 17px; }
  .ticket-brand { gap: 10px; padding-bottom: 23px; }
  .ticket-brand img { width: 36px; height: 36px; }
  .ticket-brand > span { font-size: clamp(1.1rem, 4.4vw, 1.65rem); }
  .ticket-band { margin-inline: -17px; padding: 10px 17px; gap: 6px; }
  .ticket-band > span { font-size: .6875rem; letter-spacing: .07em; }
  .ticket-band > strong { font-size: 1.3rem; }
  .ticket-footer { flex-direction: column; align-items: flex-start; gap: 4px; font-size: .5rem; margin-top: 13px; }
  .ticket-footer strong { font-size: .625rem; }
  .ticket-stub { padding: 18px 6px 14px; }
  .ticket-stub > strong { font-size: 2.2rem; }
  .ticket-city { font-size: .5rem; letter-spacing: .02em; margin-top: 12px; }
  .ticket-barcode { height: 28px; margin: 15px 3px 7px; }
  .ticket-admission { font-size: .4375rem; }
  .bonus-ticket-scene figcaption { margin-top: 32px; font-size: .625rem; }
}
@media (max-width: 360px) {
  .bonus-panel { padding-inline: 20px; }
  .bonus-ticket { grid-template-columns: minmax(0, 1fr) 66px; }
  .ticket-main { padding-inline: 14px; }
  .ticket-brand { gap: 7px; }
  .ticket-brand img { width: 28px; height: 28px; }
  .ticket-band { margin-inline: -14px; padding-inline: 14px; }
  .ticket-band > span { font-size: .5625rem; }
}