/* =========================
   MOCKUPS — sólo estilos del collage
   ========================= */

/* Contenedor general del mockup (lienzo base) */
.responsive-mockup {
  /* Colores del aro metálico (ni blanco ni negro) */
  --bezel-outer: #cfd5db;   /* aluminio claro */
  --bezel-mid:   #a5adb6;   /* intermedio */
  --bezel-inner: #8b949f;   /* borde interno */
  --edge-shadow: rgba(0,0,0,.45);

  /* 🧮 Escalas responsivas (más finas y menos redondeo) */
  --bz-a: clamp(1.5px, 0.45vw, 5px);
  --bz-b: calc(var(--bz-a) + clamp(1px, 0.25vw, 1.5px));
  --bz-c: calc(var(--bz-b) + clamp(1px, 0.22vw, 1.5px));

  --r: clamp(1px, 0.9vw, 10px);          /* menos redondeo base */
  --r-more: clamp(3px, 1.2vw, 12px);     /* menos redondeo tablet/phone */

  --drop-sm: clamp(8px, 2vw, 18px);
  --drop-lg: clamp(14px, 3vw, 40px);

  --base-h: clamp(8px, 1.3vw, 13px);
  --notch-h: clamp(6px, 1.3vw, 9px);

  position: relative;
  width: 100%;
  aspect-ratio: 16/9;                    /* lienzo estable */
  border-radius: 10px;
  background: radial-gradient(90% 120% at 50% -10%, #1a2436 0%, #0b111f 60%, #000 100%);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
}

/* Cada dispositivo dentro del collage */
.responsive-mockup .device {
  position: absolute;
  overflow: hidden;                      /* recorta sólo la pantalla */
  background: #1a1c1f;
  border-radius: var(--r);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);

  /* ARO METÁLICO EXTERIOR (no tapa la imagen) */
  box-shadow:
    0 0 0 var(--bz-a) var(--bezel-outer),
    0 0 0 var(--bz-b) var(--bezel-mid),
    0 0 0 var(--bz-c) var(--bezel-inner);
}

/* Imagen (captura) — sin deformar */
.responsive-mockup .device img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: top center;
  background: #fff;
}

/* =========================
   Monitor (arriba-centro) — 16:10
   ========================= */
.responsive-mockup .device.monitor {
  top: 3%;
  left: 10%;
  width: 80%;
  aspect-ratio: 16/10;
  box-shadow:
    0 0 0 var(--bz-a) var(--bezel-outer),
    0 0 0 var(--bz-b) var(--bezel-mid),
    0 0 0 var(--bz-c) var(--bezel-inner),
    0 var(--drop-lg) var(--drop-lg) var(--edge-shadow);
}

/* Base del monitor */
.responsive-mockup .device.monitor::before {
  content: "";
  position: absolute; left: 50%; bottom: calc(-1 * var(--base-h) - 8px);
  width: 34%; height: var(--base-h);
  transform: translateX(-50%);
  background: linear-gradient(#c8cdd3, #8f969e);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 calc(var(--drop-sm) * .6) var(--drop-sm) rgba(0,0,0,.4);
}

/* =========================
   Laptop (abajo-derecha) — 16:9
   ========================= */
.responsive-mockup .device.laptop {
  right: -1%;
  bottom: -2%;
  width: 57%;                         /* más pequeño */
  aspect-ratio: 16/9;
  box-shadow:
    0 0 0 var(--bz-a) var(--bezel-outer),
    0 0 0 var(--bz-b) var(--bezel-mid),
    0 0 0 var(--bz-c) var(--bezel-inner),
    0 var(--drop-sm) var(--drop-sm) rgba(0,0,0,.35);
}

/* Base del laptop */
.responsive-mockup .device.laptop::before {
  content: "";
  position: absolute; left: 50%; bottom: calc(-1 * var(--base-h));
  width: 120%; height: var(--base-h); transform: translateX(-50%);
  background: linear-gradient(#c6cbd1, #8a919a);
  border-radius: 0 0 calc(var(--r) * .85) calc(var(--r) * .85);
  box-shadow: 0 var(--drop-sm) var(--drop-sm) rgba(0,0,0,.35);
}

/* =========================
   Tablet (abajo-izquierda) — 3:4 (vertical)
   ========================= */
.responsive-mockup .device.tablet {
  left: 0%;
  bottom: 0%;
  width: 26%;                          /* más pequeña */
  aspect-ratio: 3/4;
  border-radius: var(--r-more);
  box-shadow:
    0 0 0 var(--bz-a) var(--bezel-outer),
    0 0 0 var(--bz-b) var(--bezel-mid),
    0 0 0 var(--bz-c) var(--bezel-inner),
    0 var(--drop-sm) var(--drop-sm) rgba(0,0,0,.35);
}

/* Cámara de la tablet */
.responsive-mockup .device.tablet::before {
  content:"";
  position:absolute; top:6px; left:50%;
  width:6px; height:6px; transform:translateX(-50%);
  background:#202225; border-radius:50%;
}

/* =========================
   Teléfono (encima de la tablet) — 1:2 (vertical)
   ========================= */
.responsive-mockup .device.phone {
  left: 17%;
  bottom: -6%;
  width: 14%;                         /* más pequeño */
  aspect-ratio: 1/2;
  border-radius: var(--r-more);
  box-shadow:
    0 0 0 var(--bz-a) var(--bezel-outer),
    0 0 0 var(--bz-b) var(--bezel-mid),
    0 0 0 var(--bz-c) var(--bezel-inner),
    0 var(--drop-sm) var(--drop-sm) rgba(0,0,0,.35);
}

/* Notch del teléfono */
.responsive-mockup .device.phone::before {
  content:"";
  position:absolute; top:0%; left:50%;
  width:40%; height: var(--notch-h); transform:translateX(-50%);
  background:#151618; border-bottom-left-radius:10px; border-bottom-right-radius:10px;
}

/* ===== Responsive */
@media (max-width: 768px) {
  .responsive-mockup .device.monitor { top: -2%; left: -3%; width: 80%; }
  .responsive-mockup .device.laptop { display: none; }
  .responsive-mockup .device.tablet { width: 35%; left: -13%; bottom: -26%;}
  .responsive-mockup .device.phone  { width: 21%; left: 10%; bottom: -43%; }
}