/* ================= FOTOGRAFIAS REAIS ================= */
@keyframes photoIn { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }

.stage.has-photo { background: #0d0e11; }
.stage.has-photo::after { display: none; }
.stage .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stage.has-photo::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, transparent 32%, transparent 72%, rgba(0,0,0,.3) 100%); }
.stage .status-band { z-index: 3; }
.is-sold .photo { filter: grayscale(.85) brightness(.55); }
.cat .stage.has-photo { margin: 0 0 8px; border-radius: 6px; }
.cat .stage.has-photo::before { background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35)); }
.cat:hover .stage .photo { transform: scale(1.04); }
.cat .stage .photo { transition: transform .6s cubic-bezier(.2,.7,.2,1); }

/* destaque */
.hero-stage.has-photo { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.hero-stage.has-photo::before { display: none; }
.hero-stage .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-stage.has-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(11,12,15,.35) 22%, transparent 45%), linear-gradient(0deg, rgba(11,12,15,.75) 0%, transparent 35%); }
.hero-tag { position: absolute; z-index: 2; right: 0; bottom: 0; background: var(--red); color: #fff; padding: 10px 16px; font: 700 12px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
:root[data-mode="pesados"] .hero-tag { background: var(--blue); }
.hero.play .hero-stage > .photo { animation: photoIn 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero.play .hero-tag { animation: slabIn .6s .7s cubic-bezier(.65,0,.35,1) both; }

/* formulários: escolha de categoria com foto */
.seg button .photo { width: 100%; height: 72px; object-fit: cover; border-radius: 4px; display: block; opacity: .7; transition: opacity .2s; }
.seg button.on .photo, .seg button:hover .photo { opacity: 1; }
@media (max-width: 760px) {
  .hero-stage.has-photo { aspect-ratio: 16 / 11; }
  .hero-stage.has-photo::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 45%); }
}