/* «Backpack en todos sus equipos»: PC, tablet y celular sobre la misma superficie.
   Cada equipo flota a su ritmo (`translate`) y se inclina en 3D (`transform`); con el mouse encima
   se endereza. Los RADIOS van en cqw (porcentaje del ancho de CADA equipo) para que la proporción
   sea la de un equipo real a cualquier tamaño: celular ~12 %, tablet ~3,6 %, monitor ~1 %. En px,
   el celular chico de la vista móvil quedaba casi redondo. */

.devices-section { overflow: hidden; }
.devices-section::before {
  content: ''; position: absolute; left: 50%; top: 58%; width: 1100px; height: 700px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
.devices-section__quilt {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 60%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 60%, #000 20%, transparent 75%);
}
.devices-section .container { position: relative; }

.scene { position: relative; width: 100%; max-width: 1080px; margin: 56px auto 0; aspect-ratio: 1080 / 660; perspective: 1800px; }
@media (max-width: 859px) { .scene { margin-top: 32px; aspect-ratio: 1080 / 900; } }

.device-float { position: absolute; container-type: inline-size; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.device-float--pc { left: 19%; top: 0; width: 62%; z-index: 1; animation-duration: 7s; }
.device-float--tablet { left: 1%; bottom: 5%; width: 44%; z-index: 2; animation-delay: -2s; }
.device-float--phone { right: 4%; bottom: 2%; width: 15%; z-index: 3; animation-duration: 5.5s; animation-delay: -3.5s; }
@media (max-width: 859px) {
  .device-float--pc { left: 10%; width: 80%; }
  .device-float--tablet { left: 0; bottom: 6%; width: 58%; }
  .device-float--phone { right: 1%; width: 24%; }
}

.device { position: relative; transform: var(--tilt); transform-style: preserve-3d; transition: transform .7s var(--ease-out); }
@media (hover: hover) { .device:hover { transform: var(--tilt-hover); } }
.device__screen { position: relative; width: 100%; overflow: hidden; background: var(--surface-2); }
.device__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, var(--glare) 0%, transparent 40%); }

/* Las dos capturas apiladas: el tema decide cuál se ve, y al cambiarlo se funden. */
.shot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity .8s ease; }
.shot--night { opacity: 0; }
:root[data-theme="dark"] .shot--day { opacity: 0; }
:root[data-theme="dark"] .shot--night { opacity: 1; }
.shot-placeholder {
  position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; padding: 4px;
  border: 1.5px dashed var(--border); border-radius: 6px; color: var(--muted); text-align: center;
  font-size: clamp(11px, 4cqw, 14px); font-weight: 600;
}

/* PC: monitor con mentón (el logo), cuello y base. Pantalla 24:13, como las capturas de la app
   (la ventana maximizada en 1920×1080 menos la barra de tareas). */
.device--pc { --tilt: rotateX(4deg); --tilt-hover: rotateX(0deg) translateY(-4px); display: flex; flex-direction: column; align-items: center; }
.device--pc .device__bezel {
  width: 100%; padding: 1.2% 1.2% 0; border-radius: 1cqw; background: var(--device);
  box-shadow: var(--device-shadow), inset 0 0 0 1px var(--device-edge);
}
.device--pc .device__screen { aspect-ratio: 24 / 13; border-radius: .3cqw; }
.device__chin { display: flex; align-items: center; justify-content: center; height: 4.2cqw; }
.device__chin img { height: 62%; width: auto; opacity: .9; }
.device__neck { width: 11%; height: 5cqw; background: linear-gradient(90deg, var(--device), var(--device-light), var(--device)); }
.device__base { width: 30%; height: 10px; border-radius: 10px 10px 4px 4px; background: var(--device); box-shadow: 0 10px 18px -8px var(--floor); }

/* Tablet apaisada (5:3, como las capturas de la app). */
.device--tablet {
  --tilt: rotateY(16deg) rotateX(6deg) rotateZ(-3deg);
  --tilt-hover: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(-8px) scale(1.03);
  padding: 2.4%; border-radius: 3.6cqw; background: var(--device);
  box-shadow: var(--device-shadow), inset 0 0 0 1px var(--device-edge);
}
.device--tablet .device__screen { aspect-ratio: 5 / 3; border-radius: 1.4cqw; }
.device__camera { position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--device-light); }

/* Celular Android (9:20, como las capturas de la app; con su cámara perforada en la barra de
   estado, que en la captura está libre en el centro). */
.device--phone {
  --tilt: rotateY(-18deg) rotateX(4deg) rotateZ(4deg);
  --tilt-hover: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateY(-8px) scale(1.04);
  padding: 4%; border-radius: 12cqw; background: var(--device);
  box-shadow: var(--device-shadow), inset 0 0 0 1px var(--device-edge);
}
.device--phone .device__screen { aspect-ratio: 9 / 20; border-radius: 8.5cqw; }
.device--phone .shot-placeholder { inset: 8px; border-radius: 14px; }
.device__punch { position: absolute; top: 1.2%; left: 50%; width: 5.5%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #0d0b0a; box-shadow: 0 0 0 1px var(--device-edge); }

.scene__floor {
  position: absolute; left: 4%; right: 4%; bottom: -3%; height: 9%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--floor), transparent); filter: blur(8px);
}