/* Composiciones gráficas: foto espacial + objeto 3D real.
   Base común; cada boceto define su encuadre. */
.hero {
  display: flex;
  align-items: center;
  padding: var(--header-h) var(--gutter) 40px;
}
.visual { position: absolute; inset: 0; z-index: 1; overflow: hidden; }

/* Velo para mantener limpia la zona del texto (regla 06 del manual) */
.veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cosmos) 0%, rgba(9, 13, 29, 0.88) 30%, rgba(9, 13, 29, 0) 58%);
}

.model {
  position: absolute;
  z-index: 3;
  opacity: 0;
  transition: opacity 1.6s ease, transform 3.6s cubic-bezier(0.15, 0.75, 0.15, 1);
}
.is-on .model { opacity: 1; transform: none; }
.model-float { width: 100%; height: 100%; animation: float 9s ease-in-out infinite; }
.model model-viewer {
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--nebula);
  --progress-bar-height: 0px;
}

.readout {
  position: absolute;
  z-index: 4;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gray);
  border-left: 1px solid var(--cyan);
  padding-left: 12px;
  opacity: 0;
  transition: opacity 1s 2.4s;
  pointer-events: none;
}
.readout b { display: block; color: var(--cyan); font-weight: 500; }
.is-on .readout { opacity: 1; }

.hint {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  top: calc(var(--header-h) + 24px);
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .hero { display: block; padding: 0 var(--gutter) 48px; }
  .visual { position: relative; inset: auto; height: 58svh; margin: 0 calc(-1 * var(--gutter)); }
  .veil { background: linear-gradient(to bottom, rgba(9, 13, 29, 0) 70%, var(--cosmos)); }
  .hint { display: none; }
}