/* Cajón medio abierto bajo el escritorio (coordenadas de la ilustración, 1672 × 941)
   y la sección «Próximamente», con el formato del TFG. */

/* interior que asoma: fondo oscuro, luz que sale de dentro y papeles */
.drawer { position: absolute; inset: 0; pointer-events: none; }
.drawer-in {
  position: absolute; left: 744px; top: 762px; width: 457px; height: 29px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 140% at 50% 100%, rgba(100, 255, 195, .3), transparent 70%),
    linear-gradient(#020406, #0b131b);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .8);
  clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
}
.drawer-in i { position: absolute; bottom: -2px; height: 15px; border-radius: 1px; }
.drawer-in i:nth-child(1) { left: 150px; width: 66px; background: #c9d4dc; transform: rotate(-2deg); }
.drawer-in i:nth-child(2) { left: 205px; width: 84px; height: 12px; background: #e3eaee; transform: rotate(1.5deg); }
.drawer-in i:nth-child(3) {
  left: 300px; width: 28px; height: 17px; background: #64ffc3;
  box-shadow: 0 0 10px rgba(100, 255, 195, .8); transform: rotate(-4deg);
}
/* frente del cajón, tirado unos centímetros hacia fuera */
.drawer-front {
  position: absolute; left: 733px; top: 786px; width: 480px; height: 64px; border-radius: 2px;
  background: linear-gradient(#202d40, #172234 55%, #121b29);
  box-shadow: inset 0 1px rgba(170, 200, 230, .35), inset 0 -1px rgba(0, 0, 0, .5), 0 9px 14px rgba(0, 0, 0, .65);
}
.drawer-front span {
  position: absolute; left: 0; right: 0; top: 13px; text-align: center;
  color: rgba(135, 234, 200, .7); font: 600 9px/1 var(--mono); letter-spacing: .3em;
}
.drawer-front b {
  position: absolute; left: 50%; top: 32px; width: 92px; height: 6px; margin-left: -46px; border-radius: 3px;
  background: linear-gradient(#9aa7b2, #4c5761 60%, #2a3138);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}
.hit-cajon { left: 734px; top: 756px; width: 480px; height: 96px; }

/* sección */
#futuroView .futuro-layout { max-width: 1440px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 64px); }
#futuroView .roadmap { grid-area: auto; }
.road { list-style: none; margin: 0; padding: 26px 24px 26px 58px; position: relative; display: grid; gap: 26px; }
.road::before {
  content: ''; position: absolute; left: 33px; top: 34px; bottom: 44px; width: 2px;
  background: linear-gradient(#64ffc3 0 22%, rgba(100, 255, 195, .2) 22%);
}
/* pulso que recorre la hoja de ruta */
.road::after {
  content: ''; position: absolute; left: 30px; top: 34px; width: 8px; height: 8px; border-radius: 50%;
  background: #b8ffe6; box-shadow: 0 0 12px #64ffc3; animation: road-pulse 4.5s ease-in-out infinite;
}
@keyframes road-pulse { 0% { top: 34px; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 52px); opacity: 0; } }
.road li { position: relative; display: grid; gap: 4px; padding: 14px 16px; border: 1px dashed #36525e; border-radius: 10px; background: #0b2230; }
.road li i {
  position: absolute; left: -31px; top: 18px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #64ffc3; background: #081d29;
}
.road li small { color: #79e9c6; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.road li b { color: #eef5f8; font: 600 clamp(17px, 1.7vw, 21px)/1.2 var(--sans); }
.road li span { color: #b5c8d2; font: 400 14px/1.45 var(--sans); }
.road .road-now { border-style: solid; border-color: #3f6a66; background: #0e2a33; }
.road .road-now i { background: #64ffc3; box-shadow: 0 0 10px #3fefbb; }
@media (max-width: 919px) {
  #futuroView .futuro-layout { grid-template-columns: 1fr; max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) { .road::after { animation: none; opacity: 0; } }

/* en el móvil, «Próximamente» se suma a los botones y «Contacto» cierra la lista a todo lo ancho */
.scene-plaque.futuro-mobile { display: none; }
@media (max-width: 919px) and (orientation: portrait) {
  .scene-plaque.futuro-mobile { display: flex; order: 6; }
  .scene-plaque[data-for="scope"] { grid-column: 1 / -1; order: 9; justify-content: center; }
}