/* Estilos comunes de las tres páginas 3D embebidas en iframes.
   Fondo transparente: el color lo pone la landing por debajo. */

html,
body {
  margin: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
  font: 500 12px/1 'Montserrat', -apple-system, sans-serif;
  color: #9aa0a6;
}

#c {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

#c:active {
  cursor: grabbing;
}

/* "tócala para girarla" — se desvanece al primer toque sobre el canvas. */
#hint {
  position: absolute;
  left: 0;
  right: 14px;
  bottom: 2px;
  display: flex;
  justify-content: flex-end;
  transition: opacity 0.4s;
  pointer-events: none;
}

#hint span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 7px/1 'Montserrat', -apple-system, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(154 160 166 / 62%);
}

#hint span::before,
#hint span::after {
  content: '';
  width: 9px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(154 160 166 / 35%));
}

#hint span::after {
  background: linear-gradient(90deg, rgb(154 160 166 / 35%), transparent);
}

/* Sin WebGL: la misma cara de la tarjeta, plana y quieta. */
.card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.card-fallback > canvas {
  height: 100%;
  width: auto;
  max-width: 100%;
  /* Radio de esquina real de la tarjeta: 3.3mm sobre 54 × 90.2mm. */
  border-radius: 6.1% / 3.66%;
}

@media (prefers-reduced-motion: reduce) {
  #hint {
    transition: none;
  }
}