/* ==========================================================================
   Mocks reais v2 — telas fiéis do produto (dados fictícios) com recorte e
   zoom: só o trecho que prova a seção, texto do app >= 12px no desktop e
   >= 10px no celular, um destaque e uma legenda por mock. Arquivos em
   /assets/mocks-reais/v2/ (desktop `<nome>.webp`, celular `<nome>-m.webp`).
   Usado em /clientes/sistema-crm-transportadoras-logistica-armazenagem e
   /clientes/sistema-crm-locadoras-equipamentos. Prefixo: mr-
   ========================================================================== */
.mr-img { display: block; width: 100%; height: auto; }
.mr-pic { display: block; }

.mr-video { position: relative; width: 100%; overflow: hidden; border-radius: 16px; aspect-ratio: var(--mr-ar); }
.mr-video > .mr-pic,
.mr-video > .mr-pic > .mr-img,
.mr-video > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Soluções: o recorte já traz a moldura; o mock ganha mais largura no desktop */
.solucoes-b-scope .sb-eco-shot.mr-shot { overflow: visible; border: 0; border-radius: 16px; background: none; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); }
.solucoes-b-scope .sb-eco-shot.mr-shot .mr-img { border-radius: 16px; }
@media (min-width: 1100px) {
  .solucoes-b-scope .sb-eco-painel:has(.mr-shot) { grid-template-columns: minmax(0, 1fr) 612px; gap: 44px; align-items: center; }
}

/* Hero: a janela da imagem ocupa a figura inteira; no celular, recorte próprio (350x300) */
.solucoes-b-scope .sb-hero-shot.mr-hero { border: 0; border-radius: 14px; background: transparent; }

/* Desafios · transportadoras (.dz-visual, 460px de altura) */
.solucoes-b-scope .dz-visual:has(.mr-img) { padding: 14px; }
.solucoes-b-scope .dz-visual .mr-img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }

/* Desafios · locadoras (.dz-cena 4:3): o recorte já traz janela ou celular */
.lc-scope .dz-cena:has(.mr-img) { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }

@media (max-width: 767px) {
  .mr-video { aspect-ratio: var(--mr-ar-m, var(--mr-ar)); }
  .mr-video > video { display: none; }
  .solucoes-b-scope .sb-eco-shot.mr-shot { max-width: 420px; margin: 0 auto; }
  .solucoes-b-scope .sb-hero-shot.mr-hero { aspect-ratio: auto; }
  .solucoes-b-scope .sb-hero-shot.mr-hero img { width: 100%; max-width: 100%; height: auto; margin-left: 0; transform: none; }
}
@media (max-width: 520px) {
  .lc-scope .dz-cena:has(.mr-img) { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-video > video { display: none; }
}