/* Tarjeta reversible (casos de éxito): frente con el dato, dorso con un video.
   Se da vuelta al pasar el mouse; en touch, al tocarla (tabindex="0" + :focus-within,
   que sigue activo mientras el foco está dentro del iframe del video).
   Una vez dada vuelta se queda así: js/flip.js le pone .is-flipped al primer
   hover/toque, y como el transform ya no cambia, no hay más giros. */
.card-flip {
	perspective: 1200px;
	outline: none;
}

.card-flip-inner {
	display: grid;
	height: 100%;
	transition: transform 0.6s ease;
	transform-style: preserve-3d;
}

.card-flip:hover .card-flip-inner,
.card-flip:focus-within .card-flip-inner,
.card-flip.is-flipped .card-flip-inner {
	transform: rotateY(180deg);
}

/* Las dos caras se apilan en la misma celda: la tarjeta toma la altura de la mayor. */
.card-flip-front,
.card-flip-back {
	grid-area: 1 / 1;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* El "levantar" del hover de .card-master pelea con el giro 3D. */
.card-flip .card-master:hover {
	transform: none;
}

.card-flip-back {
	transform: rotateY(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.card-flip-back iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
	border-radius: 12px;
}

.card-flip-hint {
	display: inline-block;
	margin-top: 15px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--g-blue);
}

@media (prefers-reduced-motion: reduce) {
	.card-flip-inner {
		transition: none;
	}
}