/* custom styles here */

/* Marco mockup oscuro con gradiente negro → morado (#7B2CF6) */
.mockup-frame {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;           /* ≈ rounded-xl */
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  background: linear-gradient(180deg, #000000 20%, #7B2CF6 110%);
  aspect-ratio: 16/9;               /* 1280x720 look */
  display: grid;
  place-items: center;
}

/* Imagen centrada dentro del mockup */
.mockup-frame > img {
  width: 92%;
  height: auto;
  max-height: 82%;
  object-fit: contain;
  filter: contrast(1.05) saturate(1.05);
}

/* Sombra sutil debajo de la captura */
.mockup-frame::before {
  content: "";
  position: absolute;
  inset: 8% 5% auto 5%;
  height: 84%;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Logo M327 en esquina inferior derecha (10% ancho, 40% opacidad) */
.mockup-brand {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 10%;
  min-width: 80px;           /* no más pequeño que 80px */
  opacity: 0.4;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.mockup-brand img {
  width: 100%;
  height: auto;
  display: block;
}