/* ---------------------------------------------------------
   Portfolio — celular con versiones mobile de sitios reales pasando
   en la pantalla; una mano hace swipe y cambia de sitio. Reemplaza el
   marquito de browser del preview colapsado. Fotos del celular y la
   mano en assets/img/celular/ (fondo transparente). Animación en
   assets/js/celular-slider.js; acá solo forma y transiciones.
   --------------------------------------------------------- */

.datio-movil {
	position: relative;
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44%;
	max-width: 230px;
	pointer-events: none;
	will-change: transform;
}

/* Foto del celular: la altura manda, el ancho sale de la proporción. */
.datio-movil__equipo {
	position: relative;
	display: block;
	height: 100%;
	max-height: 330px;
	aspect-ratio: 266 / 606;
}

.datio-movil__foto {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.45));
}

/* Lienzo de pantalla 450×975 (9:19.5, la proporción de las capturas),
   deformado por pantalla-perspectiva.js para calzar en la foto. Oculto
   hasta que el JS lo ubica. Las esquinas redondeadas acompañan las de
   la pantalla del celular. */
.datio-movil__pantalla {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 450px;
	height: 975px;
	overflow: hidden;
	border-radius: 58px;
	background: #0b0b0f;
	transform-origin: 0 0;
	visibility: hidden;
}

.datio-movil__pantalla.is-lista {
	visibility: visible;
}

/* Capturas apiladas: la activa al centro, la próxima espera a la
   derecha, la que se va sale por la izquierda (como un swipe real). */
.datio-movil__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transform: translateX(100%);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.datio-movil__slide.is-activo {
	transform: translateX(0);
}

.datio-movil__slide.is-saliendo {
	transform: translateX(-100%);
}

.datio-movil__slide.sin-transicion {
	transition: none;
}

/* Mano: foto con el índice apuntando arriba a la izquierda; la punta del
   dedo está en el 1% / 14% de la imagen, y ese punto es el que se ubica
   sobre la pantalla (left/top) — el brazo sale hacia la derecha y la
   tarjeta lo recorta en su borde, como si entrara desde afuera.
   Espera fuera de cuadro; .is-apoyada la apoya a la derecha de la
   pantalla y .is-arrastrando arrastra el dedo hacia la izquierda. */
.datio-movil__mano {
	position: absolute;
	z-index: 5;
	left: 120%;
	top: 62%;
	width: 210%;
	max-width: none;
	height: auto;
	opacity: 0;
	transform: translate(-1%, -14%);
	filter: drop-shadow(-6px 12px 14px rgba(0, 0, 0, 0.35));
	transition: left 0.45s cubic-bezier(0.3, 0.7, 0.4, 1), top 0.45s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.3s ease;
}

.datio-movil__mano.is-apoyada {
	opacity: 1;
	left: 64%;
	top: 52%;
}

.datio-movil__mano.is-arrastrando {
	left: 32%;
	top: 50%;
	transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1), top 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Portfolio ya no lleva ícono: el texto no necesita el lugar que le
   reservaba arriba. Solo escritorio; el celular se rehace aparte. */
@media (min-width: 861px) {
	.datio-bloque-portfolio__texto {
		padding-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.datio-movil__slide {
		transition: none;
	}

	.datio-movil__mano {
		display: none;
	}
}