body { margin: 0; }
/* Layout do quase aprovado (Mariana): um cartão com a foto e o conteúdo, um só ecrã */
.up-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 12px; }
.pg .up-wrap { background: radial-gradient(50% 45% at 50% 30%, rgba(238,157,51,.16), transparent 75%); }
.up-grid { position: relative; width: 100%; max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px -30px #000; }
.up-photo { position: relative; height: 132px; overflow: hidden; background: var(--bg); }
.up-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 8%; }
.up-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,15,0) 55%, var(--surface) 100%); }
.up-content { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.q__t { font: 700 30px/1.02 var(--font-display); letter-spacing: -.03em; margin: 0; }
.q__p { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.q__p strong { color: var(--ink); }
.up-vip { position: relative; width: 100%; margin-top: 2px; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: radial-gradient(70% 110% at 100% 0, rgba(233,196,106,.20), transparent 72%), linear-gradient(180deg, #1f1a10, #14110b 70%); box-shadow: inset 0 0 0 2px rgba(233,196,106,.6), 0 0 40px rgba(233,196,106,.10); }
.up-vip__top { display: flex; justify-content: flex-end; }
.up-vip__price { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 500 14px/1 var(--font-body); color: var(--ink-muted); white-space: nowrap; }
.up-vip__price s { text-decoration-thickness: 2px; text-decoration-color: var(--ember-burnt); }
.up-vip__price b { font: 400 36px/1 var(--font-punch); text-transform: uppercase; }
.up-vip .route { gap: 8px; }
.up-vip .route::before { top: 9px; bottom: 9px; left: 7px; width: 3px; }
.up-vip .route li { font-size: 14px; line-height: 20px; padding-left: 28px; color: var(--ink); }
.up-vip .route li::before { width: 17px; height: 17px; top: 1px; box-shadow: inset 0 0 0 3px var(--gold-2); }
.up-free { width: 100%; padding-top: 2px; }
.btn--ghost { box-shadow: inset 0 0 0 2px rgba(238,157,51,.75); }
@media (max-width: 899px) { .up-wrap { align-items: flex-start; } .up-photo { height: 170px; } }
@media (max-width: 899px) and (max-height: 760px) { .up-photo { height: 92px; } .q__t { font-size: 26px; } .up-content { gap: 6px; } .q__p { font-size: 13px; line-height: 18px; } .up-vip { padding: 12px; gap: 8px; } .btn { min-height: 48px; } }
@media (min-width: 900px) {
  .up-wrap { padding: 40px; }
  .up-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 52px; }
  .up-photo { height: auto; min-height: 640px; }
  .up-photo img { object-position: 46% 20%; }
  .up-photo::after { background: linear-gradient(90deg, rgba(20,19,15,0) 70%, var(--surface) 100%), linear-gradient(180deg, rgba(20,19,15,0) 72%, var(--surface) 100%); }
  .up-content { padding: 48px 52px 40px 0; text-align: left; align-items: flex-start; gap: 16px; }
  .q__t { font-size: 60px; }
  .q__p { font-size: 18px; line-height: 28px; }
  .up-vip { padding: 24px; gap: 16px; text-align: left; }
  .up-vip__price { font-size: 17px; }
  .up-vip__price b { font-size: 52px; }
  .up-vip .route { gap: 12px; }
  .up-vip .route li { font-size: 17px; line-height: 25px; padding-left: 36px; }
  .up-vip .route li::before { width: 22px; height: 22px; top: 2px; box-shadow: inset 0 0 0 4px var(--gold-2); }
  .up-vip .route::before { left: 9px; width: 4px; }
}