/* Composición original: 390 puntos de ancho. Cada sección conserva su escala.
   Las áreas interactivas usan las mismas coordenadas que los botones del PDF. */
.pdf-replica {
  width: min(100%, 650px);
  margin-inline: auto;
}
.replica-section {
  position: relative;
  margin: 0;
  padding: 0;
  scroll-margin-top: 0;
}
.replica-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  user-select: none;
}
.replica-hero { aspect-ratio: 390 / 540; }
.replica-services { aspect-ratio: 390 / 568; }
.replica-projects { aspect-ratio: 390 / 172.5; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.replica-hit-area {
  position: absolute;
  display: block;
  left: calc(var(--x) / 390 * 100%);
  top: calc(var(--y) / var(--section-height) * 100%);
  width: calc(var(--w) / 390 * 100%);
  height: calc(var(--h) / var(--section-height) * 100%);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms ease;
}
.replica-hit-area:hover { background-color: rgb(255 255 255 / 9%); }
.replica-hit-area:active { background-color: rgb(0 0 0 / 7%); }
.replica-hit-area:focus-visible {
  position: absolute;
  outline: 3px dashed #1d1d1b;
  outline-offset: 3px;
  background-color: rgb(198 255 89 / 12%);
}
.replica-hero { --section-height: 540; }
.replica-services { --section-height: 568; }
.replica-projects { --section-height: 172.5; }
.replica-projects .replica-hit-area { border-radius: 12px; }
/* La sección del proceso conserva su diseño e interacciones anteriores. */
body { background-position: center top; }
@media (prefers-reduced-motion: reduce) {
  .replica-hit-area { transition: none; }
}