/* ---------------------------------------------------------
   Datio — asistente-mascota, vive dentro del último bloque del
   grid (componente aislado). Colapsado es solo un preview chico
   (ver .datio-bloque-mascota__preview en bloques.css); al abrir el
   bloque a pantalla completa, esto ocupa todo ese espacio.

   Los videos (1280x720) traen barras negras propias del archivo a los
   costados del personaje. En una ventana ~16:9, object-fit:cover casi no
   recorta nada — se termina viendo el cuadro crudo, con Datio Pet ocupando
   toda la altura de la pantalla y esas barras negras de fondo. La solución
   es la misma que se usó para el logo: en vez de que el video llene todo
   el bloque, el __bubble es un marco cuadrado de tamaño acotado — cuadrado
   porque el personaje en sí es casi 1:1 dentro del cuadro 16:9, así que
   cover sobre un marco cuadrado recorta justo las barras. El resto del
   bloque queda con el color de marca (el fondo "negro" era el video
   tapando todo, no un color mal puesto). */

.datio-mascota {
	--datio-mascota-object-position: center center;
	/* scaleY, no scale parejo — el crop horizontal ya está lo más ajustado
	   posible (recorta justo las barras negras del video); si "alejamos"
	   en las dos direcciones por igual, esas barras vuelven a asomar por
	   los costados. Solo hay que darle aire vertical (la cabeza/patas
	   quedaban pegadas al borde) — ver la misma solución en bloques.css. */
	--datio-mascota-scale: 0.9;
	--datio-mascota-glow: rgba(245, 166, 35, 0.55);

	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* Mascota arriba a la izquierda, flotando sola sobre el fondo de marca —
   ya no comparte fila con el chat (antes era flex-column con el chat
   debajo, versión "WhatsApp a pantalla completa"; ahora el chat es un
   panel angosto aparte, ver .datio-mascota__panel). */
.datio-mascota__topbar {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px 0 0 24px;
}

/* Panel de chat "formato celular": angosto, anclado a la derecha, ocupa
   todo el alto (arriba a la derecha hasta abajo) — no todo el ancho de la
   pantalla como en la versión anterior. La mascota queda de fondo/marca a
   la izquierda, el chat es una columna aparte a la derecha. */
.datio-mascota__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 92vw);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 24px;
}

/* Maqueta de teléfono de verdad — marco oscuro + notch, no un panel
   plano. El chat pasa a vivir "adentro de la pantalla" del celular
   (pedido explícito). Proporción fija (9:19.5, la de un celular actual)
   en vez de estirarse a todo el alto disponible. */
.datio-mascota__telefono {
	position: relative;
	width: min(100%, 360px);
	aspect-ratio: 9 / 19.5;
	max-height: 100%;
	box-sizing: border-box;
	padding: 14px 12px;
	border-radius: 46px;
	background: #0b0b0f;
	box-shadow:
		0 30px 70px rgba(0, 0, 0, 0.5),
		inset 0 0 0 2px rgba(255, 255, 255, 0.08);
	display: flex;
}

.datio-mascota__notch {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	width: 90px;
	height: 22px;
	border-radius: 999px;
	background: #0b0b0f;
	z-index: 2;
}

.datio-mascota__pantalla {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: 32px;
	overflow: hidden;
}

.datio-mascota__chat {
	flex: 1;
	min-height: 0; /* si no, el hijo con overflow-y:auto no scrollea: crece y empuja */
	overflow-y: auto;
	box-sizing: border-box;
	/* Deja lugar arriba al notch, no al × de cerrar (ese ahora queda fuera
	   del cuerpo del teléfono, ver .datio-mascota__panel). */
	padding-top: 40px;
	/* Papel tapiz clásico de WhatsApp (versión clara) — a propósito rompe
	   con el violeta oscuro del resto del sitio, ver dialogo.css. */
	background: #e5ddd5;
}

/* Barra de "escribir" — fuera del área con scroll, siempre visible abajo
   del todo, como la barra de composición real de WhatsApp. Estilos de
   color/forma en dialogo.css (junto con el resto del chat). */
.datio-pet-chat {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	box-sizing: border-box;
	background: #f0f2f5;
}

/* Pantallas angostas: no hay lugar para mascota + panel lado a lado (el
   propio viewport ya es "formato celular") — vuelve a apilarse, mascota
   arriba achicada, chat abajo ocupando el resto. El teléfono se achica
   con el panel (max-height:100% ya lo contempla). */
@media (max-width: 680px) {
	.datio-mascota {
		display: flex;
		flex-direction: column;
	}

	.datio-mascota__topbar {
		position: static;
		flex-shrink: 0;
		padding: 16px 60px 8px 16px;
	}

	.datio-mascota__panel {
		position: static;
		flex: 1;
		min-height: 0;
		width: 100%;
		padding: 12px;
	}
}

.datio-mascota__bubble {
	display: block;
	position: relative;
	width: min(52vh, 62vw, 460px);
	aspect-ratio: 1 / 1;
	padding: 0;
	border: none;
	border-radius: 28px;
	overflow: hidden;
	background: var(--datio-brand-teal);
	cursor: pointer;
	box-shadow: inset 0 0 0 0 var(--datio-mascota-glow), 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Los dos <video> quedan apilados uno sobre el otro; solo se ve el que
   tiene .is-active. El cambio de opacity es instantáneo (sin transition)
   a propósito: es un corte de plano, no un crossfade. */
.datio-mascota__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--datio-mascota-object-position);
	transform: scaleY(var(--datio-mascota-scale));
	pointer-events: none;
	opacity: 0;
}

.datio-mascota__video.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-mascota__bubble {
		animation: datio-mascota-pulse 2.8s ease-in-out infinite;
	}
}

/* Antes esto tenía un extremo con color pero sin spread (invisible igual)
   y el otro con spread pero alpha:0 (también invisible) — la animación
   nunca llegaba a un estado realmente visible, solo un fantasma difuso a
   mitad de camino entre los dos keyframes. Ahora los extremos son
   coherentes: invisible de verdad (spread 0 y alpha 0) en las puntas,
   visible de verdad (spread + alpha reales) en el medio. */
@keyframes datio-mascota-pulse {
	0%, 100% {
		box-shadow: inset 0 0 0 0 rgba(245, 166, 35, 0);
	}
	50% {
		box-shadow: inset 0 0 0 10px var(--datio-mascota-glow);
	}
}