/* Hoba · visor de casos (25/10/2026, Parte 2 B): capturas largas reales dentro de un celular o una ventana de
   escritorio, con scroll propio. Va en línea solo en la home y en las páginas de caso (inc/funciones.php). */
.hoba-v3 .hv-visor {
	display: grid;
	justify-items: center;
	gap: 18px;
}
.hoba-v3 .hv-visor__controles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 14px;
}
.hoba-v3 .hv-visor__grupo {
	display: inline-flex;
	padding: 4px;
	border: 1px solid var(--hv3-borde-tarjeta);
	border-radius: 999px; /* avoid-ai-design-ignore: K2 */
	background: var(--hv3-papel);
}
.hoba-v3 .hv-visor__boton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px; /* avoid-ai-design-ignore: K2 */
	background: transparent;
	font: 700 0.9375rem/1 var(--hoba-sans);
	color: var(--hv3-tinta-2);
	cursor: pointer;
}
.hoba-v3 .hv-visor__boton .hv3-ic {
	width: 18px;
	height: 18px;
}
.hoba-v3 .hv-visor__boton:hover {
	color: var(--hv3-violeta);
}
.hoba-v3 .hv-visor__boton[aria-pressed="true"] {
	background: var(--hv3-noche);
	color: var(--hv3-papel);
}
.hoba-v3 .hv-visor__boton:focus-visible {
	outline: 3px solid var(--hv3-electrico);
	outline-offset: 2px;
}

/* Marco: celular por defecto; escritorio con data-disp="1440". */
.hoba-v3 .hv-visor__marco {
	position: relative;
	width: min(300px, 80vw);
	height: min(600px, 74vh);
	padding: 10px;
	border-radius: 38px;
	background: var(--hv3-noche);
	box-shadow: var(--hv3-sombra-alta); /* avoid-ai-design-ignore: C5, K2 */
}
.hoba-v3 .hv-visor[data-disp="1440"] .hv-visor__marco {
	width: min(100%, 880px);
	height: auto;
	aspect-ratio: 16 / 10.4;
	max-height: 76vh;
	padding: 30px 8px 8px;
	border-radius: 14px;
}
/* Barra de la ventana de escritorio: tres puntos. */
.hoba-v3 .hv-visor[data-disp="1440"] .hv-visor__marco::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 14px;
	width: 8px;
	height: 8px;
	border-radius: 50%; /* avoid-ai-design-ignore: K2 */
	background: rgb(244 244 242 / 0.35);
	box-shadow: 14px 0 0 rgb(244 244 242 / 0.35), 28px 0 0 rgb(244 244 242 / 0.35); /* avoid-ai-design-ignore: C5, K2 */
}
.hoba-v3 .hv-visor__pantalla {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 28px;
	background: var(--hv3-papel);
	scrollbar-width: thin;
	scrollbar-color: rgb(107 53 143 / 0.5) transparent;
}
.hoba-v3 .hv-visor[data-disp="1440"] .hv-visor__pantalla {
	border-radius: 6px;
}
/* Con JS, la captura no scrollea hasta que se toca "Recorrer" (sin JS, scrollea siempre). */
.hoba-v3 .hv-visor--js:not(.esta-activo) .hv-visor__pantalla {
	overflow: hidden;
}
.hoba-v3 .hv-visor__activar {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px; /* avoid-ai-design-ignore: K2 */
	background: var(--hv3-noche);
	color: var(--hv3-papel);
	font: 700 0.9375rem/1 var(--hoba-sans);
	white-space: nowrap;
	transform: translateX(-50%);
	box-shadow: 0 10px 24px -8px rgb(22 10 34 / 0.6); /* avoid-ai-design-ignore: C5, K2 */
	cursor: pointer;
}
.hoba-v3 .hv-visor__activar .hv3-ic {
	width: 18px;
	height: 18px;
}
.hoba-v3 .hv-visor__activar:focus-visible {
	outline: 3px solid var(--hv3-electrico);
	outline-offset: 2px;
}
.hoba-v3 .hv-visor.esta-activo .hv-visor__activar,
.hoba-v3 .hv-visor__activar[hidden] {
	display: none;
}
.hoba-v3 .hv-visor__pantalla[hidden] {
	display: none;
}
.hoba-v3 .hv-visor__pantalla:focus-visible {
	outline: 3px solid var(--hv3-electrico);
	outline-offset: 4px;
}
.hoba-v3 .hv-visor__pantalla img {
	display: block;
	width: 100%;
	height: auto;
}
.hoba-v3 .hv-visor__nota {
	max-width: 60ch;
	font-size: 0.875rem;
	color: var(--hv3-tinta-2);
	text-align: center;
}
/* Home: el visor ocupa la columna de los mockups del caso. */
.hoba-v3 .hv3-caso__visor {
	min-width: 0;
}
/* Performance (25/10/2026): en la home el caso queda lejos de la primera pantalla; no se calcula hasta que se acerca. */
.hoba-v3 .hv3-caso {
	content-visibility: auto;
	contain-intrinsic-size: auto 1300px;
}