/* FLIP CARD - Componente reutilizable de tarjetas con giro horizontal 3D para Elementor Atomic, con caras independientes, imágenes de fondo configurables desde Elementor y soporte para interacción mediante hover y dispositivos táctiles. */

/* --------------- CONTENEDOR PRINCIPAL */

.flip-card {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex: 1 1 100%;
	align-self: stretch;
	perspective: 1200px;
	-webkit-perspective: 1200px;
	overflow: visible;
}

/* --------------- CONTENEDOR INTERIOR */
.flip-card-inner {
	position: relative;
	width: 100%;
	min-width: 0;
	height: 100%;
	min-height: inherit;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------- CARAS */
.flip-card-inner > .flip-card-front,
.flip-card-inner > .flip-card-back {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* --------------- CARA FRONTAL */
.flip-card-front {
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

/* --------------- CARA TRASERA */
.flip-card-back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

/* --------------- HOVER DESKTOP */
@media (hover: hover) and (pointer: fine) {
	.flip-card:hover .flip-card-inner {
		transform: rotateY(180deg);
	}
}

/* --------------- ESTADO ACTIVO */
.flip-card.is-flipped .flip-card-inner {
	transform: rotateY(180deg);
}

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