/* Demostración del hero · la pantalla se ve como un portátil (estilo MacBook).
   Estructura:  .laptop > .laptop-lid > .bezel > .frame (la pantalla)  +  .laptop-base
   Todas las medidas son porcentajes del ancho del portátil, así escala igual en cualquier tamaño.
   La tarjeta de la observación (.popup) cuelga de la tapa y sobresale del portátil. */
.laptop { position: relative; transform-style: preserve-3d; }

/* Tapa: canto de aluminio fino alrededor del marco negro */
.laptop-lid {
  position: relative;
  transform-style: preserve-3d;
  padding: 0.45%;
  border-radius: 1.8% 1.8% 0.5% 0.5% / 3.4% 3.4% 1% 1%;
  background: linear-gradient(160deg, #eef0f4 0%, #c7ccd6 45%, #a9afbc 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 1px 0 rgba(15, 23, 42, 0.25),
    0 40px 60px -28px rgba(15, 23, 42, 0.5);
}

/* Marco negro de la pantalla, con la cámara arriba al centro */
.bezel {
  position: relative;
  padding: 2.3% 1.8% 2.9%;
  border-radius: 1.4% 1.4% 0.3% 0.3% / 2.7% 2.7% 0.6% 0.6%;
  background: #08090c;
}
.bezel::before {
  content: "";
  position: absolute;
  top: 0.95%;
  left: 50%;
  width: 0.75%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4f73 0%, #12161f 55%, #05060a 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
/* Reflejo suave de luz sobre el cristal (no intercepta clics) */
.bezel::after {
  content: "";
  position: absolute;
  inset: 2.3% 1.8% 2.9%;
  z-index: 20;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 28%, rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}

/* La pantalla ya no lleva borde ni halo propios: el marco negro hace de borde */
.bezel > .frame {
  border: 0;
  border-radius: 6px 6px 3px 3px;
  box-shadow: none;
  background: #0b0d12;
}

/* Base: más ancha que la tapa, con la muesca para abrirla */
.laptop-base {
  position: relative;
  height: 0;
  padding-bottom: 2.5%;
  margin: -0.15% -7% 0;
  border-radius: 0 0 4% 4% / 0 0 100% 100%;
  background: linear-gradient(180deg, #d3d7df 0%, #b7bdc9 55%, #8f96a5 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 30px 44px -20px rgba(15, 23, 42, 0.55);
}
.laptop-base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 17%;
  height: 58%;
  transform: translateX(-50%);
  border-radius: 0 0 45% 45% / 0 0 100% 100%;
  background: linear-gradient(180deg, #939bab 0%, #c6cbd5 100%);
}