/* ─────────────────────────────────────────────────────────────
   TARJETA DE PRESENTACIÓN QUE GIRA (includes/tarjeta_visita.php)
   Muestra las dos caras reales del diseño impreso y las hace girar
   en 3D. Las imágenes van en assets/img/tarjeta/ (webp + jpg).
   ───────────────────────────────────────────────────────────── */
.tarjeta-wrap { max-width: 820px; margin: 0 auto; }

.tarjeta-visita {
    width: 100%;
    aspect-ratio: 2400 / 1371;   /* proporción exacta del diseño */
    perspective: 1800px;
    cursor: pointer;
}
.tarjeta-visita:focus-visible { outline: 2px solid var(--gold, #C9A84C); outline-offset: 6px; border-radius: 16px; }

.tv-inner {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.1s cubic-bezier(.38,.08,.2,1);
}
.tv-cara {
    position: absolute; inset: 0;
    border-radius: 14px; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.tv-cara img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tv-reverso { transform: rotateY(180deg); }

/* ── Giro ── */
.tarjeta-visita.girada .tv-inner { transform: rotateY(180deg); }
.tarjeta-visita:hover .tv-inner { transform: rotateY(180deg); }
.tarjeta-visita.girada:hover .tv-inner { transform: rotateY(360deg); }

.tv-acciones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.3rem; }

/* En pantalla táctil no hay "pasar el mouse": se gira tocando */
@media (hover: none) {
    .tarjeta-visita:hover .tv-inner { transform: none; }
    .tarjeta-visita.girada:hover .tv-inner,
    .tarjeta-visita.girada .tv-inner { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tv-inner { transition: none; }
    .tarjeta-visita:hover .tv-inner { transform: none; }
}