/*
 * AldeOn — Tratamiento especial del carnet digital con QR (fase
 * "carnet", 2026-09-07). Solo se usa en index.html, solo en esta
 * tarjeta concreta.
 *
 * Actualizado 2026-09-13: la tarjeta ya no es un móvil 2D con flip
 * fijo — son las dos imágenes reales de anverso/reverso del carnet
 * (creadas por el usuario), montadas como un objeto 3D de verdad
 * (transform-style: preserve-3d) que se gira libremente arrastrando
 * con el ratón/dedo (ver carnet.js), no con un salto de 0° a 180° al
 * click. Ratio 3:2 (más cercano a un carnet real) y esquinas más
 * redondeadas (34px) tras la segunda pasada de imágenes del usuario,
 * mismo día.
 */

.carnet-showcase-visual {
  flex-direction: column;
  align-items: center;
}

.carnet-3d-perspective {
  perspective: 1800px;
  transition: transform 0.35s ease;
}

.carnet-3d-perspective:hover,
.carnet-3d-perspective:has(.carnet-card:focus-visible) {
  transform: translateY(-6px);
}

.carnet-card {
  position: relative;
  width: min(380px, 78vw);
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  cursor: grab;
  touch-action: none;
  transform-style: preserve-3d;
  will-change: transform;
  outline-offset: 10px;
}

.carnet-card:active {
  cursor: grabbing;
}

/* Sin transición mientras se arrastra (el dedo/ratón manda en cada
   fotograma); en cuanto se suelta, vuelve la transición suave para la
   inercia final y para el giro por teclado. */
.carnet-card:not(.is-dragging) {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.carnet-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 60px -20px rgba(46, 42, 34, 0.45), 0 10px 24px -8px rgba(46, 42, 34, 0.25);
  /* Borde gris liso — petición del usuario, 2026-09-13 (tras probar
     un degradado dorado y luego uno de aluminio cepillado, en ambos
     casos demasiado). Solo gris, sin degradado ni textura. */
  border: 5px solid #9a9fa6;
}

.carnet-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.carnet-face-back {
  transform: rotateY(180deg);
}

.carnet-shine {
  position: absolute;
  top: -25%;
  left: -60%;
  width: 55%;
  height: 150%;
  background: linear-gradient(
    75deg,
    transparent,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.5) 55%,
    transparent
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
}

.carnet-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}